Panorama du web

Par défaut

Panorama du webdesign

Infographie : chronologie du web design

Infographie : chronologie du web design

Premiers sites en mode texte

1ère page web

  • Voir aussi sur sixrevisions le comparatif de Altavista, Yahoo! et W3C.

Evolution des 10 principaux sites web

chronologie

En colonne

livinginternet.com

tlc-systems.com

december.com

Le mode tableau/frame

Les portails

Le premier Yahoo!

Le premier Yahoo!

Cornell University

big footer header

GiftCardRewards

<table>

PromoProductExpress

3 colonnes header menu horizontal

So 90’s

KillerSites

menu à gauche

TerrierTraining

Le catalogue / e-commerce

PromoShop.au

header menu horizontal menu à gauche grille

AdvancedDigitalEbooks

header menu à gauche

La mode du Flash

Prahba

vintage skeuomorphisme

Apparition de CSS

css

Tableau revisité

Strasbourg Constantia

texture big header

The Great Discontent

horizontal scroll big portraits

Ignacio Macri

grille couleur menu à gauche

Apparition de Javascript

JQuery

Slider/Carousel

Logo Design Studio

slider texture top menu

Slider géant

fila.de

big content top menu

revo.com

big slider top menu

menuez.com

big slider

Effet paralax

digitalhands.net

big footer

L’ergonomie d’une page web

Realistic/skeuomorphisme versus Flat Design

Effet bureau

SickDesigner

skeuomorphisme animation

Effet vintage

Latherbeerich

texture vintage one page

The Vintage Car Catering Company

vintage slider skeuo

Dollar Dread Full

vintage big typo

Cirq

big typo vintage

Lord Likely

3 colonnes vintage

Avec textures

Fundo Los Paltos

texture skeuomorphisme top menu

InterExpresso

texture top menu big content big footer

Minimalisme

verso.com

minimaliste slider

ia.net

minimalsite 1 colonne

Minimalisme + big header

All for Design

minimalisme couleur big header sous-menu menu à droite

Real Visuals

top menu big header slider

Classic Ink

layer cake

Phaidon

big content sous-menu

Monochrome

TechCrunch

vert top menu big typo

Chris Thurman

big typo layer cake top menu

Fuzzco

hachures grille

Page-écran

david-siegel

couleur minimaliste top menu

Lets travel somewhere

big picture page écran vertical scroll

Antique Piano Shop

vintage vertical scroll

TorisEye

nature

Adam Amaral

big picture

Yes Nurse

big picture top menu

Tao Community

navigation monochrome page écran

Overload

Make Photoshop Faster

texture

Avec menu latéral gauche

CreativeSoapBox

menu à gauche

flipp.ca

big picture vertical slider

Le blog / colonne centrée

KillerSites.com

menu à droite big header

InternetMan

top menu menu à gauche

Avec photos superposées

spectacle.com

couleur menu à droite

SlurpyStudios

skeuomorphisme menu à droite grille

Avec texture artistique

Blog d'Istok Pavlovik

onglet texture couleur menu à droite

Bermon Painter

big header hover grille

Header/Content/Footer

pioneerelectronics

big content big header

yourimedia.com

big header 1 colonne no menu

InfinVision

hover minimaliste

In My Bubble

top menu big header menu à gauche

HandieMail

top menu typo

Horizontal Scroll

Track'em Find'em Kill'em

menu à gauche

Minimal Monkey

big typo couleur

Le panneau d’affichage

Pinterest, l'inventeur du genre

grille

POMinPerth

grille minimaliste sous-menu

SilkTricky

video grille couleur

William Leeks Blog

couleur minimaliste grille

NowyTeatr

video grille

Middle Mojo

grille couleur

French Cuisse

grille minimaliste

The Verge

big header sous-menu couleur grille

Posters in Amsterdam

grille big typo

Far From The Tree

grille couleur top menu

Faces of New York Fashion Week

grille B/W hover couleur

Microblog/Shortlist

LayerVault, sur Tumblr

