Grâce à Internet, le graphisme et la programmation se superposent de plus en plus.

En tant que programmeur, je constate constamment que j'ai besoin de connaissances de base en conception graphique, mais que j'ai du mal à localiser des ressources d'apprentissage complètes mais concises, mais plutôt à trouver des bases de connaissances applicables à la tâche à accomplir.

Pouvez-vous nous donner des conseils ou recommander de bons livres, tutoriels, blogs et sites Web qui fournissent aux débutants un aperçu de la conception de sites Web qui ont été, selon votre expérience, des supports pédagogiques efficaces et de grande qualité? Je ne cherche pas de conseils sur l'utilisation des outils de retouche d'image, mais en supposant en saisir les bases, quelles ressources et quels conseils aideront le mieux un nouveau designer à créer des designs d'aspect professionnel?

• Restez simple - N'essayez pas de faire quelque chose de trop fantaisiste ou aventureux au début. Obtenez les bases en premier, alors vous pouvez commencer à expérimenter. N'essayez pas d'imiter l'interface de l'ordinateur Star Trek.
• Soyez cohérent - Une conception cohérente est la base d'une bonne conception. Gardez une trace de vos marges, tailles et placement et maintenez-les tout au long de la conception.
• Supprimer le fouillis - Incluez uniquement les éléments nécessaires à la conception. Supprimer tout le reste.
• Prioriser - Quel est le but principal de la conception? Soulignez cet objectif. Rendez-le évident.
• Utiliser des espaces - Permettez des marges appropriées. Les gros blocs de texte avec peu ou pas de marges ne sont pas très lisibles. Idem pour les autres éléments de design.
• Utiliser une palette de couleurs - Vous ne devez pas utiliser plus de 4 à 5 couleurs au total.
• Polices cohérentes - Utilisez une ou deux polices. Utilisez-les systématiquement, en général un pour les en-têtes, un pour le texte de paragraphe. Calculez et conservez des tailles de police, des hauteurs de ligne et des interlignes cohérents. N'utilisez pas Comic Sans à moins de pouvoir vous protéger des zombies enragés en velociraptor.
• Conception d'abord - La conception ne devrait pas être une réflexion après coup; il devrait être un membre de première classe de la phase de planification. Le design sera la façon dont vos utilisateurs interagiront avec votre programmation. Ils se formeront d’abord et largement en fonction de votre design. Donnez au design son importance.

En ce qui concerne les ressources, vous consultez l'un des sites Web suivants:

• Smashing Magazine
• PSD Tuts
• Abuzeedo
• UX Booth
• J'adore la typographie
• Jason Santa Maria

L' index des bases du design de Jim Krause m'a fourni un très bon résumé des bases de la composition, de la couleur et du type. Je n'étais pas un grand fan de la plupart de ses propres exemples, mais ils illustrent très bien ses propos et il aborde quelques points précieux que je n'ai pas beaucoup vus mentionnés ailleurs. Et peut-être plus important encore, la lecture de ce livre me rendait vraiment excité de sortir et d’expérimenter les idées qu’il présentait.

Il y a parfois un léger chevauchement entre développement Web et conception Web, mais je ne pense pas que les développeurs Web devraient essayer de devenir des concepteurs à temps plein, à moins d'être disposés à y consacrer autant d'efforts qu'à apprendre à programmer. Ce n'est pas quelque chose que vous pouvez simplement barboter le week-end et être bon à.

Si c'est le cas, vous pourrez apprendre à devenir votre propre concepteur Web (c.-à-d. Créer votre propre conception Web pour tous les sites sur lesquels vous travaillez), alors je vous recommande vivement de suivre une formation formelle (même si vous ne suivez que quelques cours en design collégial). apprendre les bases du design visuel et de la composition. Un livre de style manuel comme celui que Damon a posté pourrait aider, mais vous devrez en fait faire tous les exercices du livre et vous assurer de bien comprendre le contenu. Mais plus important encore, vous devez passer beaucoup de temps à regarder (parcourir des galeries de design en ligne, parcourir des magazines et des annonces de magazines, etc.) et à créer des dessins (télécharger des briefs de design pratiques en ligne ou participer à des concours de design en ligne).

