You know, we use ad-blockers as well. We gotta keep those servers running though.
Did you know that we publish useful books and run
friendly conferences — crafted for pros like
yourself? E.g. our upcoming SmashingConf Barcelona,
dedicated to smart front-end techniques and design patterns.
This category features articles on general design principles, Web design, typography, user interface design and related topics. It also presents design showcases and practical pieces on the business side of design. Curated by Alma Hoffmann.
As Web craftsmen, we are living in exciting times today. The frenetic pace of evolution in our industry has created remarkable opportunities for our work. Our established set of design and coding practices is more comprehensive than it has ever been before. Our designs are becoming more usable, our code more scalable, our layouts more responsive. In fact, just by comparing our design processes to those from a decade ago, it's remarkable to observe how quickly we've developed and honed our craft over all these years.
However, the maturity of our industry is far from being complete. While producing a myriad of technological advancements, we have outpaced other developments along the way. These developments aren't related to the lack of cross-browser standards support or technical downsides of the tools we are using. No, they have a different nature. They have emerged within our design community — a community which is now so fertile and diverse that it is becoming increasingly difficult to ensure its professional maturity.
Regardless of the final platform — desktop, tablet, mobile — most designers start their explorations on paper. Depending on the designer’s preference, the paper may be bound or unbound, lined or unlined, smooth or ridged. And while the materials may differ, the goal is the same: to quickly explore a variety of concepts.
The designer’s sketching tools haven’t changed much over the years, but the role of sketches has evolved. Instead of rushing to convert them to a more polished form, designers now often share early sketches with clients. Their roughness suggests that the designs aren’t “done,” which encourages feedback and facilitates collaboration.
Where do good ideas come from? It’s a question that matters a great deal to designers, yet seems to be curiously discounted in the common perception of graphic design. Any time I talk with, say, an uncle at Thanksgiving about my work, I’m reminded that, in most people's minds, the job of being a designer is mainly a matter of learning a set of computer applications — programs which, when properly operated, presumably do the work of generating ideas on their own. [Links checked February/10/2017]
If pressed further, most people will offer up some version of the Genius Theory: the idea that certain individuals are simply blessed with a force called ‘creativity’ that (as the theory goes) allows them to summon remarkable visual solutions to problems where the rest of us see only a blank canvas.
In this article, we will look at four examples of successful visual solutions created by well-known designers, and examine the process by which each designer arrived at his final concept. In each case, we will see that the solution did not arrive as a sudden flash of inspiration from out of the blue; rather, a good idea emerged methodically out of a sensible analysis of readily-available ideas and impressions.
I used to think the beginning of a website design project was the best part. Hopes are high. People are full of great ideas. Nobody is disappointed yet. But as I gained experience, I found that learning about a client’s brand, competitors and customers doesn’t always give clear direction about design goals.
Brand discussions can generate goals like “be modern,” but they don’t necessarily determine how to accomplish those goals. Competitor reviews can devolve into cherry-picking sessions that spawn “frankencomps” rather than provide helpful feedback. And mood boards, which communicate a general feeling, don’t help to articulate or prioritize design goals. With a design matrix, you can guide discussions and establish clear direction.
Web design community is strong and hard-working. We have plenty of useful resources, tools and services created, developed and released every single day: apart from goodies such as free fonts or icons, there are also many educational resources and little time-savers that can significantly improve designer's workflow. We permanently look out for the new projects and support them by presenting them on Twitter, Facebook, in our e-mail newsletter and, evidently, in Smashing Magazine's posts.
Today we are glad to present one of such posts: an overview of handy new resources for web designers; most of them were released recently, but some of them are a bit older. Still, they were included to supplement the overview, making the post more comprehensive and complete. Please feel free to discuss the featured resources in the comments to this post. And, of course, thank you guys for creating and maintaining all these useful resources. Your efforts are deeply appreciated.
Quality product descriptions can transform e-commerce conversion rates — it's common to see increases of 30-100%. As well as converting more visitors, search traffic increases drastically when unique copy is written for each product. Most online retailers use manufacturers' copy or rely solely on images to sell products. They then use inadequate copy elsewhere on their site and fail to achieve a consistent tone to persuade their audience. This creates a compelling opportunity for savvy retailers: by writing quality e-commerce copy you will create a unique competitive advantage.
Essentially, your copy must achieve two goals — establish trust and convince visitors that your product is right for them. Potential customers cannot see or touch the product since it's not physically there in front of them. This is why it’s important that your copy anticipates the needs of your visitors while convincing them that your company can be trusted to provide excellent products. Persuasion and creating trust are difficult things to do with words alone; yet, they are still achievable.
For many beginners, the task of picking fonts is a mystifying process. There seem to be endless choices — from normal, conventional-looking fonts to novelty candy cane fonts and bunny fonts — with no way of understanding the options, only never-ending lists of categories and recommendations. Selecting the right typeface is a mixture of firm rules and loose intuition, and takes years of experience to develop a feeling for. Here are five guidelines for picking and using fonts that I’ve developed in the course of using and teaching typography. [Links checked March/03/2017]
Many of my beginning students go about picking a font as though they were searching for new music to listen to: they assess the personality of each face and look for something unique and distinctive that expresses their particular aesthetic taste, perspective and personal history. This approach is problematic, because it places too much importance on individuality.
It's nearly impossible to provide an accurate quote to a prospective web design client without first gathering information about what that particular client needs. Some designers do this in either a face-to-face meeting or over the phone, but more often, they have a questionnaire that prospective clients fill out. This is preferable for a couple of reasons, but the most important is probably that this document then becomes an integral part of the design process and is available to refer back to along the way.
So the question is whether you should put that questionnaire up on your website, or only send it to prospective clients once they've contacted you. There are a couple of reasons you may want to make it available online, but the obvious one is that clients are often eager to get started with their projects and so by providing the questionnaire online, this eliminates a step in the pre-contract part of the process.
Here, we've collected questionnaires and worksheets used by actual web design companies, including some of the leaders in the industry. There are both online and downloadable forms included, as well as the pros and cons for each format.
The attention span on the Web has been decreasing ever since Google had arrived and changed the rules of the game. Now with millions of results available on any topic imaginable, the window to grab a visitor's attention has decreased significantly (in 2002, the BBC reported it is about 9 seconds). Picture yourself browsing the Web: do you go out of your way to read the text, look at all the graphics, and try to thoroughly understand what the page is about? The answer is most likely to be a straight "no." With bombardment of information from all around, we have become spoiled kids, not paying enough attention to what a Web page wants to tell us.
We make snap decisions on whether to engage with a website based on whatever we can make out in the first few (milli)seconds. The responsibility for making a good first impression lies with designers and website owners. Given that the window of opportunity to persuade a visitor is really small, most designs (probably including yours) do a sub-optimal job because the designer in you thinks in terms of aesthetics. However, most websites do not exist just to impress visitors. Most websites exist to make a sale. Whether it is to get visitors to subscribe to the blog feed, or to download a trial, every website ultimately exists to make a sale of some kind.
Web typography has evolved a lot over the last years. Today we see rich, accessible typography, a plethora of type design choices for the web and a number of remarkable, type-based web designs. It's a great time for web design, and it's a great time for web typography. Still, being as excited as we are, we should not forget about the foundational principles of good type design on the web and use them properly within our projects. Great choice is good, but, most importantly, we should be making meaningful typographic choices in our designs.
In this post we present an extensive overview of educational resources, tools, articles, techniques and showcases all related to web typography. Please notice that the overview presents resources which we have stumbled upon, discovered, collected and reviewed over the last six months. This round-up is quite long, so save some time for a thorough study.
Creating great typeface combinations is an art, not a science. Indeed, the beauty of typography has no borders. While there are no absolute rules to follow, it is crucial that you understand and apply some best practices when combining fonts in a design. When used with diligence and attention, these principles will always yield suitable results. Today we will take a close look at some the best practices for combining typefaces — as well as some blunders to avoid. [Links checked March/02/2017]
By far the most popular principle for creating typeface combinations is to pair a sans serif header typeface with a serif body typeface. This is a classic combination, and it's almost impossible to get wrong.
In the examples above — a typical article layout — we have Trade Gothic Bold No.2 paired with Bell Gothic on the left side. They are both sans serif typefaces. However, they have very different personalities. A good rule of thumb, when it comes to header and body copy design problems, is not to create undue attention to the personality of each font. Trade Gothic is arguably a no-nonsense typeface. Bell Gothic, on the other hand, is much more dynamic and outspoken.
We continue to collect most beautiful high quality freefonts, which can be used for both private and professional projects without any restrictions whatsoever. They are hard to find, but the search is definitely worth it.