Créer des Maquettes et un Style guide pour votre site web

Dessiner vos maquettes de pages web !

Le plus simple pour faire des maquettes de site web et d’utiliser un simple papier et un crayon !

Dessiner votre site tel un Wireframe. Pensez aux trois versions : PC, Tablette, Smartphone. Il existe quelques outils relativement chronophages permettant de faire des Wireframes.

• https://wireframe.cc/
• https://marvelapp.com/
• https://www.figma.com/
• https://mockflow.com/

Exemple de Wireframe:

WireframeTélécharger

Liens utiles pour vous inspirer :

1. https://library.elementor.com
2. https://creativethemes.com/blocksy/starter-sites
3. https://kadence-theme.com/starter-templates

Penser « mobile first » : Google ne référence que la version mobile d’un site web

Cherchez plutôt l’efficience dans le design et le message plutôt que des effets « wahou » ou un site web sophistiqué.wpalex

Créer un « Style Guide »

A minima votre style contiendra :

• Les couleurs de votre site web au format #ffffff
  • https://mycolor.space/
  • https://huemint.com/
  • https://palettegenerator.com/
• La typo et tailles de vos titres (h1, h2, h3, h4) sur PC Tablette Smartphone
  • https://fonts.google.com/
• La typo pour vos textes (qui peut être la même que pour les titres)

Exemples de styles guides :

• https://mesnilroch.bzh/style-guide/
• https://ageclic.fr/style-guide/
• https://mozilla.design/
• https://developer.spotify.com/documentation/general/design-and-branding/
• https://www.behance.net/gallery/7226653/Medium-Brand-Development
• https://issuu.com/challengeforchange/docs/love_to_ride_brand_guidelines