Des pixels et du code #74

Des pixels et du code #74

This article is also available in English: us us

Comme chaque semaine,  je vous propose un condensé de mes lectures et ma veille Web Design et graphisme, expérience utilisateurs, HTML, CSS, outils, ressources et inspiration. Cette semaine c’est encore une fois l’expérience utilisateur qui sera mise en avant avec 4 articles sur le sujet : communiquer les fonctions à l’utilisateur, différence entre UX et UI ou encore utilisation des listes de sélection. La section des ressources et outils est également très fournie cette semaine : deux plugins Photoshop dont la sortie de Subtle Patterns, de jolies polices d’écritures mais également des outils pour présenter une maquette dans un mobile, ou des livrables à un client. Bonne lecture

Les articles à lire

#UX

Shades of Discoverability une analyse de différents moyens de communiquer à l’utilisateur la fonction d’un élément d’interface, de la règle explicite à la découverte à travers l’utilisation

How To Use Select Boxes (Pulldown Menus) des exemples d’utilisation incorrecte de listes de sélection et propositions d’alternatives

Lean Product Development: How To Validate A Feature Idea In 5 Minutes , ou comment tester en 5minutes (avec mixpanel.com ) si les utilisateurs souhaitent avoir la fonctionnalité en question. La méthodologie de test n’est pas forcément des plus rigoureuse, mais elle permet de se faire une première idée.

 #Clients

Client Relationships and the Multi-Device Web propose quelques pistes pour expliquer à un client la réalité du web et la diversité des supports et appareils qui n’est pas toujours facile à appréhender pour eux

#Conférence

Giving your first talk, quelques petits conseils simples mais qu’on noublie parfois pour sa première conférence

#AdSense

Adsense Responsive : plusieurs méthodes un petit article sur les nouvelles possibilités d’implémentation d’Adsense pour des sites responsive

#Conseil

Branding too strong? Design in greyscale, ou comment réaliser un design lorsqu’il y a trop de couleurs dans le logo qui viennent court-circuiter notre vision globale

#Design #Code

Le débat “les designers devraient-ils savoir coder” reprend de plus belle avec trois articles tout neufs.

#Windows #Design

Think Different: Designed with Windows  Créer un design et code sur Windows c’est certes travailler dans un environnement pas forcément très amical, mais c’est aussi travailler sur le type d’environnement que beaucoup d’utilisateur finaux vont eux aussi avoir

#Typographie

Typography in ten minutes, en 10 minutes (même pas),5 règles de typographie à respecter + Summary of key rules , 26 règles supplémentaires (attention certaines peuvent changer d’une langue à une autre)

Inspiration

#Stop Motion

Latte Art une vidéo instagram toute mignonne en stop motion (idée sympa) sur le thème du café

#BD #Pixelart

Le long voyage une superbe illustration à faire défiler, tout en pixelart par Bouletcorp pleine de clins d’oeil geek à chaque coin de pixel

#Identité

Hardcore bar une identité graphique très sympa pour un bar

#Typographie

typehunting.com un tumblr avec de jolies photos de beau lettrages

#Logo

24 Elegant and Colorful Logos 24 logos très colorés dont vous pourrez vous inspirer pour vos compositions

#Illustration

Mi Factory, fabrique du designer  une superbe illustration de Philippe Mignotte avec un niveau de détail hallucinant

Les tutoriels de la semaine

#Mobilité #Gestes

Gesture Design with Javascript, une présentation de quelques possibilités de Hammer.js pour ajouter des contrôles au geste (swipe, pinch, etc.) à vos applications web mobiles

Des ressources gratuites

#Typographie

Look Up, une police d’écriture gratuite dont les lettres sont écrites avec des petites flèches

Kraftstoff, une police gratuite avec un côté vintage

#Branding

Free Stationary Mockup PSD un PSD gratuit pour vos présentations de travail de design d’identité graphique de marque

#Theme #HTML #CSS

Type & Grids: Free Responsive HTML5 Template, un thème responsive HTML/CSS gratuit proposé sur SmashingMagazine, avec une demo  et différentes options de mélange de polices, couleurs et formes

Les outils  et plugins pour vous faciliter la vie

#jQuery #Navigation

