background preloader

Le Flat Design - Principe et utilité

Le Flat Design - Principe et utilité
En design web, comme dans la mode, les tendances vont et viennent. Hier on découvrait le responsive web design, aujourd’hui on nous parle de flat design. C’est LE trend topic du moment… Mais intéressons-nous à ce qui existe déjà : le flat design, ou le « design plat » en bon françois, est la nouvelle corde à l’arc des designers d’interfaces. Windows 8, le premier système d’exploitation en flat design – Source : windows.microsoft.com Le flat design, mais qu’est-ce donc ? Le flat design est en fait un design graphique minimaliste, débarrassé de tout ornement en relief, qui a pour but d’améliorer la lisibilité. Ce courant est souvent comparé et mis en opposition au skeuomorphisme. L’exemple typique serait la corbeille à papier, que l’on retrouve tous au pied de notre bureau, et qui nous permet de jeter nos documents inutiles. L’horloge flat design, vue sur : blogoergosum.com Ces deux représentations graphiques ne sont pas incompatibles : Les ingrédients d’une interface en flat design réussie Related:  Les modes du Web designdesign web

Les tendances du web design du moment - Le Blog de Wix.com Surfer sur le Web 2.0 n’est pas de tout repos pour les designers en quête d’inspiration. Les tendances qui envahissent nos écrans évoluent en permanence et il devient difficile de pointer du doigt les changements à adopter ou au contraire, à mettre au placard. Afin de faire le tri de façon réfléchie, il est important de saisir les différentes dynamiques qui se tiennent derrière le succès des nouvelles modes du web design. L’esthétique d’Internet varie en fonction d’une large variété de paramètres allant des changements technologiques, aux choix esthétiques des géants de l’informatique en passant par la compréhension des besoins des internautes et l’influence des nouvelles générations de réseaux sociaux. Ci-dessous, 7 tendances du web design qui déferlent sur le Web avec force cette année : Flat design Le flat design – ou design “plat” – est une tendance inspirée du nouveau graphisme de Windows, alias « Metro Design » ou Microsoft Design Language. Windows 8 – Metro Design Long Scrolling

Le musée du Luxembourg : une (ré)ouverture très numérique Après un an de fermeture pour des raisons juridiques, le musée du Luxembourg a réouvert ses porte le 9 février avec l’exposition Lucas Cranach et son temps, jusqu’au 23 mai 2011. Le musée, dont la gestion est désormais assurée par la RMN, accueillera au moin. Le nouveau musée du Luxembourg bénéficie d’un nouveau logo plus moderne mais également d’un nouveau site internet. Une pléiade de dispositifs numériques viennent également soutenir la réouverture de l’institution. Le musée du luxembourg mise le numérique Le site de l’institution, disponible en 4 langues, possède une structure graphique harmonieuse et efficace et ets totalement indépendant du site de la RMN. Dans cette rubrique, les internautes retrouve des vidéos, classées par thèmes ou selon la playlist de l’utilisateur. Un espace enfant : Mon luco Visible dès la page d’accueil avec sa typographie et couleurs différentes cet espace est totalement dédié à l’univers du jeune public. Un parcours numérique pour l’expo Cranach

Design Personas If your website were a person, who would it be? Is it serious, buttoned-up, all business, yet trustworthy, and capable? Is it a wisecracking buddy that makes even mundane tasks fun? Following a similar structure as a user persona, you can flesh out the personality of your design by creating a design persona. Here’s what you’ll include in your design persona: Brand Name Personality Image: An image of a person that embodies many of the traits you wish to include in your brand.

Le temps d'un trajet Web design : comment cultiver l’engagement émotionnel La conception d’un site est souvent victime d’un paradoxe. Des personnes s’obligent à n’utiliser que leur raison pour offrir un produit qui sera apprécié en grande partie sur des critères émotionnels. Si la conception centrée utilisateurs préconise une réelle empathie pour l’utilisateur final, la tentation est grande de gommer les émotions pour se concentrer sur une mécanique logique. Cette infographie met particulièrement l’accent sur 3 piliers : la curiosité, la confiance et la satisfaction. ++ Cliquez moi si vous voulez m’agrandir ++ Source: Mixed Feelings – How To Cultivate Emotional Engagement In Web Design Lire aussi Psychologie d’une landing page Comment bien designer l’information : les critères Le design doit-il toucher nos émotions ou les laisser s’exprimer ? Passionné par le digital sous toutes ses formes : médias sociaux, web design, emarketing, outils utiles, blogging, open data, dataviz... 501 articles, certains bons, d'autres moins ;-) Profil Google+

