Éléments communs utilisés dans la conception de l'interface utilisateur en bois
Nous savons tous que la texture est très utilisée dans le design moderne et le design vintage, bien que dans de nombreux cas de design produits il y a plusieurs années, les textures bruyantes et sales étaient inévitables.
En ce qui concerne la texture du bois dans la conception, que ce soit dans un produit d’impression, un élément d’interface utilisateur Web ou mobile ou une disposition générale, il est toujours utilisé pour améliorer l’attrait visuel.
Dans cet article, nous examinerons cinq éléments communs dans la conception de l'interface utilisateur qui utilisent des textures de bois pour y parvenir.
En plus de discuter de ces éléments et d’admirer des conceptions d’interface utilisateur plutôt sexy Dribbble , nous allons également apprendre à reproduire certains de ces effets en suivant des mini-didacticiels ici même.
Ces cinq éléments communs dans la conception de l'interface utilisateur sont les suivants:
- Tissu et couture,
- Papier et ombres,
- Typographie et motifs gravés,
- Éléments élégants et modernes,
- Effets tridimensionnels
1. Tissu et couture
Le tissu et la couture sont des éléments qui tendent à s'intégrer parfaitement à la texture du bois, car tous deux sont des produits naturels et biologiques. (Certes, le coton est tissé, coupé et teint, et une grande partie du bois de cette vitrine a été taillée, poncée et traitée, mais vous obtenez ce que je veux dire!) Regardez les quelques exemples ci-dessous textures en bois.
Exemples
Cette conception très légère utilise un "point" de base (juste un trait en trait interrompu) pour faire apparaître l'emblème et la bannière du cercle comme s'il avait été cousu sur un fond texturé en bois peu opaque et teinté. Cette petite touche fonctionne si bien pour un design aussi simple.
Les coutures de cette conception sont beaucoup plus réalistes, combinant un fond texturé en bois à opacité totale avec des éléments gravés, des ombres portées et des textures de tissu réelles. Ce point a une ombre portée (taille de 0 pixel et 1 pixel à une distance de 90 °), permettant au point de se démarquer et de correspondre aux détails du reste du motif.
La texture en bois produite numériquement rend ce design moderne, avec ses dégradés légers et ses éléments gravés qui produisent un aspect légèrement plus tridimensionnel et plus réaliste. Un motif répétitif est utilisé pour produire un bel effet cuir pour le badge dans le coin supérieur gauche, qui a été cousu en utilisant exactement la même technique que celle mentionnée ci-dessus (avec l'ombre portée de 1 pixel).
Mini-tutoriels
Création d'une ligne simple en pointillés (Illustrator)
Dans ce mini-tutoriel, nous utiliserons Illustrator (Ai) pour créer une simple ligne en tirets pour former un cercle, comme dans le premier exemple de cette section. Ouvrez Illustrator et sélectionnez l'outil Ellipse. Tout en maintenant la touche Maj enfoncée pour garder votre forme en proportion, faites glisser un cercle, comme ci-dessous.
Dans le panneau Contour (Fenêtre → Contour), appliquez un trait de poids de 2 points avec une limite d'onglet de 4. Cochez l'option "Ligne pointillée" et insérez 12 points dans votre premier champ de tiret.
Vous remarquerez que la ligne sur le côté droit de notre forme est en fait deux tirets de 12 points assemblés. Pour corriger cela, donnons à notre coup un peu plus un motif. Changez le tiret à 3 points et l'écart à 12 points, puis doublez le tiret à 6 points et conservez le dernier écart de 12 points. Vous devriez vous retrouver avec une ligne carrée similaire à celle ci-dessous (les résultats varieront en fonction de la taille de votre cercle).
Dupliquez votre forme en la sélectionnant d'abord, puis choisissez Édition → Copier (Commande + C) et enfin Édition → Coller en place (Commande + F). Avec la nouvelle forme toujours sélectionnée, maintenez les touches Alt + Maj enfoncées simultanément et réduisez la taille de la forme. En maintenant ces deux touches en même temps, vous garderez la forme en proportion et diminuerez ou augmenterez la taille à partir du point central, éliminant ainsi le besoin de réalignement.
Sélectionnez le plus grand des deux cercles. Supprimez le trait et changez la couleur de remplissage en marron (ou toute autre couleur). Maintenant, sélectionnez le plus petit des deux cercles et changez la couleur du trait en un brun plus clair.
Avec le plus petit des deux cercles toujours sélectionné, dupliquez-le en le copiant et en le collant. Une fois dupliqué, placez-le sous votre forme d'origine (Commande + [) et poussez la forme vers le bas en appuyant une fois sur la flèche vers le bas de votre clavier; puis changez la couleur du trait en blanc.
Réduisez l'opacité de votre cercle de traits blancs à 50% et l'opacité de votre cercle de traits bruns à 75%.
Créer un point réaliste (Photoshop)
Dans ce mini-tutoriel, nous allons utiliser une véritable texture de tissu et certains effets intégrés de Photoshop pour produire un point réaliste. Ouvrez un nouveau document Photoshop et insérez une texture de tissu de votre choix. Recadrer l'image pour qu'elle repose sur un fond blanc.
Sélectionnez l'outil Rectangle de sélection et faites glisser une sélection à l'intérieur de la forme de votre texture de tissu. Créez un nouveau calque et renommez-le "Stitch". Accédez à Édition → Trait et appliquez un trait noir de 1 pixel à votre forme.
Sélectionnez à nouveau l'outil Rectangle de sélection et placez-le sur votre contour. Peu importe où vous commencez. Avec une position choisie, appuyez sur la touche Supprimer. Assurez-vous de supprimer le contenu du calque du trait et non celui du tissu.
Répétez le processus pour le reste de la ligne, comme indiqué ci-dessous.
Il y a de fortes chances que les points ne soient pas symétriques. mais c'est une bonne chose, car les points sont rares!
Vous devriez vous retrouver avec quelque chose qui ressemble à ceci:
Cliquez avec le bouton droit sur votre calque et sélectionnez "Options de fusion" pour ouvrir la fenêtre Styles de calque. Sélectionnez l'onglet Superposition de couleurs et sélectionnez un gris clair (j'ai utilisé #F1F1F1 ).
Sélectionnez maintenant l'onglet Ombre portée. Appliquez une ombre portée noire avec un angle de 90 °, une distance de 1 pixel et une taille de 0 pixel. Abaisser l'opacité de l'ombre entre 20 et 60%.
Sélectionnez le calque de structure et ouvrez la fenêtre Styles de calque. Appliquez une ombre portée par défaut avec une distance de 0 pixel et une incrustation de dégradé allant du blanc au noir et au blanc. Changez le mode de fusion de votre incrustation de dégradé sur "Multiplier" avec une opacité de 15%. Une fois appliqué et affiché à 100%, vous devriez vous retrouver avec quelque chose de similaire à ceci:
Jouez avec les couleurs de votre tissu en utilisant les paramètres de teinte et d'équilibre des couleurs. Voici mon résultat:
2. Papier et ombres
Le papier et les ombres deviennent de plus en plus populaires en tant que styles de conception, mais ils sont particulièrement appréciés dans les modèles à texture lourde, tels que le bois. La collection de travaux qui suit montre le papier et les ombres utilisés de différentes manières pour présenter de petits morceaux d’information ou, dans certains cas, le contenu principal du site Web.
Exemples
Cette capture d'écran, au cas où vous ne l'auriez pas remarqué, provient d'une petite section du dessin que nous avons vu à la fin de la section «Tissus et assemblage» ci-dessus. En poursuivant le thème de la texture produite numériquement, une forme blanche simple avec une ombre personnalisée déformée est utilisée pour donner au papier l’impression de se courber.
Une combinaison vraiment sympa de textures en bois et en papier froissé. Le papier dans cette interface utilisateur est utilisé pour présenter un extrait d'informations nécessaires à une recette, avec quelques belles icônes de style silhouette qui permettent à l'utilisateur de visualiser, de mettre en signet et de partager la recette complète.
Cette conception est lourde en texture, combinant des textures de bois, de papier et de ruban pour produire une interface utilisateur attrayante. Le bois et la bande photographiés, combinés aux textures et aux ombres de papier produites numériquement, fonctionnent bien ensemble.
Ceci est l'un de mes exemples préférés d'interface utilisateur dans le post. Purement numérique (y compris la texture en bois), le design utilise des ombres portées et intérieures pour créer un beau champ de recherche. La conception utilise également les points et les éléments en tissu. Dans l'ensemble, une interface très conviviale qui a fière allure!
Cette conception semble être inspirée par les enveloppes aériennes traditionnelles avec le motif répétitif autour du papier. Le papier a été (numériquement) agrafé sur le fond en bois, faisant apparaître l'interface utilisateur comme une épingle et un tableau d'affichage plutôt qu'une page Web plate.
L'image beige et l'arrière-plan de navigation ont une ombre portée qui les fait apparaître comme du papier, en particulier avec le badge estampé et les photographies de style sépia effacées qui semblent avoir été imprimées. Cela cadre parfaitement avec le fond texturé en bois et la sensation générale de l'interface.
Mini-tutoriels
Création d'un effet papier numérique simple (Photoshop)
Dans ce mini-tutoriel, nous utiliserons une texture de bois et des outils Photoshop de base pour créer un effet de papier numérique. Commencez par créer un nouveau document avec une texture ou un motif répétitif.
Sélectionnez l'outil Forme rectangulaire et insérez une forme similaire à celle ci-dessous, en la plaçant tout en haut de la zone de dessin.
Dupliquez la forme et allez dans Édition → Transformation libre (ou appuyez sur Commande + T). Réduisez la taille de la forme tout en maintenant les touches Alt + Maj enfoncées pour conserver la forme proportionnellement, puis diminuez la taille vers le centre.
Faites glisser le point d'ancrage supérieur au-dessus du haut du canevas afin qu'il recouvre le haut de la forme d'origine.
Changez la couleur de votre nouvelle forme en un beige très clair (presque blanc). j'ai utilisé #FFFBF8 .
Dupliquez votre forme originale et changez la couleur en noir pur ( #000000 ).
Augmentez la taille de la forme afin qu'elle soit plus grande que la forme d'origine. Créez un guide - vous pouvez faire glisser un guide hors de la règle (Afficher → Afficher les règles, s’il n’est pas affiché) - environ 10 à 20 pixels sous votre forme noire. Allez dans Edition → Transformer → Warp.
Faites glisser le point d'ancrage inférieur gauche vers le bas de votre guide, puis répétez l'étape avec l'ancre inférieure droite.
Appuyez sur Entrée pour confirmer votre transformation de forme. Cliquez avec le bouton droit sur l'outil Calque de formes et sélectionnez l'option "Rasterize Layer".
Repositionnez le calque de forme noire sous les deux autres formes mais au-dessus du calque de bois. Allez à Filtre → Flou → Flou gaussien et flou de la forme noire de 10 pixels. Puis cliquez sur "OK".
Abaisser l'opacité de la forme noire à 50%. Ouvrez la fenêtre Styles de calque correspondant à votre forme blanche d'origine et cliquez sur l'onglet Trait. Appliquez un trait de 1 pixel à la forme en utilisant le type de remplissage dégradé, allant du noir au blanc avec un angle de 90 °.
Cela fait, nous avons notre effet papier sur bois! C'est une excellente technique à utiliser pour les sites Web.
3. Typographie et motifs gravés
La typographie et les motifs gravés sont une technique assez courante dans la conception Web avancée, et ils deviennent de plus en plus populaires dans la conception quotidienne. Vous trouverez ci-dessous plusieurs exemples qui utilisent bien ce style dans les interfaces à texture de bois.
Exemples
Cette interface utilisateur de l'application Instagram présente un arrière-plan texturé grungy et des images semi-transparentes délavées pour produire un look vintage usé. La typographie a plusieurs styles différents, permettant au lettrage de se démarquer et donnant au fond en bois une impression gravée.
Dans l'ensemble, il s'agit d'une interface utilisateur en bois très propre, avec une grande collection de styles et de techniques variés. L'un utilisé à plusieurs reprises (et très bien) est l'effet gravé sur la typographie et les motifs illustrés dans les motifs floraux en haut de la capture d'écran.
La signalisation en métal est accrochée sur l'en-tête en bois texturé ici pour servir de navigation principale. Pour donner aux signes un effet gravé plus réaliste, le designer a donné à la typographie des ombres intérieures et des ombres portées.
Les textures de bois sont principalement utilisées dans cette conception pour la barre de navigation (le journal, dans ce cas). La typographie gravée fait apparaître le titre comme si une partie de la pierre avait été gravée pour montrer la texture du bois.
Un autre exemple de typographie gravée sur des signes, en l'occurrence des signes texturés en bois au lieu de métal.
Cette interface utilisateur en bois utilise des éléments élégants et modernes, ce qui rend difficile le choix de la placer dans cette catégorie ou dans la catégorie suivante. Le bouton "Acheter" et l'icône du sac à provisions ont un effet gravé très détaillé, ce qui les rend merveilleusement cliquables!
Mini-tutoriels
Comment graver un motif en bois (Photoshop)
Dans ce mini-tutoriel, nous allons créer un effet de bois gravé ou gravé dans Photoshop. Ouvrez un nouveau document et insérez une texture de bois.
Insérez l'un de vos propres motifs, ou utilisez l'image de vecteur de stock.
Une fois que vous avez correctement positionné le vecteur, cliquez avec le bouton droit de la souris sur le calque et sélectionnez "Rasterize Layer". Cliquez à nouveau avec le bouton droit de la souris et sélectionnez l'onglet Incrustation du dégradé. Appliquez un dégradé à l'aide de deux couleurs sélectionnées sur le fond en bois, comme illustré ci-dessous.
Sélectionnez l'onglet Ombre portée et appliquez une ombre blanche avec un mode de fusion normal. Modifiez l'angle de l'ombre à 90 ° et la distance et la taille à 1 pixel. Vous pouvez conserver les autres paramètres par défaut.
Sélectionnez l'onglet Ombre intérieure pour appliquer une ombre à l'intérieur de votre motif. Cela nous permettra de créer l'effet gravé. Déposez l'opacité de l'ombre à 20% et changez l'angle à 90 °. Modifiez la distance et la taille de l'ombre à 3 pixels chacune et conservez tous les autres paramètres par défaut.
Cliquez sur "OK", puis abaissez l'opacité de votre calque de motif à 80% pour permettre à une partie de la texture d'arrière-plan de briller dans toute sa splendeur. Vous devriez vous retrouver avec ce résultat:
4. Éléments élégants et modernes
Bien que les textures en bois soient souvent liées au design vintage et rétro, si elles sont correctement retirées, elles peuvent également être utilisées pour compléter des éléments modernes et élégants, comme vous pouvez le voir dans les exemples ci-dessous.
Exemples
Voici une autre capture d'écran d'une interface que nous avons vue dans la catégorie précédente, montrant un autre élément de style complètement différent. Le curseur et les barres de défilement de cette conception présentent des dégradés élégants blanc-argent et vert pour une interface conviviale.
En plus du tissu et des points et des techniques de typographie gravées, cette conception comporte des éléments modernes, tels que des traits gris-blancs de 2 pixels et des icônes minimalistes, ce qui en fait une interface attrayante et utilisable comme un iPad.
Une autre de mes interfaces préférées. Il combine des images en tissu et en bois avec des dégradés élégants, des traits de 2 pixels, des icônes simples et une typographie magnifique pour créer de nombreux points d'intérêt pour l'utilisateur.
Une interface très détaillée qui fusionne des textures en bois, des effets en trois dimensions, des reflets brillants et brillants pour produire un résultat qui assommera les utilisateurs. Les lignes d'un pixel sont utilisées pour renforcer l'effet 3D.
Les lueurs, les ombres et les coups sont utilisés pour donner vie à cette interface en bois éclatante. Les icônes modernes, cependant, sont la clé.
Cette jolie petite interface utilise les produits naturels du monde et des éléments futuristes élégants pour produire une interface utilisateur attrayante et facile à comprendre. Le bruit est ajouté aux éléments modernes, ce qui lui permet de s’intégrer à la tête en bois.
Ce clavier nous donne une texture en bois basée sur un élément moderne existant: l’iPhone UIKit par défaut. Le clavier fonctionne exactement de la même manière que le clavier par défaut et ne confondra donc pas les utilisateurs.
Mini-tutoriels
Dans ce mini-tutoriel, nous allons créer un curseur en bois avec une sélection d’effets de calques de Photoshop. Créez un nouveau document et insérez une texture ou un motif en bois.
Sélectionnez l'outil Rectangle arrondi et faites glisser une forme longue et étroite, semblable à celle ci-dessous. Le rayon de coin de mon outil est défini sur 15 pixels.
Cliquez avec le bouton droit de la souris sur le calque Formes et sélectionnez "Options de fusion". Sélectionnez l'onglet Superposition de dégradé et ajoutez une couleur de dégradé sélectionnée dans l'arrière-plan, puis une couleur légèrement plus foncée. Puis cliquez sur "OK".
Maintenant, sélectionnez l'onglet Inner Shadow et appliquez une ombre noire avec une opacité de 30% et un angle de 120 °. Déposez la distance à 1 pixel et déposez tout le reste à 0. Cela créera une ombre à l'intérieur de notre forme, donnant l'impression qu'elle a été sculptée dans le fond en bois.
Sélectionnez l'onglet Ombre portée et appliquez une ombre blanche avec un mode de fusion normal. Changez l'angle à 90 ° et la distance et la taille à 1 pixel. Laissez tout le reste à 0 pixels. Cela donnera à notre forme un point culminant le long du fond, le rendant plus tridimensionnel et réaliste.
Zoomez sur votre ligne sculptée et sélectionnez l'outil Ellipse. Tout en maintenant la touche Maj enfoncée pour garder la forme ronde, faites glisser un cercle et placez-le sur la barre de défilement.
Ouvrez la fenêtre "Styles de calques" pour votre nouvelle forme de cercle. Cliquez sur l'onglet Incrustation en dégradé et appliquez un dégradé allant du gris clair au gris clair. Donnez-lui un angle de 90 °.
Sélectionnez l'onglet Ombre portée et appliquez une ombre à votre forme. Modifiez la distance à 0 pixel et la taille à 10 pixels.
Effectuez un zoom arrière pour afficher votre curseur à 100%. Voici le résultat:
5. Effets tridimensionnels
Il n'y a pas de restrictions sur la conception en trois dimensions et il est incroyablement efficace avec les textures en bois. Cette combinaison est couramment utilisée pour produire des «étagères», comme on le voit dans les interfaces iPhone et iPad, en particulier l’application iBook d’Apple.
Exemples
Ces étagères sont très réalistes et les ombres (comme celle de l'étagère intérieure dans le coin supérieur droit) proviennent d'une grande sélection de travaux personnalisés (pas de filtres Photoshop intégrés).
Les effets de cette conception sont assez similaires à ceux de la précédente. Cette fois, les effets apportent un look plus propre et plus moderne, tandis que le précédent était censé être plus réaliste et "utilisé".
Ces étagères iPhone présentent des techniques similaires. Cette fois, le résultat est à la fois moderne et réaliste, équilibrant parfaitement les photographies texturées et les effets numériques.
Ce bouton 3D est incroyable! Grâce à sa combinaison de textures en bois, les détails délicats du design sont mis en valeur. Si un bouton comme celui-ci était devant vous, vous ne pourriez pas vous empêcher de le pousser!
Un effet 3D simple mais efficace a été appliqué à cette barre de navigation, faisant apparaître les boutons comme s’ils étaient des tiroirs. S un élément intelligemment conçu pour impliquer l'utilisateur dans l'interface.
Écrit exclusivement pour WDD par Callum Chapman, concepteur et négociant d’illustrations Circlebox Creative . Il dirige également The Blog Inspiration et Magasin Picmix
Partagez vos conceptions et illustrations d'UI en bois avec nous, ainsi que tout article ou tutoriel qui pourrait aider vos collègues lecteurs.