background preloader

Webdesign - Ressources gratuites

Facebook Twitter

#WebDesign #Developpement #PortFolio #Ressources #Outils #CharteGraphique

Infographies sur le WebDesign.

Charte graphique

Flat Design. Landing Page. Créer un Portfolio. Ressources Graphiques Gratuites. Tendances Webdesign. Tutos Cours HTML / CSS. 10 sites pour gérer un projet en ligne. Il n’est pas toujours facile de gérer plusieurs projets avec des amis ou des clients. C’est pourquoi il faut s’équiper généralement d’un bon outil gestion de projet en ligne qui vous aide à gérer, discuter, communiquer et travailler avec les membres de votre équipe. Si les membres de votre équipe ou vos clients vivent dans différentes parties du monde, il est important que vous ayez un outil de communication en ligne.

Vous augmenterez considérablement votre efficacité ainsi que votre productivité. Pour vous aider à choisir, voici 10 sites pour gérer un projet en ligne… 1. Planzone est sans aucun doute l’un des services les plus complet en matière de gestion de projet collaboratif en ligne. 2. Basecamp est certainement le plus populaire des services de gestion de projet en ligne. 3. ProofHub est un outil de collaboration en ligne gratuit qui est livré avec une application de messagerie instantanée intégrée qui vous permet de discuter rapidement de vos projets. 4. 5. 6. 7. 8. 9. 10. 50 trucs pour optimiser votre expérience utilisateur web. Au-delà du design flamboyant de votre site internet ou de toutes les fonctionnalités extraordinaires qu’il peut offrir, la qualité de l’expérience utilisateur que vous offrez est cruciale pour atteindre vos objectifs sur le web. Si les visiteurs qui atterrissent sur votre site trouvent facilement l’information qu’ils recherchent et peuvent naviguer instinctivement sans embuches, ils reviendront.

Au contraire, si des irritants nuisent à leur expérience, il y a de fortes chances qu’ils ne reviennent plus jamais! Voici donc 50 trucs sans prétention pour satisfaire vos visiteurs et optimiser l’expérience utilisateur que vous offrez sur le web. L’apparence Truc No 1 : Effacez les bordures Votre site ne devrait pas ressembler à un casse-tête 100 morceaux ou une grille de mots croisés. L’utilisation des bordures surcharge l’affichage et nuit à la lecture de l’information. Truc No 2 : Écrivez foncé sur clair Non, vous n’êtes pas Georges Lucas et ne présentez pas La guerre des étoiles. Le menu.

Web Design : 20 magnifiques exemples pour concevoir vos fenêtres Pop-Ups. Créer un lien émotionnel entre votre marque et les visiteurs de votre site web est extrêmement important. Les fenêtres pop-ups peuvent vous aider dans cette tâche difficile ainsi que pour partager une information importante avec vos visiteurs. En règle générale, les fenêtres pop-ups sont utilisées pour afficher divers messages d’appel à l’action. Par exemple, pour encourager les visiteurs à s’inscrire à la newsletter, à télécharger des e-books ou pour informer sur le lancement de nouveaux produits, services ou fonctionnalités. Dans cet article, vous allez trouver 20 sites avec de magnifiques fenêtres pop-up qui méritent votre attention.

Alors, faites défiler vers le bas et découvrez quels types d’informations peuvent être partagées dans les fenêtres pop-ups et comment les concevoir correctement. Sur le même thème Optimisation SEO : 5 façons de diminuer votre taux de rebond! De l’audit de contenu aux idées de design : Par Christopher Detzi Tout au long de ma carrière, j’ai généralement compris la valeur apportée par un audit de contenu (qu’on le fasse ou qu’on en bénéficie) dans le cadre du redesign d’un site web. Un audit de contenu est une évaluation du contenu d’un site, à la fois, d’un point de vue quantitatif (par exemple “Combien de contenu est présent ?”) Et qualitatif (par exemple “Est-ce qu’il est bon ?”). Par contre, ce qui n’est souvent pas bien discuté ou compris à propos des audits de contenu ce sont les bénéfices significatifs qu’ils procurent au delà de la simple évaluation de quantité et de qualité.

