Je suis un développeur Web moyennement compétent. Je peux mettre des trucs où je veux qu'ils aillent et y mettre des trucs JQuery si besoin. Cependant, si je crée mon propre site Web (ce que je commence à faire), je ne sais pas comment le concevoir. Si quelqu'un devait s'asseoir à côté de moi un point à l'écran et dire "mettez cette image là, texte là" je peux le faire assez facilement. Mais concevoir mon propre site avec mon choix de couleurs et de texte ressemblera à un tout-petit qui l'a inventé.

Quelqu'un connaît-il des sites Web / livres que je peux consulter ou quelqu'un a-t-il des conseils sur les bases de la conception de sites Web pour les tout-petits?

Vous avez quelques choses à faire.

Conseils:

Apprenez à utiliser Photoshop. (En particulier, les styles de calque sont excellents. Notez simplement qu'ils peuvent être des effets difficiles à réimplémenter dans CSS2). Cela contribue grandement à faire de bonnes maquettes.

Regardez des sites conçus par des professionnels. Quels sites avez-vous visités qui vous plaisent?

Trouvez des sites qui vous dérangent et réfléchissez à ce qui pourrait l'améliorer. Regardez également les publicités sur les produits. Emballages alimentaires. Annonces dans les journaux. Vous l'appelez.

De plus, une fois que vous commencez à vous familiariser, pratiquez, pratiquez, pratiquez. Le graphisme prend du temps à se développer en tant que compétence, en particulier à partir d'un programmeur qui a du codage à considérer. (Gradients vs "mosaïque")

Outils:

(Photoshop est un favori personnel. Paint.NET est une bonne alternative à Windows, mais n'est pas aussi puissant.)

Système de réseau 960 de Nathan Smith . Il a des modèles pour de nombreux programmes graphiques traditionnels. Vérifiez-le.

Les références:

Regardez certains de ces sites: (J'en ai vu plus, je vais essayer d'en ajouter au fur et à mesure que je les rencontre)

• Une liste à part
• John McCain
• BarackObama.com
• Hayon2010.com (D'accord, j'ai fait celui-ci, mais je pense que c'est sympa. Edit: J'apprécierais aussi les commentaires à ce sujet. ;-D)

Le côté pratique

Il y a certainement des aspects pratiques étape par étape de la conception qui sont importants à apprendre. Tout n'est pas subjectif.

   • Tutoriels de conception Web: http://webdesign.tutsplus.com/

   • Tutoriels Photoshop: http://psd.tutsplus.com/

   • Des tonnes de tutoriels: Lynda

Inspiration

   • Site Web: style inégalé

   • Site Web: Abduzeedo

   • Livre: Lignes directrices pour le succès en ligne

   • Site Web: Smashing Magazine

Compétences en conception

Conception générale

   • Livre: Graphic Design: The New Basics

   • Livre: Design graphique, Référencé

   • PDF: Les quatre grands: contraste, répétition, alignement, proximité

Typographie

   • Livre: Penser avec le type

   • Livre: les éléments du style typographique

   • Article: http://en.wikipedia.org/wiki/Typography

   • Article: http://www.informationarchitects.jp/en/the-web-is-all-about-typography-period/

Disposition

   • Livre: classeur de mise en page

Couleur

   • Livre: classeur de conception de couleurs

   • Livre: Color Harmony Workbook

Philosophie du design

«L'erreur la plus stupide consiste à considérer le design comme quelque chose que vous faites à la fin du processus pour« ranger »le gâchis, au lieu de comprendre que c'est un problème de« premier jour »et une partie de tout. -Tom Peters

"Un bon design garde l'utilisateur heureux, le fabricant dans le noir et l'esthète sans chichis." -Raymond Loewy

"Un design vraiment élégant intègre des fonctionnalités de premier ordre dans une forme simple et épurée." -David Lewis

"Un bon design est une bonne affaire." -Thomas J. Watson Jr.

Plus de citations

Cela peut être légèrement hors sujet, mais je me souviens que Jeff Atwood avait fortement recommandé le livre Don't Make Me Think . Il décrit comment concevoir votre site Web pour une expérience utilisateur optimale.

Ogilvy on Advertising: ce livre couvre quelques notions de base de la conception graphique ainsi que beaucoup de bon sens pour faire tout type de flyer, publicité, etc. même s'il a été écrit bien avant l'ère www.

Plus généralement, parcourez des livres et des magazines sur la conception graphique, les beaux-arts, la décoration intérieure, le cinéma - il existe de nombreux principes de conception communs pour rendre quelque chose visuellement attrayant et rendre les informations ou autres contenus attrayants. Un peu comme la façon dont l'électromagnétisme est commun à l'électronique, aux sciences planétaires, à la chimie, au nucléaire et à d'autres domaines de la physique et de l'ingénierie.

Un autre bon livre dans cet espace serait The Design of Everday Things. Il couvre de nombreuses idées pratiques, telles que la promotion de conceptions qui se prêtent à une utilisation facile en tirant parti de la façon dont les gens abordent naturellement une nouvelle chose. Le livre ne traite pas spécifiquement de l'interface utilisateur ou de la conception Web, mais il en couvre un peu, je crois.

Un premier exemple dans le livre est les portes. Il explique comment les portes avec un bouton ou une poignée d'un côté et des charnières visibles sont intuitives, car vous savez que la porte s'ouvre en poussant ou en tirant de ce côté. Les portes de fantaisie avec charnières cachées, barres de poussée sur toute la porte ou boutons centrés sont délicates et nécessitent un moment d'expérimentation car leur fonctionnement n'est pas intuitif.

Un outil que je trouve inestimable dans la conception est Color Scheme Designer . Je choisis généralement une couleur sur laquelle je voudrais baser le design, puis j'utilise le schéma "Analogique" pour obtenir un bel ensemble de couleurs assorties. Pour moi, obtenir les bonnes couleurs est le pire, donc après cela, le reste obtient juste une belle mise en page et applique la palette limitée de couleurs.