background preloader

Les grilles dans le webdesign

Les grilles dans le webdesign
"Il y a quelque chose de différent entre ce site et le mien… Il a l'air de faire plus pro et je ne sais pas pourquoi !" N'avez-vous jamais eu ce genre de remarque ? Pourtant vous utilisez Photoshop (ou autres programmes équivalents) depuis un certain temps, vous connaissez les règles typographiques et celles du web, la palette de couleur a été choisie avec soin... Bref, rien n'y fait : votre site semble déstructuré / désharmonisé. Pas d'inquiétude, vous n'avez sans doute pas utilisé de grille dans votre design ! Une grille, comme dans le film* ? Utilisée en imprimerie, il est tout à fait possible de transposer le système de grille dans le domaine du web. * Un film très bleu avec des motos, des combats de disques et un certain monsieur Flynn. Grilles : les bases Il existe beaucoup de grilles différentes avec autant de cas concrets d'utilisations. Anatomie d'une grille Elle sert d'armature pour organiser la page et son contenu. On obtient alors une page plus lisible et plus homogène.

http://www.alsacreations.com/article/lire/1196-grilles-framework-css-webdesign.html

Related:  UI, UX, PROTOTYPAGE etcTutoriels, Formations, conseils utiles, bonnes pratiques etcCréerConception Web / Projet

Mockups & Rough : gagnez du temps ! Ça y est, vous devez créer un nouveau site internet ! Comme d'habitude, après avoir sabré une célèbre boisson alcoolisée, c'est direction tête baissée dans Photoshop pour attaquer le design. N'est-ce pas la marche à suivre ? Pas vraiment. Si il s'agit d'un projet personnel pour lequel vous savez exactement où vous voulez aller en ayant tout votre temps, pourquoi pas. Mais sinon c'est jouer un coup de poker. Tendance Webdesign 2016 - Les tendances web design en 2016 - Agence web pour la performance de l'entreprise Quand on travaille dans le web, qu'on soit graphiste, web-designer, ou développeur front-end, il est indispensable de suivre l'évolution des tendances webdesign. Que ce soit pour le choix du template, le choix de la maquette graphique, le choix de la Typographie, le choix des animations ... tous les différents éléments propres à la construction d'un site web, sont soumis à la tendance de la toile ! J'ai donc voulu faire un récapitulatif de ce que sont les tendances du webdesign en 2016.

Réalisation d'un design complet (HTML / CSS) en 5 étapes Nous passons à quelque chose d'un peu plus technique mais qui reste assez simple tout de même, du moins si l'on prend ça calmement. Pour ce qui est de la mise en forme du titre, c'est juste une petite astuce pour faire un lien cliquable de la taille de l'image de titre, et il faut aussi cacher le texte puisque nous utilisons une image. Et pour le menu, un peu le même style de travail. Examinons le code source et les commentaires : On donne les mêmes dimensions au lien, chose possible grâce à la propriété display: block; qui transforme le lien en élément de type block, auquel on peut donner des propriétés de taille. On met aussi l'image de fond qui a les mêmes dimensions que le cadre ainsi créé.

Comment évaluer un blog : 30 critères pour un audit Un blog combine moult aspects : graphisme, technique, marketing, éditorial, ergonomie… Une amie rédactrice m’a récemment demandé conseil pour auditer un blog en vue de faire une reco à un client. J’ai commencé à identifier quelques critères d’évaluation et après quelques échanges et réflexions, voici une liste que je partage avec vous. To be continued… Identité de marque : la marque (qu’il s’agisse d’une personne ou d’une entreprise) est bien représentéeGraphisme : le design est personnalisé, facilement identifiable et soutient l’identité de marqueFavicon : le favicon est visiblePrésentation de l’auteur : qui me parle ? Attractivité des titres : la lecture du titre des billets donnent envie de connaître la suite.

Adobe Comet - Blog Tuto.com Adobe dévoile le projet Comet, un outil d’UX-design qui s’annonce très intéressant ! Le projet Comet, qui sera disponible en 2016, est un produit qui vous permettra de créer vos wireframes, maquettes graphiques, prototypes, le tout avec une live preview de cotre travail sur smartphone, tablette et desktop. Un vrai produit à destination des UI et UX designers !

Conception de site web Un article de Wikipédia, l'encyclopédie libre. La création et la conception de sites ou web design est la conception de l'interface web : l’architecture interactionnelle, l’organisation des pages, l’arborescence et la navigation dans un site web. La conception d'un design web tient compte des contraintes spécifiques du support Internet, notamment en termes d’ergonomie, d’utilisabilité et d’accessibilité. Réalisation d'un design complet (HTML / CSS) en 4 étapes Dans ce tutoriel nous allons voir étape par étape comment concevoir le code initial HTML et CSS d'une page web, afin d'acquérir quelques techniques de base. Rien de trop ardu pour une page web de ce type : un titre, un menu, le contenu de la page, et un pied de page contenant les informations d'ordre informatif. Voir le résultat final que l'on souhaite obtenir Télécharger les sources des fichiers (zip) Voici le code HTML construit pour cette page : <!

Sites Web immersifs : experience et interactivité au coeur du design Je vous avais partagé l’an dernier une sélection de sites Web immersifs pour faire un état de ce qui existait en la matière. Je vous propose de ré-itérer cette exercice en 2015 pour voir ce qui a changé en terme de tendances. Tous les exemples ci-dessous ne sont pas des sites d’expérience, mais ils proposent des fonctionnalités ou des concepts pouvant être utilisé pour immerger un utilisateur dans un story telling. La Glace et le ciel URL du site : Un travail remarquable d’illustrations sous forme de peinture associé à des fonctionnalités très intéressante comme celle du panier permettant de stocker temporairement les fiches pratiques avant de se les envoyer par mail. Un compromis intéressant pour éviter de développer un véritable espace personnel (plus gourmand en budget).

Axure ou la mort de l’UX ? Bon, disons simplement les choses s’il y a bien un logiciel qui commence à être pénible c’est bien Axure. Dans plusieurs agences avec lesquels j’ai été en contact, c’est une question qui devient récurrente : « Est ce que vous vous utilisez Axure ? ». Ce que je découvre souvent derrière cette question c’est souvent des processus où l’outil conditionne le travail. Les usages À partir de là, j’ai essayé de comprendre pourquoi ce logiciel prenait tant de place dans ces organisations.

Related: