Menu Search
Jump to the content X X
Smashing Conf Barcelona

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.

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:

Logo Design Theory, Part 1: Symbols, Metaphors And The Power Of Intuition

No designer creates wow work 100% of the time. There’s no question that creating good design takes significant exertion, but generating the wow factor in your work can also be fairly effortless. Many designers follow their intuition during the creative process and incorporate universal symbols and metaphors simply because it “feels right.” Intuition — accessible to all people and most especially useful to those engaged in creative pursuits — guides designers towards solutions that align with a universal knowing.

Effective Logo Design, Part 1: Symbols, Metaphors And The Power Of Intuition

Adding a universal quality to a logo provides the broadest communicative reach, what almost all identities are intended to accomplish. The intellectual exercise of connecting the dots of “thinking” is not irrelevant in design, of course — particularly when it comes to branding — but by combining the intuitive immediacy of symbols and metaphors with strategic thinking, you integrate essential information that helps your logo stand out and be remembered.

Read more...

Benton Modern, A Case Study On Art-Directed Responsive Web Typography

Having the ability to set legible body copy is an absolute must, and we’ve come a long way with web typography since the dawn of web design. However, I feel like we have allowed the lack of variety prior to the rise of web fonts to dampen our creativity now that thousands of web fonts are at our disposal. Have usability conventions and the web’s universality steered us away from proper art direction? Have we forgotten about art direction altogether? I believe so.

Benton Modern, A Case Study On Art-Directed Responsive Web Typography

As designers, we can achieve much more with type, and with just a little more thought and creativity, we can finally start to take full advantage of the type systems available. Let’s look at ways we can push typographic design on the web further, beyond the status quo of today.

Read more...

Designing For Explicit Choice

If you’re a UX designer, you’ve probably designed a lot of forms and web (or app) pages in which the user needs to choose between options. And as a designer, you’re likely familiar with best practices for designing forms. Certainly, much has been written and discussed about this topic. So, you probably know all about how best to label and position form fields and so on for optimal usability.

Designing For Explicit Choice

But have you thought about how the design of a form affects the user’s decision-making? Have you ever considered to what extent the design itself affects the choices people make? As always in design, there are a variety of ways to design a form or web page.

Read more...

Rekindling Your Passion For Web Design

I love being a web designer and I'm incredibly thankful that I decided to join this industry many years ago. Still, despite my love of this profession, there have been a number of times during my career when my passion has waned and I’ve found myself simply going through the motions instead of fully applying myself to my work. This scenario is likely familiar to many of my fellow web designers. It is called burnout.

Rekindling Your Passion For Web Design

Burnout is a very real challenge that we face as web professionals. The same processes that help us complete projects successfully can also contribute to us falling into a routine and hitting autopilot on our work. Sometimes, an overload of work can force you to fall into a routine and become a production line in order to meet deadlines. Other times, a lack of variety and excitement can lead to apathy with burnout not far behind.

Read more...

A Better Way To Design For Retina In Photoshop

Recently, I had a project in which I needed to produce high-fidelity screens for a tablet. I was to present these screens on the device and also produce a clickable prototype. They needed to be pixel-perfect. The timeline was tight (as always), so I went with my go-to tool, Photoshop. I’ve been using it for over 10 years, and it gives me the fastest high-quality output.

A Better Way To Design For Retina In Photoshop

Are you designing at “Retina” resolution in Photoshop? If the answer is yes, then this article is for you. I will walk you through the problems I faced in creating Retina mockups to be displayed on a tablet device. I will then explain a way to work that is easier and gives you better performance. This is about my experience with Photoshop, but it could be applied to Illustrator and other software.

Read more...

Part Six Design Principles: Compositional Flow And Rhythm

When someone lands on a page of your site what do you want that person to do? Where do you want them to look? What information do you want your visitors to notice and in what order? Ideally, you want people to see your most important information first and your next most important information second.

Design Principles: Compositional Flow And Rhythm

You want potential customers to see the copy that will convince them to buy before they see the "Buy Now" button. You want people to be presented with the right information at the right time, and one way to do that is to control the flow of your composition. Compositional flow determines how the eye is led through a design: where it looks first, where it looks next, where the eye pauses, and how long it stays.

Read more...

Design Principles: Dominance, Focal Points And Hierarchy

Has a client ever asked you to make the logo bigger? Maybe they asked that just after you completed their request to make a heading bigger. The new heading stands out, but now the logo is too small in comparison and isn’t getting noticed. The clients wants to make the logo bigger.

Design Principles: Dominance, Focal Points And Hierarchy

Of course, now that the logo and heading are bigger, both are going to attract more attention than the main call-to-action button, which will need to be made bigger. And once the button is bigger, the heading is going to start looking small again.

Read more...

Content First — Design Last

How does one design and develop for the responsive web? A lot of methodologies out there try to tackle this problem, but all of them rely on the same classic website development process. It boils down to the following: design and then develop.

Design Last

Let’s go nuts and flip this outdated methodology on its head. Before we start flipping things around, let’s take a quick stroll down memory lane, just so we know where we’ve come from and where we are now.

Read more...

On China’s Bleeding Edge: Web Design Trends 2015

There are many parallels between the volatility of the web industry and China’s breakneck rate of change: For one thing, it’s hard to keep a finger on the pulse of either. But add the two together and you get China’s tech scene, a virtual landscape in such constant flux that our only hope of keeping pace is to look as far into the future as we’re able, try to discern what’s coming, and brace for impact.

On China’s Bleeding Edge: Web Design Trends 2015

Make no mistake: The Chinese web is in some ways a different place than the web you’re used to — particularly in two or three crucial respects — and user expectations are not quite the same as they are in the West. In this article, I’ll examine the things all web professionals should know before swan-diving into the Chinese market, including how mobile-only social platforms have become the revolutionary new frontier of Chinese web design, and who’s designing beautiful websites in China today.

Read more...

How To Transform Your Problem-Solving And Creativity

Think of all the people you know who inspire you, whether family and friends or public figures. Who are the most interesting, engaging and stimulating to be around? The ones with the great ideas and energy for life? These people almost certainly always ask questions and have an insatiable thirst to learn new things.

How To Transform Your Problem-Solving And Creativity

According to Donald N. MacKinnon, who is considered to be a world-leading researcher on creativity: "Creative people have considerable cognitive flexibility, communicate easily, are intellectually curious, and tend to let their impulses flow freely."

Read more...

A Frank Lloyd Wright Approach To Digital Design

Frank Lloyd Wright was a century ahead of his time. He was a pioneer, an avant-garde architect who broke free of the traditions of his era. His views on materials, form, function, space and environment define his iconic works. These ideals and principles are still used in architecture today, and his buildings have stood the test of time, remaining relevant even in today’s digital age.

A Frank Lloyd Wright Approach To Digital Design

I find a lot of inspiration in Wright’s timeless work. As designers, we’re frequently asked to create digital experiences (especially in software) that will have a lifespan of 5 to 10 years. This is an eternity in “digital” time, and it has made me ponder the future. What kind of devices will people be using in the next few decades? What interaction patterns will we be using in 25 years? 50 years?

Read more...

Part Four Design Principles: Visual Weight And Direction

Every element on a web page exerts a visual force that attracts the eye of the viewer. The greater the force, the more the eye is attracted. These forces also appear to act on other elements, imparting a visual direction to their potential movement and suggesting where you should look next.

Design Principles: Visual Weight And Direction

We refer to this force as visual weight and to the perceived direction of visual forces as visual direction. Both are important concepts to understand if you want to create hierarchy, flow, rhythm and balance in your composition.

Read more...

↑ Back to top