Si c’est pour vous aider à communiquer avec les concepteurs Web / graphiques avec lesquels vous travaillez, procurez-vous simplement un livre qui vous apprendra le vocabulaire (par exemple, les concepts de typographie) et vous concentrant sur la convivialité , l’ accessibilité et la conception UX, ce sera probablement la meilleure utilisation de votre temps. De cette façon, vous pouvez vous impliquer dans la direction créative du projet et participer à la conception des interfaces, mais le concepteur est celui qui crée le "look" ou l'esthétique du site.

Virtuosi Media répertorie beaucoup de bonnes ressources (le réseau Tutsplus est génial en général et Smashing Magazine est une lecture incontournable pour tout développeur / concepteur Web), à quoi j’ajouterais:

• http://www.alistapart.com/
• http://webdesignledger.com
• http://behance.net - héberge les portefeuilles de nombreux designers de classe mondiale pour s’inspirer des

Je suis moi-même programmeur et pour moi, les ouvrages suivants ont été très utiles pour moi:

• Le livre sur la conception des non-concepteurs de Robin Williams: Ce livre couvre les bases du graphisme.
• S'appuyant sur le côté droit du cerveau de Betty Edwards: Le livre pour développer vos compétences en dessin.
• The Humane Interface de Jef Raskin: Ce livre suscite des réflexions sur la conception de l’interface utilisateur.

Cela n’est peut-être pas pertinent dans tous les cas, mais pour les programmeurs Web, l’une des choses les plus importantes qui me tient à l’esprit, qui jette un pont, c’est peut-être d’apprendre le CSS de fond en comble, car être capable de bien concevoir ne veut rien dire si vous ne pouvez pas l'intégrer dans votre projet que vous créez.

En 2004, je me suis retrouvé à mi-chemin entre les deux mondes, comme je l'avais passé la majeure partie de ma vie. Je connaissais le Web depuis HTML 3.2 à l'époque du commerce électronique. élevé avec un Apple // e par des parents (une chorégraphe et une éducatrice) qui m'ont permis et encouragé de passer beaucoup de temps avec l'art. Le design n’est pas de l’art. En fait, certains de ses modèles plus algorithmiques s’alignent parfaitement avec la programmation, que vous fassiez du Web ou non.

• Histogramme de bibliothèque - une impression que j'ai réalisée au cours de mes études supérieures et qui est à la fois design et développeur.

Mais si oui, 2004: je divisais la différence lorsque je poursuivais des études supérieures, où j’avais d’abord reçu un enseignement typographique de premier ordre, puis une latitude d’exploration - au cours de laquelle mes perspectives de geekier se sont révélées utiles.

Alors, envisagez peut-être des études supérieures, ou tout ce qui vous intéresse également. Bonne chance dans les deux cas.

Apprenez beaucoup sur la typographie.

Des classiques …

^{Jan Tschichold}

Pas les clowns …

^{David Carson}

La typographie stratégique et efficace est l’une des qualités les plus souvent absentes dans ce domaine (et l’a toujours été).

Je peux généralement recruter un designer entièrement basé sur leur type de traitement. Environ 80% de l'histoire se trouve dans le curriculum vitae mis en place.

Un bon début (gratuit) est cette adaptation détaillée de la ressource essentielle de Robert Bringhurst pour son application sur le Web.

^{Les éléments du style typographique, Bringhurst}

Ceci est une considération plus large qui traite de l'interaction du type et de la mise en page.

^{Systèmes de grille en design graphique, Brockmann}

