Cours de Web Design part.5

Webdesign
visual design
Février 2013
a RITAteaching
Relax In The Air
5

design
© http://www.phawker.com/wp-content/uploads/2011/04/Andy_Warhol.jpg

style
© http://luxe.planet.fr/wp-content/uploads/2012/06/Karl-Lagerfeld.jpg

style
design
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
tendances et mode du moment
technologie à disposition
connaissance des fondamentaux

Forget about CMYK.
It’s all about RGB and HEX.
couleurs
design
Relax In The Air
Février 2013

En #FF0000 et #000000
couleurs
design
Relax In The Air
Février 2013

____________________
North Kingdom
La couleur est aux sites web ce que
la musique est aux films.

• Elles nous procurent du plaisir (ou pas...).
• Les couleurs sont une forme de
communication comme le sont les langues.
• Influe sur les émotions.
• Ont des significations différentes selon le
sexe ou la culture.
couleurs
design
Relax In The Air
Février 2013

couleurs
design
Relax In The Air
Les relations de couleurs aident
l’utilisateur à créer des associations dans
les éléments d’une page.
Février 2013

couleurs
design
Relax In The Air
Les contrastes de couleurs peuvent aider à
guider l’utilisateur à travers une interface.
Février 2013

• Bleu couleur favorite chez les deux genres.
• Brun couleur moins appréciée chez les deux genres.
• Orange couleur moins appréciée chez les femmes.
• plus grande tolérance des hommes aux couleurs
achromatiques (noir, blanc & les gris)
• les femmes sont plus précises lorsqu’elles
nomment les couleurs.
couleurs
design
Relax In The Air
généralités
Février 2013

couleurs
Doivent correspondre aux objectifs et rester
sobres, mais efficaces

Radiations electromagnétiques
couleurs
design
Relax In The Air
qu’est-ce que c’est?
Février 2013

couleurs
design
Relax In The Air
Février 2013

couleurs
design
Relax In The Air
la Radiation éléctromagnétique que l’humain
peut voir est appelé:
Spectre visible de la lumière / lumière visible
Février 2013

couleurs
design
Relax In The Air
newton
Février 2013

couleurs
design
Relax In The Air
histoire
Comment l’humanité répond-t-elle aux couleurs à
travers l’histoire l’histoire?
Février 2013

couleurs
design
théorie
Relax In The Air
Chaud
Froid
Excitant
Tranquillisant
Février 2013

couleurs
design
Relax In The Air
usage du rouge
1) Vous voulez inciter l’utilisateur à l’action, lui
montrer une urgence:
Montrer un call to action «acheter!»
prix d’un produit
un compte à rebours
Février 2013

couleurs
design
Relax In The Air
usage du rouge
2) Utilisez-le dans les messages d’erreurs:
Le rouge va alerter l’utilisateur
montrera l’importance d’un message
Février 2013

couleurs
design
Relax In The Air
usage du rouge
3) Utilisez-le dans tout design implicant
l’alimentation:
Le plus souvent associé aux aliments
utilisé avec succès dans des restaurants etc
Février 2013

couleurs
design
Relax In The Air
usage du rouge
4) ne l’utilisez pas dans des contextes de performance:
quiz
questionnaires
Février 2013

couleurs
design
Relax In The Air
aucune couleur n’a un effet unique.
nos réactions dépendent du contexte, de notre
expérience personnelle et de notre culture.
théorie
Février 2013

couleurs
design
Relax In The Air
les réponses innées aux couleurs que nous avons
héritées de nos ancêtres se sont construites autour
de la culture et des interactions entre les cultures.
culture
Février 2013

couleurs
design
Relax In The Air
au moyen-âge, le pigment ultramarine utilisé dans les
teintures et colorants était tellement cher qu’il a
depuis été associé avec les hautes classes de la
société.
pendant ce temps, les basses classes portaient du
vert et du brun.
culture
Février 2013

couleurs
design
Relax In The Air
l’orange a une signification particulière dans les
cultures orientales. Cela est probablement dû au
safran.
culture
Février 2013

couleurs
design
Relax In The Air
aux usa Le jaune est souvent associé avec les taxis
yellow cab company (fondée en 1915). Son fondateur,
John d. hertz, s’était appuyé sur une étude de
l’université de chicago qui disait que c’était la couleur
la plus facile à distinguer depuis une longue distance.
culture
Février 2013

