Dans le 1er numéro de cette série de vidéos sur 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.
Table des matières de cette formation Photoshop (durée : 1h07m)
-
- Introduction gratuit 00:02:24
- UI / UX Design - Définitions et différences 00:05:46
- Les étapes essentielles avant de se lancer sur Photoshop 00:11:19
- Background et base de la login box 00:16:36
- Designer le slogan et les éléments d'interface 00:29:26
- Conclusion 00:01:55
- Fichiers sourcestélécharger
- Certificat
Formateur : Adrien Gazaix
-
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 sourcesLes fonts, le lien vers l'image utilisée, la palette de couleur, le zoning sur papier, et bien sur le fichier PSD final.