SimpleSlideView un plugin pour créer des panneaux de navigation entre éléments de liste qui glissent de gauche à droite comme les listes natives dans iOS

#Mobile

mockuphone.com un outil en ligne qui vous permet de sélectionner un appareil mobile, y ajouter votre maquette par drag & drop et télécharger l’aperçu final de votre travail dans le mobile sélectionné

#Densité Pixel Density Converter un outil pour calculer directement la taille des éléments de design dans 4 résolutions mobiles android / iOS

#Emmet #Livecoding

Emmet LiveStyle un plugin Sublime Text pour de l’édition de code et rechargement en temps réel bi-directionel : ce qui est écrit dans Sublime est rafraîchit sur la page, ce qui est écrit dans le dev tool de Chrome est injecté dans Sublime.

#Présentation

Delivery, un nouvel outil en ligne pour présenter son travail à un client de manière très simple et épurée

#Photoshop

renamy.com un plugin Photoshop qui devrait vous permettre de renommer plus facilement les calques et surtout de renommer en une seule fois plusieurs calques sélectionnés

Subtle Patterns, le plugin pour avoir directement les patterns proposées par le site subtlepatterns.com dans Photoshop est enfin disponible

Les démos sympas et impressionnantes

#CSS

Formulaire de contact un formulaire de contact qui se transforme en avion en papier qui vole une fois que l’utilisateur a cliqué sur “envoyer”

#CSS #liens

Creative Link Effects, une série d’animations et transitions au survol de liens réalisables en

#CSS

Forest Encounter une demo sur codepen avec du filtre CSS blur <3

#Flash  #Music

Seaquence, une expérience musicale basée sur des petites créatures moléculaires qui se créent à l’aide de sons, difficile à expliquer le mieux reste de tester ;) (attention la page a le son activé)

Et s’il devait n’en rester qu’un ?

UX is not UI, la confusion entre UI (user interface) et UX (user expérience) est fréquente, l’auteur explique ici en quoi le designer d’interface n’est qu’une toute petite partie de l’expérience utilisateur.  “UX is the intangible design of a strategy that brings us to a solution.”

Besoin d'un design de site, d'interface ou d'application mobile ? De conseils en ergonomie ou en expérience utilisateur ? Envie de travailler ensemble ? N'hésitez pas à consulter mes réalisations et à me contacter directement.

6 réflexions au sujet de « Des pixels et du code #74 »

  1. Hello,

    Je signale que Bootstrap V3 est sorti.

    Flat-UI entre autre.
    Mobile first enfin rattrapage sur Foundation à propos de la grille.
    Pas de nouveaux composants à première vue à moins que je me trompe.

    La syntaxe est toujours dans l’erreur avec ses “btn btn-success btn-large” alors que “btn success large” est nettement plus logique à ecrire.
    Pire au niveau de la grille : “col-” suivit d’un nombre entre 1-12 c’est pour le tout petit device, alors que “col-sm-” abreviation de small lui signifie moyen… puis large : “col-lg-”

    Non vraiment très moyenne cette maj, j’espérais que Twitter mette un peu de pression sur Zurb Foundation mais là ils ont raté leur coup.

  2. J’ai vu la sortie de Bootstrap3 effectivement mais je n’ai pas creusé plus loin. Du coup je préfère ne mentionner que les liens que j’ai consulté et lus, pour garder une certaines qualités.
    Merci pour ton retour, hélas ça tend à confirmer ce que je pense de plus en plus : c’est devenu une usine à gaz :(

  3. Oui ce twitter bootstrap prends certe les bonnes directions : mobile first, design allégé.
    Mais il garde ses défauts de syntaxe et finalement n’apporte pas grand chose plus.
    Peut être est-il plus léger après optimisation du code.

    A voir d’ici deux mois son évolution.

  4. Merci beaucoup Stéphanie pour ce travail, je suis souvent ton blog, je le trouve très intéressant.
    Bonne continuation.
    Saad

  5. Oui, l’expérience utilisateur est encore bien mal comprise alors que son essence même est de se mettre soi-même à la place de l’internaute. Bien des débutants dans le e-commerce devrait s’y pencher. Très sympas les effets sur les liens … à utiliser avec parcimonie, justement ! :)