What’s the biggest difference between your designs and a $20 template?

Companies ask themselves this every time they enter the market. With the widespread advertising from website builder tools, it’s an entirely rational question to ask.

What do you have that they don’t? Turns out, there’s one subtle detail that gives design its entire personality… that extra “oomph” that no template or builder could ever hope to provide.

In this post we’ll unpack what that subtle detail is, and why it matters so much. This will help us to better appreciate the skills offered by designers and give us language to articulate this value.

Let’s go on a little journey through how successful websites are designed:

1. Reading the story

The design process starts with the copy being written and handed to the designer. This copy contains the story. As designers, it is our duty to bring it to life by giving it a visual form.

It’s essential we understand the value of the story being told before we begin.

This is why we read with the mindset of a designer. We engage our mind’s eye to seek out the narrative, the journey, and the key messages. The narrative is the thread that runs through the text and ties the events together. The journey is layered on top of and responds to the narrative. It can be emotional or factual. The key messages are the most important points in the narrative or the journey that we can take from the copy.

Identifying these elements is imperative to understanding why this page exists and what is happening in the overall story.

At this stage, we only have words on a page. There are no visuals, no fonts, or anything else. The visual story will come later.

Photo by Jelleke Vanooteghem on Unsplash

For now, we should:

• Focus on the words. That is to say that we shouldn’t get too far ahead of ourselves and begin imagining what the design may look like, yet. The temptation may be there but resist it till the next stage. For the time being, we’ll give our all to studying the words and their meaning.
• Embrace and experience the story from a designer’s perspective. Designers have a special ability to feel what a story is telling us. This is what separates quality designers from the rest of the pack. Use this ability to see beyond the words and understand the story and its constituent parts.
• Use your intuition to delve into the details. As you read, think through what’s being said underneath the words. What isn’t written, but shows through in the copy anyhow? What has the writer hinted at without saying explicitly?

2. Asking “What did I just see?”

After a thorough read through, it’s time to dig deeper into the story. This can be done by asking questions like:

• What big feelings did the copy leave me with?
• What did I see with my mind’s eye?
• What texture did the story have?
• Were some sections of the story particularly dramatic?
• Did any patterns or colors come to mind?

This step seems abstract at first, but building an initial rich mental picture of the story is key to the success of the final design. After all, it’s our responsibility as designers to bring that story to life.

The best designers do this. They’re able to say “look at this” rather than “look at me”. How? They’re adept at creating a very rich and developed understanding of the stories they work with.

When we understand the story entirely – its tone, background, and key messages, etc. – we can convey it to readers who aren’t designers and don’t have that gift of expression.

After asking questions about the story, it’s essential to sum up the key emotions we’re left with. Listing a range of emotions felt can help us in the design phase. We need to reflect those emotions through design. Pinning them down will ensure our final design captures the story fully.

3. Checking that perceptions are aligned

Now that we have a fleshed out idea of the story we’re working with, it’s time to confirm how accurate our interpretation is.

Did we see what the target audience will see? Did we see what the project owner wants them to see?

If our interpretation is different, the copy gave us the wrong impression and it will have to be adapted and refined before the design process goes ahead. It will make the story clearer going forward.

Once our understanding of the story is aligned, it’s time to look at it from the perspective of our target audience.

Photo by Emily Morter on Unsplash

We should ask questions about our audience to better understand how the story will be framed in their minds:

• Who are they? Consider putting together personas (or using existing ones related to the project) to segregate your audience and understand each individual group on a deeper level. Think of things like age, profession and interests.
• What’s their experience? After understanding the personas that’ll interact with your story, ask how their unique experiences will affect their view of it. Are they related to the story somehow? Will this help or hinder them when it comes to understanding it?
• What are their needs, hopes, desires, dreams and fears? There are no more powerful motivators than these. Put yourself in the shoes of your audience and consider each of the above to gain a deeper perspective of how they’ll approach the story. Their needs are especially important here – what can’t they live without?

4. Bringing it to life

At this point, you’re probably wondering, “Jeez, we have done a lot of work, but  only have text on a page.” However, we now also have a totally developed understanding of the story, and it’s time to breathe life into it with the design.

Promoting story through design

Every choice that we make – font, color, size, composition, motion graphics, etc. – should reveal and promote the story. We must use our designer’s mind to make sure the story is brought to life.

Begin by gathering images based on what we saw in our mind’s eye. Did we see any faces, objects, scenes or other elements?

Illustrations, with their ability to unpack and simplify abstract concepts, will probably play a part too.

Think about the hierarchy of information and how it’ll be organized. There may be core pieces of information and more supplementary pieces – how will these be presented and differentiated?

All of these decisions will help tell the story. Some people see design as the decoration of a page before putting words onto it. But as this process reveals, it is far more:

We are visual storytellers.

Photo by Kaleidico on Unsplash

Remaining focused

It’s inevitable that we’ll think ahead. We may begin to blend form and function. For example, we might wonder how sticky navigation could be used. Could a carousel work with the images we’re envisioning?

Abandon those ideas for now. They’ll have their time to shine.

Of course, our page has to function properly and have a focus on conversions. However, none of that matters if our design doesn’t first connect with our audience.

And this, folks, is the subtle difference that we have been alluding to throughout this entire post: connection.

The importance of connection

By connection I mean an empathic, deep, visceral appreciation and understanding between the story being told and the person hearing it.

With a finite number of options and restrictive choices, no template or theme can hope to achieve this. This is what makes designers unique and valuable – we breathe life into stories and build strong bonds.

Picture a children’s book…

To better understand this idea, imagine the process of creating a children’s book.

It’s impossible to illustrate one before knowing the story. And to write the story first and then find a template with illustrations that fit perfectly? Unheard of.

In both scenarios, there would be no cohesion and the story would be lost.

Conclusion

To sum it up, themes, templates, and “done-for-you” tools can’t offer the subtle difference that gives design its personality. The elements that make up these tools have not been designed to champion the story from the very beginning. Frankly, they suffer for it.

This is exactly the point where our designs differ from the $20 template: we have a capacity to infuse meaning through deliberate design choices. The story is more effectively communicated because of them.

Learning to articulate this value is both a very important skill and a vital tool to counter the prevalent advertising from website builder tools. As designers, our work has irreplaceable value. If we communicate it effectively, our clients will not only appreciate it, they’ll crave it.