Les différentes fidelités de la Home Page du projet ARKITEK.

Les pages présentées utilisent Bootstrap 5.2

Les 5 boutons ci-dessous permettent d'accéder aux pages web version scketching, zoning, wireframes (texte latin, texte réel) et mockup.
Un burger de couleur verte en bas à gauche permet de switcher de l'une à lautre.

Voir le Sketching Voir le zoning Voir le Wireframe texte latin Voir le Wireframe texte réel Voir le Mockup

Les 2 boutons ci-dessous permettent d'accéder aux pages web version Scketching et Wireframe
avec un bandeau superieur affichant les 12 colonnes, la largeur du viewport en pixel et l'identification du breakpoint Bootstrap.
Une option permet d'afficher/masquer les 12 colonnes sur toute la page.
Un burger de couleur verte en bas à gauche permet de switcher de l'une à lautre.

Voir le Wireframe 12col Voir le Mockup 12col
Note : la différence d'alignement vertical provient de la police de caractère utilisée sur les mockups

Les enjeux

La page propose une adaptabilité sur 6 breakpoints >0 >576 >768 >992 >1200 >1400
Elle est designée sur une base 12 colonnes.
Elle est réalisée avec Boostrap 5.2. Elle est valide W3C.
Elle intègre les éléments les plus couramment utilisés à savoir :

  • des titres
  • des paragraphes
  • des bordures
  • des images de différents types (rasterizé et vecto)
  • des images en background
  • du texte sur des images
  • un menu avec des ancres au format sticky
  • une vidéo youtube au format iframe
  • une map au format iframe
  • une carte verticale
  • une carte adaptative horizontale
  • un formulaire et ses champs
  • des boutons

Au niveau du style, le framework Bootstrap fait la majeure partie du travail.
Les personnalisations intègrent :

  • l'application de la charte graphique avec des variables couleurs
  • le chargement des fonts et leur application
  • des tailles spécifiques de caractères
  • des espacement spécifiques de caractères
  • des espaceurs verticaux
  • des dégradés
  • un remplacement de vignette pour la vidéo
  • un filtre coleur pour certaines images
  • un hack boostrap avec des medias queries pour « encarter » un conteneur

Une fonction "scroll to top" est intégrée.

A propos du maquettage

Veuillez noter que les Wireframes et les Mockups ont préalablement été réalisés avec Figma.

A propos des médias

Le visuel Arkitek City a été réalisé avec Adobe Illustrator
Inclus dans Guidance Logiciel Vectoriel
Les icones SVG ont été réalisées avec Adobe Illustrator
Les photographies ont été conformées avec Adobe Photoshop
Inclus dans Guidance Logiciel Photoshop
Les photographies ont été colorisées avec Adobe Photoshop
Inclus dans Guidance Logiciel Photoshop
La vignette vidéo a été réalisée avec Adobe Photoshop
Inclus dans Guidance Logiciel Photoshop
Le motion design a été réalisé avec Adobe After Effects
Inclus dans Guidance Logiciel Motion Design
La finalisation du montage audio-vidéo du motion design a été réalisée avec BMD Da Vinci Resolve

Textes - Visuels - Designs : tous droits réservés VPG | Cette page est réalisée avec Bootstrap 5.2 | License d'exploitation : AFPA