web-dev-qa-db-fra.com

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

En tant que développeur qui souhaite devenir designer, je suis vraiment intéressé par la création d'une interface utilisateur de premier ordre pour les sites Web, les applications mobiles, etc. Cependant, je ne connais rien à Photoshop ni à quoi que ce soit en rapport avec le design, à l'exception de HTML et CSS.

Où devrais-je commencer? Comment apprendre à créer de superbes sites Web et interfaces?

Existe-t-il un livre, tutoriel, etc. que vous recommandiez?

Merci!

8
donald

Pour l'interface utilisateur, je recommande d'utiliser Fireworks par rapport à Photoshop. Photoshop est idéal pour les œuvres créatives et complexes (impression ou Web), mais à mon avis un outil trop complexe pour l'interface utilisateur Web.

Fireworks est spécifiquement conçu comme un outil de création orienté Web, contrairement à Photoshop. L'ensemble d'outils de Fireworks est conçu pour la création d'une interface utilisateur Web et non pour le travail créatif complexe proposé par Photoshop.

Fireworks utilise un jeu d’outils très similaire à Photoshop, moins le volume. Vous pouvez donc faire tout ce dont vous avez besoin pour créer une interface utilisateur Web.

Fireworks fait également partie de la suite Adobe Creative. Par conséquent, si vous utilisez Photoshop, vous devriez également en disposer.

Matériel de référence, non spécifique à Fireworks mais à l'interface utilisateur en général;

http://www.jankoatwarpspeed.com/

Je recommande fortement de lire ses articles et de regarder son travail pour s’inspirer. Il couvre très bien 2 aspects de l'interface utilisateur: l'interface et l'expérience d'utilisation de l'interface. Aussi appelé UI et UX.

Vous pouvez apprendre à utiliser l’application grâce à des tutoriels en ligne. Envato a un excellent réseau de tutoriels, http://tutsplus.com/ , dont le site Web principal pour les tutoriels est orienté Photoshop, mais la plupart de ce qu’ils font dans Photoshop s’effectue de la même manière ou selon une méthode similaire. , dans Fireworks.

Je me retrouve également assez souvent dans des sites de bookmarking qui présentent des caractéristiques de conception uniques ou des éléments d'interface utilisateur qui, dans un scénario futur, 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 d’un niveau de base est divisée en zones d’affichage des données. Étant donné que vous avez un arrière-plan de développeur, vous savez comment présenter les données dans une perspective logique (menus, accordéons, onglets, etc.). Maintenant, il ne s'agit plus que de construire cette interface utilisateur en utilisant ces contrôles ou modules d'un point de vue visuel.

Quelques lectures supplémentaires sur UX:

http://uxmovement.com/

Ayant également une expérience de développeur, je peux vous dire que lorsque je construis mes applications, la première étape consiste à créer l'interface utilisateur qui, à son tour, définit la fonctionnalité des applications. Les œuvres que j'ai créées servent à la fois de valeur artistique pour l'application et de définition des fonctions. Je construis toujours ma logique autour de l'œuvre d'art achevée, jamais l'inverse. Cela signifie toujours que je mets l'utilisateur en premier.

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

4
Bjorn Aadnesgaard

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

La dernière version d'Adobe Photoshop, CS5, est devenue extrêmement avancée: elle est capable d'exécuter des tâches complexes avec des outils simples, voire 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 d'éléments nutritifs. :)

Here est un tutoriel qui couvre les bases afin que vous puissiez avoir le swing de choses:

Une fois que vous obtenez tout cela, Itrouvéagroupe de sites = sur Google qui propose des tutoriels de conception vraiment innovants.

Vous devrez peut-être apprendre certaines techniques. Un conseil, brillant est généralement une bonne étape ces jours-ci. Pour obtenir un design vraiment unique, recherchez les fonctionnalités que vous aimez parmi les modèles de sites Web, puis utilisez-les à votre manière.

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

1
Christopher