Design for Web / Layouts & Thumbnails

16 / 11 / 2013

DESIGN FOR WEB / OUGD504
THUMBNAILS / CONTENT / LAYOUTS
IDEAS & TESTING.

Through my design context blog i have looked at many different website layouts. Because i did not really take in how websites work before, i have started to look at them in different way concentrating more on the layout and the way in which they work more that the content that is on them.

I have gained a preference to web pages the rely on there scrolling way of navigation. web paged that are made up of different sections that run down one long page. I feel that the way in which this navigation gives the web page a flowing feel and takes the audience on a journey through this movement.

Because the Haci Bekir business has come through a long journey from when it was once established back in the ottoman rule, I feel that this type of navigation would be very fitting in representing this company.

Knowing the way in which I wanted my webpage to work, I started to look at the different ways in which i could utilise this movement and dew up some possible layouts in thumbnails.

 POSSIBLE LANDING PAGES

POSSIBLE HOME PAGES

 POSSIBLE SCROLLING LAYOUTS

  POSSIBLE PRODUCTS PAGE

 I drew up some more detailed thumbnails of the originals I like the best.

My favourite page out of all of my options is the products page. This is because I have a lot of primary research images that would be very suitable to execute the look I am going for. 

To visualise the way in which I wanted my pages to work together, I decided to draw them up together in a proposal.

I would like to have a landing page to entree the website and I want this to simply consist of a large logo in the centre of the page.

The home page would be mage up of 3 icons that indicate the three sup ages my we bite will contain: About, Products and History.

ABOUT (fully scroll)
This would consist of the awards the company has won through various competition, The way in which the company is run today, A map to indicate were the various stores are in the city of Istanbul.

PRODUCTS (Fully scroll)
The first page in the scroll would consist of three images of the different types of turkish delight. These will be accompanied by an explanation on what this type of delight is. the page will continue to scroll showing the various flavours that are in each category, these are represented by images and flavour tags.

These pages would then lead to offer of buying and offers that are on. This would offer prices on either a large or small box as well as the option on what content the would like for the box: a mixed box, just nougat, just traditional or just sultanas.

HISTORY (Fully scroll)
This page would consist of historic images as and information on the background of the company and show it was established.

*  *  *  *

I concentrated on this page to start with as it was the one I was most confident with, the hoping the rest of my web pages would follow on.

Instead of drawing I felt that it was time to start and digitalise my ideas so i can get a more realistic idea of how my web page would look and work.

From the images i had taken during the Summer brief I took three that differed the most from each other and had vivid colours to seem inviting to the audience. I used the photoshop software to enhance the images and make the background transparent to make the appear to be fixed on the screen.

I wanted to add some kind of pattern to the page to make it more interesting and traditional looking.

This looks a little to feminine.

 I added a slight pattern to the background (just something i had found on the internet to get an idea on visuals).

I added some test describing the confection.

(The typeface i have chosen for the heading is called 'Outstanding' because of its vintage style.)

Using a gridded layout makes it easier to have the content in a visually appealing form and will also help me to make the other pages conform with each other.

During the web workshops with Simon we have learnt how to insert 'roll over images' which allow and image to be changed when the mouse is hovered over the top of it.

I simulated this effect when looking at possible layouts using photoshop.

I would really like to utilise this method of navigation when I start to code my webpage.


Because I was know confident with this page in particular, i believed that this would be something I could work on. I started look at possible icons I could use for my home page.

I had sketched out some ideas for icons that would represent each of the main categories. A turkish delight knife to represent products, An award sash to represent the about page and a Fez to represent the history.

Using Illustrator I created a little vector of a fez.

I created a turkish delight cutting knife trying to apply the same aesthetic to this that I had with the fez above.

(mock up on photoshop)

I decided to not go with the initial idea as an award sash for the about icon. Even though the about section will have reference to awards the company has done, it will have other information in there to. I did not want it to appear as though i had narrowed down the understanding of the pages content.

Instead I thought that using a turkish 'evil eye' would be appropriate as it is something that stirs away bad luck. The fact that the company is doing so well today me ands that they have been sheltered from bad luck. This could be symbolised through this icon.