It’s the chicken and egg debate of website design: What comes first “good design” or functional design?

Both answers are right… and wrong.

Unlike much of what we share on Design Shack, this is more of a personal essay on the benefits of each type of thinking and why I’ll design with function over “good design” almost any day of the week.

And I’ll back up my thinking with some examples that have made a difference for real-life projects.

In Defense of “Good Design”

Design theory and principles are so much fun. Creating something that exactly fits the Fibonacci Sequence or Golden Ratio or Rule of Thirds is a rewarding design challenge that you can see the beauty in. There’s no denying it.

The first impression a good design creates is immediate and impactful. But unless you are schooled in design, it may be somewhat invisible. (And that’s ok.)

What a strong design does is create visual interest and harmony in a way that people can see but may not be able to explain.

The challenge with “good design” is that while the theories and principles of aesthetics are fairly concrete, what someone sees and likes is subjective. That’s a tricky balance.

There are plenty of reasons to design something with the priority of looking great. There’s no denying it.

• Good design makes a stunning first impression
• It creates immediate interest
• It feels modern and fresh
• It can show off and bring emphasis to your brand, product, or website
• It can help you stand out as a leader in the industry
• It fosters just the right emotional connection with audiences
• It can show what you or our brand is capable of
• It can tie to a business goal or interest

Case Study

Photographer Dan Mirolli’s website is an example of aesthetic design. Portfolio websites are a great place to practice “good design” first because they set the tone and make the right impression. Portfolio websites are a design-based medium.

Here, we created a design that puts all the emphasis on images. There’s no fluff, no calls to action, and very little text. It’s all pretty pictures.

And that is exactly what the design called for. Simple beauty to showcase amazing visuals.

In Defense of Functional Design

“Design is not just what it looks like and feels like. Design is how it works.” – Steve Jobs

Functional design isn’t always ugly. Often it has a more simplistic beauty, even if it does go against some of the core tenets of “good design.”

What we mean by functional design is something that works so intuitively that you don’t have to think about it. There’s innate comprehension and understanding between the core audience and website interface. People come to the design and do what’s expected quickly and get the expected result.

A lot of what happens with functional design can contribute to aesthetics, but also usability and even search-friendliness. Most importantly, it drives the right people to do the right things for the business the website serves.

• Functional design is conversion-focused
• It’s easy to understand at a glance and navigate
• It works for the user when they need it; responsive and zippy
• It makes updates and changes easy for the client
• It works without a lot of instruction
• It helps meet a business goal or need
• It’s highly usable
• It makes life easier or saves time for the website owner

When I start a project, I think about function first. What does the design need to do or accomplish? Then I plan the visuals. Sometimes the end result is a mix of pages that focus on “good design” with specific landing pages that are more functional.

Each serves a distinct purpose and can work in concert.

Case Study

Grits and Groceries had a situation at the beginning of the COVID pandemic that was familiar to many. They needed a way to provide meals without having people inside the restaurant.

That’s where function comes into the website design. Using a simple form, we crafted a page that made it quick and easy for customers to reserve to-go meals each week. And the additional complication was this: The location is in a rural area where everyone does not have access to high-speed internet, so the page was stripped to the minimum to expedite the ordering process.

Throughout the online ordering experiment, we added other functional – but not necessarily pretty elements – such as the large, red remember to submit your order notice based on user feedback.

Menus changed weekly, so the ordering form and associated pages had to be quick and easy to update. Customers needed acknowledgment of orders as did restaurant staff so they knew what to have ready.

The end result of putting function first was a webpage that helped customers and a business sustain during a difficult time and continued to evolve the business. We met business goals by putting function first.

Conclusion

Functional design is almost always a winner for me and my clients. That doesn’t mean we are creating a bunch of ugly websites, but they may never win design awards.

What we are creating is a website ecosystem where usability and functionality for the audience that will use the design is paramount. A functional website can lead to happier users, more conversions, and a client who is thrilled with what you have helped them create.

Functional before design puts business needs ahead of trends or new technologies. And while I love to design things that look amazing or use a new technique, client work isn’t always the place for that. (Try it with your portfolio website instead.)

At the end of the day, if you are designing for clients, a sign of your success in the website design and launch is their success. Are they meeting business goals? Is the website making their life easier? Can they do something they couldn’t do before?

A truly functional design will help clients do these things and more. And you’ve hit that magic spot when your design is functional and aesthetically pleasing. (That should be everyone’s end goal.)