Learning To Code

The 10 Principles of Good Web Design for Developers

Flatiron School / 21 November 2014

No matter the technologies used, good design decisions can help developers make better, more usable software. Mitch Boyer is a designer, developer, and Instructor for Flatiron School’s Web Development Immersive. In this post, he breaks down Industrial Designer Dieter Rams’s 10 Principles of Good Design for developers working on their own projects—or who might not have a designer around to say “no comic sans.”

Good design is innovative

Innovation is the process of introducing new methods or ideas to an existing medium. This doesn’t mean you need to reinvent web design every time you create a new site. Instead, be cognizant of design in other areas of your life and look for ways to incorporate it into your web designs. See an interesting commercial animation. What made it interesting? Try adapting that design to the web.

Good design makes a product useful

At the end of the day, you want people to use whatever you’ve built. Good design aids the user and helps them operate your web site or application. Highlight useful content and minimize distractions. For example, if you’re working on a shopping site, the design should help a user select an item and move forward in the purchasing process before it does anything else. This book is a great place to start.

Good design is aesthetic

It’s common sense, but the site should look nice. Studies show the quickest way to build trust with your users to have a professional-looking site. Take some time to learn the elements and principles of design (from this site, perhaps). Then find your favorite websites and analyze them. What aesthetic choices did they make? Why do you like their work? How can you use what they’ve done and make it your own?

Good design makes a product understandable

Design has it’s own language. Even if you are not a designer by trade, you’ve probably picked up on a few of its principles—repetition, balance, contrast, hierarchy, and more. Your users will also be familiar with the established design patters in which they are constantly immersed, like having a navigation at the top or along the left side of a page. You have to reinvent the wheel. Use established patterns whenever possible to help your users immediately understand your website.

Good design is unobtrusive

Can users find information easily? Your website should be easy to navigate and operate. If it’s a web app, does the design augment the process of using the app, or is it obtrusive? Accessibility should never be sacrificed for something that “looks cool.”

Good design is honest

Honest design exists to aid the user, not trick them. If there is an important element on the site—like a “Buy Now” button—design it to direct your user where they expect to be directed. With great power comes great responsibility. Use this power for good, not evil, and avoid the dark side.

Good design is long-lasting

Trends come and go, but good design is forever. Compare 2002’s with today’s and you’ll notice the site remains remarkably similar. Sure, color and fonts have changed, but the soul of the website is the same today as it was in 2002.

Good design is thorough down to the last detail

The 80/20 principle tells us it takes 20 percent of the time to finish the first 80 percent of a project, while the remaining 20 percent takes 80 percent of the time. Finishing a design is tedious. Sometimes you’ll spend hours laboring to get one section to look just right. You’ll be tempted to call it it quits, but good design is thorough down to the last detail.

Good design is environmentally friendly

While your web design will probably not affect the environment in the same way an industrial designer’s might, you can still use conservation as a principle—just for a different purpose. Using lightweight frameworks and optimizing your code and images will help reduce the page load time for your users. A happy user is good for the environment, too.

Good design is as little design as possible

The adage, “less is more,” applies here. Don’t burden the design with non-essentials. I know you love that animation of the dog riding a fire-breathing dragon that you worked on for days, but id it’s not essential to the design, lose it. Jost like bloated code, you will need to refactor your design, tweaking it several times before arriving at the optimal version.

All this is to say that the best designs get out of peoples’ ways and let them do what they came to your site or app to do as quickly and as pleasantly as possible. This should matter to us developers because visual communication is an inherent part of what we do. The key to creating a well-designed product is to always remember that you’re building for people above all.

You're Not an Impostor: How to Manage Self-Expectations as a New Developer Previous Post From Flatiron School to Acquisition: A Flatiron Alum's Path to Starting and Selling a Company Next Post