Webdesign 5 min pour combattre 5 idées reçues



Documents pareils
INSTALLATION RAPIDE DU CONVERTISSEUR WRC-300 Version 1.1

Google Merchant Center

STRUCTURE DE L ORDINATEUR

Débuter avec Easyweb B

ZOTERO Un outil gratuit de gestion de bibliographies

Guide d utilisation du portail de formation en ligne LeCampus.com à l attention des partenaires de l APSM

L écran du marais : Comment configurer le viewer OpensSim

Spétechs Mobile. D e r n i è r e m i s e à j o u r : s e p t e m b r e

M1105 Web Design Analyse Sectorielle Sites de grands musées

SARL DDLX Multimédia Place du général de Gaule Boisseron Tèl : support@ddlx.org. Agence Web. Design Prestashop personnalisé

Spétechs Mobile. Octobre 2013

Spétechs Mobile. D e r n i è r e m i s e à j o u r : a o û t 2014

Observatoire des ressources numériques adaptées

HTTP Commander. Table des matières. 1-Présentation de HTTP Commander

Ouest. bretonne! sur : mobile. Déroulé. photos et. dossiers de la dynamique et. : Accueil. Disponible. Contacts presse : Julie

MAJ 08/07/2013. INSTALLATION RAPIDE Version 1.3

Certificats de signature de code (CodeSigning)

Utiliser le site Voyages-sncf.com

... Cahier des charges Site Internet Office de Tourisme Lesneven - Côte des Légendes MAITRE D OUVRAGE

Le Web et Internet. A. Historique : B. Définitions : reliés entre eux via un système d interconnexion.

B&C PRIVATE ROOM GUIDE D UTILISATION. B&C COLLECTION // BE INSPIRED //

+33 (0) Sarl ISB Altipolis2 av. Du Général Barbot Briancon - France

SITE INTERNET BLOG SITE E-COMMERCE GRILLE D ANALYSE / AUDIT PREMIERE ANALYSE. Entreprises. o Public spécialisé o Etudiants o Enfants

FLUX POPCLUSTER PROCÉDURE D INSTALLATION ET D UTILISATION

IPHONE BANNIÈRE CLASSIQUE DIMENSIONS. Standard : 320 x 53 (portrait) 20Ko Jpeg/Gif/Png. HD : 640 x 106 (portrait) 20Ko Jpeg/Gif/Png DESCRIPTION

Ma première visibilité sur le Web. en 60 min avec des outils gratuits

Ceci est un Chromebook, ton ordinateur!

SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5

NOUVELLE ÉDITION ABONNÉS NUMÉRIQUE. Opportunités de communication

PRÉSENTATION VITRINEMEDIA

Sage Customer View (ios) Guide d installation et d utilisation

Vous souhaitez présenter un bien immobilier de manière ergonomique et design sur le web? Choisissez Kompromis!

L informatique pour débutants

Indiquer l'espace libre sur le disque dur

Comment augmenter votre taux de transformation : A/B Testing Live & User Experience

BiSecur Gateway avec appli smartphone NOUVEAU

Sites Internet : les. tendances. Jeudi 30 janvier 2014 Bordeaux L AGENCE CONNECTÉE À L ENTREPRISE

Les pré-requis pour créer un.ave pour Android

Concevoir son premier espace de cours sur la plateforme pédagogique Moodle

ERGONOMIE ET OPTIMISATION DU TAUX DE CONVERSION D UN SITE INTERNET Partie 1/2

Que faire si une vidéo ne s'affiche pas?

APPAREILS ACCESSIBLES

SmartCam HD. Guide d utilisation

STANDARDS PUBLICITAIRES POUR LA PUBLICITE SUR TELEPHONE MOBILE

PARAMETRAGE D INTERNET EXPLORER POUR L UTILISATION DE GRIOTTE

Les tablettes numériques en EPS. Repères. Les différents types de tablettes et leurs caractéristiques.

