Comment pouvez-vous apprendre à concevoir de beaux sites Web? [fermé]

32

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?

Richard
la source
1
Regardez le code produit sur des sites bien conçus. Vous devriez pouvoir voir leurs feuilles de style et avoir une idée de la façon dont elles ont été assemblées à partir du HTML.
ChrisF
1
Cela me semble un peu hors sujet. Peut-être plus adapté aux webmasters?
Phil Mander
9
ChrisF, il pose des questions sur le design et vous proposez de regarder le code? Laissez-moi deviner, vous êtes programmeur.
Craig
1
@Phil - Les webmasters ne conçoivent pas de sites Web. Certainement pas approprié pour ce site.
Charles Boyung

Réponses:

10

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)

Moshe
la source
@Moshe - Puisque vous avez demandé des commentaires sur votre site - est vraiment génial, le seul problème que j'ai d'un rapide coup d'œil est la couleur rouge; c'est juste un peu trop choquant pour moi.
Edan Maor,
@Edan Maor - Merci d'avoir regardé. J'entends votre part sur le rouge. Je l'ai rendu si brillant parce qu'il correspond à la palette de couleurs politique du rouge blanc et du bleu. Si c'était plus sombre, il se coucherait plus comme marron, qui n'y appartient pas. Merci pour la contribution! Je vous en suis reconnaissant.
Moshe
Comme alternative gratuite à Photoshop, vous pouvez essayer GIMP, voir les tutoriels sur: tuxradar.com/gimp
kasterma
@Kasterma - Oui, GIMP fonctionne aussi, mais Photoshop est un standard de l'industrie. GIMP est trop compliqué. Je l'ai utilisé aussi.
Moshe
960 roches de grille!
JP Alioto
10

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

Andy Fleming
la source
enregistrer ce commentaire
Lanaru
6

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.

Preets
la source
Excellent point. UX est très important.
Moshe
7
D'après ce que je comprends, DMMT est plus un livre sur l'utilisabilité qu'un livre sur la conception Web.
Fishtoaster
3
@Fishtoaster oui, mais la convivialité et la conception sont liées, car une bonne convivialité définit la conception du site Web.
Darknight
1

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.

DarenW
la source
1

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.

CodexArcanum
la source
Ce livre a été un élément de lecture clé dans mon cours d'interaction homme-machine à Uni.
Richard
1

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.

CodexArcanum
la source