Initial Ideas

Being really interested in web design, I was very happy starting my initial ideas, I created some flowcharts and designs to figure out what pages I will need, what content I should have on pages, and how it will be positioned on screen. 

As my summer brief was about the class system in supermarkets, and the stereotypes that come with the specific shop. 

The purpose of my website will be to inform people about these stereotypes, and how supermarkets use this to there advantage to make more money out of the public.

This is informative and could possible save people more money in the long run realising that supermarkets are pretty much the same apart from more expensive packaging. 

It will be aimed at students and young adults who are new to the supermarket hierarchy and are trying to find the best supermarket for you. 

These flowcharts show that the website starts with an Index, this is the first page that the user see's when first accessing the website. 

The about section will be informing the user what this website is about, and how it will potentially save the user some money. 

I started mocking up some thumbnails to get my initial ideas down on paper. I drew out different thumbnails for the same concept. This first concept works with a barcode as the main part of the concept. The barcode will work as the navigation for the site, allowing people to click the certain bars of the barcode to take them to specific websites. This is a quick way to find what you want, and allows no waiting about to find what you want. 

I sketched up a few thumbnails for the navigation and how it will work as a set, the navigation needs to be designed and the actual layout needs to be played too.

This is a more accurate thumbnail experimentation. As you can see the dark bar symbolizes the barcode, and allows the user to follow this straight to the section of the page they want too. There are also other thumbnails testing out layout and how I will actually put my information on my website. 

Close up of the bar and how it would look when clicked. 

Front page of the website. This selected bar would be in 100% opacity however the rest would be around 50% to show which one you are actually selecting. 

This was a mockup of the website in order and what it would look like as a design. I believe this website works with the concept however the content needs to be refined and given a purpose.

This is a mock up of the front of the website, and what it would look like for the user. I like this sci-fi matrix look, however this gives it a serious feel, I would have to change my content to make it more serious, or change my design to fit the humorous feel that it has at the moment 

This shows the navigation bar that will be locked in the top left of the screen, this is so the user has a way of getting back to the homepage whenever they need, the 4 links will also take them to the specific parts of the page that they need. 

This was my next concept. As my content is quite humorous, basically making a joke of people who go to the different supermarkets, I decided to make this interactive website, that takes answers from you, figures out which website you should shop at, and gives you this information. This would be a humorous set of questions that would make the user laugh instead of being offended.

This shows how the questions would be laid out, and the button at the bottom of the page would take them straight to the results. Originally I wanted the result to appear automatically when the last question is picked however, I don't think it is feasible. 

The question will be humorous in a way that isn't offencive to the user but find will give a truthful answer to see their own stereotype.

When the user picks the question, the opacity will be taken to 100% and the other answers will be taken down to 80% so the user can clearly see the answer they have selected.

I planned how the scroll would work, with the two columns at the sides of the pages, keeping the navigation bar in the same place for ease of searching the website. 

I started producing the homepage, I added a grid that I learned in a session the other day, finding the De Divina Proportione grids and the Van De Graaf canon grids, allowed me to create the margins and body area using the dimensions of the page. 

Applying a another layer, pointing out the margins, and the area of the text, working with the navigation bar in the top left corner of the page.

This shows a cleaner version of the design, I like the way the margins frame the content inside.

This shows a mock up of the type of questions I am going to ask the user, The type of question will change to make each question more interesting than the previous one, there will be an arrow pointing to the button on the page and then they will be redirected to the results page.