colonne centrale top menu

Sacha Greif

menu à droite couleur big typo

Big

Typo

The Trailer Collection

big typo monochrome hover

monochrome,big typo

Austin Beerworks

texture page écran

Icons

Future of Web Design

grille big typo couleur

Carnette

page ecran big typo

expedia.fr

widget grille

Le site pensé comme une application / mobile

Monopage (avec sticky header)

RekkiaBilly

couleur big typo layer cake couleur

Le responsive

La vidéo intégrée

En arrière-plan

parasol-island.com

top menu video grille

Boîte à outils

Par défaut

Logiciels

Feuilles de styles et gabarits

Frameworks

Services en ligne

Spécifications

Tutoriels

Snippets et autres outils

Littératures : web et bouquins

Blogs de développeurs/ingénieurs/designers

Autres sources d’inspiration

Autres sujets

Polices, typographie et lisibilité

Par défaut

Lisibilité

  • scannabilité : 79% des lecteurs scannent d’abord la page. Accrocher le regard
  • Lisibility/Readability : capacité perceptive/cognitive. Écrire pour l’œil (voir), écrire pour le cerveau (comprendre).
  • Indice de Flesch : ratio entre la moyenne du nombre de mots par phrase et la moyenne du nombre de syllabes par mot. Un bon score : entre 60 et 70 (plus il est élevé, meilleur c’est).
  • Indice de Flesch/Kincaid : âge moyen à partir duquel le texte est compréhensible (indice 8 : élève de 3ème)

Largeur de texte

  • 1 1/2 alphabet
  • 25 caractères pour le titre
  • 40 caractères pour le reste de la titraille
  • 60 caractères pour les paragraphes

Densité

  • Aération : gestion des blancs, des vides et des pleins.
  • Rapport texte/image (illustratif, descriptif, métaphorique)
  • Densité des mots-clés et des focus : cf. référencement

Navigation

  • Voir la page Navigation
  • Fil d’Ariane (breadcrumbs), menus déroulants
  • Liens d’évitement

Typographie

Choix d’une police

  • L’orthotypographie
  • Les classiques
  • Avec ou sans empattement (serif), standard ou exotique
  • Hauteur de X, ligatures, signes diacritiques, caractères spéciaux

Les entités ou caractères spéciaux

  • les inférieurs et les supérieurs : &lt;&gt;
  • l’esperluette (ou et commercial) : &amp; &
  • les symboles : &spades; ♠, &Sigma; Σ, &copy; ©,…
  • Liste complète sur W3C (trad. LaGrange)

Contraste et choix de couleurs

Les types de sites web

Par défaut

Classement thématique

  • site vitrine, marchand
  • site institutionnel
  • site informationnel
  • site encyclopédique
  • portail
  • moteur de recherche
  • annuaire
  • site personnel (journal intime, weblog)
  • portfolio, galerie

Classement fonctionnel

  • site statique, site dynamique
  • e-commerce : B2B, place de marché, B2C, C2C, sites d’enchères/petites annonces, B2G
  • moteur de recherche
  • site de service (SaaS – Software as a Service)
  • wiki
  • blog, microblog
  • réseau socionumérique

Les types de contenu rédactionnel pour le web

  • Communiqué de presse
  • Fiche de catalogue
  • Publicité, bannière
  • Billet d’humeur, microblog
  • Flux RSS
  • Newsletter, email
  • Voir aussi les pages essentielles

Les outils d’écriture web

Par défaut

Des logiciels

  • Mode code/WYSIWYG
  • Application sur ordinateur : Dreamweaver/Notepad++
Gestionnaires de contenu sur serveur web
 TYPE Saisie Organisation Exemples
Blog HTML / WYSIWYG (anti)chronologique WordPress, DotClear
CMS thématique Spip, Joomla, Drupal
Wiki  syntaxe wiki Mediawiki
  • Voir aussi les services web de diffusion de contenus : Twitter (140 caractères), Facebook, les réseaux sociaux numériques, etc.

Des techniques