Design Goals
My overall goal with the site was to design a site that showed of my design style which is clean, easy to navigate design that incorporates my artwork into the design.
Mock Design
Above are some of my original mock designs for my website design. The original design was inspired by the website Gaia 10 but with some differences so I wasn't just simply copying the design.
Design Process
The first thing I designed for the site was the logo graphic. I then looked around at different websites, mostly Wordpress sites for design inspiration and ideas. When I came across the Gaia 10 website listed above, I liked the design of the site and decided to use that as a base for my site design. After completing the mock designs I then proceeded to make the HTML template file, from which I would then slice into Wordpress PHP files. After getting the basic template up and running, I then went in a started to making design changes from the original design idea.
Design Changes
Navigation
The menu was originally going to appear as shown above with it positioned to the left with the search bar on the right. But then I decided to remove the search bar since I would be using category pages anyway so it seemed redundant. I then positioned the menu centered on my site since I added an image separator to the right on each menu link and then also used text transform to convert the menu to uppercase. I then also decided to add in a base menu which wasn't it the original design. The idea behind that was to fill out the footer more, but also to make navigation more easier when dealing with pages that had a lot of content so you didn't have to scroll all the way back to the top of the page to use the navigation menu.
Colour
The colour scheme has changed a lot from the original gray colours shown above to the final version of the website which has a lot more blues. I did that mainly because I found the grays to be kinda boring and dull to look at after awhile. The blue colour also helps the logo pop more I feel.
I also removed the separate colour separation from the Latest Work box to the sidebar and made this all single colour. This just made the content area breath a little more since I added in a base colour for the footer widgets. This was also the case with the single pages which originally were going to have a box with the content inside.
The background originally had a gradient fade similar to that on the Gaia 10 website. But I removed that and made it a single colour blue since when the content expanded down I felt that the content area got kinda lost in the background. There was no definition of where the content ended and the footer began.
Validation
After finishing the site I did run the site through the markup validation service on WC3. I originally had some errors due to the Twitter plugin I was using, but changing the plugin to a different version fixed the markup errors I was getting. The website then did validate correctly which can be seen below.
No comments:
Post a Comment