Des pixels et du code #55

Stéphanie Walter

Senior UX Designer - Mobile Expert

Senior UX Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Product Design (GDE)

Follow on Twitter

Ce contenu a été rédigé il y a 6 années. Il se peut qu'il ne soit plus à jour.

Une semaine de liens qui devraient beaucoup plaire aux graphistes et webdesigner puisque beaucoup de tutoriels et d’outils en rapport avec Illustrator, la typographie ainsi que des réflexions sur le métier de designer en général et l’ergonomie. Des tutotoriels CSS et des démonstrations impressionnantes ne laisseront pas nos amis intégrateurs en reste et toujours autant de ressources utiles sur le responsive webdesign, difficile de passer à coté de l’optimisation des sites pour mobile aujourd’hui. Bonne lecture et fin de semaine à tous :)

Les tutoriels de la semaine

#CSS

Increasing the Clickable Area of Inline Links une petite astuce CSS à base de padding et position relative pour agrandir les zones cliquables des liens pour le “touch”

#Icon

Combining icon font glyphs to create complex mega-icons.  l’idée intéressante de combiner plusieurs icônes d’une font-icon pour ajouter de la couleur, mais c’est peut-être pousser un peu loin l’idée là sachant que background-clip: text; n’est que peu supporté, des sprites SVG seraient peut-être plus efficaces ici.

#Illustrator

How-to-make-a-repeatable-pattern-in-illustrator un petit tutoriel bien pratique pour réaliser facilement des patterns de fond qui vont se répéter sur Illustrator

Des ressources utiles

#Veille

staying current, une liste de podcasts, blogs, sites et compte twitter à suivre pour faire de la veille

#Flat

Fltdsgn.com une galerie qui rassemble des design “flat” pour votre inspiration

flat UI, un kit d’UI qui se grèffe sur Foundation de Zurb.

#Typographie et #Mobile

Tinytype un tableau comparatif des polices disponibles sur chaque plateforme mobile

#Typographie

Fontseek.info un ensemble de belles polices d’écritures qui ne sont pas proposées dans les fonderies classiques avec à chaque fois le lien pour les télécharger ou les acheter

Les outils  et plugins pour vous faciliter la vie

#jQuery

Jresponsive.is-great.net un petit plugin jQuery qui ressemble à mansonry et permet de ré-ordonner des blocs au redimensionnement de la page et de les placer de manière “optimale” en fonction de la place disponible

#Illustrator

Drawscript est un plugin pour Illustrator qui permet de générer du script à partir de formes vectorielles

Les articles à lire

#Mobile #UX

5 Ways to Handle Long Drop-Downs In Mobile Forms une petite étude de cas avec des exemples réels de comment certains sites gèrent les longues listes déroulantes (+15 entrées dans la liste) sur mobile

UX Techniques Bank une liste de termes et techniques utilisées en ergonomie et design d’expérience utilisateur avec leurs définitions (en anglais) et quand elles sont utilisées

#Ergonomie

Put the logo below the fold: Breaking design rules for profit. placer le logo sous la ligne de flottaison, utiliser un bouton vert certes esthétiquement horrible mais qui attire l’attention, l’auteur explique comment en allant à l’encontre des “règles” il essaie de monter le taux de conversion de la page. J’aime beaucoup la phrase “I don’t care if Cascade wins design awards. It doesn’t matter if other designers like the page. It’s not for them. “

Two-Column Mobile Layouts Outperform Three-Columns by 29% une petite étude qui montre qu’un design en colonnes est plus efficace que 3 colonnes (pour des listes de participants ici)

#Responsive #E-commerce

Web responsive & E-Commerce : un seul site pour tous les devices ? une petite présentation slideshare si vous vous intéressez à l’e-commerce et au responsive webdesign

#Webdesign

Don’t be your own client (if you can afford it) le retour d’expérience sur un designer de logo qui a engagé un autre designer pour faire son identité et ne regrette pas une seule seconde ce choix

Nobody is an Expert – “Nobody is an expert. There are some people that just shout a bit louder than other people.” – “Personne n’est un expert, il y a simplement des gens qui parlent plus fort que d’autres.”

Inspiration

#Cafééé

