Wednesday, 14 March 2012

YCN... Website Design

Initial Ideas for an interactive website that works as a series with the new promotional material we are creating.

Inspiration [Simple Websites] [Fashion Websites]

By clicking on these links you can see in detail what I think about these websites, including the examples shown below.

This is what the Peacocks website originally looked like. I think there is too much going on and too many colours used, which make it look really busy and only really draws your attention to the sale. This is something we have noticed throughout all of the Peacocks methods of promotions we have looked at, that even before going in to administration, they always seemed to focus on just advertising their sales making them look a bit like a jumble sale. We want to get Peacocks known for being good quality, good fashion clothes and cheap prices, and then they won't always have to advertise that there is a sale on.



Development

1. AUBIN AND WILLS

Inspired by this website design:


I've also been inspired by the mix of vintage and modern on this similar website design for Liberty:


I've also researched vintage style graphic design again to influence me. [see blog post] Including, Pearl Lowe's own website:



I've looked at the Peacocks website to see what type of information I need to include, but I decided that the sale didn't need to be a header as this was making Peacocks look too cheap and tacky, something we are trying to avoid. The sale is not a header in a lot of the website designs I looked at, so I thought sale items could be listed when the categories are clicked on, such as under Women's.

From this I have had the idea for a patterned background featuring the patterns off of one of Pearl's dresses. [vogue] This isn't an amazing quality screen shot so it means the background is pixelated when you zoom in. I tried to live trace this pattern but the detail didn't come across right. I wanted to keep this though, to show that I would like to use the pattern of one of her actual Peacock's dresses, but if I'm creating another website design where I want a patterned background, I will just have to use a different lace where I can get a high quality clip.



This design features serif type (BODONI). This font looks quite sophisticated, and along with the lace background, matches the vintage theme, as inspired by some graphic design I have looked at. 


This one features the same kind of layout of the dresses as how the blouses were arranged in the Aubin and Wills example. I think this works really well, but I would need to find better examples of dresses, as I don't think these are all from the same season, so there are party dresses mixed with day dresses which doesn't look right.


I changed from a serif font (used in my poster designs) to a sans serif font [arial] to match the style of the logo. I think this looks more modern and through doing my research, most online shops have sans serif fonts on them, maybe this is because they are easier to read. I learnt about all this in the first year when researching the typeface Universal by Herbert Bayer for my cts essay.


I think this is a good start, but it looks a bit too bare and could do with some more text. I'm going to try many more designs before choosing one.

2. EDITER 

Inspired by:

Again I have used Arial as my font in this design. This layout has been inspired by the fashion blog, Editer, and I really like this simplistic style, but it doesn't really get across the vintage style of Pearl's range, except from in the photographs.

I'm still a bit unsure of the Peacocks logo, as I don't like the blue colour used in the line underneath the letters, but I can't remove this as it is part of the logo. I don't want to introduce too many colours to the designs and if I was going with a vintage style colour scheme I think I would be using pinks and greens.

I like the idea of having a bar down the side of the page, and maybe this section could scroll down and contain lots of information, and suggestions, but the right side of the page could stay as it is with all the important information and the main imagery.


It still needs working on but I do really like this design.

3. RIVER ISLAND 

Inspired by:

I have created these little symbols to add a bit more content to the page, I think now that I have included extra information (e.g. links at the bottom) this looks more like a real website.


I have changed the font from arial to calibri, just to see what looks better. I've made the arch under the Peacocks logo black and I think this works so much better than having it blue.


I really like this design just not sure about the layout of the images.

After looking at this miss guided newsletter, I've thought of a few additional things I can add to our website design to make it look as realistic as possible.

- envelope to show newsletter - blogger symbol to link to the blog - app symbol to link to app


This design works better with the extra things I have added after looking at the missguided newsletter, and I think the images work better here, rather than having so many. However, I think I should think about putting a bit of descriptive text on the images. 

4. INTERNACIONALE

inspired by:

While this wasn't necessarily one of my favourite website designs, I thought I would try creating something a bit like it as it is different from the other designs.

Again, I've changed the font, this time to Franklin gothic book. 

After talking to Chloe, I've changed the links to pages like twitter to black and white images, so that they all match together, and the contrasting colours of these logos don't mess up the page.


An idea from the Liberty website, is that the logos are all consistent, until you hover over them, and then they turn the real colour of the logo. This means the page looks good, but its clear what the links are for when people hover over them.

I've found a high quality lace image from the internet, and with the background I'm trying to achieve something similar to what I was trying to achieve with the first website design. This is to get the mix of vintage with simplicity across.

I'm glad I experimenting with trying out a website design like this, but I just don't think the white on the black works. There also seems to be a bit much going on and its very busy. However, in my future designs, its still important to try and get this vintage theme across.


5. URBAN OUTFITTERS

Inspired by this website design:

As suggested by Chloe, I've included the arrows to show that there is more than one image on the home page. The images flash to new image, or you can scroll across by using the arrows. This example is bigger than the other ones to show that not everything would be squashed on to one page, but you would have to scroll down to see the rest of the information. This is the case with a lot of the websites I looked at so I think it would be more realistic to design like this.

The extra space has allowed me to spread things out better and so I think the top of the page looks better. I don't know if I like just the one image covering the whole top of the page though. 



6. ASOS

inspired by:


Asos is one of the most successful online shopping websites there is so there website must be doing something right!

I think this design, inspired by the Asos website is the best one I have created so far. The extra information down the side makes it seem a bit more personal, and helps to get across the things we have proposed like a blog and a competition etc. I have created some more imagery for the page such as a magnifying glass and a home button to go with the other things I have created.

While I do really like this design, it is far too similar to the Asos website, so I need to continue to develop it, by adding things in from the other website designs. I also need to find some way to include the vintage style.



JUST REALISED IVE SPELT DOWNLOAD WRONG IN EVERY ONE! OOPS

-----------

Feedback from Chloe

During these experiments, I asked Chloe for feedback to help us choose which style we like best so which one should be worked on further. 

- Make the logo all black including line under Peacocks
- Change 'boutique' in the links to Pearl
- Create different web pages showing the examples of what would be on each page
- Put arrows on to show going to the sides or scroll to show its not all one page
- Make the info at the bottom smaller
- Use quotes from Pearl
- Make the twitter, Facebook, youtube and blogger logos black and white to match the delivery and other symbols

My Opinion

I prefer the last few experiments where I have taken the advice from Chloe on how to improve them. I need to be careful not to just exactly copy what exists, and take what I like from each design idea and create a final design. I need to make sure the designs communicate what we are trying to communicate about Peacocks.