1. Penser de manière critique aux objets conçus autour de vous

   Presque tout dans l'environnement créé par l'homme a une sorte de design derrière, que ce soit un graphique, un site web ou un accessoire de mode.

   Notez à quel point la conception fonctionne correctement et à quoi elle ressemble.

2. Penser le design comme un moyen de répondre à un besoin ou de résoudre un problème

   Bien qu'il s'efforce de rendre les choses belles, le design se distingue des autres types d'art en ce qu'il a une application pratique.

   Un logo, par exemple, est un type de design graphique qui permet de rendre une marque ou une entreprise rapidement reconnaissable.

   Un article de vêtement sert à recouvrir le corps et à rendre l’utilisateur plus attrayant.

3. Pratiquez la communication visuelle.

   Les concepteurs doivent être en mesure de réaliser des dessins ou d'autres représentations de leurs conceptions afin de les affiner et de les expliquer à d'autres personnes, tels que leurs collègues concepteurs et les fabricants.

   Le dessin est un outil puissant pour les concepteurs, mais ne vous inquiétez pas si vous ne pouvez pas dessiner de façon photoréaliste. Les dessins des concepteurs ne doivent pas nécessairement être des chefs-d’œuvre, mais simplement un moyen de saisir rapidement les idées qui mèneront au produit fini. Le traçage est également totalement acceptable.

   En plus des dessins, les concepteurs utilisent également des éléments tels que des maquettes, des prototypes et des images de synthèse pour visualiser leurs conceptions.

4. Explorez comment les choses sont faites

   Lorsque vous travaillez en tant que designer, vous devez non seulement prendre en compte ce qui est agréable à l'oeil, mais également déterminer comment votre conception sera mise en œuvre.

   Pour un objet comme un étui de téléphone portable, les concepteurs industriels doivent réfléchir au type de processus de plastique et de moulage qui sera utilisé et à la manière dont chaque partie sera assemblée.

5. Trouver de bonnes sources d'information

   En plus des magazines de design, recherchez des livres sur le processus, les principes et les méthodes de design.

   Essayez de regarder des manuels et des vidéos techniques pour la fabrication de vêtements, les méthodes de fabrication et diverses techniques d’artisanat.

   En savoir plus sur le design va au-delà de la lecture de magazines de mode et de décoration, bien qu'ils constituent une bonne ressource pour les tendances actuelles.

6. Développer vos compétences en design

   Étudier et pratiquer, c’est bien, mais l’expérience du monde réel est ce qui fera vraiment passer votre conception au niveau supérieur.

7. Faire des erreurs rapidement

   vous ferez beaucoup d'erreurs, et plus vite vous pourrez les surmonter, mieux ce sera.

8. Soyez toujours prêt à attraper des idées.

   Cherchez l'inspiration partout. L'inspiration ne doit pas nécessairement provenir d'autres conceptions ni de tendances en matière de conception - elle peut souvent provenir de la nature ou de choses accidentelles.

Livres et matériels

http://www.alistapart.com

http://webdesignledger.com

Smashing Magazine

PSD Tuts

Abuzeedo

UX Booth

Quelques points à garder à l'esprit:

1. Chaque design résout un problème

Arrêtez de penser à la conception en termes de "Comment puis-je rendre cela joli?" et commencez à y penser en termes "Comment puis-je rendre cela aussi facile à utiliser que humainement possible?"

Lorsque vous créez des sites Web, cela signifie que, dans son sens le plus large, vous résolvez un problème commercial .

Un site Web existe pour réaliser un objectif commercial .

Les utilisateurs d'un site Web ont également leur propre objectif en tête: ils peuvent vouloir acheter quelque chose, comparer des produits, lire sur un sujet, etc.

En tant que concepteur, votre travail consiste à aider l’entreprise en veillant à ce que le plus grand nombre possible d’utilisateurs atteigne son objectif et à les aider à naviguer sur le site Web afin qu’ils puissent atteindre leur propre objectif.

