When beginning this project, I was very excited at the opportunity that was presented to create an interactive product. Interactive media and the processes surrounding the subject are something I'm very interested in, so much so that my final project for my National Diploma was entirely Flash based.
I've also been creating, designing and coding websites from a young age and enjoy the process of creating code, building a layout and figuring out problems that may occur on the way. I've taught myself many codes, and now feel fairly confident in Actionscript 2 and 3, as well as CSS and HTML.
I played with the idea of creating a application for a phone for this project, but considering my love for website design, I wanted to use this opportunity to further my knowledge in that field. I also felt more confident with my abilities to do that and create something I'm really happy with, in comparison to something I might not have the most fun with and be slightly disappointed with when creating an app.
I chose to create a website for Vivienne Westwood. I'd be inspired by several websites that I'd seen recently that featured horizontal scrolling as an accessible way to view images. I knew that I wanted to incorporate something like this into my website, not just for the fact it looked good, but as it was something that I hadn't really done before in this way and was a way to experiment with different codes that I hadn't before.
The process of creating my website was one that I really enjoyed. I always love making websites, and having the challenge of writing code, creating a layout and fixing any problems that come along. It's also a really satisfying feeling to see all the code that I've written or tweaked for my purposes, as proof of all the hard work that's been done. I sometimes wonder if I'm the strongest designer, but I found myself concentrating on the right layout for the job, rather than a layout that's visually overwhelming. This meant that I used simple colours, design and layout, which worked for the kind of fashion that Vivienne Westwood creates which is known for its eccentricity and flare.
If I could change anything that I did along the way, it would purely be the addition of a mobile web version. I'm very happy with the results of what I've created but I think as an interactive project, it would interesting to play with the idea of having a mobile version, since iPhone's and Android phones are getting more and more popular.
I'm really pleased with the way this project has gone and I'm confident in what I've created as a successful interactive product. I feel confident in my abilities and have enjoyed experimenting with more difficult and complex codes to create the level of interactivity I've achieved. I think as a basic website, it works and fits the bill for what is needed for Vivienne Westwood's pieces to stand out. I've really enjoyed this entire project and would happily do it again!
Sunday 19 February 2012
Mobile Website
My plan for this project was that if I had extra time to spare once finishing the initial website, I was to code and build a mobile version to go alongside it. Nowadays, a large amount of people have access to the internet on their phones, and it can sometimes be difficult to view a website on a smaller screen if there is no mobile version available. I know that my website could be quite difficult to view on a smaller screen, especially due to the horizontal scrolling and fixed width header.
Unfortunately, I didn't have time to create a mobile website for this project, however, it's definitely something I plan to experiment with in future projects, for example, self promotion online.
Despite the fact that I never completed the above task, I did a fair bit of research on well designed mobile websites, as seen below.
Unfortunately, I didn't have time to create a mobile website for this project, however, it's definitely something I plan to experiment with in future projects, for example, self promotion online.
Despite the fact that I never completed the above task, I did a fair bit of research on well designed mobile websites, as seen below.
Threadless
Mail Chimp
1 Trick Pony
Flickr
Diesel
Content
To show that the design and layout of my website would work without the need for numerous images, I created a contact, about and collections link page. I wanted the website to reflect Vivienne Westwood in many ways, so I used the same script as for the larger collections pages, but removed any excess images and only put two 'posts' in each of the above pages.
I wanted there to be a running theme of Vivienne Westwood so on each of the pages, I put all information and links in the left hand side of the page and a picture of the woman herself on the right. Due to her flaming orange hair and interesting style, this worked really nicely and I was very pleased with the outcome. I was unsure as to how it would look when I was coding and creating these pages, but I'm definitely happy with the results.
These pages are also an example of how the website could work for many different companies, people etc. For example, rather than a fashion designer, the layout could work for many types of designers or even as a shop for someone selling products, with the images as link throughs to the product and pay pal.
Another small element that I'm really happy with in regards to the above pages, is that the two sections are of similar width to the header and navigation and that was genuinely a coincidence. However, I would have probably worked on making this happen if not, since it's a lot nicer for the consistency of the website and the overall look.
I wanted there to be a running theme of Vivienne Westwood so on each of the pages, I put all information and links in the left hand side of the page and a picture of the woman herself on the right. Due to her flaming orange hair and interesting style, this worked really nicely and I was very pleased with the outcome. I was unsure as to how it would look when I was coding and creating these pages, but I'm definitely happy with the results.
These pages are also an example of how the website could work for many different companies, people etc. For example, rather than a fashion designer, the layout could work for many types of designers or even as a shop for someone selling products, with the images as link throughs to the product and pay pal.
Another small element that I'm really happy with in regards to the above pages, is that the two sections are of similar width to the header and navigation and that was genuinely a coincidence. However, I would have probably worked on making this happen if not, since it's a lot nicer for the consistency of the website and the overall look.
Collections
I originally experimented with the captions code on images I'd taken from Style.com. After a bit more research, I realised that it featured a lot more than just one season's worth of fashion, and included images from all of Vivienne Westwood's recent collections, including menswear and Red Label.
Due to the fact that every piece of content I needed was on this website, I decided to use their images and text to fill content to bulk out my website, as examples of how it could look. I took 10 images from each collection and began placing them in the layout. I had to change small pieces of code for this to work, such as the width of the separate post sections to make the text and the image's width consistent.
Overall, I'm really happy with the way the separate collection pages have worked out and how well they work. I've taken small description text pieces from the style website also as an introduction to the following collection which I think adds a bit of depth to the content of the website.
Header Rollover
During the design process of the website, I felt like that was an aspect of design that could use a little more attention. I originally started the navigation with five links, home, about, collections, shop and contact. I then realised that a way in which I could add a home link without need of it in the navigation. This was to use the header image as a link.
I tried creating a simple click through link, but thought that the black and white nature of the header felt a little flat. I then began looking into CSS rollover images. I found lots of tutorials for coding that could be written by myself, but considering I usually take that approach, I decided to see what Dreamweaver could offer me to create this effect.
I used this tutorial to find out how Dreamweaver worked, then used the Insert Rollover Image option under the Insert dropdown menu. Despite there being simpler codes out there to create this effect, I'd never really used Dreamweaver in this way before, mainly choosing to code everything myself.
There are many built in features in Dreamweaver that I know I often ignore, so to finally use something to make my coding experience a little easier was very welcome!
I tried creating a simple click through link, but thought that the black and white nature of the header felt a little flat. I then began looking into CSS rollover images. I found lots of tutorials for coding that could be written by myself, but considering I usually take that approach, I decided to see what Dreamweaver could offer me to create this effect.
I used this tutorial to find out how Dreamweaver worked, then used the Insert Rollover Image option under the Insert dropdown menu. Despite there being simpler codes out there to create this effect, I'd never really used Dreamweaver in this way before, mainly choosing to code everything myself.
The above code was the one that Dreamweaver created for me to allow the image to rollover and work as a link. The only issue I have with it is that it makes my code section a lot bigger due to the Jquery, but it works seamlessly so beggars can't be choosers!
The final effect is when hovering over the image of the header, the Vivienne Westwood logo changes to the spot colour and it allows you to click through to the index page.
Design & Layout
When creating the layout basics, I knew I wanted something simple to allow for the imagery of Vivienne Westwood's quirky and eccentric designs to stand out. I wanted to keep it very clean and to make sure the overall look of the website wasn't going to be too 'busy'. When researching Vivienne Westwood's official website, I noticed that there wasn't many colours used. In particular, it was mainly white with a spot colour of along the lines of golden brown. I thought that this was a really nice combination, as well as something that seems quite particular to Vivienne Westwood.
I experimented with the spot colour in a number of ways, whether to have the main text that colour, or the main header styles, but in the end found that having the colour incorporated within the navigation links worked the best. I tried a number of styles with the rollovers, such as a block colour background and underline, but found that changing the colour from a light grey to the golden brown worked the nicest and was a very simple effect.
I think the spot colour keeps the website design from looking too two dimensional and is a small quirk that works well with the images. A small detail that keeps it looking different but not overshadowing any other aspects of the layout, design or images.
I think the spot colour keeps the website design from looking too two dimensional and is a small quirk that works well with the images. A small detail that keeps it looking different but not overshadowing any other aspects of the layout, design or images.
CSS Image Captions
Due to the fact that this is an interactive media project, I wasn't satisfied with the idea of just creating a website as the final product. I wanted to push myself in aspects of coding I hadn't before, so thought a good way to do this was to add interactivity within the images shown of Vivienne Westwood's fashion. When using a lot of images on a website, I felt that it would be something beneficial to have information presented with the image. I didn't just want to add static text to every image as a caption for example, so I began looking into how I could have information appear on rolling over said image,
On researching this, I found a variety of different codes from Javascript to advanced CSS. I wasn't too keen in attempting a code I'd never dealt with before, since I didn't want it to affect the way in which my project developed, so found a great CSS code tutorial that was perfect for the job.
On researching this, I found a variety of different codes from Javascript to advanced CSS. I wasn't too keen in attempting a code I'd never dealt with before, since I didn't want it to affect the way in which my project developed, so found a great CSS code tutorial that was perfect for the job.
The above tutorial was perfect for the job and included some really interesting coding that was purely CSS code, a code that I feel I'm really coming to understand. I had to do some slight tweaking to the coding to make it fit my website, and also then edited the captions for each image.
Also, through the above website, I found a lot more tutorials that will be really helpful for creating simple, clean and effective CSS tricks for future websites.
Subscribe to:
Posts (Atom)