Prestations Web Design = Brief +Guidelines +Mobile first +Responsive Web Design +Wireframe +Sitemap = Style 📝

design : terme qui désigne à la fois « dessin » et notion de « dessein », réalisation et conception, projet et produit, pensée et résultat.

WEBDESIGNMOTEUR - 2018 - logo
WEBDESIGNMOTEUR – 2018 – logo

Prestations Web Design

Si vous avez déjà élaborer un cahier des charges, c’est l’occasion de l’apprécier. Définissez vos suggestions, citez quelques sites web de vos concurrents et vos diverses inspirations. Mettons toutes les cartes sur la table pour imaginer votre site internet idéal. Puis, ensemble, nous allons créer le brief de votre site web.

Le terme de ‘brief’ pour briefing est le fait de donner ou fournir des instructions et indiquer des directives pour définir vos besoins. Avant de penser à la conception de votre support de communication, il est primordial de vous poser toutes les bonnes questions liés à votre projet Web.

Parmi les questions a se poser, on peut avoir :

  • Quelles sont les activités de votre entreprise ?

  • Quel est le positionnement de vos services/produit et de votre marque ?

  • Quels sont vos atouts, vos valeurs ? Et celles de vos concurrents ?

  • Quelle est votre cible principale ?
    (zone géographique / âge des prospects / secteur d’activité)

  • Quel est le budget prévisionnel alloué à votre projet Web ?

  • Quel est l’objectif de votre projet Web ?
    (divertir / informatif / visibilité / notoriété / conversion)

Avant même de commencer à bâtir le site web, la notion de web design regroupe ces aspects là.

Ce sont les bases d’un brief, notre document de travail et d’échange afin de poser la base de votre site web.

Le studio WEBDESIGNMOTEUR vous guide pour orienter vers une solution adapté à votre situation.

Au delà du style, un bon brief apporte les réponses aux problématiques techniques liées à l’arborescence (sitemap) et au référencement (Search Engine Optimization).

Artwork - schéma moteur de rendu de navigateur web – web browser layout engine - 2017 - WEBDESIGNMOTEUR
Artwork – schéma moteur de rendu de navigateur web – web browser layout engine – 2017 – WEBDESIGNMOTEUR

Prestations Web Design = Sitemap (arborescence & plan du site)

Ensemble, nous établissons le plan de votre projet web : c’est le sitemap.

Le mot est la base du contenu.
Si le contenu est roi alors le design est son château.
Les mots sont les pierres.
Chacun apporte sa pierre à l’édifice.
Vous fournissez les mots, le vocabulaire de votre métier, de vos produits, de vos services, le ton, vos valeurs, votre message.
Je construis l’édifice du roi, ainsi la caisse en blanc devient le prototype de votre projet web.
Votre contenu se sentira dans bien son design.

Le contenu, ce sont les pages de votre site internet ou encore les articles de votre blog. Sachant que le ROI (Return On Investment) mesure l’efficacité de l’investissement réalisé, votre site est un investissement. Puis le site génère un retour sur investissement.
Le contenu est ROI comme le client.

Prestations Mobile first

La notion de Mobile first n’est autre qu’un mode de pensée qui consiste à réfléchir en mobile en premier lors de la conception d’un site web.

Lors de la conception du projet web en mobile-first la priorité se fait sur l’essentiel :

  • Simplification de la navigation web
  • Attentes des mobinautes sur la navigation web
  • Penser ergonomie mobile avant tout
Site DESIGNMOTEUR dm8 - Web Performance - 2018 - screen homepage - RunTime Test - WEBDESIGNMOTEUR
Site DESIGNMOTEUR dm8 – Web Performance – 2018 – screen homepage – RunTime Test – WEBDESIGNMOTEUR

Prestations Responsive Web Design

Le Responsive Web Design est autant une méthode de conception Web et des technologies web, qui permet la réalisation de sites adapté à la lecture et avec navigation optimale pour l’utilisateur quelle que soit son appareil tels que téléphones mobiles, Smartphone, tablettes, grand écrans d’ordinateur de bureau voire même écran TV.

Site DESIGNMOTEUR dm7 - Responsive Web Design - 2016 - screen homepage - WEBDESIGNMOTEUR
Site DESIGNMOTEUR dm7 – Responsive Web Design – 2016 – screen homepage – WEBDESIGNMOTEUR

Il faut penser à la fois Mobile first & Ultra-HD pour mettre en valeur le contenu visuel adapté au Smartphone et aux grand écrans.

Prendre en compte le type de l’écran va permettre d’apporter de la qualité d’image pour le visiteur !

Mobile ! Power !

Exemple ? Un écran OLED (Organic Light-Emitting Diode) d’un Smartphone récent n’allume pas les pixels noirs qui l’affiche, le noir est donc 100% noir, et la batterie est ainsi préservé car l’écran a moins de pixels allumés. Et la qualité est d’autant plus appréciable.