Dans un projet récent sur lequel j’ai travaillé, l’audit de contenu a été crucial pour faciliter les discussions stratégiques sur la direction du design. Je vais utiliser ce projet comme modèle pour mettre en évidence comment mener et utiliser les audits de contenu dans le contexte d’un projet de redesign de site web. Le Projet Le processus Tout ce contenu est-il encore pertinent ? 4 étapes à ne pas négliger pour la création de vos interfaces. Lorsqu’on souhaite créer une interface, il est important de comprendre le processus qui a permis d’aboutir au produit fini. On peut déterminer 4 étapes. Elles permettent d’obtenir une interface en partant d’une idée qui prendra forme et deviendra fonctionnelle. J’en profiterai pour indiquer aux débutants quelques liens et astuces qui pourront les aider s’ils souhaitent créer une interface. L’aspect graphique est important mais il ne faut pas oublier la partie développement ainsi que le référencement et le marketing qui arrivent par la suite… 1) Concept et réflexion Le copy strat est un document fourni par un client à l’agence de publicité dans lequel les objectifs de communication et la cible sont définis.

Concernant la cible, vous devrez vous poser différentes questions : que va apporter mon interface à ma cible, sur quel support sera-t-elle visible, à quelle occasion va-t-elle l’utiliser et dans quel contexte ? 2) Ce qui existe déjà 3) L’ergonomie 4) L’interface finale. Créez votre application pour iPhone et iPad, sans aucune connaissance en programmation. Super-navigateur : Le plein d'extensions pour ta veille webdesign. Toi, étudiant en DUT MMI ou simplement internaute aguerri, tu n’es pas sans savoir que ton navigateur web, que ce soit Chrome, Safari, Firefox ou Opera, peut s’équiper d’une multitude d’extensions gratuites ! Si tu es un fou de webdesign, ou que tu aimes juste passer du temps à faire de la veille, j’ai quelques plugins à te conseiller !

Ils te permettront de mettre de côté des idées, trouver des typos sympatoches, des images ou des couleurs qui t’inspirent. Bref, de bons petites extensions à ajouter à ton browser si ce n’est pas déjà fait, et en voici la liste Capture tout ce qui t’inspire Pin it Si tu as un compte Pinterest, alors il te faut absolument le plugin Pin It. FireShot Si tu utilises Firefox, j’ai testé pour toi FireShot qui est une très bonne alternative au plugin présenté ci-dessus. ShotPin ColorZilla Lui va te permettre d’utiliser une pipette dans ton navigateur pour identifier la couleur et obtenir son code hexadécimal.

Palette Grabber WhatFont Font Finder Panda Palettab Momentum. Comment organiser sa veille pour le développement Web. Hello à toi jeune MMI ! Aujourd’hui, je vais t’expliquer comment organiser sa veille pour le développement Web ! Eh oui, la veille c’est pas réservé aux designers ! En fait, tous les métiers qui touchent au web et au multimédia de manière générale peuvent et devraient même bénéficier de la veille. Nous sommes dans un domaine, le web, qui évolue à une vitesse phénoménale, bien plus vite que ce que l’on s’imagine, c’est la raison pour laquelle il est très important de rester à jour sur les meilleures pratiques et sur les façons de faire. Pourquoi se créer une e-reputation pour de la veille ?

