background preloader

Approche Théorique du Webdesign

Approche Théorique du Webdesign
Heather (Thomas Vuillermet) explique quelques bases du webdesign dans un tutoriel théorique. Bonjour à tous, voilà un petit dossier pour vous parler de méthodologie et de théorie, en matière de webdesign. Je pense que si vous en êtes à lire ceci, c’est que le domaine vous intéresse et que vous avez pu observer durant de longues années les sites web sur lesquels vous êtes tombés. Je ne prétends pas être expert en la matière, loin de là , simplement, il y a 2-3 ans, un tutoriel de ce style m’aurait été d’une grande aide. Un point sur vous. Le webdesign est un métier, et il est très important de prendre l’approche qu’il faut avec ce mot là . Un point sur le Design Design veut dire « concevoir, réaliser ». Et aujourd’hui, les communautés graphiques, les écoles, les magazines, ont tendance à « donner » une technique plutôt poussée pour apprendre à maitriser des logiciels, mais très peu abordent le sujet de la simplicité du message et de sa mise en forme. Le contenu L’arborescence Le Zoning

Les phrases à ne pas dire devant un graphiste Toujours dans l’idée d’améliorer les relations entre graphistes/designers et les clients, je vous propose aujourd’hui une liste de phrases à éviter lorsque vous échangez avec un graphiste. Que ce soit lors du premier contact ou au cours du projet. 1. Peux-tu refaire le même site / le même logotype ? Donner des exemples de création qu’on apprécie est vraiment une bonne idée, cela permet au designer de cerner les envies. Vous pouvez même vous inspirer de communications différentes : une typo sympa par ci, une couleur dynamique par là, une mise en page professionnelle que j’aime, etc… Attention juste à ne pas copier/coller un site ou un logo que vous aimez. En plus de potentiels risques juridiques pour contre-façon, comme je le rappelle plus bas chaque création doit répondre à un besoin : Copier à l’identique n’est vraiment pas une bonne idée si vous voulez communiquer éfficacement. 2. Si vous pouviez éviter de le préciser fièrement. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. Pour les clients:

Joomla! newsletter component ccNewsletter ccNewsletter is a very user-friendly Joomla! newsletter extension for sending a newsletter to one or multiple groups of subscribers. Create and send e-mail newsletters in Joomla! Site visitors can view newsletters on the website Flexible subscriber module fits any website Optional "Terms & Conditions" check-box Easily customize the newsletter template Professional support from Chill Creations DOWNLOAD NOWFOR ONLY €47,- Available instantly after purchase Including one year of personal support and updates, and the unencrypted extension for use on unlimited websites, excluding 21% VAT for some EU orders Yes, you can keep using the extension after the one-year support and downloads period expires After the first year you can renew your access to support and downloads with a 30% discount Ask us any question you might have or read our presale questions before you buy Yes, ccNewsletter is available in your language! A few of the over 93 reviews on the Joomla! — Peter Spie — Jos van L. — Taz

5 façons d'intégrer le social media à votre webdesign Blogging Publié le Mardi 26 mars 2013 | par Julie Mirande Depuis longtemps, blogging et social media font bon ménage. Intégrer votre stratégie Social Media au design et à l’ergonomie de votre site est véritablement devenu une étape indispensable du blogging. Non seulement, vous y gagnez des sources de trafic naturel mais vous augmentez également les chances de voir votre contenu commenté et partagé voire viralisé. Voici 5 façons d’intégrer les réseaux sociaux au webdesign de votre blog. #1 Montrez les réseaux sociaux sur lesquels vous êtes Votre site est au coeur d’un maillage qui concentre votre présence numérique. > Mettez en avant vos icônes de réseaux sociaux dans un élément de votre site qui est présent sur toutes les pages : l’entête, la barre latérale. > Les icônes des réseaux sociaux sont rentrées dans les usages et automatismes numériques. > Rappelez-vous que Facebook met à disposition de ses utilisateurs d’autres plugins sociaux que le bouton ‘J’aime’ et le bouton ‘Suivre’.

Comment démarrer un projet web ? Hey ! Le site DesignModo présente souvent d’intéressantes infographies et cette fois-ci cela concerne le bon démarrage et la bonne tenue d’un projet web ! Cette infographie, réalisée récemment nous présente le processus général et la structure en détails d’un projet web. Lorsqu’il vous faut vous attaquer à un projet de conception de site web, au mieux vous avez votre propre méthodologie, au pire, vous faites ça comme ça vient.. Et le pire c’est que ça fonctionne ! Mais cette infographie sera particulièrement utile pour structurer votre projet parce que dans l’évolution du monde du webdesign, on découvre sans cesse de nouveaux workflow, de nouveaux outils, de nouveaux scripts ou de nouvelles techniques, il est facile pour un débutant d’être perdu. Un bon point de départ donc ! Et vous, vous retrouvez dans cette infographie ? source & source Ces articles peuvent aussi vous intéresser:

