beanz Magazine

The 10 Principles of Good Web Design for Developers

Mitch Boyer

Design basics for developers who do not have a designer around to say "no comic sans!"

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, reprinted from the Flatiron blog, he breaks down Industrial Designer Dieter Rams’ 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 apple.com 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 if it’s not essential to the design, lose it. Just 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.

Learn More

Mitch Boyer

https://twitter.com/mrmitchboyer
https://instagram.com/mrmitchboyer/
http://mitchboyer.com/
https://www.linkedin.com/in/mrmitchboyer

The Flatiron School

http://flatironschool.com
http://flatironschool.com/web

The 10 Principles of Good Web Design for Developers

http://blog.flatironschool.com/post/103222909668/the-10-principles-of-good-web-design-for

Dieter Rams

http://en.wikipedia.org/wiki/Dieter_Rams#Dieter_Rams:_ten_principles_for_good_design
http://design.designmuseum.org/design/dieter-rams
https://www.vitsoe.com/us/about/dieter-rams

Also In The April 2015 Issue

Why Do Designers Hate Comic Sans?

The history of the font and the reasons people hate Comic Sans are great ways to learn about typography.

Learn Typography Online

Learn typography online and practice basic typography skills.

The 10 Principles of Good Web Design for Developers

Design basics for developers who do not have a designer around to say "no comic sans!"

Mary Glendening Talks about Library Makerspaces as Community Technology Centers

Librarian Mary Glendening describes how they created their library makerspace.

An Interview with Joe Dytrych and Dee Saigal, Creators of Erase All Kittens

Learn how two people created a fun online game to teach HTML and CSS.

Swift

Apple's new Swift programming language is an interesting language to study and learn, plus an opportunity to watch a new language evolve.

A designer is an emerging synthesis of artist, inventor, mechanic, objective economist and evolutionary strategist.

Online Security Tips

How to create secure passwords, manage your email accounts, securely backup data, and more.

April 2015 News Wire

Interesting stories about computer science, software programming, and technology.

April 2015 Learn More Links

Links from the bottom of all the April 2015 articles, collected in one place for you to print, share, or bookmark.

Code Golf

Problems software programmers can do to practice their skills, from beginner to advanced.

Design Patterns and Anti-Patterns

How programmers use design patterns and anti-patterns to develop software.

Help Build Applications Online

This website lets anyone practice their coding and design skills.