Le numérique. de vos médiathèques.

Intégrer des médias. Plateforme e-tourisme. demo.minisites.encharentemaritime.com

Manuel d utilisation de V3D Events - Visiteurs

Les premières étapes d une présence adéquate sur le Web

Comment consulter les e- books à l Université de Lorraine?

Forums et Ateliers numériques

Les applications mobiles dédiées au commerce de proximité Intervenant : Julien Hatton (Buzznative) et Khalid Sadiki (Hithik et Ecotravel)

Guide d utilisation 2012

SFEA. Ce document peut être imprimé au format livret. Guide utilisateurs du site "Se Former en Alsace"

Hotspot Mobile 3G+ HUAWEI E587. Guide de démarrage rapide

Comment bien référencer mes sites internet? Les 100 SECRETS EN VIDÉO

DU Endoscopie. Guide d utilisation. chirurgicale. Diplôme Universitaire d Endoscopie Chirurgicale

GUIDE de prise en main. let s play

Procédure d utilisation du PRM

Application CarPostal Informations relatives aux services mobiles de CarPostal

UTILISATION DU LIVRE NUMÉRIQUE

Guide Google Cloud Print

SIMPLE CRM PLAQUETTE PRESSE. Simple CRM est un logiciel en ligne qui va vous permettre de gérer

Contrôler un ordinateur à distance avec Google Chrome

Transférer des dossiers sur un disque amovible Votre support de formation

Guide Utilisateur Enregistrement d'un compte en ligne

Foire aux questions sur Christie Brio

CAHIER DES CHARGES Refonte du site Internet & newsletter de la filière Normandie AeroEspace. Site Internet actuel :

Guide organisateur. Mettre en place Wisembly le jour J

Isadora. Photo jpeg qualité 50% %, 320X240. Prérequis

Visioconférence CNDP/CRDP/Canopé. Créer une nouvelle visioconférence en utilisant le pont RENATER 1


WINDOWS Remote Desktop & Application publishing facile!

MON 1ER JEU-CONCOURS SUR FACEBOOK

NE PAS INSERER DE CD FAIT POUR WINDOWS LORS DE L'INSTALLATION D'INTERNET NE PAS INSERER LE CD D'INSTALLATION DE VOTRE FOURNISSEUR D'ACCES

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE

Se doter d un site web: par où commencer?

Connaissez-vous Google? Le 2 avril 2015

Recommandations techniques

Réaliser une démonstration ShoreTel

Utiliser une tablette tactile Androïd

dmp.gouv.fr Pour en savoir plus DMP Info Service : 24h/24 7j/7

Découverte de Microsoft Office 2010 et de Microsoft Exchange Server 2010

L environnement de travail de Windows 8

Espace pro. Installation des composants avec Firefox. Pour. Windows XP Vista en 32 et 64 bits Windows 7 en 32 et 64 bits

FORMATION MULTIMÉDIA LVE

AU PROGRAMME. Tour de table

Mode d emploi de la clef USB de l I.P.I. Philosophie de la clef USB

HYPERDRIVE iusbport Guide d utilisation

Conférence. Comment améliorer le taux de conversion de votre boutique en ligne grâce au design sous Prestashop? Réalisé par ECOMIZ

Navigateurs Firefox / Chrome / IE / Safari et les autres

Mes documents Sauvegardés

Vous n avez aucune installation à faire et aucune mise à niveau ne vous complique la vie. Vous allez adorer votre nouveau site.

EXTENSION WORDPRESS. Contact Form 7. Proposé par :

Les sauvegardes de l ordinateur

Transcription:

1 Webdesign

2 Idée reçue numéro 1 # "Je dois rendre visible mes messages clefs sans devoir scroller "

3 Idée reçue numéro 1 # Je dois rendre visible Fin de la tendance à tout placer au dessus de mes la messages ligne de flottaison clefs sans devoir scroller