couleurs
design
Relax In The Air
le rouge est souvent utilisé dans les drapeaux
nationaux car ils symbolisent le courage ou le sang
versé par les soldats morts au combat.
culture
Février 2013

couleurs
design
Relax In The Air
• Drapeau(x)
• religion dominante (couleurs associées)
• couleur du mariage
• couleur du deuil (ou toute autre cérémonie
religieuse)
• couleur d’événements et jour fériés
• sports et équipes rivales (couleurs associées)
culture
Février 2013

couleurs
design
roue de couleur
Relax In The Air
Février 2013

couleurs
design
Relax In The Air
La couleur de fond de votre site est probablement la
plus importante et déterminante dans la création de
votre site internet.
background / fond
Février 2013

couleurs
design
Relax In The Air
blanc
background / fond
Février 2013

couleurs
design
Relax In The Air
• le plus commun
• très bon contraste avec les typos foncées
• bonne lisibilité
• associé avec la pureté, propreté et innocence
(occident)
blanc
Février 2013

couleurs
design
Relax In The Air
Lorsque l’audience est la plus large
quand?
Février 2013

couleurs
design
Relax In The Air
blanc
Février 2013

couleurs
design
Relax In The Air
beige
background / fond
Février 2013

couleurs
design
Relax In The Air
• associé avec des thématiques naturelles
• donne un plus grand sentiment d’intimité
• véhicule l’idée d’ancienneté (parchemin)
beige
Février 2013

couleurs
design
Relax In The Air
quand?
jardinerie
tout site historique
boissons maltées
Février 2013

couleurs
design
Relax In The Air
beige
Février 2013

couleurs
design
Relax In The Air
foncé
background / fond
Février 2013

couleurs
design
Relax In The Air
• Pas le plus courant
• peu adapté à des sites avec grand traffic
(e-commerce)
• sentiment d’exclusivité et sophistication
foncé
Février 2013

couleurs
design
Relax In The Air
quand?
design et mode
activités nocturnes (bars...)
Février 2013

couleurs
design
Relax In The Air
foncé
Février 2013

couleurs
design
Relax In The Air
nous avons des standards dans la signalétique de
tous les jours et celle-ci s’applique aussi dans le web.
éléments graphiques
Février 2013

couleurs
design
Relax In The Air
utilisez ces standards que l’utilisateur connait et
reconnait pour véhiculer le bon message.
éléments graphiques
Février 2013

couleurs
design
Relax In The Air
vert
• opération ou action réussie
• progression dans une tâche
Février 2013

couleurs
design
Relax In The Air
vert
Février 2013

couleurs
design
Relax In The Air
jaune
• mettre en avant des éléments importants
(stabilo)
• parfois associé avec des ventes, offres et
soldes
• utilisé aussi pour les notations (rating)
Février 2013

couleurs
design
Relax In The Air
jaune
Février 2013

couleurs
design
Relax In The Air
rouge
• signaler une erreur
• signaler un message urgent
• signaler des messages marketing (fin d’enchères)
Février 2013

couleurs
design
Relax In The Air
rouge
Février 2013

couleurs
design
Relax In The Air
BLEU
• sTANDARD POUR LES LIENS
• NE PAS L’UTILISER POUR DU TEXTE
Février 2013

couleurs
design
Relax In The Air
BLEU
Février 2013

couleurs
design
Relax In The Air
combinaisons
Monochromatique (1 teinte)
Février 2013

couleurs
design
Relax In The Air
monochromatique
Février 2013

couleurs
design
Relax In The Air
combinaisons
Analogue (3 teintes voisines)
Février 2013

couleurs
design
Relax In The Air
analogue
Février 2013

couleurs
design
Relax In The Air
combinaisons
Complémentaires (opposées)
Février 2013

couleurs
design
Relax In The Air
complémentaires
Février 2013

couleurs
design
Relax In The Air
combinaisons
Split-Complémentaires (opposées)
Février 2013

couleurs
design
Relax In The Air
split-complémentaires
Février 2013

couleurs
design
Relax In The Air
combinaisons
Triade
Février 2013

couleurs
design
Relax In The Air
triade
Février 2013

www.colorsontheweb.com
cool link

Colour can bring design to life, inform
hierarchies, create bonds between elements,
add pace or emotion.

Cours de Web Design part.5

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (7)

Plus de MC Casal

Plus de MC Casal (6)

Cours de Web Design part.5