Design Rational.
After countless days and hours of trying to remember how to use Photoshop after nearly three years without using it, I still had not mastered the art of it, so this made for the future of this design to look site bleak!
The website I chose to redesign was the "Faculty of Arts and Design" as this was the website I was most familiar with. Thinking this would work to my advantage I began thinking up ideas and beginning some design research, I found myself to be quite wrong with my assumption, and started expecting the worst for my design.
After hours of design research, I finally found a few websites that sprang some ideas into my brain, and I started to brainstorm. I found ideas from websites such as:
• http://www.bestwebgallery.com/categories/css
• http://www.siteinspire.com/showcase
• http://www.letsdothis-now.org/
• http://www.nickjames.co.nz/
From the above-mentioned websites, I found ideas such as different fonts that could make the website seem more fun, colours that would make it more vibrant and different layouts and positions for things such as the UC logo etc.
After my design research I began trying to implement my plan using Photoshop. Lets just say I was still very, very rusty and things did not seem to want to work for me. I started practicing again, and I could finally do some things. Not a lot, but enough to help me put a design together to actually submit on time.
My design, I think started out okay, but slowly went down hill, but due to time constraints I did what I could, and I ended up with my final outcome. Which now looking back, I could have done a lot more badly; especially considering web design really is not my forte.
At the top of my design there is my header. Within my header, I decided to place the University of Canberra Logo in the top left hand corner. Towards the right of my header, there are the words "Faculty of Arts and Design". These words are in blue and black on top of a white background. This is the part of my design that actually went according to plan, so I can't help but be happy. Obviously there are things that can/need to be fixed, but for now I am happy and will address these issues in the next week or so.
Below the header I placed a menu bar. The menu bar stretches all the way across the 960 grid in a horizontal fashion. The colour I chose for my menu bar was a warm yellow, because according to "Colour Scheme Designer 3" it compliments the blue that I used within the header. In my opinion, my attempt at the menu bar, was ok, but definitely needs fixing. It seems to flat and boring, so I will try to revamp this somehow and implement it in my final website.
Within the body of my web design for the "Faculty of Arts and Design", I included items such as the Dean's Message, examples of student's work from the 2010 graphic design Graduates, an area for other UC links, an area that provides details for general enquiries and a picture slideshow that depicts the different courses that the faculty of has to offer. My overall design for the body of my design could use some work especially in areas such as the layout and colours.
Overall, I am happy with my design, due to the fact I put the effort in. Things may have not gone exactly to plan, but I have something to show and submit for my work and I can learn from the design issues, and fix these for my final submission of the redesign of the "Faculty of Arts and Design" website.
Design Content:
• Site Width in pixels and position:
My page is 1280 PX wide and 1525 PX high.
• Header style and size:
My Header is 960 PX wide and 250 high. The background colour is white, with the words "faculty of" in a dark bluish/purple, and the words "arts and design" in black on top of a dark bluish/purple (same colour as "faculty of"), in a font known as "Edo". The menu bar in the header is a warm yellow with black writing in "Helvetica" style font.
• Number of Columns and widths:
My page I guess you could say has a two-column arrangement to it.
• Background style, position:
My background style is white, with a light grey on the each side of the page. However each column and box has it's own design elements.
• Main navigation style, size, position:
There are navigation tabs at the top in my menu bar from the left of the page to the right. They are black in colour and size 30 PT in "Helvetica" style font.
• Sub Navigation style, size, position:
Although there is no sub navigation my home page, there will be on my gallery page, course and hopefully a few others. This will be located to the right hand side of the page as the student works is only on the home page. The style of font will be black "Helvetica" in a size 20-30, on a blue sidebar
• Search field style, size, position:
The search field is located up in the main "yellow" navigation menu. The actual colour of the search bar however, is white and the shape of it is rectangular.
• Body text size, style, colour:
The majority of the text used in the body of my design is black, with the occasional blue (links) and white. Font used is Helvetica and the size of the text is 12-30. The background colour of the text ranges from black, white, grey and blue.
• Body Headings, size, style and colour:
The headings are in a font called "Edo", generally in size 48-72. The colour varies from black to a dark bluish/purple.
• Body links, size, colour:
The Links made within the body of the design are blue, size 18 in Helvetica styled font, underlined.
• Body image/s, size, style, position:
I have used a couple of images within body of the design to help demonstrate some of the course available and within the Dean's message.
References:
• University of Canberra Logo:
http://www.canberra.edu.au/faculties/arts-design/home
• Media Arts and Production Image:
http://www.canberra.edu.au/faculties/arts-design/media-arts
• Photograph of the Dean:
http://www.canberra.edu.au/faculties/arts-design/home
• Student works:
http://thanks-2010.com/catalogue/charlie-nivision/
http://thanks-2010.com/catalogue/mikela-burnham/
http://thanks-2010.com/catalogue/rachelle-dirou/
• Footer:
http://www.canberra.edu.au/faculties/arts-design/home
• Fonts:
http://www.1001freefonts.com/brush-fonts.php (punk)
http://www.1001freefonts.com/edo.php (edo)
http://www.1001freefonts.com/brush-fonts.php (VTK S Animal 2)
http://www.dafont.com/fff-tusj.font?text=faculty+of+arts+and+design&psize=1 (FFF Tusj)
http://www.noupe.com.freebie/tribbon-layered-font-exclusive-free-download.html (Tribbon A,B,C)
• Design:
http://www.bestwebgallery.com/category/css
http://www.luhstea.com/
http://www.siteinspire.com/showcase
http://www.nickjames.co.nz/
http://www.letsdothis-now.org/
Colour:
http://colorschemedesigner.com