Comment créer un beau site internet?

Le choix des couleurs

Le choix des couleurs lors de la conception d'un site web est généralement un sujet sensible. A moins que vous soyez designer ou vous ayez des connaissances vraiment pointues sur la théorie des couleurs, on vous conseille de rester sur des couleurs plutôt simples, sinon vous allez passer beaucoup de temps à jouer sur la palette de couleurs. Le choix des couleurs vous permet de créer un site sur-mesure. 

Si vous souhaitez vraiment vous aventurer dans le choix des couleurs, l’outil Adobe Color, gratuit en ligne, est intéressant pour trouver des couleurs complémentaires à votre couleur principale. C’est une règle qui fonctionne presque toujours, puisqu’il va chercher la couleur complémentaire sur le cercle chromatique.

Limitez vous vraiment à 2 couleurs maximum pour les couleurs vives de votre site internet et restez sur des tonalités de couleurs sobres pour le reste de votre site.

Depuis l'invention du livre, nous n'avons pas encore trouvé mieux que le fond blanc avec le texte en noir. Cette combinaison de couleur offre un contraste des plus lisibles. 

Pourquoi changer ?

Pour créer un site internet design, privilégiez une couleur de fond clair avec une couleur de texte contraste foncé. Dans le cas de la création d'un portfolio ou d'un site internet contenant principalement des photos, vous pouvez choisir les couleurs inverses, c'est à dire couleur de fond noir et couleur de texte blanc.

Aller du plus clair au plus foncé du haut vers le bas de votre page

Comment ensuite appliquer ces couleurs lors de la création de votre site web?

Restez simple. La couleur la plus vive peut être utilisée pour les boutons et les liens, ce sont les éléments qui doivent le plus ressortir sur votre page internet.

Ensuite, la couleur des titres et des paragraphes doit rester classique pour une meilleure lisibilité.

Une des techniques les plus courantes pour ajuster les couleurs que vous avez choisies est de partir du plus clair et aller au plus foncé lorsque vous descendez votre site internet.

Concrètement, le bas de page doit généralement être l’élément le plus foncé de la page.

Des polices lisibles

Un design d'un site web repose principalement sur les couleurs et sur les polices. Le choix des polices va déterminer le style de votre site internet. 

Encore une fois, privilégiez des polices lisibles. Les polices se distinguent en deux familles: les Serif et les Sans Serif. Les polices Sans Serif sont les polices les plus utilisés dans le web design puisqu’elles sont généralement plus claires et plus lisibles.

Le choix des polices doit se limiter à 2, un pour les titres et un pour les textes pour avoir un design réussi.

Voici une sélection de polices pour créer une site internet professionnel

1. http://fontpair.co/
2. http://www.creativebloq.com/typography/20-perfect-type-pairings-3132120

La tendance en 2017 est de créer des site internet des polices de grande taille, très lisible avec des messages forts.

Des belles images pour sublimer votre contenu

Pour faire un beau site, il faut sélectionner de belles photos. Il existe aujourd’hui de nombreuses banques d’images libres de droit et gratuites qui vont vous permettre de faire une sélection de photos aux petits oignons.

Voici une sélection des TOP 12 banques d’images libre de droit.

Nous vous conseillons de choisir des images avec des tonalités similaires ou des zoom similaires pour garder toujours une cohérence dans vos images. Si vous ne trouvez pas d’images avec le même aspect graphique, vous pouvez appliquer un filtre de couleur par dessus pour les rendre homogènes.

Lorsque vous allez créer votre site internet, pensez à garder un ratio identique pour vos photos qui seront alignées sur votre site internet. Les ratios d’images les plus connus sont le 16:9, 4:3, 3:2 ou le carré.

Des icônes

Les icônes permettent également de sublimer rapidement son site internet. L'avantage est qu'il est plus simple de trouver des icônes pour illustrer son contenu que des photos ou vidéos.

