• Passer à la navigation principale
  • Passer au contenu principal
  • Passer au pied de page
Lotin Corp.

Lotin Corp.

Agence de branding. Tout est dans le sens du détail.

  • Services
    • Stratégie
    • Logo & identité visuelle
    • Web & Digital
    • Développement commercial
  • Portfolio
  • Blog
    • Branding
    • Business Systems
    • Persuasion et vente
    • Marketing Digital
    • Design pour founders
    • Méthode hypercréative
    • UX Design
    • Chronique
  • Livres
    • E-books
    • Livres sur Amazon.fr
    • Guides
  • L’agence
  • Contacts
  • PRENEZ RENDEZ-VOUS
Vous êtes ici : Accueil / Design web / Etape 6 : Prototypage et intégration HTML5/CSS

Etape 6 : Prototypage et intégration HTML5/CSS

27 août 2021 par Henri Lotin Laisser un commentaire

5 minutes

etapes-creation-site-web-06

Cet article fait partie d’une série : Étapes de création d’un site web

« Les étapes de création d’un site web – Etape 5 : Design d’interface web en détail

» Les étapes de création d’un site web – Etape 6.1 : Explication des CSS

Après avoir créé la maquette (mockup) de notre site web dans un logiciel de création graphique, il est temps de procéder à la création d’une maquette fonctionnelle.

Retourner au sommaire

À TOUS CEUX QUI VEULENT UN BEAU SITE WEB

Vous est-il déjà arrivé de tomber sur le template du site web de vos rêves ? Et qu’après de longues heures de personnalisation vous vous retrouviez avec quelque chose de moche ?

Téléchargez le chapitre gratuit

Tous les e-books gratuits

Alors, pourquoi parlons nous de prototypage et d’intégration web ici, pourtant nous avons vu qu’il était possible de produire des prototypes plus tôt ? Eh bien, tout dépend du niveau de profondeur que vous souhaiteriez donner aux tests de votre produit.

Le prototypage

Le prototype d’un site ou d’une application concrétise la structure d’information et les parcours utilisateurs. C’est l’étape préalable au webdesign et au développement qui vous permet de produire rapidement des sites efficaces tout en maîtrisant votre budget.

En matière de prototypage, l’efficacité est la clé. Nous créons des wireframes, des maquettes et des prototypes pour en savoir plus sur nos hypothèses et sur le fonctionnement éventuel d’un logiciel avant son développement. La fidélité des prototypes peut varier des croquis basiques lo-fi (basse-fidélité) aux prototypes interactifs haute-fidélité. Il y a beaucoup de variété et parfois cela peut être un peu déroutant.

Examinons comment tirer le meilleur parti du prototypage et choisir la fidélité qui convient à notre projet !

Nous disions tantôt qu’un prototype était un modèle préliminaire de votre produit final imaginé.

Des produits plus évolués seront basés sur les leçons tirées de cette première version. Ainsi, lors du design d’applications web et mobiles, un prototype est une première version de cette dernière interface utilisateur axée sur la forme, la fonction ou les deux. Assez simple, non ?

Simple et pourtant… pas si simple. Fabriquer un prototype peut être facile (en particulier avec un outil de prototypage interactif tel que ceux présentés dans cet article), mais il peut être difficile de déterminer le type de prototype dont vous avez besoin et la manière d’organiser votre flux de travail. Rappelez-vous simplement les principes de base suivants :

  • Prototypez pour matérialiser et valider vos hypothèses de design
  • Prototypez pour lancer des conversations et relever les défis de design
  • Prototypez pour aider le client (ou l’utilisateur final) à comprendre votre produit dès le départ

Bien conçus, les prototypes peuvent éviter les erreurs de management dès le début du processus de développement et réduire le risque d’erreur ultérieurement. En outre, l’efficacité des wireframes et des prototypes permet aux développeurs et aux designers de collaborer plus efficacement pour présenter et transmettre leurs idées.

Basse fidélité

Les croquis et les wireframes statiques sont la fidélité la plus basse du monde UI/UX. Ils vous permettent d’identifier et de présenter toutes les caractéristiques et le contenu d’une manière rapide et jetable. Il s’agit d’éliminer d’abord toutes les mauvaises idées afin que les bonnes idées puissent suivre.

https://www.youtube.com/watch?v=hOJyJ2lZkPs

Avec la basse fidélité, vous ne regardez que le design de base et l’architecture de l’information, sans interaction. Les prototypes basse fidélité vous permettent d’échouer et d’itérer beaucoup plus rapidement qu’avec des outils de haute technologie, et devraient être utilisés à ces fins.

Fidélité moyenne

Avec des maquettes de fidélité moyenne, vous pouvez passer plus rapidement du concept à la phase de design opérationnelle, avec plus de flexibilité et d’interaction, et la possibilité d’effectuer facilement une itération. Ce type de fidélité peut réduire le risque de concevoir des composants qui nécessiteront de nombreuses retouches ou seront regroupés lors du développement du système front-end réel, car cela permet une visualisation plus claire des idées initiales.

