Avoiding split focus will make you a better designer

The idea of this post comes from a previous one, ‘accuracy in wireframes’. I thought more about the topic, which was around trying to decide layout and adding visual style. Focusing on two very important aspects of making websites leads to difficulties. It was part of a larger problem in my process.

In this post, I want to cover ways, where split focus can creep in, and the purpose of each step, so you can gain an understanding for avoiding split focus. This is based on my process, so yours may differ, but the premise is the same.

Highlights & takeaways

• It came from a previous problem of trying to decide layout while applying visual style
• I found it was due to a lack of focus
• Splitting your attention between two big tasks is going to reduce your effectiveness
• This is obvious when trying to do multiple jobs at once
• It’s less obvious during the same job
• It’s why we develop a process, a process leads to consistency in producing the best result
• It’s worth giving focus to one task at a time means you’ll get better results overall
• For example when designing without the content you’re trying to predict what will go there
• Cutting out planning phases like sketching and understanding your content, you again predict what you’re working with
• Inaccurate wireframes lead to layout decisions being made while you apply visual style
• Think of places where you get stuck and what you’re doing, it could be trying to do too much at once

Why to avoid split focus

The reason to avoid split focus is why you develop a process. The process allows you to go through a set of steps which leads you to the best end result. Following the process, each time creates a level of consistency in the quality of your output. Of course, there will be parts to adapt depending on the project, but, for the most part, your process will remain the same.

Interrupting, merging or removing tasks from that process hinders your end result. This is why you’ll hear contrasting opinions on designing in the browser. People cut a huge part of their process out. They feel like they’re wasting time, by not doing all work in the browser. The reality is quality is sacrificed, designing and coding require different ways of thinking.

Goals

Goals are an area where split focus can mean that your website tries to do too much. You will go through a process of identifying the goals of your website. You’ll have some that contribute to each other, and some that will cause difficulty, in achieving your main goal.

It’s important to identify this main goal and shape your website around that. Your secondary goals will be treated that way by your users. Unless you try to treat them all equally, but that doesn’t lead to success.

You have two goals

• I want to build an audience through my blog
• I want people to hire me

If you want to attract people to read you blog on a regular basis, and your work is at the forefront. This will make people see your blog as an afterthought. The same applies for the reverse.

Goals suffer from the same problems as trying to do too much. It won’t be nearly as successful as having one important goal. Solving this at the start, will influence your solutions to the next parts of this discussion.

Content

Once you’ve identified your goals, you can think about content. You may have existing content, or you may need to create new content.

Without understanding what content you have, you can’t design accordingly. If you have a solution without knowing content and solution with knowing the content, they will both turn out differently.

Knowing content early means you won’t have to predict how the content is going to behave and space it will occupy. Once you understand what content you will need, you will end up with something to guide your sketches and wireframes.

You should not be thinking of what if with content. This is how you avoid splitting your focus between content and the next steps.

Sketching

I see sketching as a way to learn the content. You want to focus on getting the best order for you content and learn what content is going to go where.

You will gain an indication of layout, icons and illustration to use throughout the design. The speed of what sketching affords allows you to move quickly.

I find it handy to write the list of content I will want to feature throughout the page. Along with common things like a header and footer. As you sketch more you will find yourself referring to the list less as you remember it.

Sketching helps put the content firmly in your mind. It’s a great advantage.

Imagery, icons & illustration

The content and sketches inform the imagery (icons & illustration too) you pick these based on the message you’re trying to communicate. Without understanding the content, this is a hard task. However you can’t be too sure of the area you want it to occupy, this is where our sketches help.

Wireframes, typefaces & visual design

The wireframes you’re most likely used to are ones that feature lorem ipsum and guesses of content layout everywhere. This serves you no better than a sketch, it’s all an estimate.

You look at those wireframes and attempt to match the layout in your design. Through the constraint put on you by this wireframe, things don’t quite work as well, as the wireframe, led to believe. You begin to deviate from it and now you’re having to make more decisions, whilst applying the visual style.

Wireframes should serve as your focus on layout. It should be getting the best layout for your content so that it makes the most sense. This is why accuracy is so important. Your sketches inform this. The aim is to not think about how it’s going to look visually in the final product, but getting the best layout possible.

Where do typefaces come in with wireframes?

Typefaces should be selected based on their use within the content, having a good typeface for paragraphs is a must. I consider typefaces part of the layout, as they can vary based on width and weight.

If you have an area where it can totally change the look and feel based on what typeface is used, you want to get that right here.

Visual design

This is a huge step in itself, it’s building upon your wireframes to help them have a good visual hierarchy, choosing the most effective colours, layout refinement, and adjusting typefaces, to name a few things.

Having the wireframes be accurate means you know exactly what you’re working with.

Finishing thoughts

As I’ve been focusing more on my process, I’ve been wanting to find ways of improving it. I thought it would be worth sharing. It’s not unique to challenge the act of multitasking, it’s been done many times. Sometimes you need a reminder.

If you’re ever struggling with something, ask yourself if you’re trying to do too much at once.

View on Github