{"id":1375,"date":"2013-03-22T08:33:56","date_gmt":"2013-03-22T07:33:56","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1375"},"modified":"2018-02-20T09:23:38","modified_gmt":"2018-02-20T08:23:38","slug":"des-pixels-et-du-code-54","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-54\/","title":{"rendered":"Des pixels et du code #54"},"content":{"rendered":"
Entre les tutoriels avanc\u00e9s qui vont vous permettre de cr\u00e9er des effets sympas en CSS, les collections de polices d’\u00e9criture et les frameworks responsive, que vous soyez orient\u00e9s code ou design vous devriez trouver des outils qui vous seront utiles cette semaine. Pour les articles de fond, beaucoup d’ergonomie et d’exp\u00e9rience utilisateur avec le tris de cartes (ou \u00ab\u00a0card sorting\u00a0\u00bb), l’utilisabilit\u00e9 des formulaires ainsi que quelques id\u00e9es pr\u00e9con\u00e7ues sur le \u00ab\u00a0touch\u00a0\u00bb en mobilit\u00e9. Du c\u00f4t\u00e9 de l’inspiration, un peu de typographie et un petit projet photo qui met en sc\u00e8ne de la nourriture sous forme de pantonnier. Et pour finir, un superbe article sur l’int\u00e9gration et l’humilit\u00e9, \u00e0 lire absolument si ce n’est pas d\u00e9j\u00e0 fait.<\/p>\n
#CSS<\/p>\n
Css-only Alternative to the Select Element<\/a> un tutoriel pour cr\u00e9er un faux \u00e9l\u00e9ment de liste de selection en utilisant des boutons radios \u00e0 la place d\u2019une balise select, l\u2019id\u00e9e \u00e9tant d\u2019avoir un plus grand contr\u00f4le sur le design en CSS des boutons radios. Par contre \u00e7a ne fonctionne pas avec une navigation au clavier comme l\u2019a soulign\u00e9 PhilippeVay dans les commentaires.<\/p>\n Thumbnail Grid with Expanding Preview<\/a> un tutoriel HTML\/CSS\/JS pour cr\u00e9er un syst\u00e8me de grilles d\u2019images responsive qui s\u2019adapte avec un petit aper\u00e7u textuel qui s\u2019ouvre au clique.<\/p>\n Style Textarea Resizers<\/a> une technique CSS (qui ne fonctionne que sur webkit h\u00e9las) qui permet de prendre le contr\u00f4le et styler les \u201cpoign\u00e9e de redimensionnement\u201d des textareas en CSS<\/p>\n More fun with WebKit pseudoelements: -webkit-search-cancel-button (or: Pseudoclass Inception) <\/a>pour rester dans le webkit only, un moyen de styler la petite croix de webkit sur les input-type=search.<\/p>\n #SEO #Indexation<\/p>\n Arr\u00eatez d\u2019indexer les environnements de pr\u00e9prod<\/a> un mini guide des d\u00e9marches \u00e0 suivre si vous voulez \u00eatre s\u00fbres que votre environnement de test ne soit pas index\u00e9 par Google et ses amis.<\/p>\n #Outils<\/p>\n Webplatformtools.org<\/a> un petit site qui rassemble au m\u00eame endroit une liste de diff\u00e9rents services et outils en ligne pour designer et d\u00e9veloppeurs. Les services sont class\u00e9s par cat\u00e9gorie, il est donc tr\u00e8s facile de trouver ce qu\u2019on y cherche. Attention ce n\u2019est pas du tout affili\u00e9 \u00e0 webplatform malgr\u00e9 leur nom.<\/p>\n #Font<\/p>\n 25-old-school-and-retro-fonts <\/a>25 polices dans un style \u201cold school\u201d s\u00e9lectionn\u00e9e \u00e0 t\u00e9l\u00e9charger gratuitement<\/p>\n #Responsive Webdesign #framework<\/p>\n Groundwork.sidereel.com<\/a> un autre framework responsive avec un syst\u00e8me de grilles bien pens\u00e9<\/p>\n #Bootstrap<\/p>\n Bootstrap select <\/a>un petit ajout \u00e0 Bootstrap qui permet de styler des listes d\u00e9roulantes comme des boutons<\/p>\n #Font-icon<\/p>\n The Era of Symbol Fonts<\/a> si vous n\u2019\u00e9tiez pas encore convaincus que les font-icons c\u2019est g\u00e9nial, un petit article qui devrait finir de vous convaincre<\/p>\n #Logo<\/p>\n 4 essential rules of effective logo design<\/a> un petit article qui r\u00e9sume le r\u00f4le d\u2019un logo et quelques bonnes pratiques pour cr\u00e9er des logos r\u00e9ussis<\/p>\n #Wireframe<\/p>\n Wireframes: A good communication tool, a poor design tool<\/a> L\u2019auteur compare les wireframes \u00e0 la paperasse administrative : n\u00e9cessaire pour mettre tout le monde d\u2019accord, mais le processus de \u201cdesign\u201d commence bien en amont. Selon lui leurs int\u00e9r\u00eat resterait limit\u00e9 dans le domaine du design, mais ils restent d\u2019excellents outils pour communiquer les id\u00e9es sur un projet. La nuance est subtile j\u2019en conviens.<\/p>\n #Ergonomie<\/p>\n Using Card Sorting To Test Information Architecture<\/a> un petit articles qui d\u00e9crit l\u2019usage de la technique du \u201ccard sorting\u201d en ergonomie, quand l\u2019utiliser et comment pour des r\u00e9sultats exploitables sur un site web<\/p>\n #Responsive<\/p>\n On Responsive Layout and Grids<\/a>, une petit explication tr\u00e8s simple et illustr\u00e9e d\u2019un syst\u00e8me de grilles responsive sans avoir \u00e0 passer par un framework (type Bootstrap et autre).<\/p>\n #UX #Mobile<\/p>\n Mobile Form Usability: Place Labels Above the Field <\/a>l\u2019article r\u00e9pond \u00e0 l\u2019\u00e9ternelle question des labels des formulaires : o\u00f9 les placer pour un utilisateur sur un mobile.<\/p>\n Common Misconceptions About Touch <\/a>\u00a0taille id\u00e9ales des boutons, des liens, et quelques mythes et contre v\u00e9rit\u00e9s sur les mobile \u00e0 \u00e9cran touch suites aux analyses d\u2019un consultant en UX design<\/p>\n #Pantone<\/p>\n Pantone food pairing<\/a> une petite s\u00e9rie d\u2019images de nourriture sous forme de couleur pantone<\/p>\n #Typographie<\/p>\n What\u2019s Your Process<\/a> une petits vid\u00e9os o\u00f9 Dave Coleman pr\u00e9sente son processus de design pour une typographie<\/p>\n #UX UI Mobile<\/p>\n 30 Menu Navigation Designs for Mobile User Interface <\/a>une petite s\u00e9lection de menus de navigation d\u2019application mobile pour votre inspiration<\/p>\n #Mobile<\/p>\n 5 Things to Know When Designing for iOS<\/a> prendre en compte le m\u00e9dia, designer sur l\u2019appareil, ou encore animer l\u2019interface, des conseils valables aussi bien pour iOS que pour n\u2019importe quelle autre plateforme<\/p>\n #CSS3<\/p>\n Peeling sticker<\/a> \u00a0une petite d\u00e9mo en full CSS3 d\u2019un sticker avec un effet tr\u00e8s sympa au survol<\/p>\n #JavaScript<\/p>\n Un d\u00e9mo codepen<\/a> d’une petite toile en JavaScript que vous pourrez d\u00e9chirer avec un effet tr\u00e8s r\u00e9aliste, le tout en JavaScript. C’est impressionnant de r\u00e9alisme.<\/p>\n #Integration web<\/p>\n\u00a0Des ressources utiles<\/h2>\n
Les outils \u00a0et plugins pour vous faciliter la vie<\/h2>\n
Les articles \u00e0 lire<\/h2>\n
Inspiration<\/h2>\n
Les d\u00e9mos sympas et impressionnantes<\/h2>\n
Et s’il devait n’en rester qu’un ?<\/h2>\n