background preloader

Webdesign

Facebook Twitter

Web design styles

Premium Graphic Design Resources | MediaLoot. Inspi my site 2013. How to Make a Single Page Website. This tutorial explains how to create a vertical-scrolling single page website in four steps. Designing A Single Page Website There are at least 3 kinds of Single Page websites. The basic idea is that all content is placed on one page, but only a portion of it is centered on your computer screen at a given time.

Then you can watch the old content slide away when you click a link, instead of loading a whole new page. Often, the scroll bar is still visible on the side, so you could actually drag it up and down and see the whole page at once. The picture below is a screen shot I took of another designer’s website, Eshbeata.com. I classified the types of single page websites by the direction/s that the page scrolls. Vertical Scroll (Most Common) Barrel + Barc, Beaver Lab, Little White Umbrella, Eshbeata Horizontal Scroll Vanity Claire, Hotel Oxford, Lomotek 2D Scroll Steve & Jacqs Once again, this post explains the vertical method. The HTML The html is actually pretty simple. The CSS Voilà! 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. Comment s'y prendre pour rédiger un tel document ? 1- Avant de rédiger une charte éditoriale web, l'idéal est de commencer par désigner une personne responsable de l'écriture de cette charte et du "projet contenu éditorial web" en général si ce n'est pas déjà fait.

"Avant donc que d'écrire, apprenez à penserCe que l'on conçoit bien s'énonce clairement,Et les mots pour le dire arrivent aisément. " 2- Le responsable du projet devra donc rassembler tous les intervenants (ou les plus impliqués dans le projet) afin de déterminer les lignes principales de la charte éditoriale web. 3- Ensuite, expliquez la structure du contenu éditorial. Moodboard, outil créatif essentiel | Nicolas Vignand. 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 Moodboard offre deux intérêts essentiels. C’est d’abord un support de présentation et de discussion pour montrer au client l’orientation graphique de la future réalisation. Ci dessous un exemple de Moodboard réalisé en amont de la construction d’un site web événementiel pour un camion Renault en série limitée. D’autres exemples. A lire aussi, un article intéressant sur la notion de Moodboard. 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 : Utilisations[modifier | modifier le code] Les mood boards sont généralement utilisés par les graphistes pour leur permettre de montrer en amont d'un projet la direction du style qu'ils recherchent.

Voir aussi[modifier | modifier le code] Liens externes[modifier | modifier le code] Portail du design. Le process créatif | Nicolas Vignand. 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. Cette méthode aura évidemment différentes apparences selon les expériences et les apprentissages de chacun. Celle que je propose est issu d’une expérience web en agence de communication et ne se veut pas une vérité mais plutôt une proposition de méthode pour toute personne curieuse ou intéressée par le processus créatif. 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. Balsamiq. Storage.canalblog.com/77/84/456071/24981708.pdf.