Ces wireframes détaillés dans lesquels les utilisateurs peuvent utiliser des interactions limitées sont plus définis que nos croquis basse fidélité, mais ils ne sont pas aussi raffinés que les prototypes haute fidélité.

Haute fidélité

Avec les prototypes hi-fi, vous disposez de plus de temps pour itérer et affiner le design de l’interface utilisateur. À ce stade, il s’agit de faire en sorte que votre prototype ressemble presque au produit fini.

Ces prototypes sont plus faciles à soumettre à des non-designers car, à l’œil nu, ces types de prototypes ressemblent vraiment à la réalité. Pour obtenir des avis optimaux, essayez de créer un prototype d’objet qui semble suffisamment réel pour être présenté à vos parties prenantes et à vos utilisateurs comme une réplique de ce qui existe réellement.

The Ultimate Guide to Prototyping

Pour en savoir plus sur le prototypage :

  • Apprendre à Prototyper – Sites Internet et application [formation vidéo] sur Elephorm
  • Low-fidelity vs. high-fidelity prototyping par Emily Esposito
  • Effective prototyping and the fidelity spectrum sur JustInMind
  • The Ultimate Guide to Prototyping [ebook] par UX Pin

La maquette fonctionnelle : intégration web de notre interface

Pour intégrer efficacement notre maquette graphique, nous devons nous rassurer que le design UI a respecté les règles de Photoshop Etiquette. Ça s’appelle la politesse du fichier.

De plus nous devrions apprendre à distinguer les découpages stylistiques (pour les besoins de mise en pages, ou de présentation), et les découpages sémantiques (pour les besoins de structure).

Découpage 1.

Nous remarquons deux zones principales sur notre interface différenciées notamment par leurs arrière-plans respectifs. Nous les mettrons dans des div et les nommerons .top et .bottom.

Découpage stylistique (pour la mise en pages)

Découpage 2.

De façon sommaire, nous distinguons 4 zones sommaires : header, .main-content, aside et footer qui sont imbriquées dans une zone plus grande .inner.

Découpage structurel. 1. .inner 2. header 3. .content 4. aside 5. footer

Quand nous regardons de près le code, nous avons ceci comme structure principale.

Le Pen avec le HTML

See the Pen
Design & Lifestyle – Home
by atnhenri (@atnhenri)
on CodePen.

À bientôt pour la suite !

Nous reviendrons sur ce même article avec une deuxième partie consacrée aux CSS. En espérant que cela a été assez clair pour vous, je vous dis à bientôt. En attendant, vous pouvez vous amuser à trouver des correspondances entre le code HTML du Pen et l’interface de la page d’accueil.
Retourner au sommaire

Catégorie(s) : Design web Tags : code HTML5/CSS, création de site web, css, étapes de création de site web, HTML5, intégration d'interface utilisateur, prototypage

À propos Henri Lotin

Brand Strategist & UX/UI Designer autodidacte vivant à Douala, au Cameroun, je suis le directeur de création, le responsable de la stratégie et du marketing digital, mais également le co-fondateur de Lotin Corp. (c'est beaucoup, je sais !?)

Je suis depuis Octobre 2014, le fondateur de Lotin Corp. Academy, où j’enseigne le marketing digital, l’introduction à la communication visuelle, le design web et interactif et les logiciels de PAO.

Souscrivez à notre newsletter

Pour ne rien rater de nos offres, quand nous aurons l’occasion de vous en faire profiter. Et nos articles, une fois par semaine dans votre boîte aux lettres.

Cliquez ici pour vous inscrire

Interactions du lecteur

Laisser un commentaire Annuler la réponse.

Footer

#BrandingAdvocacy

Les frameworks de création de stratégie de marque

Les modèles et les frameworks de création de stratégie de marque semblent être aimés ou détestés par les stratèges ; … [Lire la suite...] à proposLes frameworks de création de stratégie de marque

Plus d'articles de cette catégorie

Catégories

  • 15 Minutes avec
  • Branding
  • Business Systems
  • Chronique
  • Clients
  • Design graphique
  • Design pour founders
  • Design web
  • Etudes de cas
  • Freelance
  • Guides
  • Illustrations
  • Livres
  • Marketing Digital
  • Méthode hypercréative du design
  • Nouvelles
  • Persuasion et vente en business
  • Profession
  • Stratégie
  • Traductions
  • UI Design
  • UX Design
  • Vidéo
  • WordPress

Nos articles récents

  • Les frameworks de création de stratégie de marque
  • Le guide ultime pour créer une stratégie de marque
  • Stratégie de branding : corporative, familiale et produit
  • Un message d’espoir d’un chef d’entreprise à un autre
  • [Livre] Branded Interactions

Adresse et contacts

403, Rue Drouot, Akwa
BP 4468 Douala
contact[at]lotincorp.biz
 +237 673 07 94 08
Lundi à Samedi : 09h00 à 19h00

Copyright © 2008–2023. Lotin Corp.· All Rights Reserved.