Practical Advice For Non-Designers Part One: User Experience

This is part one of a two part series that aims to give non-designers some very high-level, practical advice for designing websites. This part focuses on overall user experience.

Back when I was a new designer and I had a web design project to tackle, my typical first steps were to start deciding on colors, typefaces, and how the overall grid would look. Hell, I might have even started to pick out some images.

Even though I was taught that it’s critical to start every serious design project with user research, wire-framing, defining the problems, etc.. (all of the ‘boring’ stuff to me as a new designer), it was, and still kind of is, very tempting to skip the building blocks and go directly to the detailed visuals.

It wasn’t until later in my career that I realized I was setting myself up for failure by not establishing a strong foundation.

Here are the key areas I recommend you focus on before getting into the finer, visual details such as color, imagery, animations, which framework you’re going to use, and why it’s going to be React. (Kidding, I love react).

Answer the key questions

What is the problem you’re solving?

This is the most important question to answer in the design process. The problem you’re trying to solve should guide just about every decision you make on the route to finalizing a design.

In a perfect world, the client will already know the problem you need to solve but sometimes, you will have to help them come to this answer.

There can be a wide variety of problems that any website could be trying to solve. Here are a few popular ones:

• Get more users to a blog
• Sell a product
• Redesign an already existing website
• Establish authority and trust and a specific niche
• Getting people to donate to a charitable cause

As a designer, your job is to provide a design solution to a problem. The answer to this question should guide you in the right direction in the design process and allow you to focus on key areas such as:

• The overall message of the product
• Call to action placement
• General content flow

Who’s the intended audience?

The second most important question to answer in the design process is who you’re solving the problem for. Who’s going to be using the product you’re designing?

This is what we call User Research.

This step involves communicating with the people who will be using, or in the case of a redesign, who are already using the product, and trying to figure out what problems they have with it.

A common mistake is assuming that you are the user that the design needs to have a solution for. While that’s possible, it’s rarely the case.

As a designer, you're placed right in between what the product owner wants and what the user wants. They're both relying on you, so no pressure.

Focus on structure

These beginning steps in the design process should be spent figuring out what the general layout might end up being. I say ‘might’ because it’s almost guaranteed that your first idea will not be how the final product will turn out. That’s likely a good thing and totally normal. Ideas come with time.

Always start in grayscale

The reason designing in grayscale is so effective is because it adds a temporary constraint to the project. As a new designer, your first impression of constraints might be that they’re a negative thing. I’ve come to love constraints because they force you to come up with creative solutions that must adhere to certain parameters.

By eliminating the need the decide on colors and making them work well together, you can focus on overall structure and hierarchy. Oftentimes, it’s easier to understand which elements command more attention based on their size, surrounding space, and location, therefore allowing you to adjust accordingly.

It’s sooooo much fun to experiment with colors on design projects. It’s also verrrrrry time-consuming so I highly recommend you do yourself the favor and design in grayscale first. Go crazy when the time is right.

Default to simple, slowly add crazy

If there’s any piece of advice that has never failed me, it’s to always default to simple. Trust in Jakob’s Law and leverage what internet users are already accustomed to using. Starting with a simple design gives you a few advantages:

1. It’s easier to enhance a simple design than it is to simplify a complex design
2. Simple designs give you a nice ‘square one’ to iterate from
3. Getting a rough draft done is critical to the momentum of the project
4. Most people want their final product to be ‘clean and simple’

Wireframe multiple ideas

More than likely, your first idea will not be your final idea. If you’re anything like me, you’ll get ideas while you’re exercising, in the shower, sleeping, or beekeeping. I’m not sure why the brain is the way it is but ideas seem to flow anytime you’re not focused on the project.

If you think about it that way, you’re doing your brain a disservice by going with your first idea because you’re not giving it time to generate new ideas when you’re out and about.

The primary benefit of wireframing multiple ideas is that you’ll be able to test out multiple options and combine the best parts of them all into the final piece.

Get feedback

Feedback is the designer’s best friend and you as the designer should be getting as much as it as possible. Building off of my last tip about wireframing multiple ideas, more than likely, the client will prefer a few ideas from different wireframes. After receiving feedback, you can then combine their preferences into the final design.

Another benefit to getting feedback, preferably early in the design process, is that the client will be aware of the general design direction before it's too late in the design process.

Feedback is an invaluable tool and it's critical to digest and apply it in the early stages of the design process. It's great for you and it's great for the client.

Other tips

Here are a few more nuggets that have helped me throughout my career regarding establishing a good user experience in design projects.

Find inspiration

It’s important to see what works and how other websites solved common design problems. For some strange reason, as a younger designer, I thought that professionals just had all of these ideas in their heads. I’ve come to learn that everyone uses inspiration to spark new ideas.

Here is a list of my favorite places to go to find design inspiration:

https://dribbble.com/

https://calltoidea.com/

https://nicelydone.club/patterns/

https://collectui.com/

Use placeholder images

Sourcing images can be extremely time-consuming. In this stage of the design process, I highly recommend using light or dark boxes in the place where an image would be instead. This will allow you to take up the space a real image would, while still allowing you to focus on the bigger picture (no pun intended) and overall layout.

Start with paper and pencil

This is last on this list because it’s not always necessary to begin a project with paper and pencil and I don’t always start that way. The obvious benefit of starting with these analog tools is the pure speed at which you can sketch out ideas.

It’s very easy to sketch out a large rectangle and start placing the important elements where you think they should go. This is great because you get a high-level overview of the design hierarchy, balance, scale, and general alignment.

No computer is needed at this step.

Wrapping up

Remember, it’s your primary job as a designer to come up with a design solution to a problem. That is what makes design different than art. Art is self-expression. Design is using creativity to solve a problem.

Design is difficult. It becomes increasingly difficult if you’ve already ‘finished’ the design but the problem isn’t solved and you have to re-think your solution.

I hope you enjoyed the read.