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

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.