Wednesday, 19 December 2012

VCA Web Design

Web design, you're an entire different beast when it comes to designing. You proved to be very difficult (HTML and CSS nonsense aside) due to mostly size relationships of the content found on a page. Buttons are a little too big, headers may be too small, too much negative space etc. 

So rather than posting the horrid web pages I designed, I'm posting the small aspects of it instead. The first web page didn't really have much of personally designed content, so most of this is from the final assignment.

VCA Web Page

For our final assignment we had to design a web page dedicated to VCA (with content already provided) but in the style of one of the art movements given:
  • Pop Art
  • Cubism
  • Art Deco
  • Impressionism
  • Abstract Expressionism
  • De Stijl
  • Arts and Crafts
  • Bauhaus

Of course I would pick Art Deco, that would silly of me not to.

First thing I did was design a logo for VCA. I went overboard with it by spending a ton of time and creating a number of them...
I started out with this one first. I thought it would be interesting by making a somewhat symmetrical design by getting rid of the crossbar of the A to mimic the V. Then after looking at it for a while it just didn't look right, it wasn't being read the way I wanted it to.

Brought back the crossbar, placed it in a typical art deco frame. The space surrounding the "VCA" did not work as well as I thought it would within a half-circle. But I still wanted to integrate the thin lines into my design somehow.

So I used a font I came across that was entirely lines! I liked it for a while so I worked with it alongside what I originally had for a bit. Eventually I decided against it because of how busy it looked.
I put them within a boxed frame with repeated shapes to allude to art deco architecture and I found that it worked really well compared to the circular design I had before.
The bottom design is what I ended up choosing as my final. 

I attempted to expand on the repeated shapes at the side by bringing it to the bottom to actually mimic art deco architecture and bring back some of the thin lines that I wanted. I didn't like the result and it didn't scale well.

At one point I attempted to create a was bad.

I wanted to create a header of the entire name of the program as well as design a button. I unfortunately didn't use any of these designs but I liked the border design a lot that I used it for a sidebar on my webpage. This also showcases the secondary colour scheme I adopted for my web page.

These are my final button designs. I found that separating the buttons through the use of individual gradients was a clever solution.

I also experimented more with different logos to see if I could come up with anything better and play around with angles. 
After my teacher saw the countless logos I made, he asked for a copy of the file to show his Digital Media class (2nd year VCA) since there aren't much examples of logo experimentation/logo design progress anywhere and he would give me credit. Sweet.

I also needed to create some header and footer banner to place my logo within.

And finally this was a mock-up slideshow design (because I have no idea how to actually implement one), I made it have that retro theatre look.

1 comment:

  1. Nicely done at all! I just pleased to come this blog and really pleased to know about web design info. Was looking forward to know more information. Thanks the head up! Good luck, from