Le Musée de la danse - Se déplacer L’image figée et silencieuse du musée, associée à un art vivant qui naturellement évoque spectacle, mouvement et corps pour certains, et ballerines pour d’autres. Des préjugés et des visions partielles qui volent en éclat dans la proposition de Boris Charmatz de faire du CCNRB un Musée de la danse. Musée et danse ? Non, pas de tutus sous vitrine ici, ni de petits textes en corps 8 nécessitant une lecture à une distance minimum de 15 centimètres pour un déchiffrage correct (prévoir de l’aspirine après deux heures de visite). Non, ce musée n’a rien à voir avec cela. C’est avant tout un lieu vivant, de circulation, d’échange, d’expérimentation. Depuis 2009, le Musée de la danse invente (des projets), accompagne (production et co-production), transmet (sensibilisation à la danse et à la culture chorégraphique au sens large) et danse bien sûr (ateliers, cours et dance-floor) ! Production In Situ Souvent posés dans la cuisine (Audrey, tu crois qu’on a goûté à tous les thés ?) Dualités Déplacer…

Le design émotionnel au sein de vos interfaces Il y a tout juste une semaine, j’ai acheté le livre « Design émotionnel » de Aaron Walter (designer de Mailchimp). J’aimerai partager avec vous ce livre que j’ai dévoré en moins de deux soirées. Je vous le recommande vivement car il est très inspirant et particulièrement bien écris. J’ai trouvé ce manifeste passionnant ! Aaron Walter y aborde toutes les disciplines que touche le webdesign : la psychologie, le marketing, la publicité, le commerce, l’ergonomie, l’expérience utilisateur, l’esthétisme, etc. Il ne faut pas oublier que notre profession de webdesigner à un impacte très important sur ces différents secteurs et bien souvent oublié au quotidien. Ce que j’en ai retenu : L’effet esthétique-utilisabilité au détriment de l’expérience utilisateur Aaron Walter commence par évoquer la pyramide des besoin de Maslow en l’adaptant au design d’interface et, bien sûr, en y ajoutant la notion de « l’agréable ». Un design émotionnel peut être défini sur plusieurs critères : 1.

L’univers d’Uriage - Uriage Depuis sa création en 1992, la marque Uriage répond aux besoins des peaux sensibles grâce à une expertise dermatologique internationalement reconnue. Quotidien ou saisonnier, hydratant, réparateur ou anti-âge, chaque produit restitue l'intégralité des bienfaits exceptionnels de l’Eau d’Uriage, à chaque âge de la vie et quel que soit le problème de peau. Découvrez l’histoire de ses produits, de la découverte de la source aux développements techniques les plus avancés.Uriage est une marque d’exception. Voici son univers. Dès l’Antiquité, les Romains découvrent les vertus de l’Eau Thermale d’Uriage. Après l’invasion de la Gaule, les Romains, traversant les Alpes, font halte devant une source au pied du massif de Belledonne. Des vestiges découverts près de la source témoignent de cette tradition thermale ancestrale. Création de la province romaine des Alpes Poenines. L’Etablissement Thermal soigne depuis presque 2 siècles des patients atteints de pathologies de la peau. 20 ans Aujourd'hui Sécurité

Qu'est-ce que le design émotionnel ? Dans le web, le design émotionnel est une tendance montante qui consiste à communiquer de l'émotion au travers d'une interface graphique dans le but de faire passer un moment agréable à l'utilisateur lors de son expérience sur un site. Nous verrons dans cet article comment se distingue un design émotionnel et des exemples de mise en oeuvre dans un projet web. Le livre "Design émotionnel" d'Aarron Walter J'écris cet article pour partager mes sentiments suite à la lecture du livre Design émotionnel d'Aarron Walter, édité aux Éditions Eyrolles et issu de la collection "A Book Apart". Qu'est-ce que le design émotionnel ? Une interface web doit être fonctionnelle, fiable et utilisable. Comment mettre du design émotionnel dans un site ? Mettre de l'émotion dans son site, le rendre agréable et original ne nécessite pas forcément une refonte complète de l'interface. Les mascottes sympathiques Aarron Walter appelle cela "le pouvoir des visages de bébés" pour attendrir son image de marque.

