L'une des questions les plus fréquemment posées est une variante du type de contexte que quelqu'un devrait utiliser pour son site. Ces concepteurs ont le contenu de base et la mise en page bien définis, mais l’arrière-plan est trop ennuyeux ou trop chargé et ils ne savent pas comment le corriger.
Aujourd'hui, nous allons jeter un coup d'œil sur quelques sites en direct pour trouver de l'inspiration sur la manière d'ajouter efficacement des arrière-plans intéressants à une page Web. Créez un signet pour cet article et revenez-y la prochaine fois que vous serez bloqué par une décision en arrière-plan.
# 1 l'esquisser
Ce type de contexte est devenu populaire il y a quelques années et persiste encore aujourd'hui. Cela vient de l'idée d'un carnet rempli de griffonnages, comme celui de votre adolescent typique pendant les cours d'anglais. Tout a une apparence brute, rapidement esquissée et la page est une collection d’idées assez aléatoires qui sont dispersées et placées à différentes rotations.
NotchStudio tire cette idée bien et d'une manière assez modérée.
Même si vous ne pouvez pas dessiner, ce look est assez facile à retirer car les griffonnages sont généralement super basiques. Si vous avez un Wacom ou un iPad, il est assez facile de tracer certaines de vos propres photos ou texte imprimé de manière à refléter ce style. Il existe également de nombreuses polices gratuites, telles que Pointy, qui vous aideront à créer du texte esquissé génial sans aucun effort.
# 2 Parchemin Subtil
Les textures de papier ont toujours intrigué les concepteurs et nous les utiliserons probablement encore longtemps. La tendance actuelle n'est pas tant le grunge intense d'il y a quelques années, mais plutôt un effet beaucoup plus subtil que vous pourriez facilement manquer si vous ne le cherchiez pas.
Notez que la texture utilisée sur le site de Beautiful Type ci-dessous n'est pas gênante ni exagérée, mais apporte simplement une belle finition à un site qui aurait déjà fière allure sans lui.
Découvrez Lost and Taken pour des tonnes de superbes textures que vous pouvez utiliser dans toutes vos conceptions.
# 3 Un gradient radial
Les concepteurs qui pensent qu’ils sont surutilisés ont récemment fait l’objet d’une mauvaise réputation. Personnellement, je pense qu'ils sont facilement mal utilisés et mal exécutés, mais je ne vois jamais le jour où tous les motifs utilisent des couleurs purement uniformes sans aucune gradation. Étant donné que les dégradés reflètent la réalité (nous ne voyons jamais de couleurs pures et non mélangées dans le monde naturel), les concepteurs continueront à les utiliser pour rendre leurs dessins plus vrais.
Avec les dégradés, il est souvent préférable de garder les choses simples. N'allez pas mélanger des couleurs folles et créer des transitions boueuses, optez plutôt pour un dégradé simple. Un de mes favoris est le bon vieux gradient radial gris à noir (ou gris plus foncé). Il est propre et facile à mettre en œuvre et a l’air très classe.
Vous pouvez le voir dans la pratique sur le site Web 177themes ci-dessous.
# 4 Two-Tone It!
Une autre solution que je trouve particulièrement élégante ou audacieuse (en fonction de l'exécution) consiste à placer une transition difficile tout au long de la page. Ceci est le plus souvent fait horizontalement mais peut sembler plus unique et accrocheur si cela est fait verticalement.
L'idée ici est d'utiliser la magie du contraste. Nos yeux sont naturellement attirés par le contraste, nous ne pouvons tout simplement pas nous empêcher de regarder! La clé pour retirer cette méthode est de vous assurer que vos deux couleurs contrastent vraiment. Ne choisissez rien qui soit en conflit ou en conflit, essayez plutôt une couleur très sombre, puis une nuance très claire de la même couleur.
Mon outil préféré pour la création de ces types de combinaisons est 0to255, ce qui vous permet de saisir rapidement et facilement les valeurs Web pour les variations de toutes les couleurs.
# 5 Photographies en plein écran
Je parle tellement de cette idée que vous en avez probablement marre, mais je vais continuer à la creuser aussi longtemps que vous le pourrez: une bonne photographie donne un beau design. C'est simple et clair. Nous aimons tous regarder une bonne photo, alors intégrer celle-ci dans votre conception en fait un site Web que tout le monde aime regarder. Facile non?
Les photos sont une source d’inspiration pour la conception du site. Vous pouvez vous inspirer des couleurs, des textures et même de la typographie d'une photo et créer un joli thème cohérent.
Découvrez comment la nature sombre des éléments conçus sur le site ci-dessous reflète l'apparence de nombreuses photos utilisées dans le diaporama de la page d'accueil.
Si vous vous demandez comment coder un site comme celui-ci, consultez notre article récent, Créez facilement un site Web de diaporama de photographie en plein écran sans flash.
# 6 Texture à la couleur se fanent
Une astuce que j'aime beaucoup et que je vois beaucoup ces derniers temps consiste à utiliser des effets de lumière ou quelque chose de similaire pour ajouter un peu de texture en haut d'une page, qui passe rapidement à une couleur unie.
Les textures peuvent facilement réduire la lisibilité de votre texte et ajouter du bruit visuel inutile à une page autrement utilisable. Faire allusion à une texture dans un endroit vous permet de tirer parti des avantages du produit de beauté des yeux sans sacrifier l’esthétique générale et / ou la lisibilité du site.
Nous avons trop souvent l'impression que le choix d'une texture signifie que nous devons inonder l'arrière-plan avec une répétition d'image d'arrière-plan CSS. Essayez d’être plus sélectif quant à l’endroit où va votre texture et vous trouverez vos dessins immédiatement plus jolis.
# 7 Look Up
Le ciel est une distraction constante et fantastique pour les humains. Nuages, rayons de soleil, étoiles, planètes, la lune; tous ces objets ont dans notre esprit une sorte de lieu magique qui les rend irrésistibles à l'œil.
Soyez très prudent lorsque vous incorporez ces éléments à votre arrière-plan, il est très facile de créer quelque chose de laid et / ou de cliché. Cette technique ne devrait être utilisée que par des designers qui ont une réelle idée de l'esthétique et savent comment prendre une idée comme "l'espace". et ne pas le faire ressembler à quelque chose d'un ancien économiseur d'écran Windows.
Le site ci-dessous est un excellent exemple d’une très belle scène de ciel utilisée comme arrière-plan de site Web puissant. Les planètes sont superbement rendues avec une vibration de couleur vintage et une texture subtile fournie par des lignes diagonales. C’est le genre d’attention au détail que vous devriez connaître avant de jeter un fond de ciel sur votre site.
# 8 Argyle
Je peux t'entendre maintenant, Argyle? Es tu fou?? Avant de me lâcher dans les commentaires, les motifs de diamants peuvent donner des résultats vraiment intéressants. Mais, comme dans le cas précédent, ils ne devraient être tentés que par des concepteurs expérimentés qui savent utiliser un motif fantaisiste sans créer un site Web vraiment moche.
Découvrez la très bonne utilisation de cette idée sur le site ci-dessous. Le motif modifié de style argyle n’est suffisant que pour ajouter de jolis accents colorés et n’attire pas votre attention.
# 9 Abstract & Crazy
Êtes-vous marre de mes suggestions pour? Soyez prudent? et? prenez-le facile? avec des touches de design subtiles? Eh bien, cette astuce est pour vous. Parfois, le meilleur arrière-plan est quelque chose de fou et d’audacieux qui n’a pas à donner de sens au contenu de la page, il attire et retient votre attention.
Je pensais que les deux sites Web ci-dessous avaient bien réussi. Remarquez comment le second ressemble particulièrement à une aquarelle peinte. C'est une technique très populaire que vous pouvez trouver beaucoup de ressources en ligne à imiter.
Allez chercher sur iStock avec le terme? Aquarelle abstraite? pour voir ce que vous pouvez trouver. Il y a beaucoup d'images bon marché dans cette catégorie qui vont vraiment stimuler l'intérêt visuel de votre page.
# 10 N'ayez pas peur des couleurs unies
Tous les conseils ci-dessus visent à répondre à vos demandes en matière de bonnes idées de sites Web. Cependant, il est très important pour vous de comprendre en tant que concepteur qu'il n'y a absolument aucun problème avec les espaces blancs unis. C'est un ingrédient clé dans bon nombre de mes conceptions préférées de tous les temps et apprendre à le manier correctement est un élément important pour devenir concepteur.
Consultez le magnifique site Web Fuzion Ads ci-dessous. Le design est vraiment un régal typographique et les deux retiennent votre attention et communiquent efficacement malgré le fait que l’arrière-plan n’est qu’une couleur unie et ennuyeuse!
Assurez-vous de consulter Piknik, un outil gratuit que vous devez ajouter à votre arsenal de projets. Ce site facilite grandement la prévisualisation et la sélection des couleurs pour remplir votre écran. Vous déplacez simplement votre souris et l'arrière-plan change de couleur.
Conclusion
L'arrière-plan que vous choisissez donne le ton et la personnalité de l'ensemble de votre site. Il y a quelques jours, je travaillais avec un designer qui souhaitait que son site soit présenté dans notre galerie mais qui avait simplement choisi une image de fond vraiment médiocre. La conception et la mise en page du site étaient excellentes, mais je ne pouvais tout simplement pas aller au-delà du contexte hideux. Après l'avoir fait remarquer, il a accepté et est passé à quelque chose de beaucoup plus simple qui a vraiment amené le site à un tout autre niveau.
Comme je l'ai dit dans les premiers paragraphes, la prochaine fois que vous êtes coincé dans une ornière de conception et que vous ne pouvez pas choisir un bon arrière-plan pour votre site, revenez à cet article et essayez certaines des idées que j'ai présentées ici. Tôt ou tard, vous serez obligé d'atterrir sur celui qui conviendra parfaitement à votre projet.
Comme toujours, merci d'avoir lu! Si vous avez aimé l'article, envoyez-nous un tweet, Stumble, Like ou tout ce que vous aimez!