Share
Plus tôt dans la Semaine du design Web, nous avions vu comment une mise en page simple pouvait être mélangée et associée à différents arrière-plans, modèles et photos, nous allons aujourd'hui aller plus loin. Nous allons complètement changer l'apparence d'un site Web en modifiant non seulement l'arrière-plan, mais également le style général du design..
Nous commencerons par le site Grungy Paper Texture que nous avons créé dans un didacticiel précédent, puis nous modifierons le dessin pour qu'il soit minimal, métallisé, abstrait et web2! Et après cela, nous parlerons du processus d’apprentissage d’une bibliothèque de styles de conception Web. Alors, commençons…
Ce billet est le jour 8 de notre session de conception Web. Sessions créatives "Session Day 7Session Day 9"Donc, comme vous vous en souvenez de notre tutoriel original, la conception du site ressemble à ceci:
Il s’agit d’une conception texturée et grungy reposant sur une disposition simple, solide et sous-jacente. Ce que nous allons faire, c'est prendre cette disposition sous-jacente et la traiter comme un porte-manteau, en échangeant différents styles et en examinant pourquoi chaque aspect fonctionne..
Dans chaque style, il y a beaucoup de variations, mais voici quelques caractéristiques d'un look grungy:
Un design relativement propre marié avec des éléments grungy - papier, textures.
Visitez le site
Texte de placement, éléments collés et textures.
Visitez le site
Un bon exemple d’apparence grungy mise en ordre dans une structure de blog.
Visitez le site
Beaucoup plus d'exemples de toutes les choses grungy!
Visitez le site
Notre première étape consiste à réduire complètement notre look et à nous débarrasser de tout ce qui n’est pas essentiel. Nous voulons faire cela afin d'avoir un point de départ pour les autres conceptions, mais nous créerons en même temps une sorte de look minimal.
Voici les étapes à suivre:
Voici notre version minimale:
De tous les regards que nous allons faire aujourd’hui, c’est le moins adapté à cette mise en page - en particulier à la zone à onglets. C'est quand même une approximation correcte…
Il y a beaucoup de variations dans chaque style, mais voici quelques caractéristiques d'un look minimal:
Vraiment Minimal avec une palette de couleurs
Visitez le site
Typographie minimale et lignes épurées mélangées à une pincée de photographies et d'éléments de conception audacieux
Visitez le site
Minimal meets Flash - et découvrez le portefeuille de travaux qui comprend de nombreux autres exemples de conceptions minimales.
Visitez le site
Beaucoup plus de design minimaliste à vérifier
Visitez le site
En prenant le look minimal que nous venons de créer, nous pouvons maintenant ajouter un peu de style. Cette fois, nous voulons créer un look métallisé. Pour cela, nous avons besoin de gris clairs, et ceux-ci sont particulièrement impressionnants sur un fond sombre..
Voici les étapes à suivre:
Voici notre version métallique:
Et voici quelques notes:
Il y a beaucoup de variations dans chaque style, mais voici quelques caractéristiques d'un look métallique:
Apple utilise depuis quelque temps déjà une barre de navigation supérieure en métal, avec de légers biseaux sur le texte, une icône Apple intégrée et quelques autres effets métalliques..
Visitez le site
Lance est un maître de la conception d'interface Photoshop. Découvrez son portefeuille d'interfaces métalliques
Visitez le site
Un design métallique très élégant.
Visitez le site
Un look toujours populaire consiste à utiliser un fond abstrait, de la transparence et une typographie très nette. Donc c'est ce que nous allons faire ensuite!
Donc, en partant du design minimaliste:
Voici notre version abstraite:
Et voici quelques notes sur le design:
Dans chaque style, il y a beaucoup de variations, mais voici quelques caractéristiques d'un tel look:
Superbe fond fumé.
Visitez le site
Combine un fond grungy brillant avec des couches et des sections pour un effet optimal
Visitez le site
Notre dernier arrêt en matière de style se situe dans le cliché de la conception Web 2.0. Je dois avouer que je ne suis même pas vraiment sûr de ce que le design web2 est vraiment, mais j'ai essayé de rendre cette version assez conviviale et abordable - ce qui, je suppose, est la principale caractéristique du style.
Recommencer avec le design minimaliste:
Voici notre version web 2.0:
Et voici quelques notes!
Il y a beaucoup de variations dans tous les styles, mais voici quelques caractéristiques d'un look de type Web 2.0:
Pour moi, ces gars ont vraiment commencé beaucoup de ce que j'associe au Web 2.0
Visitez le site
J'aime ce petit homme! Un as design par SimpleBits.
Visitez le site
Un dégradé super brillant rend ce site.
Visitez le site
Alors les voici tous, vous pouvez cliquer sur l'image ci-dessous pour les voir en taille réelle. De plus, si vous êtes membre Plus, vous pouvez récupérer les cinq fichiers PSD dans la zone Plus..
Soyons honnêtes, les cinq modèles ne sont pas nécessairement de bons exemples de leurs styles respectifs. Mon objectif dans ce didacticiel est de vous montrer comment donner à un dessin un aspect ou un style en suivant certains repères visuels. Vous devriez pouvoir voir que vous pouvez vous habiller de la même manière de différentes manières.
Pour vraiment produire un bon exemple d'un style de conception donné, vous modifierez probablement votre mise en page de manière plus spécifique pour correspondre à ce style. Et bien sûr, ils auraient tous besoin de beaucoup plus de temps que moi :-) J'espère tout de même que cet échange de styles illustre la manière dont vous pouvez commencer à regarder les conceptions Web pour apprendre différents styles de conception..
Dans notre article précédent - 8 idées, techniques et astuces pour votre boîte à outils de conception Web, j'ai mentionné qu'il est judicieux de disposer d'une bibliothèque de styles sur lesquels s'appuyer..
Lorsque vous dessinez un vide lors du démarrage d'un nouveau projet, il peut parfois être judicieux de vous contenter d'un choix stylistique prédéfini et de vous laisser guider par ce choix. Inévitablement, vous vous retrouverez avec quelque chose de totalement différent de tout ce que vous avez conçu auparavant, et cela vous aidera au moins à démarrer. Mais soyez très prudent en utilisant le mauvais style simplement parce que ça a l'air cool, et non pas parce que c'est approprié pour le client / message / contenu. Le seul antidote à cela est de connaître et d'avoir beaucoup de styles de conception différents.
Dans cet article, nous avons brièvement examiné cinq styles ou styles, et il existe des millions de styles, sous-styles, combinaisons, adaptations et styles qui défient le style ensemble..
Le seul moyen d'apprendre les styles de design est de les regarder. Maintenant, il regarde et puis il y a regardant! Une personne ordinaire consultera généralement un site Web, une affiche ou un autre motif et ne verra que le contenu, le message et peut-être l’atmosphère du motif. En tant que designer, vous devez tout analyser de manière analytique, voir pourquoi un design a une certaine sensation, quel message le design lui-même donne, quelles polices de caractères ont été utilisées, quels éléments visuels et quelles techniques le designer a utilisés, comment il a été combiné et comment cela a été arrangé.
Vous devez toujours regarder le design - pas seulement en ligne, mais partout - car les styles de design ne se limitent pas aux sites Web. Affiches, publicités, crédits télévisés, prospectus et partout où il y a du design, il y a une possibilité d'apprendre.
Plus vous regardez et apprenez, plus vous en aurez sous vos ordres. Lorsque vous vous assoyez pour concevoir un nouveau projet, vous serez en mesure de tirer de nouvelles idées visuelles, même face à une toile vierge. Lorsque vous utilisez des matériaux de conception ou des marques, des caractères tels que les polices de caractères, les logos et les messages déclenchent des choix stylistiques, tels que des indices permettant de résoudre un mystère..
Lorsque vous utilisez des styles que vous avez vus auparavant, vous devez toujours vous efforcer de faire entendre votre propre voix de designer. Donnez-vous votre propre tour, vous êtes votre propre mélange ou look, de sorte que votre voix de conception est entendue. Et toujours, toujours, assurez-vous que vous appliquez un design qui convient et améliore le message - ne tombez pas dans le piège de ne penser qu'à l'esthétique.
Rappelez-vous que la forme suit la fonction. Le style et les choix esthétiques que vous faites sont là pour aider le site Web à remplir sa fonction..
Ce billet est le jour 8 de notre session de conception Web. Sessions créatives "Session Day 7Session Day 9"
Accentsconagua