Coffitivity.com des études ont montré que les bruits ambiants des cafés aident à la créativité, ce petit service propose un bruit de fond de café à mettre en plus de votre musique. A tester :)

Les démos sympas et impressionnantes

#CSS

Andrevv.com scrollez la page, et faites courir la panthère, juste en CSS, impressionnant :)

#Canvas

Flat-surface-shader une petite demo de formes géométriques qui bougent en canvas ou en SVG, à vous de choisir. Vous pouvez aussi jouer avec le rendu et les couleurs.

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

#Responsive Webdesign

Optimisation mobile et responsive webdesign – mise à jour 2013 un peut d’auto-promotion cette semaine pour finir avec la mise à jour de mon cours sur l’optimisation mobile et le responsive webdesign

Vous souhaitez des conseils en ergonomie ou en expérience utilisateur ? Un design de site, d’interface ou d’application mobile ? Envie de travailler ensemble ou de m’inviter à donner une conférence ? Consultez mes réalisations ou contactez moi directement.

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

  1. Comme toujours un ensemble de petites perles.
    J’adore l’astuces des icônes complexes, il va falloir que je regarde ça de plus près.
    Aussi pour le background infini avec illustrator que ça à l’aire simple lol.
    Ainsi que l’augmentation de la zone de click.

    Par contre faut que tu me donne ton astuce pour avoir trouvé une ressources sur foundation ;)
    Je suis dessus depuis des mois et je ne tombe jamais sur des ressources exploitant ce framework.
    En tout cas pas mal ce petit flat ui version foundation et ayant fouillé le SASS de foundation leur travail n’est pas si compliqué que ça. Je conseil à tous d’oublier le bootstrap et foundation de base et de les personnaliser avec LESS ou SASS. Il n’y a rien de compliqué un peu de rigueur et le résultat est formidable.

    Par contre tu pourrais m’éclairer sur la définition de Flat UI ? car à part des couleurs plus pastel, des éléments plus arrondis et des bordures plus épaisses je remarque pas grand chose par rapport au foundation de base. Et aussi des effets sur des hover qui n’existe pas dans la version de base comme sur le Sub Navr.

    D’ailleurs je conseil même aux gens de faire de nouveaux composants qui héritent du framework et en personnalisant le framework le résultat est fabuleux.

    Exemple : faire un composant header avec une taille, couleur spécifique etc en m’inspirant du header ici : zurb.com/soapbox.
    En SASS celà m’a pris 5 minutes puis 5 minutes de plus d’ajustement car je souhaitais permettre l’ajout de la classe fixed sur le header ainsi qu’une image de fond sous la transparence du header.
    J’ai aussi créé un composant tab-nav pour obtenir la même navigation que sur l’exemple qui hérite du composant sub-nav de de foundation mais ayant des particularités comme les effets sur le hover que l’on retrouve ici sur ce Flat UI. Moins d’1 minutes et le résultat est parfait.

    Par contre j’ai fouillé le SASS de ce Flat UI, je le trouve personnellement très bien écrit je pense m’en inspirer pour mes futurs personnalisations.
    Malgré la quantité dingue de boutons qu’ils ont ajouté, leur SASS est vraiment très lisible et donne un CSS très propre.

    • J’ajoute aussi qu’il est très facile de convertir Jquery UI en SASS et donc de refaire le theme jquery UI en SASS. Vraiment très interressant.

  2. Je préfère largement le travail de design fait sur le FLAT UI original, celui pour Foundation comporte encore trop de dégradés et bordures.

    Pour répondre à Mantis : en effet, il est beaucoup plus jouissif d’écrire totalement le CSS d’un site en SCSS, mais il y a une variable dont aucun d’entre nous n’échappe et qui est celle du temps.

    Maintenant rien ne nous empêcherais de réunir quelques volontaires et commencer à coder une sorte de framework SASS minimaliste le tout en Flat.

  3. Bonjour, je cherche des avis.

    je cherche à créer un logo, j’ai vu que ça a un cout et ma question est la suivante :

    j’ai découvert ce freelance hier [lien modéré], le coté freelance me donne envie pour le prix entre autres mais est ce que je risque de perdre en « securité » ou en qualité ? c’est débile comme question mais j’aimerais eviter de dépenser pour rien.

    Est ce que je peux faire appel a un freelance sans trop de craintes ou mieux vaut que je fasse appel a une agence spécialisé ? et si c’est le cas le mieux c’est de faire dasn le local ou le national ?

    Beaucoup de question je sais :p mais merci d’avance pour les réponses :)

    • Bonjour Samantha,

      Même si je peux comprendre vos appréhensions, il faut que vous sachiez qu’un freelance est lui aussi au final une entreprise. Certaines agences ne sont que 2 ou 3 personnes d’ailleurs. Que ce soit chez une agence ou un freelance, les risques sont au final les mêmes. Un freelance étant aussi une entreprise avec des charges par exemple, le prix ne sera parfois pas forcément beaucoup moins cher que certaines agences, il faut en être conscient.
      Je pense d’ailleurs que pour un premier logo, un freelance peut-être un meilleur choix. En effet, les grosses agences spécialisées risquent d’avoir beaucoup de clients, votre projet ne passera sans doute pas en « priorité ». Alors que beaucoup de freelances n’ont en général qu’un ou peu de clients en même temps. C’est donc souvent plus simple d’avoir un suivi personnalisé et une grande attention chez un freelance ou une petit agence, que chez une grande agence spécialisée.
      Sachez enfin, qu’un « bon » freelance vous fera un contrat. Le contrat est là pour le protéger lui, mais également vous protéger vous, poser les bases de la collaboration, définir les fichiers à livrer et tant d’autres détails « techniques ». Cela permet

  4. Si je peux me permettre un freelance est un pro comme un autre. Si vous avez peur…je vais faire le parallèle :
    – Vous avez besoin d’un plombier pour votre chauffage défectueux ou d’un charpentier pour refaire votre toit….
    comment estimez que vous n’allez pas vous faire avoir ?
    Il y a une infime chance que ça rrive…de tomber sur un charlot qui bacle le travail, ou d’une personne sans scrupule (à la magie de la TV et ces reportages bidonnés, bref passons…).

    Les autres seront des gens professionnels et sérieux. Vous avez le choix sur plusieurs critères, le prix et la qualité de la presta :
    Vous pouvez demander (je vous le recommande vivement) 3 devis (ou +…oui ça prends du temps…mais ça vous rassurera et on ne crée pas un logo ou son business sur un coup de tête) à 3 plombiers et 3 charpentiers différents. ça permet de voir les grosses differences (apres un artisan débutant n’a pas forcement le même tarif qu’un « ancien’ bien établit….comme un graphiste junior ou sénior).
    Donc vous avez vos 3 devis différents. Il vous reste à savoir s’il fait du bon boulot. Soit il a un site internet (et ça vous sera plus facile de trouver un site de graphiste que celui du maçon ou d charpentier croyez moi), vous pouvez donc voir ses réalisations et juger si son style, ses travaux sont intéressants et vous le jugez à même de réaliser votre projet. les refs pouvant servir de gage de sérieux et professionnalisme.
    D’un autre coté pour les artisans vous pouvez les contacter parce que vous avez entendu par des amis (bouche à oreille) que un tel faisait du bon boulot. Là si vous montez votre entreprise, peut être êtes vous en contact avec une CCI ou d’autre organisme qui peuvent vous orienter.
    ça marche avec un dentiste etc…
    on ne peux pas savoir avant, il faut se renseigner. Regarder plusieurs book/folio
    Apres l’histoire du national/local n’a rien à voir. Un free local peut très bien vous faire du très bon travail, là ùu une agence pourra vous bâcler le travail (comme l’a bien expliquer Stephanie).
    Tout depends de votre projet, de votre budget : entre vouloir un flyer ou monter un plan com pour de la cosmétique avec du packaging et PLV sur poin de vente…
    Rencontrer vos prestataires que vous sélectionner pour avoir un ressenti ça peut etre bien également.
    le freelance n’est pas là pour vous saigner, ce n’est pas un artiste fou qui va flouer (enfin apres c’est une suite de mauvais choix et vous pouvez vous ne vous en prendre qu’a vous même… non mais ça se passera bien si vous faites un tri, selectionné