Par exemple, vous concevez un magasin d’e-commerce: L’objectif commercial ici serait de vendre les produits. Et l'objectif des utilisateurs est de trouver exactement ce qu'ils veulent acheter, le plus rapidement possible et de vérifier, le plus rapidement possible.

Une grande partie du processus de conception est consacrée à la résolution du problème, à la création d’un profil de l’utilisateur, à la réflexion sur la réalisation de l’objectif commercial, etc.

Les couleurs, les polices de caractères, la mise en page, chaque décision de conception que vous prenez doit être dictée par l'objectif du site Web .

2. C'est la répétition qui rend les choses jolies .

C'est ce que la cohérence est à propos.

Par exemple, l'association de polices. Les polices sont appariées en fonction de traits similaires, en fonction de la répétition des détails.

Voici un match: Farnham et Benton Sans.

Selon ce post ici 2, ces deux polices correspondent car:

[...] les visages se ressemblent dans la forme trapue de leurs lettres minuscules, qui ont des ascendeurs et des descendeurs distinctement courts. [...] Les lettres minuscules des deux sont larges.

La répétition de certains traits fait que ces 2 polices fonctionnent bien ensemble. Vous pouvez les voir sur une page Web ici 3 .

La répétition apporte l'harmonie dans un design. Et l'harmonie rend le design magnifique.

Mais, comme vous pouvez le constater, Farnham et Benton Sans contrastent également: Farnham est une police à empattement et Benton est sans empattement.

Pourquoi y a-t-il besoin de contraste? Nous cherchons à introduire des similitudes dans un design, non?

Eh bien, oui, mais trop de répétitions rendent vos dessins terne et difficile à utiliser .

Le remède est le contraste.

3. Le contraste aide l'utilisateur à trouver son chemin

Cela les aide à distinguer différents éléments les uns des autres. Cela les aide à trouver les éléments clés tels que les titres, la navigation, les boutons.

Plus l'élément est important, plus il doit contraster avec son environnement.

Utilisez la répétition pour rendre vos conceptions cohérentes. Comme d’autres l’ont dit — 2 polices, une palette de couleurs limitée, etc.

Utilisez le contraste lorsque vous avez vraiment besoin de distinguer un élément du reste.

Tout ce qu’il est bon de savoir, mais… ne vous aide toujours pas à concevoir votre prochain site Web, n’est-ce pas?

Eh bien, j'ai une solution pour cela aussi.

La première étape pour devenir meilleur en conception de sites Web consiste à observer et à absorber le travail des autres. Beaucoup. C'est de là que vient "l'inspiration".

Examinez une centaine de motifs que vous aimez, analysez-les et commencez à repérer des motifs. Votre cerveau vous aidera à combiner ces motifs dans votre propre design, qui sera une variation de tous les designs similaires que vous avez vus. Vous n'avez pas besoin de créer quelque chose "unique".

Résumé: la prochaine fois que vous commencez à concevoir pour votre projet parallèle

Parcourez une douzaine de sites Web / applications Web similaires et tracez rapidement leur conception. Notez quel flux de travail ils ont utilisé. Pourquoi l'ont-ils utilisé? Notez quelles formes, couleurs et polices ils ont utilisées.

Suivez ensuite ce processus pour créer votre propre design:

1. Définir le projet. Plongez dans le projet et apprenez-en plus sur:

   1. Son objectif, les résultats attendus

   2. Ses (futurs) utilisateurs
   3. L'expérience souhaitée pour ses utilisateurs / visiteurs
   4. La marque derrière le projet
2. Acquérir les ressources nécessaires. Obtenez votre main sur (échantillon) contenu (emprunter à des sites similaires)

