Design Shack a commencé comme une simple galerie CSS, avec des sites Web bien conçus qui ont attiré mon attention. Des dizaines de milliers de dessins ont été soumis au cours des dernières années et chacun d'entre eux a été soigneusement étudié pour être inclus. La triste réalité est que seuls 5% environ des candidatures se démarquent.
Cela pourrait être dû à un certain nombre de facteurs; le site ne comprenait pas les bases, n'avait rien de remarquable à montrer, ou (à l'occasion) était déçu par le contenu. Ce guide vous expliquera comment vous assurer d'avoir une grande chance d'inclusion, en évitant tous les pièges rencontrés par les concepteurs. À chaque étape, nous examinerons un bon exemple et un exemple qui n'est pas très bon.
Nail the Basics
Il est courant de voir un site s'effondrer au premier obstacle, sans pour autant nouer les bases d'un bon design. La typographie, l’espacement et les couleurs (ou une combinaison des trois!) Méritent également d’être pris au sérieux.
Si vous recherchez un aperçu complet des éléments constitutifs de la conception, consultez Cinq étapes simples. Cela en vaut la peine, et m'a beaucoup appris sur les principes de conception que j'avais auparavant négligés.
Typographie
La typographie est probablement l'élément le plus souvent négligé d'un dessin ou modèle. Il revêt une grande importance et peut faire ou défaire un site Web.
Réfléchissez bien au type que vous souhaitez utiliser dans les en-têtes et dans le corps de votre site. Il y a quelques années, vous étiez sévèrement limité à une poignée de? Web Safe? polices, en utilisant un système tel que Cufon ou sIFR, les possibilités de polices sont infinies.
L'important est de sélectionner deux ou trois polices et de vous en tenir à une hiérarchie logique sur l'ensemble du site. Créez un exemple de publication qui montre à quoi ressemblent différentes balises, afin de vous assurer que tout est stylé correctement. Cela pourrait inclure:
- Rubriques (h1 et suivantes)
- Des listes
- Citations
- Liens (et liens de titre / image)
- Les acronymes
- Emphase / Italique / Gras / Fort
- Formatage de code
Espacement
Il est essentiel de disposer correctement les éléments sur la page avec suffisamment d'espace pour que tout soit lisible. Il est important de respecter un certain type de structure de grille. Le système 960 Grid est un choix courant.
Assurez-vous que les espaces sont largement utilisés et attire l'attention du lecteur sur les éléments importants de la page.
Couleurs
Choisir un jeu de couleurs pour un site est loin d'être simple (et nous allons couvrir quelques outils pour vous aider dans un prochain article). Il est difficile de trouver un jeu de couleurs unique, qui ne nuit pas à la lisibilité de la page.
Si vous êtes en panne d'inspiration, Color Lovers est un site formidable pour feuilleter rapidement différentes nuances et combinaisons.
Ajouter quelque chose de créatif
Bien qu’il soit suffisant de posséder tous les éléments de base pour obtenir un site Web, il est vraiment utile de faire un effort supplémentaire avec un nouveau design innovant pour attirer l’attention. Cela pourrait être une mise en page intéressante, un arrière-plan ou une possible attention incroyable aux détails sur chaque dernier élément de la page.
Le design Web devient souvent incroyablement "bloqué dans une ornière", avec un certain style devenant omniprésent pendant quelques mois avant que quelque chose de nouveau ne gagne en popularité. Les sites qui se libèrent de cette tendance? sont beaucoup plus susceptibles d'être présentés, car ils ont beaucoup plus de potentiel pour inspirer.
Éléments graphiques
L’innovation la plus évidente réside dans les éléments graphiques d’une page. Cela dit, les graphiques doivent améliorer de manière cohérente l'apparence d'une page, au lieu de se sentir décousus et encombrés. Ces deux exemples sont d'excellentes illustrations d'images et d'illustrations utilisées pour obtenir de bons et de mauvais effets:
L'ajout d'un graphique unique et intéressant est un excellent moyen d'insuffler de la personnalité à votre site et de faire en sorte que les lecteurs se sentent chez eux.
Animation
Avec les possibilités d'animation fournies par des systèmes tels que jQuery, il n'y a aucune raison de garder un site statique. Il est également maintenant possible de faire cela de manière sémantique et utilisable sans avoir recours à Flash.
Je ne parle pas d'animation collante, mais plutôt d'effets qui donnent l'impression d'une page? et plus fluide. Un bon exemple de cela est le site personnel de Tim Van Damme, qui est un réel plaisir à utiliser:
Essayez d’ajouter un simple effet à la propriété de survol de vos liens pour offrir une transition en douceur d’un état à l’autre.
La navigation
La navigation sur un site Web doit toujours avoir pour objectif principal de fournir au lecteur un moyen clair d’accéder au contenu. Cependant, cela ne signifie pas que vous devez vous en tenir à une liste standard de liens. Que vous optiez pour une navigation verticale ou horizontale, il est facile d'ajouter de l'intérêt avec quelques graphiques:
Je me rends compte que je suis très hypocrite ici (regardez notre liste de liens ennuyeuse!), Mais je pense que Design Shack correspond mieux à un style de navigation simple. Différents sites ont des exigences différentes!
Vous pouvez consulter l'un de nos sites partenaires, 13 styles pour des menus intéressants à télécharger gratuitement.
Pensez deux fois au contenu
Beaucoup de gens pensent qu'il devrait être possible de garder la conception et le contenu de votre site relativement séparés. C'est rarement le cas et le contenu d'une page peut avoir un impact majeur sur son adéquation à l'inclusion.
Une copie mal écrite, des fautes d'orthographe et des inexactitudes grammaticales sont assez inexcusables. Si vous souhaitez mettre en avant une image professionnelle avec votre site Web, il est vraiment important de prendre le temps de perfectionner la copie. Cela en dit long sur votre souci du détail, et la plupart des galeries ne vous exposeront probablement pas si une page est jonchée de fautes d'orthographe.
Annonces
De nombreux sites utilisent la publicité pour générer des revenus et poursuivre un projet (nous inclus!).Cela ne signifie pas que les publicités doivent nuire à une bonne conception et qu'elles doivent être utilisées avec parcimonie. Si la demande est suffisante pour occuper chaque pouce d'espace disponible de votre site avec de la publicité, vous ne facturez tout simplement pas assez!
De manière générale, il vaut mieux (mais pas nécessairement aussi rentable) éviter de confondre les lecteurs. Ne vendez pas de liens de publicité dans le texte de votre page et n'essayez pas de dissimuler des publicités. Établissez des partenariats avec des entreprises avec lesquelles vous vous comporteriez avec plaisir et exposeriez leur produit avec fierté. Cela aide également si vous pouvez vous assurer que les annonces sont bien conçues (bien que cela soit rarement possible!)
Un exemple de réseau de sites qui le fait bien est Tuts +. Ils font une distinction claire entre le contenu et les publicités, tout en offrant une place de choix à leurs sponsors:
Quantité
Une règle générale était que le contenu ne devait pas aller «au-delà du pli». En réalité, cela? Pli? n'est pas aussi important qu'on le pensait. Les utilisateurs sont maintenant complètement habitués au défilement et s’attendent à ce qu’ils visitent votre site.
L'important est de transmettre le message principal d'une page le plus rapidement possible. Soyez conscient du nombre de publications ou de la quantité de contenu affiché sur chaque page pour deux raisons: (1) l’affichage des 30 publications les plus récentes signifie que votre page prend longue temps pour charger, et (2) une colonne de contenu très longue est peu susceptible de? équilibrer? avec la longueur d'autres colonnes sur votre page.
Vaut la peine?
Une question qui vous préoccupe sans doute à ce stade est de savoir si tout ce travail vaut la peine. Pourquoi voudriez-vous être inclus dans une galerie CSS? Bonne question.
- Promotion et sensibilisation: Tout le monde aime un peu de trafic pour un nouveau design, et être en vedette est un moyen infaillible de faire venir un groupe de personnes sur votre site. C’est à vous de les convertir en abonnés, en fans fidèles ou en clients payants.
- Prestige: Être mis en vedette dans différentes galeries est un atout majeur pour la confiance. Cela dit, n'en faites pas votre seul objectif (et s'il vous plaît, S'il vous plaît, ne les listez pas tous dans votre pied de page)
- Travail futur: J'ai constaté que les clients potentiels utilisaient souvent les galeries de design pour trouver un designer qui avait un style particulier. Être présenté peut être un bon moyen de créer de nouvelles affaires.
Bonne chance!
En guise de bonus pour avoir terminé cet article, j'aimerais vous offrir la possibilité de soumettre gratuitement un site à Design Shack (le coût est généralement de 3,50 $). Une fois que vous avez pris en compte les points ci-dessus, envoyez-moi un email à l'adresse [email protected]. Je vais regarder votre soumission et - j'espère - que votre site sera bientôt présenté sur Design Shack!
Cette adresse e-mail est valable une semaine. Après cela, nous la fermerons!