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:
- Where is Poland.com Where Is Poland? | Meet Georg Brandes
- Flatguitars FlatGuitars
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