Idée ! Proposer au visiteur un interrupteur « jour/nuit » avec un switch entre un thème lumineux ou sombre. Le thème nuit bénéficie d’un feuille de style avec fond noir, ainsi on utilise les avantages à bon escient d’un Smartphone avec écran OLED et l’Interface Utilisateur n’est que sublimée.

PWA ! Ready. Go !

La technologie PWA (Progressive web app) est un site Web optimisé pour un Smartphone. Comme une Application mobile à installer sur son Smartphone, le système PWA rend possible l’utilisation d’un site Internet en mode hors-ligne, sur mobile, sur tablette ou sur ordinateur. Il faut juste un premier passage sur le site en étant connecté, mais après, si on se déplace avec son mobile ou sa tablette, sans Wifi ni 4G, alors on peut à nouveau accéder au contenu du site, sans être connecté.

Comment ça fonctionner la PWA ?

La tech PWA fonctionne grâce au Service Workers, ce des scripts moteurs inclus dans le navigateur Web et sur le serveur Web qui fonctionnent en parallèle de l’affichage de la page Web. Cela permet le mode hors-ligne, l’envoi de notifications ou la mise à jour des contenus en arrière-plan. On peut avoir un site web qui s’affiche en plein écran (Splash Screen au lancement), sans le cadre ni l’interface d’un navigateur Web mobile.

Exemple de Progressive web app ?
Le site DESIGNMOTEUR v8 dispose de la technologie PWA.

Site DESIGNMOTEUR dm8 - Web Performance - 2018 - screen homepage - RunTime Test - WEBDESIGNMOTEUR
Site DESIGNMOTEUR dm8 – Web Performance – 2018 – screen homepage – RunTime Test – WEBDESIGNMOTEUR

Le processus du studio entre nous :

  • Définition de vos besoins en matière de communication

  • Positionnement face au marché

  • Audit de l’existant si projet de refonte de site web

  • Rédaction d’un brief
    (résumé du cahier des charges et de la direction du style)

  • Présentation du devis
  • Paiement des 30% de l’acompte

  • Planification du projet

  • Réflexion sur les moyens techniques mis en place pour votre projet (Hébergement Web, stockage, fonctionnalités)

  • Réflexion sur le type de moyens humains pour la gestion du site

  • Réflexion sur l’objectif du site, sa cible (âge, CtoC, BtoB, CtoB, marché, pays), sa rentabilité, les moyens financiers à engager…

  • Réflexion sur le contenu : pages, services attendus, principes de navigation

  • Réception de vos informations et votre contenu (textes et images)

  • Mise en place de la page ‘Coming Soon’ pour préparer le lancement de votre site

  • Référencement immédiat de votre page d’attente via le positionnement de votre nom de domaine avec votre slogan

Création du wireframe

  • Création de la structure du site internet et du scénario de navigation (wireframe = maquette simple en noir et blanc de votre futur site)

  • Retours et échanges face à cette proposition

  • Validation par vos soins du zoning et du wireframe fonctionnel (header, navigation, sidebar, footer)
Wireframe DESIGNMOTEUR - 2013 - guidelines - by ELJ
Wireframe DESIGNMOTEUR – 2013 – guidelines – by ELJ

Prestations pixels

Vous voulez changer de logo ou le moderniser ? Vous chercher à donner une nouvelle identité visuelle à votre organisation ? Je suis à votre écoute pour transformer vos idées en image. Une image qui vous ressemble et représente vos valeurs. Une image qui fait passer votre message.

DESIGNMOTEUR TechTIC - 2018 - logo fx
DESIGNMOTEUR TechTIC – 2018 – logo fx

Le logo est l’élément essentiel qui vous représente sur le Web, sous la forme d’icône, de bannières sur les réseaux sociaux, visible sur vos cartes de visites. Le logo est la déclinaison de votre charte graphique.

  • Logotype : nom, slogan / baseline, couleurs, typographie
  • Création de la charte graphique
  • Conception de la template (page modèle-type / template) de votre site internet
  • Validation et modifications selon vos retours et conseils
  • Réalisation des éléments graphiques web de l’interface utilisateur (UI) et de l’expérience utilisateur (UX)
  • …en tenant du compte du référencement via les techniques de base du Search Engine Optimization (SEO) et de votre contenu
Prestations Pixels = logo +motto +guidelines +interface utilisateur +social network = Image 🖼️

Garage et outils du studio WEBDESIGNMOTEUR

  • Un site privé personnalisé pour suivre en temps réel votre projet et accéder aux prototypes fonctionnels dans un espace dédié.
  • Un site demo ou un blog avec une interface d’administration disponible pour vous former à l’utilisation/maintenance si besoin
Site TimeDM - espace membre Team DM - 2017 - WEBDESIGNMOTEUR
Site TimeDM – espace membre Team DM – 2017 – WEBDESIGNMOTEUR

Une fois le travail accompli, la charte graphique est posé et le sitemap validé, c’est maintenant que l’on soulève le capot du moteur du serveur web et du moteur d’affichage du navigateur web. on passe à l’œuvre du développement web

Prestations Web Développement = HTML +CSS +JavaScript +PHP & MySQL x WordPress = Moteur ⚙️