UI Design Series #01 : Designer une Login Box avec Photoshop
ERROR
00:00
00:00

TUTO UI Design Series #01 : Designer une Login Box avec Photoshop

Adrien Gazaix
8,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans le 1er numéro de cette série de vidéos consacrée à l'UI Design, nous allons voir ensemble les étapes essentielles pour designer une login box avec le logiciel Photoshop.
Celle-ci permettra à l'utilisateur de se connecter à son espace personnel ou d'utiliser le lien pour retrouver son mot de passe.

Toutes les étapes du processus seront révélées ainsi que des astuces pour améliorer votre workflow et préparer au mieux votre fichier PSD pour l'intégrateur.

Au programme de ce tuto UI Design sous Photoshop

Voici les notions abordées dans ce tutoriel :

  • Qu'est-ce que l'UI Design ?
  • Qu'est-ce que l'UX design ?
  • Pourquoi les deux sont indissociables ?
  • Trouver une idée de ce que l'on va faire
  • Lister les éléments indispensables à cette login box
  • Faire un zoning sur papier
  • Choisir des polices
  • Choisir une palette de couleurs sur le visuel ou sur des sites externes
  • Insérer une image et la flouter pour créer un background
  • Utiliser un dégradé en mode superposition pour donner une ambiance
  • Utiliser les formes de rectangles pour créer la base de la login box
  • Créer des masques pour positionner notre visuel
  • Ajouter des ombres portées pour créer différents plans dans l'espace
  • Jouer avec la typographie (taille, graisse, espacement...) pour ajouter un slogan par-dessus le visuel
  • Ranger les calques par dossiers avec des couleurs et par ordre d'apparition dans la maquette
  • Ajouter des règles pour créer un padding et ainsi faciliter le positionnement des différents éléments du formulaire
  • Insérer une icône
  • Créer des éléments d'interface (champs, bouton, lien...)
  • Imaginer l'interaction de l'utilisateur avec les éléments
  • Jouer avec les espaces blancs afin de regrouper certains éléments et harmoniser le tout

Ce tutoriel s'adresse aux débutants et vous pourrez reproduire facilement les manipulations en même temps que la vidéo.

Vous trouverez dans les sources tout le nécessaire à la réalisation de la login box : les fonts, la palette de couleur, le fichier PSD final...
Je reste disponible dans le salon d'entraide pour toutes les questions que vous pourriez vous poser pendant ou après le visionnage de ces vidéos.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Introduction
Leçon 2
UI / UX Design - Définitions et différences
Leçon 3
Les étapes essentielles avant de se lancer sur Photoshop
Leçon 4
Background et base de la login box
Leçon 5
Designer le slogan et les éléments d'interface
Leçon 6
Conclusion

Plan détaillé du cours

Leçon 1Introduction
02m24s
Leçon 2UI / UX Design - Définitions et différences
05m46s
Leçon 3Les étapes essentielles avant de se lancer sur Photoshop
11m19s
Leçon 4Background et base de la login box
16m36s
Leçon 5Designer le slogan et les éléments d'interface
29m26s
Leçon 6Conclusion
01m55s

Aperçus

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

Photoshop CS6, Photoshop CS5, Photoshop CC

Quel est le niveau requis pour suivre ce tuto ?

débutant

Dans les fichiers sources

Les fonts, le lien vers l'image utilisée, la palette de couleur, le zoning sur papier, et bien sur le fichier PSD final.

Attendez ! 🤗

Accédez à plus de 1351 tutos gratuits

Notre politique de protection des données