background preloader

Blog › Guidelines pour produire des PSD adaptés au web

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. 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 Quelques règles à garder en tête au moment de la phase de création : Tenir compte de la cible du site lors du dimensionnement du layout. Et voilà. Pour finir, Romy me rappelle très justement son billet sur le même sujet, qui peut être un complément intéressant.

Design Tip: Never Use Black by Ian Storm Taylor One of the most important color tricks I’ve ever learned was to avoid using the color black in my work. Mrs. Zamula, my childhood art teacher, first warned me about black when I was in middle school. Problem is, we see dark things and assume they are black things. Shadows aren’t black. In high school, I spent lots of my free time in the art room with a few other art-loving friends. I probably went through that book ten times. His shadows are some of the most saturated parts of his paintings, and that’s on the screen too. Now you might be thinking, “Yeah, but those are paintings. But I must have been thinking the same thing, because one of those days in art class Mrs. I was amazed. The corner of Chestnut and Polk. The darkest part of that image? Black overpowers everything else. When you put pure black next to a set of meticulously picked colors, the black overpowers everything else. Lots of the apps we use on a daily basis have blacks that aren’t really blacks, but dark grays. Mrs.

One Page Portfolio Hand-coded HTML and CSS is what I do. It's what I'm good at so why not? Featured Project: Inspect Element My Portfolio About Me Now this is a story all about how my life got twisted upside down and I'd like to take a minute just sit right there I'll tell you how I became the prince of a town called Bel-Air. I whistled for a cab and when it came near the license plate said fresh and had dice in the mirror, if anything I could say that this cab was rare but I thought nah, forget it, yo home to Bel-Air! 16 Pixels: For Body Copy. Anything Less Is A Costly Mistake 16 Pixels: For Body Copy. Anything Less Is A Costly Mistake Advertisement I know what you’re thinking. I’d like to persuade you otherwise. As usability expert Oliver Reichenstein says in “The 100% Easy-2-Read Standard1”: [16 pixels] is not big. In this article, I’ll explain why 16 pixels should generally be the minimum size for body copy in modern Web design. You see, in most cases, if you’re building websites with the font size set between 10 and 15 pixels, you are costing your clients money. Readership = Revenue If you’re building a website for someone — even yourself — chances are its purpose is to make money. Perhaps it’s to sell a product directly, or to offer a service, or just to generate leads. So, every element should be designed to achieve that goal. Think about it. Important Facts About Reading There are some particular findings that are pivotal to issues such as readership and readability and comprehension, which is really what body copy is all about. “But Users Can Zoom” Not so.

Sticky Menus Are Quicker To Navigate Advertisement Most designers would agree that navigation is one of the most critical components of a website. Despite this, it is not always easy to use or access. Traditionally, users must scroll back to the top of the website to access the navigation menu. I recently wondered whether sticky menus makes websites quicker to navigate, and I conducted a usability study to find the answer. Let’s look at the results of the study, a few implementation techniques and some related challenges. Sticky Navigation Defined Sticky, or fixed, navigation is basically a website menu that is locked into place so that it does not disappear when the user scrolls down the page; in other words, it is accessible from anywhere on the website without having to scroll. Usability Study Research Conditions For the study, I created two test websites that were nearly identical. 1. 2. 100% Preferred Sticky Menus Without Knowing Why Desktop Software Navigation Menus Some Good Examples Getting Started Avoid iFrames Conclusion

It's Not All Doom And Gloom On The Web 21 Beautiful Contact Pages As web designers, each project you work on has a unique set of goals and requirements. However, we all have one goal for all our projects – to impress people, creating the websites that are memorable. Who wouldn’t like this, right? To accomplish this purpose, we usually think of all kinds of content strategies or… For any website, content is the most important part. Have you ever had one of those bad days when it seems that everything is crashing around you? The summer of 2017 was a thrilling period for all fans of the “Game of Thrones” series. With so much information related to the evolution of the graphic design, I don’t think there is any designer who can deny that flat design is one of the latest and hottest trends in the graphic design world.

Mobile Form Usability: Place Labels Above the Field This is the 2nd in a series of 8 articles on mobile usability that draw on findings from our mobile e-commerce usability report. On mobile, should the field label go to the left of or above the field? After completing a large-scale usability study of 18 mobile e-commerce sites, which included test subjects completing more than a thousand mobile checkout form fields, the answer is: above, with one exception. The Issues with Left-Aligned Field Labels on Mobile The main issue with left-aligned field labels relates to the smartphone display size and aspect ratio. Not being able to see their input caused trouble for numerous of the subjects during testing. This forced the subjects to fiddle around with the quirky text selection / panning tools. Given that spelling accuracy decreases on mobile (and the odds of validation errors therefore goes up) due to the tiny touch keyboards, having errors be this difficult to fix, let alone identify, is highly problematic. Label Above the Field

To Infinite Scroll or Not to Infinite Scroll: Where We’ve Come So Far Today we’re delving into the most relevant facts on how infinite scrolling turned out to become such an acclaimed technique all over the web, and why, despite its popularity, it’s not yet all that widely adopted in web design. This feature appeared at a point in the history of the Internet when the amount of information to be presented on web pages increased, and the speed of connections allowed the reader to access and transfer information at greater rates. The question of infinite scrolling on web pages is one of the aspects involved in the user experience design, and isn’t as cut-and-dry as you might think. Beginnings and Popularisation At Google, it’s called continuous scrolling and can be also be referred to as endless scrolling. This technique is notably used in the news feed page on Facebook; the images search results page of Google and the Twitter timeline. hexaedro.eu takes advantage of horizontal infinite scrolling to illustrate evolution of mankind Why Avoid this UX Improvement?

Why Is Facebook Blue? The Science Behind Colors In Marketing Editor's Note: This is one of the most-read leadership articles of 2013. Click here to see the full list. Why is Facebook blue? According to The New Yorker, the reason is simple. Not highly scientific, right? So how do colors really affect us, and what is the science of colors in marketing, really? First: Can you recognize the online brands just based on color? Before we dive into the research, here are some awesome experiments that show you how powerful color alone really is. Example 1 (easy): Example 2 (easy): Example 3 (medium): Example 4 (hard): These awesome examples from YouTube designer Marc Hemeon, I think, show the real power of color more than any study could. How many were you able to guess? Which colors trigger which feeling for us? Being completely conscious about what color triggers us to think in which way isn’t always obvious. Black: Green: Blue: Clearly, every one of these companies is seeking to trigger a very specific emotion: So how did that experiment turn out?

Pourquoi leboncoin.fr est-il le premier site de ecommerce français ? Il faut le voir pour le croire. Le 1er site de ecommerce en France (selon les chiffres de Médiamétrie) en mars 2013 est Leboncoin.fr avec 17 millions de visiteurs uniques en un mois, ce qui le place à la 11ème position des sites les plus visités en France. Loin devant La Redoute ou Amazon (enfin, pas trop loin, quand même). La preuve que c’est pas parce qu’on fait un site design tout plein de fonctionnalités qu’on arrive à vendre plus et mieux que les autres. Alors faut-il copier Leboncoin ou s’en inspirer ? Une offre pléthorique Leboncoin, c’est en permanence des centaines de milliers d’offres publiées non pas par des chefs de groupe ou des chefs de rayons, mais par des particuliers. Une interface simple d’usage Sur Leboncoin, pas besoin de vous inscrire (oui, vous avez bien lu) pour publier une offre. Un service gratuit (mais pas que…) Leboncoin. est entièrement gratuit et ce n’est pas Google, ni Facebook, qui renieraient un tel choix stratégique.

Du zoning au mockup, itinéraire d'une maquette web Il n’est pas toujours évident de s’y retrouver dans le vocabulaire, nouveau et souvent anglophone, de la conception web. Nous sommes nombreux (83 % [**]) à avoir déjà vécu une situation d’incompréhension à cause de ce vocabulaire. Les termes « zoning » et « mock-up », en particulier, ont des significations différentes selon les personnes [**] et prêtent au quiproquo, quand ils ne sont pas carrément considérés comme synonymes de « wireframe »… Pour mieux s’y retrouver, commençons par mettre les bons mots sur les choses. sketch / croquis La première chose que l’on fait, c’est de jeter des idées sur papier, sous la forme de croquis.Outils : papier et crayons, Sneakpeekit, InterfaceSketch Le sketch est trop peu utilisé : vous êtes seulement 16 % à crayonner régulièrement et près de 50 % [**] à ne jamais faire de croquis ! Conception ergonomique zoning Le zoning, comme son nom l’indique, sert à identifier les principales zones. wireframe / maquette filaire prototype Habillage graphique

Related: