Chemin du développeur au concepteur: Comment

En tant que développeur voulant être designer, je suis vraiment intéressé à apprendre à créer une interface utilisateur de premier ordre pour les sites Web, les applications mobiles, etc. Cependant, je ne connais rien de Photoshop ou de tout ce qui concerne la conception, mes principales compétences étant HTML et CSS. .

Par où dois-je commencer? Comment puis-je apprendre à créer de beaux sites Web et interfaces?

En tant qu'ancien développeur devenu designer, il y a quelques choses que je suggère. Tout d'abord, commencez à travailler sur les designs! Si vous en avez la capacité, trouvez un mentor qui est déjà un concepteur UI / UX et commencez à travailler avec eux sur des projets. J'ai découvert que j'en apprenais plus en travaillant sur des projets et en absorbant les connaissances des gens qui font cela depuis des années que je ne l'ai jamais fait en lisant un livre.

Cela étant dit, si vous voulez lire sur UI / UX / etc., Je voudrais jeter un œil à cet excellent fil de discussion: Livre d'interface utilisateur à lire absolument? Je pense que mon préféré est "Don't Make Me Think" de Steve Krug - mais je suis sûr que vous finirez par trouver votre propre favori.

Enfin, en ce qui concerne des outils comme Photoshop, Illustrator, etc ... ne vous en faites pas! En fin de compte, vous trouverez les outils qui vous conviennent le mieux. Personnellement, je commence par des maquettes de crayon et de papier, puis en fonction du projet, je vais soit passer à quelque chose dans Balsamiq , ou Axure , ou parfois directement HTML et CSS - cela dépend vraiment de la taille du projet, de sa portée, etc. le plus confortable pour vous. À la fin de la journée, tout ce qui compte, c'est que vous communiquiez clairement votre vision de votre conception, et non l'outil que vous avez utilisé pour le faire.

Je mélange le design et le développement depuis longtemps. Mais au début, j'ai passé plus de temps à apprendre les outils d'édition que ce qui fait une bonne conception. Il existe de nombreux didacticiels pour apprendre à utiliser Photoshop, Illustrator, Fireworks, etc. C'est quelque chose que je veux encore améliorer.

L'une de mes inspirations est un gars du nom de Robby Ingebretsen, car il fait extrêmement bien le développement et la conception. Son site Web est à nerdplusart.com .

Il y a quelques choses que je vais regarder de lui ...

• Ma (très) courte liste de livres à lire absolument pour les créateurs
• Fondamentaux de conception pour les développeurs
• 10 façons d'attaquer un problème de conception et de gagner

Comme il en parle dans toutes ses présentations, je pense qu'il est essentiel de trouver l'inspiration pour vos créations. Même les meilleurs concepteurs ne proposent pas tout simplement ces trucs de nulle part. Un de mes signets est une collection de "New Graphic Design" , principalement vu dans le travail d'impression. La plupart d'entre eux sont très simples, utilisant souvent la typographie elle-même comme principaux éléments graphiques. Aussi simple que cela puisse paraître, le simple fait de parcourir des trucs comme celui-ci peut vous aider à façonner votre conception.

Tout comme l'apprentissage de Visual Studio ne fait pas de vous un bon développeur de logiciels, l'apprentissage de Photoshop ne fera pas non plus un bon concepteur d'interface utilisateur.

Si vous voulez emprunter la voie formelle, une formation en art / design graphique, facteurs humains, psychologie, art-architecture de l'information / sciences de la bibliothèque serait un lieu de choix.

Informellement, mettez-vous au travail! ;) La meilleure façon d'apprendre est de le faire.

Je suis un graphiste formellement formé qui a acquis des compétences en développement de logiciels sur le tas. J'ai commencé par pure nécessité.

Personnellement, je pense que les meilleurs membres de l'équipe UX sont ceux qui ont un mélange des deux compétences. Je pense donc que vous êtes sur la bonne voie.

Je commencerais par lire le livre "Head First Web Design" de Watrall & Siarto (publié par O'Reilly). C'est assez simple, facile à digérer et vous guide à travers tout ce qu'un designer doit considérer. Ce n'est pas une étude approfondie, mais vous permet de savoir à quelles questions vous devez répondre ensuite. Il couvre la navigation, l'organisation, la mise en page, l'écriture, la couleur et l'accessibilité.

De plus, avant de vous lancer dans Photoshop, Adobe Illustrator ou autre, filmez votre conception pour vous assurer que tout est au bon endroit avant de consacrer du temps supplémentaire à le rendre joli. Vous pouvez le dessiner sur du papier ou un tableau blanc, ou vous pouvez utiliser un outil. Un outil que j'ai trouvé vraiment utile à cette étape est Balsamiq Mockups . Il vous permet de penser d'abord à l'organisation et à la mise en page du site.

En fait, j'ai adopté l'approche opposée de UX Designer à UI Developer, cependant, lorsque je reprendrais Design, je recommanderais quelques domaines pour commencer:

Je jetterais un œil au livre "Don't Make Me Think!" par Steve Krug , qui je pense est un excellent livre sur la conception pour la conception sur le web.

Il existe des tonnes d'excellentes ressources Web, notamment SmashingMagazine.com et PSDTuts.com, qui fournissent d'excellents articles actuels dans le monde du design et de la technologie Web.

Je voudrais également jeter un coup d'œil à la compréhension des principes de HCI si vous cherchez spécifiquement à devenir un concepteur UX.

Bonne chance et bonne conception!

Je suis vraiment intéressé à apprendre à créer une interface utilisateur de premier ordre pour les sites Web, les applications mobiles, etc.

D'accord, c'est un vaste sujet. Vous voulez créer des sites Web "beaux", "haut de gamme", d'aspect professionnel. Donc, vous devez savoir ce qui fait que les gens perçoivent quelque chose comme "beau", non? Heureusement pour vous, la beauté n'est pas vraiment subjective.

L'une des clés d'un beau design visuel est l' harmonie .

Le manque d'harmonie est ce qui donne à vos créations un aspect amateur.

Et, la meilleure chose est que l'harmonie visuelle se résume aux mathématiques. Il ne s'agit pas d'avoir une sensation d'intestin.

Comme d'autres l'ont souligné, je recommanderais de concevoir vous-même des sites Web. Essayez d'appliquer les principes de conception que vous apprenez au lieu d'utiliser un framework prêt. Cela peut être difficile au début, mais cela vous aidera à devenir meilleur.

Comment intégrer l'harmonie dans la conception d'un site Web

Voici un exemple pratique et un petit exercice amusant que vous pouvez faire maintenant.

Une façon que je préfère personnellement est d'utiliser une échelle modulaire pour dimensionner les éléments du site Web dans des proportions harmonieuses. Un site Web qui peut vous aider à générer une échelle modulaire est celui-ci: modularscale.com

L'avantage de l'utilisation d'une balance modulaire est qu'elle permet de prendre des décisions de dimensionnement aussi facilement que de choisir un nombre sur la balance.

Par exemple, dimensionnons les en-têtes d'un site Web (pour communiquer la hiérarchie visuelle).

Disons que nous avons cette échelle modulaire basée sur la taille de police du corps 19px que j'ai choisie (19px parce qu'elle correspondait mieux à la police que j'utilisais, mais vous pouvez ignorer cette étape et aller avec la taille par défaut 16px) et le rapport 1,412 (Non besoin d'entrer dans les détails pourquoi j'ai choisi ce ratio. N'importe quel ratio fera mieux que pas de ratio pour vos projets.):

En le regardant, je choisirais le H1 à 2,815em, le H2 à 1,994em et le H3 à 1,412em. 3 premiers chiffres plus grands que la taille de la police du corps. Facile, pas vrai? Le corps du texte serait 1em (dans mon cas 19px). Ensuite, je dimensionnerais le H4-H6 à 1em et utiliserais le contraste (poids ou style de police différent) pour les différencier du corps du texte.

Alors essayez ceci:

1. Générez votre propre balance modulaire
2. Obtenez un document HTML simple (contenu réel, veuillez ne pas Lorem Ipsum)
3. Utilisez l'échelle pour dimensionner les titres.
4. Essayez ensuite d'utiliser l'échelle pour d'autres décisions de dimensionnement (marges, rembourrages, etc.)

Ce n'est qu'un petit pas vers de meilleurs designs, mais j'espère que cela vous aidera.

Si vous avez trouvé cela utile, vous pouvez lire mon autre liste de 7 conseils pour les concepteurs de sites Web débutants qui connaissent HTML et CSS

PS: Vous avez vraiment beaucoup de lecture à faire

Comme d'autres l'ont dit, lisez:

• Les éléments de la conception graphique par Alexander White
• Les éléments du style typographique par Robert Bringhurst
• Ne me faites pas penser par Steve Krug

En outre, voici une énorme liste de ressources en ligne comme les blogs et les communautés à surveiller: enboard.co/webdesign/