Accentsconagua
Share
Ce que vous allez créerDans ce didacticiel, je vous expliquerai comment créer un design réactif dans Sketch. Pour rester précis, je vais parler d'une page de renvoi réactive que j'ai conçue il y a quelque temps pour une application de voyage. Allons droit au but!
Chaque projet de conception a une sorte de configuration. Pour cette question spécifique, je vais parler brièvement du contenu et des structures filaires avant de me lancer dans le processus de conception adaptative dans Sketch..
Il est généralement recommandé de se procurer le contenu avant de commencer un projet de conception. C'est exactement comme cela que je lance tous mes projets (pour ce que cela vaut, cela fait partie de mon contrat - quelque chose que je vous recommande de mettre en pratique aussi). Ce tutoriel se concentre sur le côté interface utilisateur, en omettant les questions importantes concernant l'UX telles que la raison pour laquelle certains contenus ont été choisis, les objectifs de page, etc..
Tout en discutant du contenu avec votre client ou votre équipe, vous devrez réfléchir au contenu sur les petits et les grands écrans. Je suggère d'abord d'écrire le contenu pour mobile, puis de tout écrire dans un document Google. Ensuite, ouvrez le document sur votre téléphone pour déterminer s’il est correct ou trop volumineux. Si vous faites défiler des pages et des pages de contenu écrit sur votre téléphone, vous savez que vous devez y remédier immédiatement..
Toujours, quoi qu'il en soit, réduisez votre contenu de manière significative.
"Supprimez la moitié des mots sur chaque page, puis la moitié de ce qui reste." -Steve Krug, ne me faites pas penser
Une fois que vous êtes satisfait du contenu mobile, vous pouvez ajouter davantage à la version pour tablette et ordinateur. Les écrans plus grands ont plus d’écran immobilier pour traiter des informations plus détaillées.
Vous passerez par des révisions, bien sûr. Ne vous attardez pas trop à ce stade. Le contenu devrait être proche de la version finale mais il ne doit pas être écrit dans la pierre.
Pour en savoir plus sur une approche axée sur le contenu, lisez l'article de James Deer:
Convenir du contenu de toutes les versions du site est la première étape de la configuration de votre conception. Vous savez maintenant à quoi s'attendre. Il est tout à fait correct de conserver le même contenu tout au long, tout comme de faire apparaître ou disparaître certains contenus en fonction de la taille de l'écran..
Le type de contenu le plus courant sur le Web est le texte écrit. Cependant, il y a d'autres choses, y compris des images et des graphiques (des photographies ou des illustrations), des vidéos, des citations, des fichiers audio (des podcasts), des jeux ou même du contenu intégré via des iframes..
Il n'est pas nécessaire que toutes les vidéos et tous les épisodes de podcast soient clairs. À tout le moins, avoir une description du contenu visuel ou auditif. C'est ce que j'ai fait pour ce client. Je savais à peu près quel type de graphisme je souhaitais pour chaque section afin d'expliquer davantage la proposition de valeur de chaque section. Mais, je n'avais pas les graphiques réels au moment où le contenu a été discuté. Je viens de le décrire.
La prochaine étape consiste à représenter le contenu visuellement. Avec ce projet, j'ai choisi de réaliser des structures filaires simples et basse fidélité. Je voulais dessiner rapidement et visuellement le contenu. J'ai créé deux structures filaires, un mobile et un bureau, car elles avaient chacune des exigences de contenu différentes. Les deux vous donnent une idée générale de la structure visuelle de la page de destination..
Vous pouvez utiliser n'importe quel outil avec lequel vous êtes le plus à l'aise pour les structures filaires, mais j'ai utilisé Sketch ici. Vous pouvez également créer des structures filaires pour stylo et papier basse fidélité. Ça n'a pas d'importance. Vous pouvez même utiliser les techniques décrites plus loin dans ce tutoriel pour créer sensible wireframes.
Passons à la conception d'interface utilisateur réactive avec Sketch.
Nos vies seront plus faciles si nous identifions d’abord un contenu identique dans toutes les variantes et un contenu propre à des écrans spécifiques..
Dans cette conception, les éléments suivants sont présents sur tous les écrans:
Éléments uniques à différentes tailles d'écran:
Parfait. Maintenant, nous pouvons commencer à créer ces éléments de manière appropriée.
Mon bouton de base pour le bureau et la tablette est un rectangle de 352 pixels par 40 pixels avec un rayon de bordure de 5 pixels. Le fond est # 7455FF. Dans les propriétés de redimensionnement, sélectionnez pour épingler l'objet sur ses bords gauche et droit et définir une hauteur fixe..
Vient ensuite le calque de texte, la copie du bouton, avec une police Note Sans UI, gras et une taille de police 16px. C'est blanc ou #ffffff. Sa largeur d'alignement est définie sur auto et il n'y a pas d'autres paramètres définis sur le calque de texte. Si vous le souhaitez, vous pouvez transformer le bouton en symbole, bien que cela ne soit pas nécessaire pour cette conception spécifique, car le bouton n'apparaît qu'une seule fois dans la page..
Lorsque vous combinez les deux éléments en un groupe (ou un symbole), vous devriez pouvoir redimensionner la largeur du bouton sans problème, le texte restant au centre, peu importe la largeur du bouton..
Une autre chose que vous pouvez faire est d’utiliser le plugin Anima pour Sketch. Il vous permet de créer des écrans fluides qui se redimensionnent tout en conservant leurs propriétés communes telles que l’espacement, le remplissage ou la hauteur. C'est génial pour les mises en page avec des formulaires.
Nous pouvons utiliser Anima pour coller différents éléments d’en-tête lors du redimensionnement d’un mobile à un ordinateur. Cela nous donnera également une bonne idée de la manière dont ces éléments se comporteront les uns par rapport aux autres dans des tailles d'écran autres que celles que nous concevons dans les tailles intermédiaires, comme un téléphone plus grand ou une tablette..
Cependant, pour ce que nous faisons aujourd'hui, ce plugin n'ajoute pas grand chose.
Cette conception de la page de destination nécessite quelques grandes et belles rubriques. Dans la version de bureau, h1 est à 72px alors que h2 est à 32px. 72px est beaucoup trop pour le mobile. Nous devrons rendre le cap h1 réactif. Ce n'est pas aussi simple que la typographie fluide est en CSS mais c'est faisable.
Nous devons créer un style pour chaque en-tête h1, puis l'enregistrer en tant que style de texte avec la convention ou la syntaxe de dénomination appropriée. Cela nous permettra de sélectionner plus tard le h1 nécessaire, le cas échéant, lors de la conception du reste de la page. Ce n'est pas parfait et joli manuel, mais ça va.
Pour h1, ce sont les styles suivants: Noto Sans UI, gras, taille 72 (bureau), taille 48 (tablette) et taille 32 (téléphone).
La même syntaxe peut également être appliquée pour organiser les symboles. Par exemple: Nom du style / sous-nom / style spécifique
Ainsi, pour organiser notre typographie, nous pouvons utiliser la syntaxe suivante pour le grand h1 pour les ordinateurs de bureau: Rubriques / H1 / Bureau, pour tablette: Rubriques / H1 / Tablette et pour les téléphones: Rubriques / H1 / Téléphone.
La raison pour laquelle on dit Rubriques / h1 dans la liste déroulante, pour le moment, c'est parce que nous n'avons ajouté aucun autre style. Passons donc sur h2 et ajoutons une autre couche de hiérarchie dans les styles de texte.
Pour le h2, j'utilise les styles suivants: Noto Sans UI, gras, taille 73 (ordinateur de bureau et tablette) et 18 (téléphone). Utilisons la syntaxe suivante pour h2 sur les téléphones: Rubriques / H2 / Téléphone. Pour tablette, nous pouvons faire deux choses ici, nous pouvons la combiner avec un ordinateur de bureau et l’appeler Rubriques / H1 / Desktop + Tablet ou nous pouvons avoir deux styles distincts qui sont simplement les mêmes. J'écris à propos de ce design une fois qu'il est terminé, il est donc un peu partial. Je vais dire, séparons la tablette du bureau parce que c'est une meilleure pratique de conception.
Avec les styles de typographie dans Sketch, vous pouvez vraiment obtenir des détails et une organisation avec leurs règles de syntaxe. Cependant, au moment d'écrire ces lignes, il n'y a aucune fonctionnalité dans Sketch, ni aucun plugin, qui redimensionne la typographie de la même manière que la typographie fluide fonctionne avec CSS. Pour l'instant, il s'agit toujours d'un processus manuel.
Ensuite, nous allons créer des symboles à réutiliser et rendre nos vies un peu plus faciles. Dans cette conception, nous avons beaucoup de témoignages et de citations d'anciens utilisateurs; ils doivent être réceptifs.
Heureusement, le format des témoignages sera le même sur toute la page, nous ne devons donc le faire qu'une fois pour eux. Nous avons d'abord le nom de la personne, puis sa citation. Les deux sont des styles différents, cependant. Appelons d'abord la source. J'ai nommé le style de texte Témoignage / Source. Le style actuel de cet élément est le suivant: Noto Sans UI, gras, taille 14, hauteur de ligne 24. Ensuite, nous avons le témoignage réel. J'ai nommé le style de texte Témoignage / Citation. Son style est le suivant: Noto Serif, régulier, taille 14, hauteur de trait 24.
Pour créer un symbole, sélectionnez les deux éléments de texte et cliquez sur le bouton. Créer un symbole icône en haut à gauche de votre barre d’outils. J'ai nommé mon symbole Témoignage.
Nous devons maintenant modifier le symbole afin qu'il puisse être correctement redimensionné pour différentes tailles d'écran et différentes tailles de devis. Double-cliquez sur le symbole nouvellement créé pour le modifier..
Tout d'abord, nous devons renommer les éléments contenus dans le symbole. Par défaut, le nom d'un calque de texte est créé à partir de son propre contenu textuel. Je les ai renommés Nom de la source et Citation, respectivement.
Ensuite, nous devons ajuster les paramètres de redimensionnement pour les deux éléments de texte. Ils auront les mêmes propriétés de redimensionnement. Ni aura une largeur ou une hauteur fixe. Mais, ils redimensionneront tous les deux de leurs bords gauche et supérieur. Cela garantira que lorsque vous redimensionnerez le symbole, les éléments de texte resteront là où ils appartiennent.
Pour réutiliser le symbole, cliquez sur la liste déroulante située en haut à gauche de la barre d’outils. Insérer et naviguer vers le Témoignages symbole. Puis cliquez n'importe où sur la planche pour le placer. Pour changer le texte, collez le contenu dans les entrées de remplacement appropriées que nous avons renommées auparavant. Redimensionner au besoin.
J'utilise le terme «graphiques réactifs» un peu différemment ici. L'idée est que les graphiques changeront en fonction de la taille de l'écran. Cependant, je devrais toujours faire les graphiques manuellement pour chaque écran. Sauf s’ils sont fluides, comme un élément d’entrée ou un bouton, ils ne peuvent pas être créés automatiquement.
Pour mieux comprendre ce que sont les graphiques réactifs, voici un lien vers un article que j'ai écrit sur les icônes réactives, mais l'idée est exactement la même pour tous les types de graphiques et d'images..
Nous pouvons transformer les cartes d'itinéraire en symboles ainsi que les cartes situées sous la section sociale de la page de destination. Allons plutôt avec les cartes sociales autour du graphique du Jour 3 (c'est un peu plus intéressant).
Une fois encore, sélectionnez la carte et transformez-la en symbole. Double-cliquez dessus pour éditer le symbole. Nous voulons nous assurer qu'il redimensionne bien verticalement et horizontalement.
En commençant par l’arrière-plan, nous souhaitons lui attribuer des propriétés de redimensionnement qui permettent à l’objet de se placer en haut et à gauche. La même chose vaut pour les deux calques de texte. Cependant, nous voulons que l'image, ou l'avatar, soit épinglé en haut à droite. Enfin, n'oubliez pas de changer le titre de ces éléments en quelque chose de plus approprié lorsque nous en annulons le contenu..
Et le tour est joué!
Enfin, nous souhaitons également traiter des petits détails de conception. Dans cette conception spécifique, je réutilise beaucoup la petite ligne violette avec un point. Je tourne aussi cet indicateur violet en symbole.
Ce symbole est constitué d'un cercle de 8 pixels sur 8 pixels avec un arrière-plan # 7455FF. La largeur de la ligne importe peu, mais la valeur par défaut est 122px. Sa hauteur est 2px. Encore une fois, avec le fond # 7455FF.
Dans le symbole, nous devons redéfinir certains paramètres de redimensionnement. Pour le cercle, nous en avons besoin pour rester à la même taille et au même endroit. Nous allons lui donner une largeur et une hauteur fixes et l'épingler au bord supérieur droit. Pour la ligne, nous lui donnerons également une hauteur fixe, mais pas une largeur fixe car nous avons besoin d’agrandir en largeur. Nous allons également épingler le bord droit lors du redimensionnement.
De cette façon, lorsque nous redimensionnerons ce symbole, il ne fera que changer la largeur de la ligne..
Une autre chose que nous pouvons faire est de définir un arrière-plan fluide. Les hauteurs des sections diffèrent entre les dispositions mobiles et de bureau; cela signifie que vous devrez déplacer les éléments d'arrière-plan de haut en bas au bon endroit.
Ici, l'interface utilisateur appelle une bordure blanche de 16 pixels. Cela signifie que le calque d'arrière-plan doit être distant de 16 pixels des bords de la planche graphique. Tout ce que vous avez à faire est de sélectionner le calque d'arrière-plan et, en utilisant soit le plugin Anima, soit les propriétés de redimensionnement, épinglez tous les bords du calque d'arrière-plan. Alors, épinglez-le en haut, en bas, à gauche et à droite. Maintenant, lorsque vous redimensionnerez la planche graphique, l'arrière-plan suivra!
Maintenant que nous avons pris en charge la plupart des éléments de conception pouvant être rendus réactifs, fluides ou en symboles réutilisables, il est temps de parler du reste des éléments de conception de cette page..
En termes simples, c’est là que vous retrousserez vos manches et réaliserez vos dessins manuellement, un par un. La conception du graphique de carte devra être faite à la main car elle est unique. Il en va de même pour la mise en page et la sélection des couleurs, ainsi que pour le choix de la typographie..
Malheureusement, la conception d'interfaces réactives dans Sketch n'est pas encore tout à fait simple. Mais il existe des techniques, même des plugins, qui faciliteront grandement votre vie en tant que concepteur travaillant dans Sketch. J'espère que ce tutoriel vous a fourni une bonne description de mon propre processus de conception. Concevoir des interfaces utilisateur réactives ne doit pas être fastidieux, beaucoup d'entre elles peuvent aussi être automatisées.
Avez-vous des conseils ou des astuces pour concevoir une interface utilisateur réactive à partager avec nous? Déposez-les dans les commentaires ci-dessous!
