Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. 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 London, dedicated to all things web performance.

Category: Design

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.

Popular tags in this category:

Currency Design – Designing The Most Desirable Product

As digital technologies are implanted deeper in the world, making more and more aspects of life intangible, it’s hard to imagine the world without any kind of banknotes, or paper money. In the dramatic history of our world, money became not just generic objects of payment, but also symbols of societies.

Designing The Most Desirable Product Of All Time: Paper Money

Combining utility and exclusivity, money is one of the challenging objects to design. And as with any complex task, currency design holds some valuable lessons for us, web designers. This article is an attempt to formulate some of these lessons and, therefore, draw your attention to the inspirational nature of paper money.

Read more...

Product Design Principles: How Does Your Product Stack Up?

A company proves that it has a strong creative process by developing successful products repeatedly. We see this in companies like Apple, BMW and Google. Founders such as Steve Jobs formed a corporate culture with an intense focus on creativity and design. This culture highlights two core elements in the creative process: the ideas and the team.

Product design preview

The creative process can be described in one sentence: Ideas begin with a small team of creative people at the heart of the company who communicate easily with each other.

Read more...

How To Run A Side Project: Screenings Case Study

Did you know you have a superpower? No, I’m not talking about super-strength, sticking to walls or pushing metal claws out of your forearms (although you might have those as well, for all I know).

Screenings: A Side-Project Case Study

If you work on the web — which I assume you do if you’re reading this — your superpower is side projects. Unlike your regular job, where you have to listen to your boss or please your client, a side project lets you take on an alternate identity, one of which you’re in charge and no one can stop you.

Read more...

Why Perceived Performance Matters, Part 1: The Perception Of Time

Those of us who consider ourselves developers, including me, are very task-oriented. We like to be guided towards optimal results, and we find ourselves uncomfortable when there is no clear path to follow. That is why we all want to know how to do things; we like step-by-step tutorials and how-tos. However, such guidelines are based on certain theories, deep knowledge and experience.

Why Performance Matters, Part 1: The Perception Of Time

For this reason, I will not provide you, the reader, with a structured answer to the question of how to make a website faster. Instead, I aim to provide you with the reasons and theories for why things function in certain way. I will use examples that are observable in the offline world and, using principles of psychology, research and analysis in psychophysics and neuroscience, I will try to answer some “Why?” questions.

Read more...

15 Impressive Alternative Browsers

It’s 2015 and your choice of browser has proven to be as important as your choice of operating system. Dedicated apps may be competing against browsers on mobile devices, but that is hardly the case in the desktop environment. On the contrary, each year more desktop browsers appear, and some of them can change the way you browse the Internet for the better.

Impressive Web Browser Alternatives

Google Chrome, Mozilla Firefox, Internet Explorer, Safari and Opera dominate the world’s desktop browser market. Whichever statistics you check (NetMarketshare, StatCounter’s GlobalStats or W3Counter), you’ll notice that they often contradict each other in declaring which browser is leading the race. However, no matter which method is used to determine usage share, all sources agree that those five browsers do not own 100% of the world’s desktop browser usage. They may be the most popular, but they are not the only options available for accessing the Internet. So, what about the remaining share?

Read more...

What You Need To Know About Anticipatory Design

The word anticipatory comes from the Latin anticipare, which means "taking care of ahead of time." We normally associate it with something that happens, is performed or felt in anticipation of something.

What You Need To Know About Anticipatory Design

In a way, most products contain at least one element of anticipation. Aaron Shapiro from HUGE defined anticipatory design as a method where it’s up to the designer to simplify processes as much as possible for users, minimizing difficulty by making decisions on their behalf.

Read more...

Responsive Upscaling: Large-Screen E-Commerce Design

The responsive design revolution is truly upon us (if it hasn’t already happened!), and even though e-commerce websites haven’t picked up responsive design quite as aggressively as in other industries, it’s becoming increasingly popular.

Responsive Upscaling In E-Commerce

So far, most of the responsive design thinking has revolved around covering the range of experiences from mobile to desktop. Yet little attention has been paid to the opportunities for expanding that range beyond the standard desktop screen, to create an experience optimized for modern large-scale displays.

Read more...

Typographic Patterns In HTML Email Newsletter Design

Last year I read Jan Constantin’s post “Typographic Design Patterns and Current Practices” and straightaway wanted to do something similar with email. At the time I was studying responsive typography on the web, trying to break down the websites I liked in order to understand what made the typography work so well, then attempting to apply those findings to email design.

Typographic Patterns In HTML Newsletter Email Design

After seeing Constantin’s work, I also wanted to explore how other email designers were handling responsive typography. So, I amassed 50 emails across various industries that I think do a good job with typography to see if any patterns emerged. You can skip straight to the Google Doc showing the raw data and results.

Read more...

Laying Out A Flexible Future For Web Design With Flexbox Best Practices

CSS floats and clears define web layout today. Based on principles derived from centuries of print design, they’ve worked well enough — even if, strictly speaking, floats weren’t meant for that purpose. Neither were tables, but that didn’t stop us in the 1990s.

A Flexible Future For Web Design With Flexbox

Nevertheless, the future of web layout is bright, thanks to flexbox. The CSS layout mechanism lets us arrange elements in a truly web-like way. Some elements can be fixed, while others scroll. The order in which they appear can be independent of the source order. And everything can fit a range of screen sizes, from widescreen TVs to smartphones — and even devices as yet unimagined. Browser support is fantastic (except you-know-who). Yep, it’s a great time to jump into flexbox if you haven't done so yet.

Read more...

Web Design Is Dead. No, It Isn’t.

Every now and then we see discussions proclaiming a profound change in the way we design and build websites. Be it progressive enhancement, the role of CSS or, most recently, web design itself being dead. All these articles raise valid points, but I'd argue that they often lack objectivity and balance, preferring one side of the argument over another one.

Web design isn't dead; it's up to us to find ways for making the web more exciting and delightful.

These discussions are great for testing the boundaries of what we think is (or is not) possible, and they challenge how we approach our craft, but they don't help us as a community to evolve together. They divide us into groups and sometimes even isolate us in small camps. Chris Coyier has published a fantastic post recently covering the debate on the role of CSS in light of growing popularity of React.js, extensively and objectively. That's the quality discussions we need, and that's what keeps us evolving as a growing and maturing community.

Read more...

Beyond The Boring: The Hunt For The Web’s Lost Soul

Has web design lost its soul? And is responsive design to blame? These questions, posed by my friend and colleague Noah Stokes, are provocative to say the least. After all, the responsive web has made browsing on our ever increasing collection of Internet-connected screens not only possible, but enjoyable.

Beyond The Boring: The Hunt For The Web's Lost Soul

Our priority as designers must be to solve problems; perhaps more than anything else, this is what we do. Responsive web design is a fantastic solution to the problem of creating virtual experiences that adapt to different devices. There are other problems out there that we're called on to solve, though, not least of which is to make content of all kinds appear interesting and engaging. A page of plain text becomes a beautiful blog post, a mess of unconnected JPGs becomes a professional portfolio.

Read more...

Design Principles: Compositional, Symmetrical And Asymmetrical Balance

A balanced composition feels right. It feels stable and aesthetically pleasing. While some of its elements might be focal points and attract your eye, no one area of the composition draws your eye so much that you can’t see the other areas.

Design Principles: Compositional Balance, Symmetry And Asymmetry

Balancing a composition involves arranging both positive elements and negative space in such a way that no one area of the design overpowers other areas. Everything works together and fits together in a seamless whole. The individual parts contribute to their sum but don’t try to become the sum.

Read more...

↑ Back to top