https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda
Je croyais avoir déjà coudifié... donc, un résumé:
1- La lumière vient d'en haut: donner un effet 3d subtil en creux ou en relief
- en creux: text input, boutons pressés, ascenseur, bouton radio, checkbox
- en relief: boutons non pressés, bouton d'ascenseur, dropdown, cards, boutons d'un radio selectionné, popups
2- Noir et blanc d'abord:
- réaliser l'ensemble en N&B puis au final ajouter la couleur mais toujours avec un objectif précis (ça, il faudra que je le retienne ^^)
- ajout de la couleur: une seule couleur et ses variations (saturation ou luminosité) pour conserver la pertinence de la couleur
3- Doubler les espaces vides: espace entre les lignes, entre les éléments, entre les groupes d'éléments... ex: entre les items d'un menu, 2x la hauteur du texte.
4- Placer du texte au-dessus d'une image:
- directement dessus avec une image sombre et un texte blanc, lisible dans toutes les dimensions d'écran
- ajouter un overlay pour pouvoir gérer l'assombrissement (marche aussi très bien avec les thumbnails)
- texte avec fond de couleur ou noir (semi transparent ou pas)
- fond flouté (div avec le même fond flou ou texte placé sur une partie floue de l'image)
- dégradé doux vers une couleur unique (en général en footer) : permet d'améliorer la lisibilité du texte sans altérer l'image (effet possible via css: un fond dégradé de noir rgba de 0% à 20% d'opacité par exemple)
- on peut mélanger le flou et le dégradé
5- Faire ressortir le texte:
- diviser le css du texte entre ce qui en accroît la visibilité (gras, grand, capitalisé, italique, plus de marge ou de contraste etc) et ce qui la décroît (petit, fin, moins contrasté, moins de marge etc).
- hover/selected: jouer sur la couleur du texte, la couleur du fond, l'ombre, le soulignage, relief/creux, le changement de contraste (blanc>coloré ou coloré>blanc avec un fond subtilement assombri)
6- Utiliser les bonnes polices:
- clair et simple
- peu de polices différentes
- icon fonts
7- Chercher l'inspiration: observer les UI qu'on trouve belles et chercher pourquoi pour s'en inspirer
http://korben.info/10-sites-photos-gratuites-illustrer-vos-sites.html
coudification
http://calltoidea.com/
http://www.zerobundle.com/?ref=catswhocodezb3
des ressources sympa, à récupérer.
http://lehollandaisvolant.net/?d=2013/10/07/14/09/21-pourquoi-le-flat-design-tel-quil-est-utilise-actuellement-sux
Comme je le disais dans mon touït ( http://www.warriordudimanche.net/static2/tooeets&command=msg33 )
"Pendant des années, tout le monde voulait faire des dégradés, des ombres des coins arrondis sur son site, et on déployait tous des trésors de complications, de hacks et d'astuces dantesques pour y parvenir... aujourd'hui que tous les navigateurs le font sans effort ni même préfixage, plus personne n'en veut et on ne jure que par les coins carrés, les couleurs flashy et le flat design... Les designers sont des enfants gâtés, voilà la vérité"
http://www.nopuedocreer.com/quelohayaninventado/24266/calendario-unico/
Un calendrier unique perpétuel: il suffit de faire glisser le cache au fur et à mesure des mois ^^
http://naldzgraphics.net/tips/tips-in-designing-effective-and-catchy-posters/
Bons conseils pour créer un poster...
http://naldzgraphics.net/inspirations/ultimate-collection-munny-designs/
Certains sont vraiment du très beau boulot...
http://bgrepeat.com/most-dl
http://keyamoon.com/icomoon/app/
Browse and select icons below to download them or make a font. You may use the Shift key to select multiple icons. You can import SVG images or fonts too.
http://references.charlyecho.com/
http://brand-identity-essentials.com/100-principles
http://goldenratiocalculator.com/
http://www.splitbrain.org/_static/ico/
http://www.fontsquirrel.com/fonts/DejaVu-Serif
http://www.psdvault.com/text-effects/create-a-rocky-text-effect-with-space-background-in-photoshop/
http://subtlepatterns.com
de subtiles images de fond répétables... bôôôô
http://www.addictivetips.com/windows-tips/create-web-animation-and-interaction-designs-in-html-5-with-adobe-edge/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+Addictivetips+%28AddictiveTips%29&utm_content=Netvibes
http://www.google.com/webfonts#ChoosePlace:select
http://naldzgraphics.net/tips/things-designers-need-to-know-about-colors
A savoir sur les couleurs
http://naldzgraphics.net/tips/10-tips-in-designing-effective-business-cards
conseils pour designer une bonne carte de visite
http://icones.pro
http://www.jmockups.com
http://www.css3.me
http://naldzgraphics.net/freebies/850-super-cool-tech-brushes-for-photoshop
http://leaverou.me/css3patterns
http://flyosity.com/tutorial/crafting-subtle-realistic-user-interfaces.php
Excellent article sur le réalisme du design et la nécessité d'être subtil.
http://www.sprymedia.co.uk/index
http://webdesignledger.com/inspiration/30-fresh-examples-of-single-page-websites
http://logofury.com
http://chengyinliu.com/whatfont.html
Identifier les fontes d'un site via un bookmarklet...
http://designmodo.com/40-websites-providing-useful-and-free-3d-models-download
http://webdesignledger.com/tips/css-sprite-tips-and-techniques
http://www.bluevertigo.com.ar/bluevertigo.htm
http://adamlevermore.com/2010/08/19/tutorial-creating-a-retro-sci-fi-poster
http://webdesignledger.com/tips/the-four-key-components-of-a-great-web-design
Les quatre clés d'un design réussi
http://www.splashnology.com/blog/css/225.html
http://www.marcofolio.net/photoshop/ultimate_photoshop_design_resources.html#Patterns
ressousrces pour designer
http://www.paperblog.fr/403463/des-tableaux-de-donnees-simples-standards-et-lisibles-en-css-et-php
Des tableaux de données simples, standards et lisibles en CSS et PHP
http://www.free-power-point-templates.com
http://net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them
http://www.photo-libre.fr
http://www.spry-soft.com/grids
http://www.webhostingsecretrevealed.com/featured-articles/30-must-see-web-generator-for-lazy-webmasters
générateurs web
http://line25.com/articles/10-usability-crimes-you-really-shouldnt-commit
10 problèmes d'ergonomie à éviter