4 Idée reçue numéro 1 # Je dois rendre visible Fin des sliders en Home Page mes messages clefs Le taux de clics du 2e slide d un carrousel < à 2% sans devoir scroller

5 Le webdesign mise sur les sites en scroll et «one page» Influencé par les réseaux sociaux, le mobile et sa navigation tactile, le scroll s est développé sur un grand nombre de sites web. Home page très épurée Mise en avant d une photo ou d une vidéo Mise en avant d un seul message clef à la fois

Exemple de site monopage en scroll

7 Idée reçue numéro 2 # "Je dois définir la taille moyenne des écrans de ma cible"

8 Idée reçue numéro 2 # "Je dois définir la taille Fin des sites qui se contiennent dans une résolution définie moyenne des écrans de ma cible"

9 Développement des sites en responsive design pour une adaptation à tous les terminaux de manière plus simple et à moindre coût (comparé au développement de plusieurs applications) Le responsive design consiste à développer un site qui s adapte à l outil avec lequel il est lu. http://bit.ly/1hb7jju

10 Idée reçue numéro 3 # «Toutes les informations sur ma société doivent se trouver en texte sur la home page"

11 Moins de blabla, ON SE TAIT? Oui et Non! On essaye d en dire moins pour ménager le lecteur et lui donner l information essentielle qu il recherche. On en dit tout autant mais en mettant en scène son discours pour qu il soit plus digeste et attractif : moins de texte, place à l image, aux pictogrammes, aux illustrations, aux démonstrations, aux vidéos, à la datavisu

12 De plus en plus de sites avec un background en image http://bit.ly/1okfvfr http://bit.ly/1hbdfld http://bit.ly/1ioh6vs

13 De plus en plus de sites avec une large image en background Le site de Sagmeister & Walsh dispose d images aléatoires. Le menu figure directement sur les images.

14 Le contenu peut être simplifié par des pictogrammes de la datavisualisation

15 Idée reçue numéro 4 # «Je choisis une typo simple pour le web compatible sur tous les navigateurs"

16 LA TYPO, PLUS QUE DES LETTRES Au grand bonheur des designers, les fonts de toutes sortes deviennent compatibles avec les navigateurs. Google Chrome et Firefox ont toujours cherché des solutions pour améliorer le rendu visuel et l'apparition de ces nouvelles typographies.

17 La typo, bien plus que des lettres : un rendu visuel plein de sens Les fonts permettent d ajouter un côté plus unique aux créations, d exprimer sa personnalité de marque, son positionnement, un message ou des valeurs. http://bit.ly/1fgkeqy http://www.valentinagallo.us/site/

18 La typo, bien plus que des lettres : un rendu visuel plein de sens http://bit.ly/1jx5evs

19 Idée reçue numéro 5 # "Je travaille les représentations graphiques le plus proche possible de la réalité pour donner plus facilement des repères à l utilisateur"

20 Idée reçue numéro 5 # "Je travaille les représentations graphiques le plus proche possible de la réalité moyenne pour donner des écrans plus facilement de ma cible" des repères à l utilisateur" "Je dois définir la taille Fin du Skeuomorphisme, place au flat design mais avec un léger retour en arrière avec le material design

21 SKEUOMORPHISME VS FLAT DESIGN

22 PLACE AU FLAT DESIGN, ENCORE EN 2014 ios6 ios7

23 EN 2015, PLACE AU MATERIAL DESIGN

24 Le material design en vidéo

25 Quizz: Skeuomorphisme, flat ou material design?

26 Quizz: Skeuomorphisme, flat ou material design?

27 Quizz: Skeuomorphisme, flat ou material design?

28 Quizz: Skeuomorphisme, flat ou material design? Flat Design Material Design

Merci de votre attention N hésitez pas à nous contacter Cécile Lorenzini Directrice marché Luxembourg clorenzini@vanksen.com +352 48 90 90 228 L équipe Webdesgin Vanksen