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: Freebies, Web Design, Techniques, Inspiration, Business

Creating Mobile-Optimized Websites Using WordPress

“Mobile Web design.” Unless you’ve been hiding under a bush for the last 18 months, you’ll know that it’s one of the hottest topics in the industry at the moment. Barely a week goes by without new tips being unveiled to help us hone our skills in making websites work as well — and as fast — as possible on mobile devices.

Why We Shouldn't Make Separate Mobile Websites

Here are four ways to make your WordPress blog or website mobile-friendly, ranging from the quick and dirty to the complex but potentially very beautiful. As well as outlining the pros and cons of these methods, we’ll include information on plugins that will help without actually doing all the work for you, and we’ll provide some code that you can use for a responsive design.

Read more...

The History Of Usability: From Simplicity To Complexity

The story of usability is a perverse journey from simplicity to complexity. That's right, from simplicity to complexity—not the other way around.

The History of Usability: From Simplicity to Complexity

If you expect a "user-friendly" introduction to usability and that the history of usability is full of well-defined concepts and lean methods, you're in for a surprise. Usability is a messy, ill-defined, and downright confusing concept. The more you think about it—or practice it—the more confusing it becomes.

Read more...

Why We Shouldn’t Make Separate Mobile Websites

There has been a long-running war going on over the mobile Web: it can be summarized with the following question: "Is there a mobile Web?" That is, is the mobile device so fundamentally different that you should make different websites for it, or is there only one Web that we access using a variety of different devices? Acclaimed usability pundit Jakob Nielsen thinks that you should make separate mobile websites. I disagree.

Why We Shouldn't Make Separate Mobile Websites

Jakob Nielsen, the usability expert, recently published his latest mobile usability guidelines. He summarizes, "Good mobile user experience requires a different design than what's needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work."

Read more...

Why We Shouldn’t Make Separate Mobile Websites

There has been a long-running war going on over the mobile Web: it can be summarized with the following question: "Is there a mobile Web?" That is, is the mobile device so fundamentally different that you should make different websites for it, or is there only one Web that we access using a variety of different devices? Acclaimed usability pundit Jakob Nielsen thinks that you should make separate mobile websites. I disagree.

Why We Shouldn't Make Separate Mobile Websites

Jakob Nielsen, the usability expert, recently published his latest mobile usability guidelines. He summarizes, "Good mobile user experience requires a different design than what's needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work."

Read more...

Designing With Audio: What Is Sound Good For?

Our world is getting louder. Consider all the beeps and bops from your smartphone that alert you that something is happening, and all the feedback from your appliances when your toast is ready or your oven is heated, and when Siri responds to a question you’ve posed. Today our technology is expressing itself with sound, and, as interaction designers, we need to consider how to deliberately design with audio to create harmony rather than cacophony.

Designing With Audio: What Is Sound Good For?

In this article, we’ll explore some of the uses of audio, where we might find it and when it is useful. This is meant not as a tutorial but rather as a discussion of some basics on using audio feedback.

Read more...

Beercamp: An Experiment With CSS 3D

This year’s experiment: a 3D pop-up book á la Dr. Seuss. If you haven't seen it yet, hop on over and take a look. The website was a test to see how far SVG and CSS 3D transforms could be pushed. I learned a lot in the process and wanted to share some of the techniques that I found helpful when working in 3D space.

Beercamp: An Experiment With CSS 3D

Before we jump in, please note that explaining everything about the website without boring you to death would be damn near impossible. For your sake and mine, I’ll provide just brief takeaways. As you skim through the code snippets, be aware that jQuery is being used and that a lot of code has been removed for simplicity (including browser prefixes).

Read more...

Drop Caps: Historical Use And Current Best Practices With CSS

The practice of using a large letter to mark the start of a text has been around for almost two thousand years. Illustrated caps increased usability by marking important passages and guiding readers through the text. Unlike their historic counterparts, drop caps on the Web don’t add value in terms of usability or readability—and they are hard for Web developers to control, often rendering differently across browsers.

Early table of contents

Yet, front-end designers and clients often want to use drop caps as decorative elements. How should we implement them? Just as scribes, artisans, and early printers had a variety of methods for creating initial capitals, we Web designers have multiple methods to choose from. We can use an image of a letter, create a class to enlarge and place a letter, or use a first-child:first-letter to enlarge and place the first letter of the first paragraph. But which method should we use? Which method remains consistent across browsers? Which is most accessible?

Read more...

↑ Back to top