Créativité et webdesign

La créativité est aussi une affaire de webdesign. Votre site Internet est en cours de refonte via votre agence de communication, ou votre graphiste. Ils vous proposent de nouveaux designs, en lien proche avec votre charte graphique, pour créer du neuf au niveau de votre site Internet. Alors quelles sont les tendances en matière de créativité ?

Viser mobilité

D’abord, avec 6 milliards (source : http://www.lemonde.fr/technologies/article/2012/07/17/pres-de-75-des-terriens-possedent-un-telephone-portable_1734969_651865.html) d’utilisateurs de smartphones dans le monde et en France 72% d’individus ayant déjà navigué sur Internet via leur téléphone portable il est indispensable d’envisager votre site sous la forme « responsive design ».

« Responsive design » ou « responsive web design », c’est la faculté d’un site Internet à s’adapter aux formats des écrans de tablettes ou de smartphones. Au-delà de cette simple faculté à s’adapter, en envisageant votre site Internet lisible sur téléphone mobile ou sur tablette, votre contenu, votre ergonomie, ne seront pas imaginés de la même façon.

1

Incidences sur le webdesign :

Le format de votre site Internet est lisible sur des écrans plus petits, il est donc nécessaire de créer un webdesign plus ergonomique. Pour développer ce genre de site, le webdesigner devra passer plus de temps. En effet, le travail sur une version en responsive design est plus compliqué qu’une simple version pour écran d’ordinateur. De plus, la phase de tests de votre site Internet doit être faite sur chacun des supports et non plus seulement sur un ordinateur classique. Selon Stéphanie Walter (UX Designer en freelance et au sein de l’agence Alsacreations), cette tendance à la mobilité est tellement forte qu’elle a « l’impression que l’on est passé d’un web orienté grands écrans qui a inspiré le mobile, à un web mobile qui commence à déteindre sur le grand écran. ». (Source : http://www.webdesignertrends.com/2013/12/tendances-du-webdesign-2014/)

Incidences sur les contenus :

Votre site est lisible sur téléphones portables et sur tablettes… Parfait, mais alors on arrête le blabla, on va à l’essentiel ! L’idée n’est pas de dire moins de chose, mais surtout de la mettre en forme le texte pour que les informations soient plus lisibles et plus attractives pour votre internaute ou mobinaute. Pour faciliter cet accès à l’information, on imagine des contenus plus visuels : de la datavisualisation* ou des pictogrammes, des éléments qui facilitent la lecture et lorsqu’il y a beaucoup de textes, on insiste sur une hiérarchisation claire des informations. Votre lecteur doit trouver rapidement l’information qu’il recherche quelque soit le support. L’ajout de vidéos sera toujours un plus (la vidéo représentera 90% du traffic web en 2017 ! selon Cisco). Attention cependant certains éléments vidéo Flash par exemple ne sont pas pris en compte sur le matériel Apple.

Incidences sur la navigation

Si la mobilité à des incidences sur le webdesign et les contenus elle a aussi une fort incidence sur la navigation et donc sur l’ergonomie de votre site web. Un écran plus petit est moins confortable qu’une souris et un grand écran. De plus, une navigation par écran tactile modifie les comportements des mobinautes… Votre site doit donc être efficace pour une navigation tactile, cela passe souvent par des éléments « bouton » plus grand, des photos cliquables.

Les tendances créatives 

Sites monopage

Si vous passer du temps sur Internet, vous avez dû remarquer le grand nombre de site monopage : ce sont des sites ou, grâce au scrolling (le scrolling correspond à l’action de faire défiler verticalement une page Internet grâce à la molette d’un souris, un trackpad, ou simplement à l’aide d’un doigt sur un écran tactile de tablette ou de smartphone) toutes les informations sont concentrées sur une seule et même page. (Un exemple ici d’une belle animation en scrolling : http://everylastdrop.co.uk/.) Si vous cliquer sur un bouton ou un onglet vous serez renvoyé sur un autre espace de la monopage, que vous retrouverez en scrollant de haut en bas (ici : http://journey.lifeofpimovie.com/-!/). Certains sites Internet utilisent même un double scrolling, l’écran est partagé en deux colonnes et lors du scrolling l’une défile vers le haut alors que la seconde défile vers le bas http://www.fadeoreddy.com/. Cette tendance au scrolling est directement importée de notre lecture de sites sur smartphone ou tablette. Attention cependant, le site monopage s’utilise pour rendre attrayant et attractif mais pour un sujet aux contenus complets et complexes mieux vaut conserver un site multipages.

Le scrolling peut être accompagné d’un effet de parallaxe. (La parallaxe est l’incidence du changement de position de l’observateur sur un élément.) Sur un site Internet, l’ajout d’un effet de parallaxe se concrétise par un mouvement inverse de certains éléments de la page ou une vitesse de mouvement différente que celle du fond de page. Exemple : http://www.noleath.com/noleath/

Skeuomorphisme et flat design

2

Avant, on parlait de skeuomorphisme, un mot barbare pour définir un design qui mettait en place des éléments visuels comme ils le sont dans la réalité. Le meilleur exemple est la bibliothèque ebooks d’Apple qui représentait les ouvrages avec une épaisseur, tels que des objets physiques posés dans une bibliothèque. Les boutons métallisés ou des systèmes de navigation qui s’inspiraient de mouvement de la réalité comme le fait de tourner les pages d’un site comme celle d’un livre.

3

Aujourd’hui ce skeuomorphisme est remplacé par le flat design. Les exemples les plus flagrants sont la dernière interface de Windows ou celle d’IOS7. Il s’agit d’éléments beaucoup plus simples avec des aplats de couleurs, et des icônes beaucoup plus simples que celles qu’avaient inspirées le skeuomorphisme. Les dégradées, ombres, textures… tout à disparu au profit d’une extrême simplicité.

Exemple du design de Windows

4

Exemple design IOS 6 et IOS 7

5

Récemment, le flat design a évolué pour nous emmener vers des pictogrammes très fortement ombrés qui donnent une grande profondeur…

6

Le site : magazineduwebdesign.com/icones-flat-design vous propose une petite exposition de plusieurs pictogrammes dessinés en flat design.

Images et typographies

Les tendances actuelles donnent également une très forte place aux images. Celles-ci deviennent des backgrounds de sites, sont placées pleine page, ou deviennent carrément le menu du site Internet. Ces illustrations peuvent également être travaillées, à l’image des filtre Instagram, ou comme les blurred images (fortement foutées).

Exemple de site avec une image cliquable comme background : lovecarmenrose.com

7

Exemple du site : http://hipstamatic.com/oggl/

8

La typographie reprend également une place très forte. Elles sont parfois créées pour l’occasion ou seulement utilisées de manière extraordinaire avec des découpages de syllabes, l’utilisation de plusieurs polices pour un même mot. Bien utilisées, elles sont en mesure de transmettre un message autant qu’une illustration ou qu’un pictogramme. Grâce à ces typographies, le visuel prend tout son sens, explore de nouveaux territoires alliant images et lettres.

Exemple de http://www.mooncampapp.com/ie/

9

Exemple : http://www.cindyashes.com/60.html

10

Source : http://fr.slideshare.net/Vanksen/les-10-tendances-webdesign-de-2014-by-vanksen page 48

* Définition datavisualisation : C’est l’art de représenter des données de façon visuelle : des graphiques, des camemberts, des diagrammes, des cartographies des infographies ou chronologies ainsi les données sont plus facilement compréhensibles.

Accueil / Actualités / Créativité et webdesign

Les voeux 2019, c’est maintenant !

Vous êtes à la recherche d’idées pour surprendre vos clients et prospects pour la fin de l’année ? Welko vous accompagne dans la réalisation de votre carte de vœux 2019.   La carte de vœux est un excellent moyen pour activer votre réseau, renforcer votre image et préparer vos futurs projets pour l’année prochaine. A destination de vos clients, […]

Plongez dans l’univers 360

Un tout nouvel outil vient faire son entrée au sein de notre agence : la caméra 360 ! Grâce à cette caméra, faites la différence et proposez de nouvelles prestations : Visites interactives Supports digitaux animés Vues panoramiques Visible sur tous types de supports (ordinateurs, tablettes, smartphones), la prise de vue 360 vous entraine dans un […]

Welko recrute un graphiste !

Agence de communication située à Angers, welko recrute un(e) graphiste pour renforcer son équipe créative. Si la recherche d’idées et la création d’effets wahou vous passionnent, cette annonce est pour vous !   Mission proposée : Rattaché au Directeur artistique et au chef de projet, vous êtes en charge de la création de supports print et web. […]

Journées Européennes du Patrimoine 2016

Dans le cadre de la 33e édition des Journées Européennes du Patrimoine, notre agence a remporté la création du visuel 2016 ainsi que la déclinaison de supports de communication. Cette année, ces journées sont placées sous le thème ” Patrimoine & citoyenneté”, notre visuel illustre ainsi cette occasion de redécouvrir des lieux emblématiques où la citoyenneté […]

Borne tactile

Un marketing digital simple au service de l’efficacité ! Welko vous propose des bornes, totems et interfaces tactiles. En location ou à l’achat, bénéficiez d’un dispositif professionnel au service de votre stratégie de communication. Quel que soit votre secteur d’activité, ce support intuitif et interactif vous  permettra de vivre une expérience marketing unique et innovante. […]

Notre agence s’agrandit…

Nous souhaitons la bienvenue à Pierre, qui vient d’intégrer notre équipe pour occuper les fonctions de commercial et chef de projet. Cette double casquette lui permet de capter de nouveaux projets et d’accompagner nos clients tout au long du processus de création. Il analyse, organise, planifie et assure le suivi des dossiers. Notre équipe en un […]

Welko intègre le réseau Network Events !

Communiquer par l’événementiel Passer par un évènement pour communiquer une image, une idée, un nouveau produit est un moyen fort et efficace. Ces événements peuvent prendre plusieurs formes : pour une communication interne : team building, congrès d’entreprise, convention entre plusieurs de vos filiales ou services… ou pour votre communication externe : congrès, salon, cocktail, […]

Welko, nouveau
Conserv-Acteur

Conserv-Action est une jeune association, créée en 2012 par Barbara Réthoré et Julien Chapuis, visant à œuvrer à la conservation de la biodiversité. “Son action se concentre sur la valorisation et le soutien de projets de sauvegarde d’espèces animales menacées et de leur habitat.” Les valeurs de l’association étant en accord avec celles de Welko, c’est […]

Créativité et webdesign

La créativité est aussi une affaire de webdesign. Votre site Internet est en cours de refonte via votre agence de communication, ou votre graphiste. Ils vous proposent de nouveaux designs, en lien proche avec votre charte graphique, pour créer du neuf au niveau de votre site Internet. Alors quelles sont les tendances en matière de […]

Communication 360° : les supports print pour soutenir le web

De plus en plus, une agence de communication vous encouragera à adopter une communication à 360°. Grâce à cela, vous donnerez une chance, à chacun de vos supports, d’obtenir la meilleure visibilité possible pour votre entreprise. Définition de la communication à 360° ? Une communication à 360° agit sur plusieurs axes que l’on peut retrouver […]

Le papier : un média indispensable !

Depuis 2005 on parle partout de web 2.0, pourtant en matière de supports de communication et de créativité le papier n’est pas en reste. Lorsque vous imaginez une campagne de publicité avec votre graphiste ou votre agence de communication il est primordial d’envisager les choses avec une vision 360°. Une campagne de communication 360°, c’est […]

Les labels d’imprimeurs

Régulièrement votre société est en contact avec une agence de publicité qualifiée pour la création graphique de plaquettes, de dépliants, d’affiches, ou de tous supports utiles à votre communication quotidienne. Cette agence de communication est aussi responsable, certainement, de l’impression de l’ensemble de ces documents selon votre cahier des charges. Quel que soit le type […]

Campagne de communication : la newsletter et l’e-mailing

Vous avez une charte graphique et un site Internet que vous avez construit en fonction des objectifs que vous vous êtes fixés (télécharger un catalogue, être rappelé ou tout simplement inscription à une newsletter..) votre but est d’inciter votre internaute à faire une action sur votre site web. Vous avez intégré des call-to-action à des […]

Comment référencer son site Internet ?

Ça y est ! Vous vous êtes lancé, accompagné par une agence de com’ vous faites évoluer votre site, ou carrément vous créez un nouveau site Internet… Vous vous posez les questions du contenu, des visuels, des éléments que vous allez y mettre. Et pourtant, au-delà d’avoir un beau site qui parle bien de votre entreprise […]

Jeux olympiques 2014 : une aubaine pour les sponsors.

Février 2014, Sotchi, jeux olympiques. Il y a, la neige, 3 000 athlètes, 98 épreuves et autant de podiums, 88 nations, des images retransmises à la télé, et… la pub. Et c’est une belle occasion sportive pour les marques de faire le lien avec une actualité internationale à forte diffusion. « Jeux olympiques » est aujourd’hui un […]

Charte graphique : l’ADN de votre entreprise

Lorsque vous interrogez une agence de graphisme pour la création d’un logo ou d’une plaquette, la réponse du professionnel comporte bien souvent la dénomination « charte graphique »… Alors, une charte graphique, qu’est-ce-que c’est ? à quoi ça sert ? 1- Vous identifier Pour démarrer une activité, une entreprise est identifiée par un ensemble de critères : un numéro APE […]

Cartes de vœux : l’heure est au bilan

Fin janvier, l’heure n’est plus aux vœux, mais au bilan de la session « bonne année » 2014. Alors, combien en avez-vous envoyées ? Reçues ? Et qu’avez-vous choisi pour souhaiter à vos collaborateurs, prestataires et clients une excellente année 2014 : hand made, ou réalisation par une boîte de com’ ? Modèle personnalisé ou cartes solidaires ? Papier ou […]

Meilleurs voeux 2014 !

Nous vous remercions pour la confiance que vous nous avez accordée en 2013 pour mener à bien vos projets de communication. Nous nous engageons à être toujours plus proches de vous en 2014 pour relever ensemble de nouveaux défis ! 2013 en 3 chiffres !

L’agence de communication Welko grandit !

Notre agence compte désormais un nouveau collaborateur en la personne de François-Joseph. Ce féru de développement web et de nouvelles technologies met tout son talent au service de la réalisation de votre site web. WordPress, drupal ou Presta Shop, aucun CMS ne lui résiste !

La tendance du Responsive Web Design

Le responsive web design (RWD) permet au site web de se modifier en fonction de la plateforme à partir de laquelle il est consulté, c’est-à-dire que le contenu s’adapte à la taille de l’affichage de l’appareil (mobile, tablette). L’expérience consommateur est grandement améliorée, car la lecture et la navigation sont plus agréables et fluides sur […]

ADEME, nouveau client Welko

Nous avons le plaisir de compter à présent l’ADEME parmi nos clients.  Cet Établissement public participe à la mise en oeuvre des politiques publiques dans les domaines de l’environnement, de l’énergie et du développement durable. L’ADEME permet aux entreprises, collectivités locales et pouvoirs publics de progresser dans leur démarche environnementale en mettant leur disposition ses capacités […]

Welko, partenaire affaire du SCO d’Angers

Nous sommes partenaires affaire d’Angers SCO pour la saison 2013-2014. Nous soutenons notre équipe dans le challenge d’un montée en ligue 1. Allez le SCO !

2013, lancement de welko !

Welko profite des voeux de bonne année pour vous annoncer son lancement ! En 2013, confiez-nous vos projets de communication, du web à l’édition !

Créativité et webdesign

La créativité est aussi une affaire de webdesign. Votre site Internet est en cours de refonte via votre agence de communication, ou votre graphiste. Ils vous proposent de nouveaux designs, en lien proche avec votre charte graphique, pour créer du neuf au niveau de votre site Internet. Alors quelles sont les tendances en matière de créativité ?

Viser mobilité

D’abord, avec 6 milliards (source : http://www.lemonde.fr/technologies/article/2012/07/17/pres-de-75-des-terriens-possedent-un-telephone-portable_1734969_651865.html) d’utilisateurs de smartphones dans le monde et en France 72% d’individus ayant déjà navigué sur Internet via leur téléphone portable il est indispensable d’envisager votre site sous la forme « responsive design ».

« Responsive design » ou « responsive web design », c’est la faculté d’un site Internet à s’adapter aux formats des écrans de tablettes ou de smartphones. Au-delà de cette simple faculté à s’adapter, en envisageant votre site Internet lisible sur téléphone mobile ou sur tablette, votre contenu, votre ergonomie, ne seront pas imaginés de la même façon.

1

Incidences sur le webdesign :

Le format de votre site Internet est lisible sur des écrans plus petits, il est donc nécessaire de créer un webdesign plus ergonomique. Pour développer ce genre de site, le webdesigner devra passer plus de temps. En effet, le travail sur une version en responsive design est plus compliqué qu’une simple version pour écran d’ordinateur. De plus, la phase de tests de votre site Internet doit être faite sur chacun des supports et non plus seulement sur un ordinateur classique. Selon Stéphanie Walter (UX Designer en freelance et au sein de l’agence Alsacreations), cette tendance à la mobilité est tellement forte qu’elle a « l’impression que l’on est passé d’un web orienté grands écrans qui a inspiré le mobile, à un web mobile qui commence à déteindre sur le grand écran. ». (Source : http://www.webdesignertrends.com/2013/12/tendances-du-webdesign-2014/)

Incidences sur les contenus :

Votre site est lisible sur téléphones portables et sur tablettes… Parfait, mais alors on arrête le blabla, on va à l’essentiel ! L’idée n’est pas de dire moins de chose, mais surtout de la mettre en forme le texte pour que les informations soient plus lisibles et plus attractives pour votre internaute ou mobinaute. Pour faciliter cet accès à l’information, on imagine des contenus plus visuels : de la datavisualisation* ou des pictogrammes, des éléments qui facilitent la lecture et lorsqu’il y a beaucoup de textes, on insiste sur une hiérarchisation claire des informations. Votre lecteur doit trouver rapidement l’information qu’il recherche quelque soit le support. L’ajout de vidéos sera toujours un plus (la vidéo représentera 90% du traffic web en 2017 ! selon Cisco). Attention cependant certains éléments vidéo Flash par exemple ne sont pas pris en compte sur le matériel Apple.

Incidences sur la navigation

Si la mobilité à des incidences sur le webdesign et les contenus elle a aussi une fort incidence sur la navigation et donc sur l’ergonomie de votre site web. Un écran plus petit est moins confortable qu’une souris et un grand écran. De plus, une navigation par écran tactile modifie les comportements des mobinautes… Votre site doit donc être efficace pour une navigation tactile, cela passe souvent par des éléments « bouton » plus grand, des photos cliquables.

Les tendances créatives 

Sites monopage

Si vous passer du temps sur Internet, vous avez dû remarquer le grand nombre de site monopage : ce sont des sites ou, grâce au scrolling (le scrolling correspond à l’action de faire défiler verticalement une page Internet grâce à la molette d’un souris, un trackpad, ou simplement à l’aide d’un doigt sur un écran tactile de tablette ou de smartphone) toutes les informations sont concentrées sur une seule et même page. (Un exemple ici d’une belle animation en scrolling : http://everylastdrop.co.uk/.) Si vous cliquer sur un bouton ou un onglet vous serez renvoyé sur un autre espace de la monopage, que vous retrouverez en scrollant de haut en bas (ici : http://journey.lifeofpimovie.com/-!/). Certains sites Internet utilisent même un double scrolling, l’écran est partagé en deux colonnes et lors du scrolling l’une défile vers le haut alors que la seconde défile vers le bas http://www.fadeoreddy.com/. Cette tendance au scrolling est directement importée de notre lecture de sites sur smartphone ou tablette. Attention cependant, le site monopage s’utilise pour rendre attrayant et attractif mais pour un sujet aux contenus complets et complexes mieux vaut conserver un site multipages.

Le scrolling peut être accompagné d’un effet de parallaxe. (La parallaxe est l’incidence du changement de position de l’observateur sur un élément.) Sur un site Internet, l’ajout d’un effet de parallaxe se concrétise par un mouvement inverse de certains éléments de la page ou une vitesse de mouvement différente que celle du fond de page. Exemple : http://www.noleath.com/noleath/

Skeuomorphisme et flat design

2

Avant, on parlait de skeuomorphisme, un mot barbare pour définir un design qui mettait en place des éléments visuels comme ils le sont dans la réalité. Le meilleur exemple est la bibliothèque ebooks d’Apple qui représentait les ouvrages avec une épaisseur, tels que des objets physiques posés dans une bibliothèque. Les boutons métallisés ou des systèmes de navigation qui s’inspiraient de mouvement de la réalité comme le fait de tourner les pages d’un site comme celle d’un livre.

3

Aujourd’hui ce skeuomorphisme est remplacé par le flat design. Les exemples les plus flagrants sont la dernière interface de Windows ou celle d’IOS7. Il s’agit d’éléments beaucoup plus simples avec des aplats de couleurs, et des icônes beaucoup plus simples que celles qu’avaient inspirées le skeuomorphisme. Les dégradées, ombres, textures… tout à disparu au profit d’une extrême simplicité.

Exemple du design de Windows

4

Exemple design IOS 6 et IOS 7

5

Récemment, le flat design a évolué pour nous emmener vers des pictogrammes très fortement ombrés qui donnent une grande profondeur…

6

Le site : magazineduwebdesign.com/icones-flat-design vous propose une petite exposition de plusieurs pictogrammes dessinés en flat design.

Images et typographies

Les tendances actuelles donnent également une très forte place aux images. Celles-ci deviennent des backgrounds de sites, sont placées pleine page, ou deviennent carrément le menu du site Internet. Ces illustrations peuvent également être travaillées, à l’image des filtre Instagram, ou comme les blurred images (fortement foutées).

Exemple de site avec une image cliquable comme background : lovecarmenrose.com

7

Exemple du site : http://hipstamatic.com/oggl/

8

La typographie reprend également une place très forte. Elles sont parfois créées pour l’occasion ou seulement utilisées de manière extraordinaire avec des découpages de syllabes, l’utilisation de plusieurs polices pour un même mot. Bien utilisées, elles sont en mesure de transmettre un message autant qu’une illustration ou qu’un pictogramme. Grâce à ces typographies, le visuel prend tout son sens, explore de nouveaux territoires alliant images et lettres.

Exemple de http://www.mooncampapp.com/ie/

9

Exemple : http://www.cindyashes.com/60.html

10

Source : http://fr.slideshare.net/Vanksen/les-10-tendances-webdesign-de-2014-by-vanksen page 48

* Définition datavisualisation : C’est l’art de représenter des données de façon visuelle : des graphiques, des camemberts, des diagrammes, des cartographies des infographies ou chronologies ainsi les données sont plus facilement compréhensibles.