Le conseil est styliser des icônes de même style lorsque vous créez un site internet pour garder une cohérence et et graphisme global.

Utilisez de préférence la même couleur et la même taille d'icônes dans le cas où vos icônes sont alignées à l'horizontal.

Orson vous permet de choisir vos icônes directement dans le logiciel de création de site web parmi la sélection d'icônes faites pas nos designers. Pas besoin de sortir ni de les télécharger

Vous pourrez simplement les personnaliser à la taille et à la couleur de votre site internet.

Espacements et alignement de votre contenu 

L'alignement de votre contenu va jouer un grand rôle dans la beauté de votre site internet.

En fonction de la longueur des textes, l'alignement est différent pour une meilleure lisibilité.

Pour les textes longs, évitez de les aligner tous au milieu. Ils sont plus difficile à lire puisque l'œil ne sait pas ou est ce qu'il doit retourner à ligne. C'est la raison pour laquelle les journaux gardent des colonnes étroites avec un alignement à gauche.

Pour les textes court, vous pouvez les aligner directement au centre si vous le souhaitez.

Pour une meilleure lisibilité, les espacements sont très utiles pour gérer votre contenu texte ou image. N'hésitez pas à laisser de l'espacement entre vos sections, blocks sur vos pages pour bien séparer vos contenus. Pour avoir un site attractif et homogène sur l'ensemble de votre site internet, l'espacement doit être constant.

La mise en forme des textes

La mise en forme de votre contenu texte est souvent utilisée pour mettre en avant certains mots clés par rapport au reste.

Il est donc essentiel de bien connaître les niveaux de lecture pour ne pas vous retrouver avec un site internet fouillis, peu lisibles ce qui réduira le temps de visite de vos visiteurs.

• Par ordre d'importance
• Gras majuscule
• Majuscule
• Gras minuscule
• Minuscule

Si vous commencez directement par mettre du gras majuscule, il sera difficile par la suite d'encore plus mettre en avant ce texte.

Il vous restera plus que la couleur et c’est là que vous allez très vite vous retrouver avec plusieurs couleurs sur votre site internet avec des graisses différentes.

Notre conseil : restez simple !

Créer un site mobile 

Créer un beau site internet ne se résume pas uniquement à créer un site pour desktop, il faut avoir une site avec un beau rendu graphique également sur mobile.

L'utilisation du mobile pour surfer sur internet correspond à 60% du trafic mondial. Créer un site internet responsive design qui s'adapte automatiquement à tous les supports est un enjeu.

Les écrans étant plus petit sur mobiles et tablette, le site internet doit s'adapter en termes de :

Navigation et interface adaptée à l’usage mobile 

Créer un menu burger pour économiser de la place sur mobile

Créer des boutons assez gros pour l’utilisation sur mobile et pour les doigts des utilisateurs. La hauteur et la largeur minimum est de 32 pixels pour un expérience utilisateur confortable. Ces tailles sont préconisés dans les guides d’utilisations et de développement d’Apple et de Google pour respectivement l’iOS et Android.

Utiliser des frameworks adaptés pour le responsive design tels que Twitter Bootstrap ou Foundation. Ils vous permettront d’avoir des sites dont le contenu s’adapte automatiquement, peu importe la taille de l’écran et du navigateur de votre visiteur.

Temps de chargement

Les connexions internet sur mobile hors wifi sont généralement plus lentes, il faut donc s'adapter et optimiser le temps de chargement de votre site internet pour ces supports.

Le chargement d'un site internet peut être optimisé en suivant des règles simples tels que l’optimisation et la compression des images des sites tels que:

• https://tinyjpg.com/
• https://tinyjpg.com/

C’est la technique la plus intéressante en termes de temps passé et réduction du temps de chargement. Pour aller plus loin, vous pouvez tester le temps de chargement de votre site web et avoir des conseils plus poussés pour optimiser le chargement sur Orson Mobile testeur.