Qui dit veille dit réseaux sociaux ! Pour l’occasion, je t’ai concocté une liste de personnes que je suis ! Le grand principe de Twitter est également les hashtags ! #webdev#webdesign#developers#wordpress, #javascript, #jquery, #html5, #css3, … (bref : hashtag + technologie)#web#bgdelalife#prodeladrague#jetaime (LOL)#biensurfautpasprendreencomptelestroisderniers#hashtagstroplongscestpasbon 1. 2. 3. 4. 25 blogs à suivre pour sa créativité. Quand on fait du graphisme, du webdesign, du lettering, de l’illustration, de la publicité, ou tout autre activité qui touche à la création visuelle, il est indispensable de s’inspirer de ce qui nous entoure, de choses que l’on découvre, que ce soit sur Internet ou dehors, dans un parc, dans un café, en boîte de nuit à 3 grammes. Tu te doutes bien qu’il existe de nombreux blogs (je parle bien de « blogs ») qui proposent du contenu dans le domaine du graphisme.

Toi-même tu dois en connaître quelques-uns et avoir des noms qui te viennent déjà à l’esprit, et c’est un bon réflexe ! Mais aujourd’hui, le Blog du MMI vient de larguer sur Terre un colis spécial « 25 blogs à suivre pour cultiver sa créativité » (oui, à la base c’était pour cultiver des patates, mais ça faisait hors-sujet).

Voici donc une dizaine de blogs français à connaître absolument pour toi si tu es en DUT MMI, suivi d’une quinzaine de blogs anglophones mais tout aussi important ! 1. Graphism.fr 2. Www.webdesignertrends.com 3. Design & graphisme par Geoffrey Dorne » Toutes les techniques de la recherche en design ! Hello La recherche en design, je vous en parle régulièrement sur mon blog, est un élément fondamental pour le design, notamment dans l’utilisation de ce travail de production de savoir. Car oui, la recherche c’est bien, la production de savoir grâce au design, c’est encore mieux… et le mariage de la recherche en design et du design au sens plus large c’est topissime Pour vous aider à comprendre les outils & les méthodologies de la recherche en design, je vous propose de découvrir ce référentiel en ligne.

Présenté comme une ressource inachevée et évolutive, ce site Internet vous offre un ensemble de définitions avec des informations riches et variées. À mes yeux, ces techniques permettent d’adresser la question du projet en design et notamment la façon dont on l’aborde. Elles englobent également la participation des multiples parties prenantes, y compris les utilisateurs potentiels ou les publics, les partenaires voire encore les équipes internes. source. TUTO - Apprendre les bases d'Illustrator en 8 leçons. L’ergonomie web: facilitateur de navigation. Ce billet a été lu 43 fois. À votre tour? L’ergonomie web est la pratique de création ou d’adaptation de contenu pour faciliter la navigation des internautes. Quelques règles à suivre ! L’ergonomie de l’info : suivez le guide!

La première étape pour ne pas perdre le lecteur dans le flux d’information web est d’organiser et hiérarchiser le contenu. Créez un menu efficace et compréhensible rapidement pour les lecteurs. Utilisez le fil d’ariane, qui fonctionne comme une boussole et est encore plus pratique que le plan du site. Les liens transversaux permettent de renvoyer un contenu vers une autre catégorie associée. T’as le look, coco! Le look & feel, ou la forme font partie intégrante des paramètres d’ergonomie. Pour assurer la cohérence dans le style, créez une charte ergonomique. Chaque chose à sa place Outre le contenu, chaque élément doit avoir sa propre place sur un site web. Source: webstyleguide.com Et vous, vous avez pensé à optimiser votre ergonomie web? Sur le sujet, avez-vous lu...

.COM ou .FR : quelle extension de domaine choisir pour votre site Internet? Aujourd’hui je voudrais rebondir sur la célébration du 30ème anniversaire des domaines de premier niveau génériques : .COM, .NET, .EDU, .ORG et .GOV. En termes de référencement, qu’est-ce qui est préférable pour votre site Internet entre le .COM et le .FR ? .COM ou .FR ? Sans entrer dans les détails techniques – non nécessaires pour ce qui suit – je vais vous expliquer ce qui est mieux pour votre activité de commerçant en ligne ou de prestataire de services sur Internet. Seul ce qui fonctionne le mieux en termes de SEO sera expliqué dans cet article. Si vous avez des questions, n’hésitez pas à me contacter ou à laisser un commentaire. Le .COM Si la zone de chalandise de votre site Internet est en France, le choix du .COM ne constituera aucun frein en termes de référencement.

