Share
Ce que vous allez créerDans ce tutoriel, je vais vous apprendre à concevoir une application de journal Web simple et sophistiquée dans Sketch, pour les ordinateurs de bureau et mobiles. Nous utiliserons l’esthétique VSCO comme source d’inspiration et, à la fin de ce didacticiel, vous découvrirez nombre des fonctionnalités les plus importantes de Sketch..
Outre ces compétences spécifiques à une application, vous comprendrez mieux la définition des polices de caractères et de la présentation à l'aide d'une échelle modulaire. Nous utiliserons quelques techniques de base et intermédiaires dans Sketch. Commençons!
Vous aurez besoin des éléments suivants pour pouvoir suivre:
Avant d'ouvrir Sketch et de créer un nouveau document, il convient de souligner que ce concept est entièrement théorique. Il faudrait une analyse de marché beaucoup plus approfondie avant de pouvoir en faire un produit réel et utilisable. Passionné de narration en ligne avec de belles photos, j'ai créé ce concept pour vous apprendre à suivre les tendances du Web du point de vue d'un designer..
Quand je commence un projet, je commence toujours par la typographie car je suis fermement convaincu que la typographie est l'outil le plus important dont disposent les concepteurs en communication..
Pour le corps du texte et les titres plus volumineux, j'ai choisi Merriweather, une police empattée inspirée d'anciennes faces de livres, qui convient parfaitement pour la narration d'histoires et de voyages. Sur les écrans haute résolution, on se croirait dans un véritable journal imprimé.
D'autre part, pour les éléments d'interface utilisateur courants tels que les boutons et les étiquettes, je voulais quelque chose de moderne. J'ai donc choisi Montserrat, une police de caractères sans empattement claire et simple..
Tout d'abord, j'aimerais écrire un peu plus sur la manière dont j'aborde mes paramètres de mise en page et de typographie. Tim Brown, Type Manager pour Adobe Typekit, a créé un outil fantastique appelé Modular Scale. Cet outil est excellent: après avoir défini notre taille de texte idéale et suggéré un nombre important, il divisera et multipliera ces chiffres par une valeur mathématiquement connue, comme le nombre d'or ou le cinquième parfait. Dans un instant, lorsque nous établirons notre hiérarchie typographique et les éléments de base de notre mise en page, je me référerai toujours à ces chiffres..
Remarque: Évidemment, dans certains cas, nous devons enfreindre cette règle, mais cela nous fournira un équilibre naturel dans notre mise en page et notre typographie, ce qui est agréable à regarder..
Je règle la taille de texte idéale sur 18 px et définit 670 px comme un nombre important car il s'agira de la largeur réelle utilisable de notre mise en page mobile..
Après avoir ouvert Sketch, sélectionnons le Artboard (A) option dans le Insérer menu.
Pour notre vue mobile, je vous recommande de choisir l'iPhone 6 dimensions, mais si vous avez un autre modèle d'iPhone, il est préférable de choisir celui-ci. L'utilisation de Sketch présente un avantage considérable, en ce sens qu'elle vous permet de reproduire votre travail sur votre appareil iOS en temps réel avec Sketch Mirror, sans exporter ni transférer d'images. Le miroir est un élément essentiel de mon processus de conception, car il me permet de voir immédiatement le résultat final de mon travail dans ma main..
Pour activer cette fonction, vous aurez besoin de l'application Sketch Mirror de l'App Store. Puis cliquez sur le Miroir icône dans Sketch (assurez-vous que vos périphériques sont sur le même réseau ou connectés via un câble USB).
Pour la vue du bureau, j'ai choisi le Bureau HD toile, largeur 1440px.
Pointe: plus tard, nous pouvons modifier la hauteur de notre planche graphique en modifiant les chiffres sur le panneau de l'inspecteur.
Une fois que nous avons les planches graphiques appropriées, il est temps de définir des guides afin que notre mise en page dispose de suffisamment d'espace et ait un aspect équilibré. Pour allumer les règles et les guides de base, allez à Voir> Afficher les règles (R) . Ensuite, sélectionnez le milieu de notre toile mobile, qui sera à 375px et mettez également une marque à la première et la dernière 40px, de sorte que cela fonctionnera avec un rembourrage horizontal de 40px.
Pour créer un repère, cliquez sur la règle à 40px, à 375px et à 710px.
Dans le cas de la vue du bureau, nous définissons également un guide central (720px) et un remplissage de 100px.
Remarque: Si vous souhaitez créer une maquette réaliste avec une barre de menu Safari originale, vous pouvez créer une capture d'écran et coller l'image rognée ou télécharger le modèle d'interface graphique pour iPhone 6 (iOS 8) créé par (l'ancien) Teehan + Lax équipe.
Pointe: Il est bon de savoir que Sketch possède également un modèle iOS, que vous pouvez trouver sous Fichier> Nouveau à partir d'un modèle> Conception d'interface utilisateur iOS.
Pour créer notre barre de navigation supérieure, sélectionnons le Rectangle (R) outil.
Pointe: Je vous recommande vraiment d'apprendre les raccourcis les plus importants, car ils sont faciles à utiliser. Dans la plupart des cas, la touche de raccourci est la première lettre de notre outil. Ainsi, dans le cas de Rectangle, R, en cas d'ovale c'est O, en cas de ligne c'est L.
Avec l’outil Rectangle, créez un rectangle de 750 pixels de large et 120 pixels de haut, qui a # F9F9F9 Couleur de fond.
Pointe: En termes de couleurs, j'utilise toujours des nombres HSBA (teinte, saturation, luminosité, alpha), car il est facile de les modifier et d'imaginer le résultat à l'avance..
Choisissons le Ovale (O) outil et en appuyant sur la Maj + Alt clés, dessiner un parfait 80px cercle. Sur le côté droit, dans le panneau Inspecteur, cliquez sur le bouton Remplit bouton, et sous le quatrième onglet télécharger une photo de profil.
Pointe: Si vous appuyez sur le Alt touche et déplacez votre curseur, vous pouvez voir les distances en pixels entre les éléments sélectionnés.
Sélectionnez le Outil Texte (T) et placez un nom à côté de la photo de profil avec un remplissage à gauche de 20 pixels. Définissez la taille de la police sur 22 px et la couleur de la police sur # 9E846E. Vous pouvez définir des lettres majuscules dans Type> Majuscule menu.
Placez le texte "Nouvelle histoire" avec les mêmes paramètres sur le côté droit de notre planche d’art avec un rembourrage droit de 20 pixels..
Maintenant, nous allons créer notre première icône, qui sera une icône '+'.
Créons un rectangle de 36x6 pixels avec notre outil Rectangle (R), qui a la même couleur que notre texte. Une fois cela fait, dupliquez la forme résultante.
Sélectionnez le second et faites-le pivoter de 90 degrés sur le panneau de l'inspecteur (à droite).
Après avoir parfaitement placé les rectangles les uns sur les autres, faites glisser le premier et déposez-le dans le second sur le panneau des calques. Ce faisant, nous fusionnons les deux calques distincts en une seule icône 36x36px.
Dans le cas de notre vue sur le bureau, nous avons également le même rectangle de navigation sur toute la largeur avec une hauteur de 70 pixels et une opacité de 80%..
La taille du texte du bouton de menu est un peu plus petite; 14px avec un rembourrage de 40px et un #CCCCCC ligne de séparation.
Dans le cas de la vue mobile, nous allons créer une barre de navigation inférieure fixe dans laquelle l'utilisateur peut choisir entre les pages Grille, Emplacements favoris, Rechercher et Profil..
Comme pour la navigation du haut, nous commencerons par une largeur totale de 100 pixels de haut., #FFFFFF rectangle avec une opacité de 90%. Plaçons un 1px # E6E6E6 ligne en haut de ce rectangle et divisez-le en quatre colonnes égales.
Toutes nos icônes mesurent 50 px et leur couleur est # 666666.
Pointe: vous pouvez créer votre propre icône 'Grille' en organisant neuf rectangles de 14x14px avec un remplissage de 4px.
Pour l’image de héros, créons un rectangle de 850px de hauteur sur toute la largeur et remplissez-le avec une photo, comme dans le cas de la photo de profil. Pour que le texte reste lisible, j'ai appliqué un calque noir sur l'image avec une opacité de 20%..
Dans le cas de l'image de bureau du héros, je recommande 1000px pour la hauteur. Assurez-vous également que l'image se trouve sous la barre de navigation..
Pour le titre et le sous-titre, les tailles de police sont respectivement 60px et 24px. La police du titre est Merriweather Bold et la police des sous-titres est Montserrat Regular..
Le dernier élément de notre image de héros est le bouton "Get Inspiration", dans lequel la taille de la police est de 24px avec un espacement des lettres de 1,33px. Le bouton proprement dit mesure 338 x 89 pixels avec une bordure blanche de 3 pixels de large. Plaçons le bouton à 70 pixels du bas de l'image.
Pour l'affichage de bureau, je recommande une taille de police plus petite, 18px.
Dans cette étape, nous allons créer un endroit spécial pour l'histoire la plus populaire. Pour ce faire, commencez par un rectangle rempli d'image de 670 x 480 pixels, doté d'une icône spéciale dans le coin supérieur droit. Avec cette icône, tout le monde peut signaler ses voyages préférés sur le site..
Cette icône a un cercle blanc de 80 x 80 pixels avec une épaisseur interne de 2 pixels. L'icône 'pin' a une largeur de 12 pixels et nous utilisons un numéro régulier de 18 pixels de Montserrat. Toute cette icône présente une opacité de 70% et un rembourrage supérieur et droit de 15 px.
Dans le cas de la vue du bureau, cette image est 1240x750px et l'icône "emplacement favori" est 50x50px.
Nous pouvons maintenant créer notre première carte. Dans un premier temps, créez un rectangle rempli d'image de 670x522px, puis un autre de 670x435px. #FFFFFF rectangle. Placez le deuxième rectangle au-dessus du premier.
Créez un troisième rectangle de 670x744px et recouvrez-le des deux précédents. Placez cette couche sous les précédentes. Donnez une petite ombre à cette couche, ce qui la fera ressortir un peu.
Le rayon de la frontière est essentiel dans la conception de notre carte, donc réglez-le sur 5px. Pour voir ce rayon sur chaque couche, cliquez sur cette couche d'ombre et utilisez-la comme masque..
Etant donné que sur mobile, nous n'avons pas d'état de survol, nous utiliserons la vue de survol comme vue standard, afin que toutes les informations soient visibles immédiatement..
Après avoir sélectionné chaque couche connectée à cette conception de carte, nous pouvons Groupe (-G) ensemble, nous pouvons les dupliquer facilement en appuyant sur la touche Alt clé et en déplaçant le groupe d'origine vers le bas (alternativement, nous pouvons dupliquer avec ⌘-C et ⌘-V méthode, aussi.)
Pointe: Organiser nos couches en groupes est extrêmement utile dans les grands projets comme celui-ci..
En mode bureau, nous pouvons utiliser les mêmes cartes. Pour des résultats plus sophistiqués, je suggère d’affiner un peu les rapports et la taille des polices..
N'oubliez pas que nous avons une vue en survol disponible sur le bureau, nous pouvons donc créer une version plus simple de la carte par défaut, révélant la plus compliquée lorsque l'utilisateur survole le curseur au dessus de la carte..
Avec l'aide de cette section de carte, il est possible de filtrer et de rechercher des trajets par lieu. Les résultats seront affichés sous forme de collections écrites par plusieurs auteurs.
Créez un rectangle de 750 x 850 pixels et remplissez-le avec une capture d'écran simple de Google Maps. Pour la barre de recherche, placez un autre rectangle en haut de ce rectangle avec une opacité de 80%..
Pointe: Pour un alignement plus facile, créez un carré à gauche de la barre de recherche. Après cela, nous pouvons placer notre icône de recherche au bon endroit.
j'ai choisi # B3483E comme couleur principale pour mon interface de carte. Cette couleur a été inspirée par Pantone Marsala, la couleur Pantone de l'année 2015.
Lorsqu'une personne recherche un emplacement spécifique, les résultats sont affichés sous forme de petits cahiers de journal. Chaque livre de journal est un rectangle rempli d'images de 320 x 414 pixels, avec un soupçon d'ombre..
Nous pouvons définir le rayon de la bordure sélective en sélectionnant sa forme et en appuyant sur la Entrer clé. Si nous sélectionnons l'un des points vectoriels, nous pouvons leur attribuer des valeurs de rayon de bord distinctes. Définissez les rayons supérieur et inférieur droit sur 12px.
Dans la vue du bureau, presque tout est identique, sauf que nous positionnons les journaux à côté de la carte et pas sous la carte.
Concevoir des fiches de petits articles sera similaire à la création des plus grandes, à la différence que nous supprimons la description et la partie résumé des récits. De cette façon, nous pouvons afficher plus d'informations dans le même espace, afin que l'utilisateur puisse consulter plus de contenu dans le même temps..
Dans la vue du bureau, outre la réduction de la taille des cartes, nous les trions également dans une grille à trois colonnes. Je pense que cela nous donnera un moyen pratique et rapide de découvrir et d'explorer de nouveaux contenus..
Avant de terminer notre projet avec le pied de page, il est inévitable que nous fournissions une section d'appel à l'action..
Comme toujours, nous avons besoin d’un rectangle rempli d’images de 750x1000px. Afin de rendre le texte lisible, nous ajoutons un calque dégradé blanc à notre image. Notre gradient est de #FFFFFF opacité 30%, à #FFFFFF opacité 70%, donc nous avons seulement besoin de modifier la quantité d'opacité.
Pointe: Pour améliorer la lisibilité de notre texte, un petit truc, mais qui reste parfois important, consiste à lui ajouter des ombres. Dans ce cas, j'ai appliqué une légère ombre sur le titre et le texte du paragraphe..
Pour le bas de page, nous utiliserons une combinaison d'icônes de médias sociaux et de boutons de texte..
Assurez-vous que nos icônes de réseaux sociaux restent accessibles sur de petits écrans mobiles. Faisons au moins 44px de hauteur ou de large.
Pour la vue du bureau, nous pouvons créer un style de navigation supplémentaire, mais nous devons faire attention à cela et l'utiliser uniquement au-dessus de la largeur de 1440px. C'est équivalent à la navigation inférieure fixe dans la vue mobile.
Nous avons terminé la conception de notre magnifique application Web. Après avoir suivi ce tutoriel, j'espère que vous serez plus confiant dans l'utilisation de Sketch pour les grands projets. Jetons un coup d'oeil à un mashup des produits finis:
Je suis curieux de savoir comment vous avez trouvé le processus, alors n'hésitez pas à laisser des commentaires et des questions dans les commentaires..
Accentsconagua