Le début d'un App-Designdoit toujours être réfléchi et attrayant. Dans ce tutoriel, tu apprendras comment retravailler le HomeController de ton app pour ajouter plus d'interactivité et d'attrait visuel. Allons-y !
Principales conclusions
- Le Home Controller peut être rendu plus attrayant grâce à une utilisation créative des couleurs et des mises en page.
- Les fichiers SVG offrent des avantages en termes de modifiabilité et de netteté.
- L'utilisation de dégradés et de différentes sections peut considérablement améliorer l'expérience utilisateur.
Guide étape par étape
Tout d'abord, jetons un œil au Home Controller existant. Ici, tu remarquera que nous avons différentes sections : un aperçu des cours, un chat interactif et le profil. Le focus est sur le fil d'accueil. Dans ce tutoriel, nous allons ajuster la navigation et optimiser le design.
Étape 1 : Réviser la navigation
Pour améliorer le design de ton Home Controller, commençons par retravailler la barre de navigation. Nous allons d'abord supprimer les éléments existants comme la navigation.
Ajoutons maintenant un rectangle comme nouvel en-tête, devant avoir une hauteur de 250 pixels. Le rectangle ne devrait pas avoir de bord pour garantir un look épuré.
Étape 2 : Ajouter un en-tête et un texte
À l'étape suivante, choisis la couleur du document et ajoutes un nouveau texte. Mets le texte sur « Tous les cours » et expérimentes avec les styles de texte. Une taille recommandée pour l'en-tête serait de 110 pixels. Il est important que l'en-tête soit ajusté à la barre d'état.
Étape 3 : Ajuster les arrière-plans et les couleurs
Un design attrayant inclut également l'utilisation de dégradés. Reviens à ton rectangle et choisis un dégradé qui soit à la fois dynamique et harmonieux dans l'ensemble de la mise en page. Un dégradé diagonal ajoute plus de profondeur.
Étape 4 : Ajouter une nouvelle section
Nous allons maintenant concevoir une nouvelle section en dessous de l'en-tête. Ajoute un autre rectangle avec une hauteur de 350 pixels et supprime la bordure. Ici, tu peux choisir une couleur contrastante pour donner plus de vie à l'app.
Étape 5 : Contenu et icônes
Dans cette section, nous pourrions ajouter un bouton pour offrir plus de contenu à l'utilisateur, comme une vidéo. Ajoute le texte « Power of Mobility » au format H3 et positionne-le à 16 pixels du haut.
Ajoutons maintenant une icône qui peut être créée soi-même ou importée depuis des ressources. Il est recommandé d'utiliser des fichiers SVG, car ils sont facilement modifiables.
Étape 6 : Créer une section pour la version Pro
Crée une autre section qui permet aux utilisateurs d'acheter la version Pro de l'app. Ajoute un nouveau rectangle d'une hauteur de 250 pixels et place ton appel à l'action « Obtenir la version Pro » là.
Il est important que le texte soit conçu de manière accrocheuse. Tu peux utiliser une variante de couleur plus sombre pour t'assurer que le texte est bien lisible.
Étape 7 : Organisation par groupes
Crée des groupes à partir des différentes sections pour améliorer la clarté. Cela t'aidera à mieux organiser les différentes zones.
Étape 8 : Dernières modifications et ajustements
Enfin, tu peux revoir tous les éléments des sections et ajuster les espacements et positions si nécessaire, pour garantir une mise en page épurée.
Résumé - Home-Redesign : Votre chemin efficace vers une interface utilisateur attrayante
Tu as maintenant appris comment redessiner ton Home Controller pour le rendre plus interactif et en même temps visuellement attrayant. Grâce à l'utilisation créative de dégradés, à l'implémentation d'icônes SVG et à la structuration en sections, tu as considérablement amélioré la mise en page de ton app.
FAQ
Comment puis-je m'assurer que mon en-tête est bien conçu ?Assure-toi d'utiliser des tailles de texte et des combinaisons de couleurs appropriées qui sont cohérentes dans l'ensemble du design.
Quels avantages ai-je à utiliser des fichiers SVG ?Les fichiers SVG sont évolutifs et conservent leur netteté, quelle que soit le niveau de zoom.
Comment puis-je ajouter des dégradés dans Sketch ?Sélectionne l'élément souhaité, va dans les options de remplissage et choisis « Dégradé » pour créer des dégradés attrayants.