3. Donner forme au contenu

   1. Choisissez une police de caractères pour la composition du contenu (choisissez-en une qui correspond à l'ambiance et au message du site)
   2. Choisir la taille de police pour la copie de corps
   3. Générer une échelle modulaire (une table de dimensions harmoniques proportionnelles) à partir de la taille de police de la copie de corps (à l'aide de l'échelle de type - une calculatrice visuelle)
   4. Esquissez différentes dispositions en fonction des exigences du projet
   5. Construisez la mise en page (en HTML et CSS) à l'aide de l'échelle modulaire: largeur des colonnes, hauteur des lignes, tailles des titres, marges inférieures, colonnes (si nécessaire).
   6. Appliquer la couleur selon les directives de la marque

Vous pouvez en savoir plus sur chaque étape de ce processus ici .

Un peu plus:

1. Parcourez les collections de sites Web inspirants pour trouver des idées. Une collection Motherload of Inspirational Site Collections répertorie de nombreuses collections. Siiimple.com et minimalsites.com sont deux autres bons sites .

2. La proposition «Supprimez le fouillis» de Virtuosi Media est un idéal bien défini, mais un site avec fouillis réalisé par un débutant est meilleur qu'un site minimaliste créé par un débutant. L'encombrement camoufle quelque peu les autres éléments de conception médiocres, gênant le contenu. Le site professionnel typique est beaucoup trop encombré, à l'instar de presque tous les modèles, mais reste assez professionnel.
   
   Il faut une connexion intime avec les polices de caractères, le contraste, l’espace négatif, la coloration, la densité, le flux, ... pour créer un site vraiment bien conçu, efficace et qui respire bien.

3. Si tout devient un peu écrasant, envisagez l'achat d'un modèle.

Juste pour ajouter quelques liens supplémentaires aux personnes issues de la programmation et intéressées par la conception d'interface utilisateur.

• Design For Hackers (livre imprimé)
• Principes de conception d'interface utilisateur (site)
• Conception de l'interface pas à pas (ebook)
• The Shape Of Design (version gratuite en ligne)

Au début, vous rencontrerez des problèmes, car certaines choses ne vous gêneront pas. Mais vous devrez faire preuve de patience et pratiquer beaucoup. Quand j'ai commencé à concevoir et à regarder en arrière, il y a 4 ans, je ne peux pas croire que j'ai fait ce travail.

Vous devez vraiment rechercher d’autres grands designers. Pour cela, vous devez suivre les grands designers sur Dribbble . Il est également très important de regarder régulièrement les dernières créations sur des sites de galeries css telles que www.minimalistgallery.com ou autres.

En souhaitant le meilleur !!!

Abonnez-vous à http://sidebar.io/ pour les bulletins quotidiens. Chaque article sera utile d'une manière ou d'une autre. Le dribbble est un autre excellent moyen d'autoapprentissage des designs .

C'est peut-être un conseil général, mais pour moi, c'est quelque chose qui dit vraiment si quelqu'un est un bon designer ou non:

Espaces blancs, marges et alignement.

Ils sont la clé pour créer des conceptions lisses et d'aspect professionnel. Ils créent un "espace de respiration" et peuvent vraiment déterminer si votre conception sera mise en place ou non. Tout comme avec les polices, vous voulez vous en tenir à certaines marges / espaces blancs pour conserver une mise en page propre.

Pour garder une trace de ce genre de choses, il peut être très utile d’utiliser une grille ou des guides pour la conception.

Votre question est la suivante: "En tant que designer, je suis constamment confronté à des connaissances de base de la programmation d'applications". Ce sont de vastes régions, avec des régions superposées superposées qui ont besoin les unes des autres. La bonne nouvelle: vous êtes intéressé et comprenez leur importance. La mauvaise nouvelle: il n’existe pas de moyen facile de bien comprendre ce qu’il faut faire pour bien concevoir sans un cours ou une méthodologie appropriée. MAIS pour les premières étapes, ce livre est un bon moyen de commencer en toute sécurité à construire des systèmes visuels sensés.

Livre de design non design