Le .COM vous permet de cibler d’autres pays que le territoire français, pour cela quelques travaux supplémentaires sur votre site seront nécessaires. Ces deux solutions sont les plus correctes en termes de SEO. Le .FR. Le guide pratique de la creation de logo. Components. Available glyphs Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible.

How to use For performance reasons, all icons require a base class and individual icon class. Don't mix with other components Icon classes cannot be directly combined with other components. Only for use on empty elements Icon classes should only be used on elements that contain no text content and have no child elements. Changing the icon font location Bootstrap assumes icon font files will be located in the .. Change the @icon-font-path and/or @icon-font-name variables in the source Less files.

Use whatever option best suits your specific development setup. Accessible icons Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. Comment créer une arborescence de site web efficace. Ça y est, vous avez finalement décidé d'effectuer la refonte de votre site web. Peut-être avez-vous pris cette décision car votre site n'était plus esthétiquement aussi joli que les sites des concurrents. Toutefois, il demeure que la refonte de votre site web représente pour vous une opportunité non seulement de mettre à jour le côté visuel du site, mais surtout d'en améliorer la navigation et l'efficacité pour mieux répondre aux problématiques de vos visiteurs.

Dans cet article, j'expliquerai comment créer une arborescence efficace pour un site web en détaillant les efforts à investir avant de créer une arborescence et aussi en présentant quelques erreurs courantes dans des menus principaux, à la fois au niveau de la stratégie et de l'utilisabilité. Créer une arborescence de site web : de quoi s'agit-il? Avant de créer une arborescence efficace, il est important que vous soyez en mesure de répondre à plusieurs questions importantes : 1. 2. L'arborescence et l'environnement de mots-clés 1. Dessine-moi un arbre, ou comment faire un plan de site. Dessine-moi un arbre, ou comment faire un plan de site Ce billet a été lu 6012 fois. À votre tour? Arborescence, plan du site, structure de l’information, … une des premières étapes de la construction ou la refonte d’un site Internet consiste à ranger, structurer, hiérarchiser l’information.

Comment? L’arborescence permet de représenter les différentes informations que comportera le site, sous la forme d’un schéma. Ce schéma en arbre présente les différentes pages qui composent le site de manière structurée et hiérarchique, voire relationnelle. L’arborescence permet donc de formaliser logiquement et structurellement le périmètre fonctionnel et informationnel du site et de bien cerner et distinguer les contenus de chaque rubrique du site.

L’arborescence combine la représentation structurale de l’arborescence avec la description textuelle des contenus. Macro ou micro arborescence? On distingue 2 types d’arborescences ou plans de site: 5 conseils pour une bonne arborescence de site. Améliorer les performances de vos formulaires. Sur Internet, les formulaires sont omniprésents. Inscription à un forum ou une boutique en ligne, prise de contact, demande de devis… Si les utilisations diffèrent, le principe reste toujours le même pour l’internaute : remplir des cases et fournir des informations simples telles que ses coordonnées. Comment améliorer les performances de vos formulaires ? Le problème, c’est que nous ne faisons pas tous preuve de la même patience face aux formulaires. Plusieurs études ont ainsi indiqué que plus de 50 % des internautes abandonnent fréquemment le remplissage d’un formulaire car ils le trouvent trop long, trop intrusif ou trop compliqué.

Exiger de connaître l’âge d’une personne, son numéro de téléphone, son adresse : ces demandes peuvent faire fuir les internautes, qui tiennent bien souvent à conserver un certain anonymat sur la toile. 19 % d’entre eux trouveraient ainsi trop personnelles les informations demandées dans les formulaires. Privilégiez la simplicité ! Etre visible sur le web : l'importance de votre champ lexical.