Narrative design

I started off by thinking of how different brands market their products, even if they are owned by the same company, eg how BMW put out a high end, expensive idea but MINI put out a cute and fun one, even though they are owned by the same people.

Webpages can be simple one page websites where you move down, or you can have a multi-screen one where you move from screen to screen.

Considering my websites story

  • Start – Home page
  • Middle – Case studies
  • End – Contact

Inspiration for narrative outside of design

Films: Think of the narrative in films and how they flow. The pace – when is it quick? Are there pause? If so then why? Sometimes when its quick they will excite you and capture the audiences attention.

In the home page – that’s where I NEED to capture the audiences attention – I need to consider it the fast paced and exciting section (if this was a film that is what it would be). Then in the Middle (Case studies) it slows down to allow consideration and perusal.

The hierarchy sound be:

  • Critical info
  • Background and context
  • Nice to have


Here are some websites that showcased these principles extremely well:

Sketching out some ideas

Now I promise there is a method to my madness, so stay with me.

So I started by jotting down some of the characteristics I wanted my website to have – like a static navigation bar to make it easier to navigate the site at all times and reduce confusion. I also wanted to make its background clear so it would not clash with the main websites colour.

I also wanted to have some of my main titles overlaying the ends of the edge of the background colour box – I thought it would give it a nice and playful look. This is something that was inspired by my previous research.

I started playing around with colour to try and figure out how to best incorporate my colour scheme. I also wanted to use some aspects of my logo to try and have it create a pattern of sorts; I thought it might be kind of interesting. I decided to stick to the colour scheme I landed upon last year after creating my brand (Shown below).

I experimented with watercolours (It’s what I had handy) to see how the gradient idea would work out for my background before comitting to it. I also made some quick sketches of what the logo being deconstructed to create the pattern for the background could look like. I thought it was cool so I decided to try it at a larger scale.

I wanted to get a quick preview so I made a simple sketch on a sticky note. I thought it worked so I decided to further develop it but in paper.

While the picture bellow shows a very crude idea of what the background could look like it was an incredible insight – normally I jump straight into the computer but having to take a step back and draw it and fix it and change it forced me to explore different avenues – starting on paper works!

I then created a quick mock-up of the background using a mixture of Figma and Procreate – I did eventually place it in my sketchbook also but here is the digital version:

I then decided to go into Figma to create some quick mock ups for the peer feedback session to be had in the next IXD301 class.

I started off by creating my components – I decided to create soft, friendly and inviting buttons:

Here is my Figma file

Leave a Reply

Your email address will not be published.