background preloader

Mockups & Rough : gagnez du temps !

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. Il existe deux étapes essentielles avant la conception du graphisme : le mockup (appelé aussi zoning, wireframe - ou fil de fer) et dans certains cas le rough. Création d'un site internet : le workflow 1. C'est le pilier d'un projet : sans lui vous ne savez pas où vous allez ni quelles sont les fonctionnalités attendues. 2. Chacun a des goûts différents : c'est fantastique ! Le design se veut le reflet graphique du cahier des charges (apparence, mise en forme des contenus, ergonomie…). 3. Lorsque la maquette est validée, on passe à l'intégration en page web. 4. 5. Le Mockup Les outils

http://www.alsacreations.com/article/lire/1183-mockup-rough-maquette-zoning.html

Related:  UI, UX, PROTOTYPAGE etcTutoriels, Formations, conseils utiles, bonnes pratiques etc

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* ?

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. Les tendances générales du Webdesign en 2016 Où en sont les tendances du web en 2016 ? Quelles sont les éléments toujours d'actualité, quelles sont les nouveautés ?

Mood board Un article de Wikipédia, l'encyclopédie libre. Un mood board est un type de collage qui peut être composé d'images, de texte et d'objets selon le choix de son créateur. Les designers, entre autres, utilisent les mood boards pour développer leurs concepts et pour communiquer avec les autres membres de l'équipe. Le mood board peut également servir comme référence au cours d'un projet dans de nombreuses disciplines comme par exemple :

Conception de site web La création et la conception de site web 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é. Le web design d'un site se présente en premier temps sous forme de maquette fonctionnelle avec des spécifications techniques : ergonomie, charte graphique, identité visuelle, marketing, interactivité. Histoire[modifier | modifier le code] Capture d'écran du navigateur World Wide Web Le berceau du Web[1] se situe au CERN (Organisation Européenne pour la Recherche Nucléaire).

Moodboard, outil créatif essentiel Le Moddboard ou planche de tendances ou planche d’inspiration est un document constitué de morceaux choisis : screenshots, coupures de magazine, photos, typos, pictos… Ces « coupures » sont associés pour construire une tendance graphique. On supprime alors totalement le fond pour ne travailler que sur la forme.Cela permet donc de mener une réflexion graphique en amont d’une création plus aboutie : un design web ou une brochure print par exemple. Cette étape est primordiale avant de commencer la réalisation à proprement parler et peut faire gagner beaucoup de temps. Le process créatif Que ce soit pour un site internet ou pour n’importe quel « objet graphique », le process créatif (ou démarche créative) est une méthode particulièrement indispensable et adaptée. Elle permet d’identifier le besoin client puis créer le design répondant à la demande. On peut identifier 4 étapes majeures pour lesquelles on pourra utiliser des outils adaptés.

Tutoriel Vidéo Divers Avocode Lorsque l'on fait de l'intégration on est souvent obligé de travailler avec des fichiers PSDs qui nécessitent l'utilisation Photoshop. Le principal problème de ce logiciel est qu'il est conçu pour le traitement photo plutôt que le Webdesign. Inspecter les propriétés des calques et exporter les assets et loin d'être pratique. Certains designers ont même sauté le pas et utilisent maintenant Sketch plus adapté au webdesign. Le principal problème est alors l'accès au logiciel qui ne fonctionne que sur MacOS. Retour au Source Comment rédiger une charte éditoriale web ? Comment rédiger une charte éditoriale web ? La charte éditoriale web, souvent négligée sur Internet, permet pourtant de garantir une véritable cohérence des contenus sur un site. Les rédacteurs et les chefs de projet se succèdent, les contributeurs se multiplient. La charte constitue une "ligne de conduite", un repère constant pour tous.

Tuto Photoshop : Créer un webdesign de qualité avec Photoshop Étape 1 : Création du .psd et mise en place des règles Je crée un document de 1400x1450, résolution 72 pixels/pouce. Je place ensuite deux règles à 220px et 1180px, dans le sens de la largeur. Pour être précis j'utilise la fenêtre "Informations" [F8] 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 ! Vous pourrez ajouter de l’interactivité à vos prototypes (gestuelles ou clics) ainsi que des animations, afin de tester dans des conditions au plus proche de la réalité, l’efficacité de vos mockups. Adobe prévoit enfin une couche collaborative. Il sera très simple de partager vos prototypes afin que vos équipes et clients puissent les commenter très facilement.

Related: