Menu Search
Jump to the content X
X

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:

Practical Techniques On Designing Animation

Animation, like any other facet of the web, must be designed. As web developers, we think about the effects of typography, layout, interaction, and shifting viewports, but when incorporating animation we have another factor to consider: time.

Designing For Animation

It’s not just an extra aspect to consider, either: it increases the complexity of each of the aforementioned parameters exponentially. Rather than viewing this as a heavy mass of ideas, we can bake animation into the core of our user experience process to create dazzling, exciting, and engaging work that pushes boundaries and collectively elevates the medium of the web.

Read more...

Effective Logo Design, 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...

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...

An In-Depth Overview Of Living Style Guide Tools

Following the market's demand for minimalistic and consistent UIs, and the growth in modular web development, we tend to pay more and more attention to documentation and the efficiency of designer–engineer workflow with each project we undertake. Also, since the documentation process is often the weakest spot for modern web teams, we're constantly looking for the right tools to help us.

An In-Depth Overview Of Living Style Guide Tools

Living style guides help front-end developers transform front-end codebases into well-described pattern libraries with the minimum of effort. But to make them really efficient, we need to choose the proper tools — so let’s have a closer look at what our community has to offer.

Read more...

How Being In A Band Taught Me To Be A Better Web Designer

Recently, I was having a discussion with some web design students about the variety of skills a successful web professional must have — skills that go far beyond HTML, CSS, JavaScript and the other technical demands of the profession. During this conversation, one of the students asked me where I learned these skills. My response was not one the class expected.

How Being In A Band Taught Me To Be A Better Web Designer

“By playing in a band,” was my answer. Now, I am not suggesting that all web designers should run out and join a rock and roll band (although there is a glaring shortage of songs about the CSS box model). I do know, however, that many of the skills I honed while playing in a band have contributed to my success as a web designer — as much as, if not more than, my ability to write clean code or design an attractive web page. In this article, I'll describe how being in a band taught me to be a better web designer.

Read more...

Part Five 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...

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...

↑ Back to top