Complete site design through storyboard layout roughs, flowcharts & link plans (2.1, 2.1)

I have already began to visualise how I want my portfolio to look, during my client briefing stage by assessing other similar websites and getting a general idea of how the site will look.
Before I can begin the aesthetic design, it is important to evaluate how the structure of the site will work and how to design the pages and layout that will allow my site to achieve optimal functionality.

Structure Plan

I began with the basic structure of the site, beginning with a homepage/ landing page and how pages will lead off from this. This basic layout helps me to prioritise the pages and visualise how my menu system will work. My landing/ home page has the highest priority and will showcase my latest work. The subsequent pages will show my work in more detail. All pages will link back to the home page, and work in a loop.

structure design

It is important to establish a coherent structure of a site to make implementing the design more efficient. This plan can also be shared with a client to ensure that the site is serving the purpose it needs.

It is important to keep the navigation simple as it will ensure the user will be able to find all the information within a few clicks, this will encourage them to stay on the site longer and engage with your work.

Not included in the site design structure is the 404 page, a page that will appear when an error occurs. It is important to establish this page as you can provide a link back to your landing page to keep them on your site or you can risk them leaving your page. I will explore if I can change and customise my 404 page.

Links

Links are an essential element to the site, so ensuring I have the correct links will be an important part of the design process. I will be including links to external sites (Vimeo, Instagram, Flickr etc) in order to showcase my work, I will need to make sure these links open up new windows so as not to navigate people away from my site. It will be good practice to make sure my socials and external sites also have links back to my site to generate more ways into my site.

I will need to implement a link method of contact, a ‘mailto:’ link is probably the easiest way for my site’s intentions. Contact should be made as simple as possible, and this feature will immediately open up the mailbox, autofilling details and making the communication process easy.

All of my pages should link back to the home page, or contact page. It is important that I create a loop like this as it will encourage people to stay on my site for longer, meaning they will more likely look at my work and might get in contact.

 

Visualise Design

When visualising my site, I began by creating rough sketches of my landing page. Thinking about layout, structure and what elements I might want to include, like videos and colours.

FullSizeRender.jpg

I thought about colour schemes for my website, knowing that a consistent colour palette will look visually striking and bring a cohesive theme through the different pages. I visited https://www.canva.com/learn/website-color-schemes/ to get some inspiration for colour schemes. One that stood out to me is below:

Screen Shot 2018-06-25 at 14.43.14.png

I created my own colour palette for my site below.

colour palette

I believe these are muted, neutral tones which will help the site look professional, clean and allow my images and videos to really stand out as these colours do not attract a lot of attention.

I made a basic mock up of how I want the landing page to look using Photoshop, the colours I had decided to use for my design and a screen grab of my latest film from Vimeo that I want displayed on the homepage.

landing page design

This is a good base to begin from and will help inform my choices as I go forward.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this:
search previous next tag category expand menu location phone mail time cart zoom edit close