Prototyper pour mieux tester - Notre aventure digitale #4 20 octobre 2014 Nous avons vu ce que nous réservait l’étape de création dans notre process. À présent, soyons fous comme un lièvre de mars et continuons notre aventure digitale, avec comme sujet les prototypes. Nous l’avons déjà évoqué précédemment, les prototypes vont nous permettre de résoudre de nombreux problèmes. Mais comment s’intègrent-ils dans notre process de fabrication des internets ? Éléments de réponse avec Michel, notre comptable qui passait par là. Prototyper pour mieux anticiper Il y a encore quelques années, on pouvait se passer des prototypes pour assurer la production d’applications et d’interfaces web. Les problématiques du web d’aujourd’hui rendent indispensable la phase de prototypage. « OK tout ça c’est cool, mais c’est un peu du luxe non ? « Oui et non », hésite Michel, qui à travers ce normandisme vient de nous confirmer ses origines. Deux autres prototypes vont eux permettre de côtoyer directement l’autre phase du process, à savoir la phase de Production.

Principles of Flat Design Flat design – the design community just can’t stop talking about it. And feelings are strong. Most designers either can’t get enough of this trend, or absolutely hate it. I am somewhere in the middle. So let’s examine what makes something flat. No Added Effects Flat design gets its name from the shapes used. The concept works without embellishment – drop shadows, bevels, embossing, gradients or other tools that add depth. Nothing is added to make elements look more realistic, such as tricks designed to make items appear 3D in skeuomorphic design projects. So what makes it work? Simple Elements Flat design uses many simple user interface elements, such as buttons and icons. Each UI element should be simple and easy to click or tap. In addition to simple styling, go bold with color on clickable buttons to encourage use. Need help getting started? Focus on Typography Because of the simple nature of element in flat design, typography is extremely important. Focus on Color Minimalist Approach

Web Design et itération - UX pour tous ! 10 juin 2015 Pourquoi une méthodologie itérative en web design ? Parce qu’elle est la clé d’un apport énergétique indispensable dans le cadre d’un régime UX équilibré. L’itération est un des moyens d’adapter un web design – notamment responsif – aux besoins et usages des utilisateurs en même temps qu’aux opportunités du marché. L’itération, c’est aussi ce qui permet d’être réactif et de travailler avec l’idée que les choses bougent et qu’on ne sait pas tout au moment d’envisager un projet : on ne peut graver un web design dans le marbre pour le livrer au client et aux utilisateurs dans une version finale et figée. Un processus itératif, c’est vraiment utile ? Basée sur un enchainement de prototypage, testing, analyse et… action, cette méthode vise bien sûr à obtenir la version la plus aboutie d’un dispositif web mais aussi la plus en phase avec les attentes de l’utilisateur. À partir du prototype du dispositif web, on propose par exemple à un groupe d’utilisateurs d’effectuer un test.

Flat design - Swiss design inspiration ? Flat design - un concept graphique en vogue ces derniers temps, mais peut être pas si jeune qu'on le croit. De nombreux webdesigners l’emploient aujourd’hui pour le redesign ou la réalisation de nouveaux sites Web et applications. Cette tendance popularisée par le Metro style de Windows 8 et la refonte de l’univers Google, fait des émules dans de multiples créations. Flat design – une question de typographie ? Certains vous diront que le flat design ne s’apparente pas à un style ou à une période mais plutôt aux bases fondamentales du design graphique. Aucune 3d-ification, ni surcharge du design par des effets de textures, de profondeurs ou de dégradés. Le design se limite à l’emploi de couleurs souvent très vives et la typographie y occupe une place prédominante. Exemple flat design – The Experiential Company Cela passe par l’utilisation d’une police sans-serif de grande taille. Karl Gerstner: Review of 5 X 10 Years of Graphic Design etc. Toujours pas de définition pour le flat design

Related: