Menu Search
Jump to the content X X
Smashing Conf San Francisco

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 San Francisco, dedicated to smart front-end techniques and design patterns.

Author:

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

Twitter: Follow Vitaly Friedman on Twitter

Google Profile: https://plus.google.com/101951294740286010890

40+ Excellent Freefonts For Professional Design

The importance of typography in design can't be overestimated. The accuracy, precision and balance of geometric forms can give letters the elegance and sharpness they deserve. Besides, elegant fonts can help to convey the message in a more convenient way. In fact, while there are many excellent professional fonts there are literally thousands of free low-quality fonts which you would never use for professional designs. [Content Care Nov/09/2016]

Quality costs. The price of "bulletproof" fonts usually reflects their quality and starts at 50$ per typeface. However, before purchasing a font you will probably use only once in your designs you might want to take a glance at outstanding free alternatives first.

Mido STF

Over the last year we've been observing typo-designers and their works; we've regularly collected high-quality fonts available for free download and free to use for personal or/and commercial projects. In this article we'd like to present an overview of over 40 excellent free fonts you might use for your professional designs in 2008. What is your favourite?

Read more...

Tag Clouds Gallery: Examples And Good Practices

Compared to conventional navigation patterns tag clouds don't necessarily offer a more convenient and intuitive navigation. However, used properly, they can provide visitors with an instant illustration of the main topics, giving a very specific and precise orientation of the site's content. Since human beings tend to think in concepts and models, it's easier to get an idea of presented content if the main concepts are given straight away — in digestible pieces, and prioritized by their weight. In fact, the main advantage of tag clouds lies in their ability to highlight the most important or/and popular subjects dynamically which is not the case in conventional navigation menus. [Content Care Oct/11/2016]

Tag clouds offer a quite interesting approach for site navigation; although the technique is sometimes considered to be an "alternative", it shouldn't replace the "common" navigation but support it giving users additional clues about the content of the site. Due to their "cloudy" form the design of tag clouds sets them apart from other design elements on a page. And although designers don't really have that much choice in designing them, they still find their ways to break through the bounds of creativity and come up with some unusual approaches and solutions.

Screenshot Tagcloud

This article offers some selected examples of tag clouds, its shortcomings and also some suggestions for tagging data and links in a more profound and effective way.

Read more...

30 Usability Issues To Be Aware Of

You don't have to agree upon everything. As a professional web developer you are the advocate of your visitors' interests and needs; you have to protect your understanding of good user experience and make sure the visitors will find their way through (possibly) complex site architecture. And this means that you need to be able to protect your position and communicate your ideas effectively — in discussions with your clients and colleagues. In fact, it's your job to compromise wrong ideas and misleading concepts instead of following them blindly. [Content Care Oct/11/2016]

In this context nothing can support you more than the profound knowledge of fundamental issues related to your work. But even if you know most of them it's important to know how to name these concepts and how to refer to them once they appear in the conversation. Furthermore, it's always useful to have some precise terms ready to hand once you might need them as an argument in your discussions.

Eye-Tracking
Eye-Tracking: Source.

In this article we present 30 important usability issues, terms, rules and principles which are usually forgotten, ignored or misunderstood. What is the difference between readability and legibility? What exactly does 80/20 or Pareto principle mean? What is meant with minesweeping and satisficing? And what is Progressive Enhancement and Graceful Degradation? OK, it's time to dive in.

Read more...

50 Web Designers x 6 Questions

Some months ago we’ve selected 50 prominent designers and design companies, contacted them and asked to answer five design-related questions, sharing their knowledge and experience with fellows developers. 35 designers have responded then. For each of 5 questions we've received 5 precise answers. The result was 35x5 professional ideas from some of the leading web-developers all around the world. Good news — planning the celebration of our 1st anniversary, we've decided to do some more math. We've selected 6 questions, which main purpose was to give fellows designers more insights in practice, and in the experience prominent designers gained during their work over the last 5-10 years. [Content Care Nov/03/2016] So this time we wanted it to be not about useful coding suggestions or clever CSS-techniques, but about the practical knowledge and personal experience developers would share with us and our readers. What are the things you should know before starting designing / programming? What things should you be aware of? How to get your project done? In fact, we wanted to take a close look at some practical answers to these questions - from the worlds' best designers.

First Three Questions

Since we've received many answers, we've decided to divide the article in two parts; as you might suggest, each part will cover designers' answers to three (out of six) questions. Here are the first three questions we've asked. As in the first survey, one single text line would have sufficed.
  • What is one typical myth about web-development (which is not true)?
  • What is one bulletproof method to get over creativity block?
  • What is one thing you wish you knew before you've started programming/designing/... ?
So, let's move to the answers, shall we? Read more...

80 Beautiful Typefaces For Professional Design

You don't like to scroll? Be prepared. (We warned you.)

Every now and again designers stumble upon the very same problem: the choice of a unique and beautiful typeface which manages to fulfill three basic tasks. Support the corporate identity, enrich the visual appearance and is compatible with the overall design. However, usually there are simply too many options you can consider, which is why you need time to find the option you are most comfortable with. Although the choice usually depends on clients' requirements, it is necessary to have some pretty starting points for your font decision. [Content Care Oct/07/2016]

FF Kievit

So which typefaces are "bulletproof"? What fonts can be used effectively in almost every Corporate Design? And what are the options for unique, but still incredibly beautiful typefaces?

We have answers. Over the last few days we've browsed through dozens of type foundries, read dozens of designers' articles about typography, analyzed font rankings and visited bookmarked font-related suggestions. So this post has 'em all. Well, OK, at least many of them.

Let's take a look at over 80 gorgeous typefaces for professional design, based upon suggestions from designers and web-developers all over the world. Read more...

Data Visualization: Modern Approaches

Data presentation can be beautiful, elegant and descriptive. There is a variety of conventional ways to visualize data - tables, histograms, pie charts and bar graphs are being used every day, in every project and on every possible occasion. However, to convey a message to your readers effectively, sometimes you need more than just a simple pie chart of your results. In fact, there are much better, profound, creative and absolutely fascinating ways to visualize data. Many of them might become ubiquitous in the next few years. [Content Care Nov/03/2016] So what can we expect? Which innovative ideas are already being used? And what are the most creative approaches to present data in ways we've never thought before?
Screenshot
Text similarities
Let's take a look at the most interesting modern approaches to data visualization as well as related articles, resources and tools. Read more...

CSS Specificity: Things You Should Know

Apart from Floats, the CSS Specificity is one of the most difficult concepts to grasp in Cascading Stylesheets. The different weight of selectors is usually the reason why your CSS-rules don't apply to some elements, although you think they should have. In order to minimize the time for bug hunting you need to understand, how browsers interpret your code. And to understand that, you need to have a firm understanding on how specificity works. In most cases such problems are caused by the simple fact that somewhere among your CSS-rules you've defined a more specific selector.

CSS Specificity isn't simple. However, there are methods to explain it in a simple and intuitive way. And that's what this article is all about. You'll understand the concept if you love Star Wars. Really.

CSS Specificity Wars

Let's take a look at some important issues related to CSS Specificity as well as examples, rules, principles, common solutions and resources.

  • You can find the most important things you should know about CSS specificity in a brief overview at the beginning of the article.
Read more...

Developer’s Alarm: 200+ Hotkeys To Boost Your Productivity

There is nothing more valuable than the time we need to get things done. Over a long period of time time-saving techniques and solutions can turn out to be real life-savers. The more you use them, the more essential they become. Besides, using them in your favourite software applications, you can drastically increase your productivity, enhance your time-managment and improve both your professional skills and the quality of your work. [Content Care Oct/14/2016]

One of such time-saving features are Hotkeys (or keyboard shortcuts), which offer a powerful tool to get the result instantly - with a single keys combination. We've collected the most useful of them - for the most popular applications out there. Some shortcuts are trivial and well-known, but hopefully not all of them.

Developer's Alarm: 200+ Hotkeys To Boost Your Productivity

This post covers the most useful keyboard shortcuts for essential software applications users and web-developers can/should use on a daily basis - OS, Browsers, Music Players, Communication Tools, File Management and Coding. You will also find references to related resources - there you'll find more specific shortcuts for your needs.

Read more...

70 Expert Ideas For Better CSS Coding

CSS isn't always easy to deal with. Depending on your skills and your experience, CSS coding can sometimes become a nightmare, particularly if you aren't sure which selectors are actually being applied to document elements. An easy way to minimize the complexity of the code is as useful as not-so-well-known CSS attributes and properties you can use to create a semantically correct markup. We've taken a close look at some of the most interesting and useful CSS tricks, tips, ideas, methods, techniques and coding solutions and listed them below. We also included some basic techniques you can probably use in every project you are developing, but which are hard to find once you need them. And what has come out of it is an overview of over 70 expert tips, which can improve your efficiency of CSS coding. You might be willing to check out the list of references and related articles in the end of this post. [Content Care Oct/11/2016] Read more...

↑ Back to top