Comment créer de superbes interfaces dans PhotoShop, etc.


8

En tant que développeur voulant être concepteur, 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 quoi que ce soit lié à la conception, à l'exception de HTML et CSS.

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

Y a-t-il un livre, un tutoriel, etc. que vous recommandez?

Merci!

Réponses:


4

Pour l'interface utilisateur, je recommande d'utiliser Fireworks sur Photoshop. Photoshop est idéal pour les illustrations créatives et complexes (imprimées ou Web), mais à mon avis, un outil trop complexe pour l'interface utilisateur Web.

Fireworks est spécialement conçu comme un outil de création orienté Web où Photoshop ne se trouve pas. L'ensemble d'outils pour Fireworks est conçu pour créer une interface utilisateur Web, pas le travail créatif complexe proposé par Photoshop.

Fireworks utilise un ensemble d'outils très similaire à Photoshop, moins le ballonnement, de sorte que vous pouvez faire tout ce dont vous avez besoin pour créer une interface utilisateur Web.

Fireworks fait également partie d'Adobe Creative Suite, donc si vous avez Photoshop, vous devriez également l'avoir.

Matériel de référence, non spécifique à Fireworks mais UI en général;

http://www.jankoatwarpspeed.com/

Je recommanderais fortement de lire ses articles et de regarder son travail pour trouver l'inspiration. L'interface utilisateur comporte deux aspects qu'il couvre très bien: l'interface et l'expérience d'utilisation de l'interface. Aussi appelé UI et UX.

Vous apprendrez à utiliser l'application grâce à des didacticiels en ligne. Envato possède un excellent réseau de didacticiels http://tutsplus.com/ , étant donné que leur site principal de didacticiel pour le Web est orienté vers Photoshop, mais la plupart de ce qu'ils font dans Photoshop se fait de la même manière, ou d'une méthode similaire, dans Fireworks.

Je me retrouve également très souvent à mettre en signet des sites qui ont des traits de conception uniques ou des éléments d'interface utilisateur qui, dans certains scénarios futurs, fonctionneraient bien pour un projet. Par exemple, une structure d'onglets unique, un style accordéon ou même un pager.

L'interface utilisateur de conception à un niveau de base est décomposée en zones d'affichage des données. Puisque vous avez une formation de développeur, vous savez comment présenter des données d'un point de vue logique (Menu, accordéons, onglets, etc.). Maintenant, il s'agit simplement de créer cette interface utilisateur à l'aide de ces contrôles ou modules d'un point de vue visuel.

Quelques lectures supplémentaires sur UX:

http://uxmovement.com/

Ayant également une formation de développeur, je peux vous dire que lorsque je crée mes applications, la première étape consiste à créer l'interface utilisateur qui à son tour définit la fonctionnalité des applications. Mes illustrations créées servent à la fois de valeur artistique pour l'application mais aussi de définition de fonction. Je construis toujours ma logique autour de l'œuvre achevée, jamais l'inverse. Cela signifie toujours que je place l'utilisateur en premier.

J'espère que cela vous donne au moins un point de départ.


1

Tu es chanceux. Beaucoup de gens sont venus dans le monde de la conception Web en posant la même question. Souvent, vous verrez une équipe de personnes, composée d'au moins un codeur et un graphiste. Bon choix avec Photoshop - c'est ce avec quoi je m'en tiens.

Avec la dernière version d'Adobe Photoshop, CS5, il est devenu extrêmement avancé - capable d'exécuter des tâches complexes avec des outils simples, ou encore des tâches plus complexes avec des outils complexes. Mais je vous préviens, l'apprentissage de toutes les fonctionnalités intéressantes de Photoshop peut entraîner un manque de nutriments. :)

Voici un tutoriel qui couvre les bases afin que vous puissiez obtenir le swing des choses:

Une fois que vous avez tout compris, j'ai trouvé un tas de sites sur Google qui proposent des didacticiels de conception vraiment innovants.

Vous devrez peut-être apprendre certaines techniques. Une astuce, brillante est généralement une bonne étape de nos jours. Pour obtenir un design vraiment unique, trouvez les fonctionnalités que vous aimez dans n'importe quel modèle de site Web, puis utilisez-le à votre manière.

J'espère que cela a aidé. Laissez un commentaire si vous avez besoin de plus d'informations.


Je vous remercie. Une question: que voulez-vous dire par "brillant"? merci
donald

Rendre les choses brillantes - boutons, barres de navigation, en-têtes, etc. boonage.pjss2.net/2007/04/15/perfect-shine-button-or-icon
Christopher
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.