Générer des icônes Flat design personnalisées - CfmWeb dans Ressources par Gaëtan 30 janvier 2014 Si vous aimez le style « Flat design », voici un site à ne pas louper : le site Icons DB propose quelques milliers d’icônes customisables en téléchargement gratuit. Le gros plus de ce site est le coté « customisables » qui permet de générer toutes les icônes à la couleur désirée avec un grand choix de tailles allant de 16 à 512 pixels et un large choix de formats (.ICO, .PNG, .JPG, .GIF et ICNS pour les utilisateurs sous Mac). Mots-clésgénérateuriconesoutils 9 basic principles of responsive web design Responsive web design is a great solution to our multi-screen problem, but getting into it from the print perspective is difficult. No fixed page size, no millimetres or inches, no physical constraints to fight against. Designing in pixels for Desktop and Mobile only is also the past, as more and more gadgets can open up a website. Therefore, let's clarify some basic principles of responsive web design here to embrace the fluid web, instead of fighting it. Responsive vs Adaptive web design It might seem the same but it isn't. The flow As screen sizes become smaller, content starts to take up more vertical space and anything below will be pushed down, it's called the flow. Relative units The canvas can be a desktop, mobile screen or anything in between. Breakpoints Breakpoints allow the layout to change at predefined points, i.e. having 3 columns on a desktop, but only 1 column on a mobile device. Max and Min values Nested objects Remember the relative position? Mobile or Desktop first

Web design la Veilleuse Graphique - La Veilleuse Graphique : l'actu graphisme, de l'imprimé au webdesign! #StartupBackPack : 30 outils pratiques pour construire sa visibilité sur Internet Quand on se lance dans la vie entrepreneuriale, difficile pour un porteur de projets de connaître tous les tenants et les aboutissants d’un univers totalement inconnu. Pour pallier à ce manque d’informations, mais aussi pour favoriser les premiers pas dans le monde des startups, Maddyness, en partenariat avec La Petite Etoile, a rédigé un ouvrage (baptisé Startup BackPack) permettant de construire son entreprise en 10 chapitres. La rédaction vous propose aujourd’hui de faire la lumière sur un chapitre indispensable : sa présence sur Internet. Personnaliser ses signatures d’email Au delà du contenu, s’il y a une chose à ne pas oublier dans un mail, c’est bien la signature. Créer son site web Le site web est une étape cruciale dans le développement de sa startup. Créer son application mobile Avec les nombreuses tablettes et smartphones qui pullulent sur le marché, l’avenir du web se trouve bel et bien au sein des applications mobiles. Booster sa productivité Masteriser les médias sociaux

Blog › Guidelines pour produire des PSD adaptés au web Je préparais dernièrement un document pour un boulot afin de montrer à des boîtes de créa print comment faire des PSD propres pour le web. Le but inavouable de la démarche était d’éviter de se retrouver avec des charniers inexploitables en intégration, chose qui arrive encore un peu trop souvent. Pas de règles de ninja ou de gimmicks avant-gardistes ici, juste des bonnes bases saines pour faire un boulot clean. J’ai omis sciemment les nouveautés CSS3 et autres gadgets pour me focaliser sur l’essentiel. Après avoir soumis ma petite liste sur Twitter et à quelques copains, j’ai constaté que beaucoup avaient leur mot à dire sur la question et il m’a paru intéressant de publier la chose pour avoir des retours plus complets. Dernière modification : le 12 juin 2014. Préparer le fichier Quelques règles de base et rappels simples pour préparer un document web-safe : Travailler en RVB et profil sRVB (pas de CMJN !). Adapter la créa aux contraintes web Et voilà.

Dix conseils pour créer un logo accrocheur et efficace Certains de mes logos préférés au monde utilisent une technique que j'aime appeler un double sens visuel, une façon un peu trop prétentieuse de dire qu'il y a deux images enveloppées dans une à travers une interprétation intelligente d'un concept ou d'une idée. Le logo de « wineplace » ci-dessous en est un parfait exemple. Ce logo prend la forme d'une punaise, ce qui suggère les termes « localisation » ou « endroit » mais cela ressemble aussi clairement à un verre de vin posé à l'envers. Auparavant, j'ai réalisé un article qui réunit 50 logos incroyablement intelligents comme celui ci-dessous. Une des considérations les plus importantes dans le design de logos est la palette de couleurs. Parfois vous devez utiliser les couleurs d'une marque, mais d'autres fois vous aurez la liberté d'en explorer des différentes. Les couleurs ici vous saisissent et attirent votre attention, elles rendent l'illustration vivante et donnent davantage de contexte à la forme et au paysage.

Compilation d'outils pour créer des nuages de mots La création d'images se présentant sous la forme de nuages de mots épousant diverses formes s'effectue à partir de programmes informatiques proposant outre des options de mises en formes divers réglages pour jouer sur la taille des mots, leur orientation, leur couleur, les polices de caractères, l'espacement entre les mots, la taille des différents mots, etc. C'est un moyen simple et efficace d'illustration faisant apparaitre l'importance des mots qui vont ressortir plus ou moins en gros caractères selon leur nombre d’occurrences dans un texte. Vous trouverez ci-dessous une compilation d'outils en ligne ainsi qu'un programme Windows à installer sur son ordinateur pour réaliser facilement des nuages de mots à partir d'une liste de termes, d'un fichier ou même pour certains d'une page Web dont on indique l'URL. Pour obtenir un effet intéressant, il est conseillé de partir d'une liste d'au moins une cinquantaine de mots.

Related: