Everyone likes stories right?

I mean who doesn’t like to be captivated by a great story. I know I love great stories from action movies to animated films.

But the question to really ask is can you tell your story through web development or web design?

The answer is…

YES!

Every person, every brand, and every business has a story to tell.

I like to refer to this as your “brand story”.

The question to ask now is how will you tell your story online for viewers and visitors to engage what you want to represent and what you’re trying to convey.

In this post we will explore the relationships between good story telling and how they can be translated in your design.

How To Tell Your Story Through Great Web Design

I think when it comes to the world of web development I like to refer the first visit, or the welcome screen, to your website as the trailer to your movie.

What are visitors first impression when they enter your site?

Are they wowed (if thats even how you spell that word), are they confused, disgusted, or tired of just waiting for your site to load, which is a huge factor for losing viewers.

No worries we will talk about some things to how you are able to communicate effectively your story.

First thing first though, which is most important, to address is “what is your story”.

You just don’t build a website for the fun of it, well if you’re a front end developer like myself then you do enjoy building them for fun.

Yet even when developing websites there is a point and a goal for each project.

The goal is to design the site with the story and user in mind.

Therefore some questions to ask so that you can keep the story consistent is what will the site be about, is there a color scheme, or for you business minded folks the brand colors.

Once you have the story down for your site or product your trying to promote for your site now it is now time to get into the story planning in how you will convey the story.

I read this quote from a site that said…

“Every design tells a story. Every story has a design.”

I fell in love with this because as a developer with a background in design I am fascinated with the idea of how to let my work speak for itself and the way that is done, I believe, is through great design.

Have you ever thought about this. Another fun fact…

Did you know that 60% of conversations is really just telling stories to each other

This makes you think that if the majority of communication is through storytelling why not use this technique to capture your audience.

So let’s learn some techniques of the craft that has been used for centuries.

Some things to think about when creating stories so that your not overwhelmed by the idea of it all is from Paul Jarvis a writer and designer who wrote an article for Inc Magazine who gives some common elements of good stories…

• Simple
• Emotional
• Truthful or believable
• Real
• and can work for almost any audience

I would like to argue with the last point because I am a firm believer of specializing.

Meaning not everyone can relate to your story and you will have a specific audience yet I do believe others can relate to it in some way.

I know it sounds a little contradictory but I stand by my target audience philosophy.

So now that you know to keep your story real and simple lets think of what stories consist of.

Every story has characters, a plot, emotion and some action involved.

The way this is portrayed through web design is no different only you’re switching a few elements for the other.

The character can be the product, business, or service you’re providing, the emotion is the reasoning why the product was created and how it resonates with visitors.

The action involved really is the interaction visitors have on the site. So that could be a call to action to buy something or visit a specific link or simply contact you.

Every story has 3 parts to it and when you understand these basic concepts you can play around and finesse them to your liking and your story.

1. The Setup: this is how you set the scene for your story
2. The Conflict: this is where you create the emotion build up and the reason why you built the product. Simply put how you engage with your audience
3. The Resolution: This is where you tell whatever the solution that your product or business solves.

Along with developing all these characters and plot points within your story another thing to consider when designing for the UI (user interaction) is…

• the type of language or the use of words
• the tone whether formal or casual
• and your visual tone

I’d like to touch on the visual tone aspect a little more. The visual tone really refers to the imagery you select for the site.

Because we a visual stimulated society, especially now with the invention of social networks, like YouTube to Instagram everything is visual.

Therefore the images you use to convey your story is vital. Remember the trailer to your movie point i mentioned earlier.

You’re not captivated by a trailer with just words but the combination of both words and pictures.

Lastly when creating stories for the web as a designer and developer you should think of specific things and implement this in the design or the planning of your design. They are…

• UX (user experience)
• UI (user interaction)
• and Usability

I know sometimes, as I hear from other developers, their only focus is on the code and not how the design works.

However, I think as a front end developer whose primary focus is the front end of the site and what viewers see, it is only beneficial to be familiar with these elements to help in the aid of design so that users can have a richer experience.

I’m not saying you should be an expert in the subject, but a good foundation can set you apart in the long run.

Shoutout to how to make yourself marketable and valuable.

UX design can include the emotional design as well as giving the visitor the feel as being the main character of story.

The UI is how viewers navigate through your story/site. This can make or break your site.

I can’t tell you how many times I been to a site and been so frustrated with where things are and how to get to or find things I was looking for.

I easily gave up, and thats just from a consumer POV and not a developer, just saying.

And last is the usability. What this simply means is does your story translate to all mediums.

In other words,  is your site responsive and can be reached or seen on all devices.

Ok I think that’s it.

I think that is a good start for how to begin telling your story through great web design.

Of course I’m no expert but just a developer trying to make my way through this wide world of web and creating content to help in better design.

Of course if you want to learn more on how to tell compelling stories there are great resources online which I will be exploring myself and most likely creating more content on the subject.

For more info check out The Next Web