Report PDF Download Link

A link to my PDF report can be downloaded here.

Header graphic progress

Some progress work of my illustration for the header graphic on my website. The original idea was to have a girl maybe holding a sword of something and have this flowing scarf. But I ended up drawing something more simpler, which was then cropped down a lot for the header.

The bottom piece is still unfinished, but since you never see the lower half, I never got around to finishing it. In future, I'd like to make the header graphic a random picture that changes each time the page is loaded.

Summary of Plugins

Listed below is the plugins I have used on my website.

Widgets
Twitter for Wordpress (Bottom Left)
Twitter isn't something I use a lot, but I can see how it could be useful for keeping people updated with the site and what I'm working on etc. I would have liked to make some changes with this plugin, like push the date down onto a new line.

Tumblr Widget (Bottom Middle)
Widget that displays my latest post on Tumblr. I don't use Tumblr that much, so I would have liked to have something similar to this, but for Blogger but couldn't really find anything that worked like the Tumblr widget does. Maybe I should just use Tumblr instead from now on.

Text (Bottom Right and Sidebar)
Just using the default text plugin to add the network buttons and about me text on the main page.

Plugins
WP-Paginate (Index page and Category pages)
Rather than having Newer and Oldest links, this adds a page number to the bottom of the page which you can use to navigate through pages. This then shows you what page you are on and you can navigate the pages more quickly and easier.

Fast Secure Contact Form (Contact page)
The contact form used. I would have liked to have the form centered on the page, but couldn't work out how to achieve that.

Non-Plugins
Share This (Single post page)
Social network sharing buttons located at the bottom of each post.

Website review: Aeiko

Aeiko

Aeiko is the personal portfolio of artist/designer Pete Harrison.

First of all what I like most with Pete's site, is that everything is clean and easy to read. You can see straight away on the main page thumbnails of his latest or selected work, along with text links on the side for navigation to his work. The idea of latest work thumbnails is something I've worked into my site design.

Below that there is 3 sections which has his welcome message, latest tweets from Twitter and contact info. Again this is something I've added into my design.

In his main menu which runs across the top of the site, he has things broken down into categories. The designs on these pages tends to feel a little loose with everything just thrown together. This part doesn't let the site down a bit since it doesn't really flow with the main page, other than having the same header and footer structure.

One thing I would have liked to have seen would be adding a black background to the site along with the background image he is using. With my screen res the background image doesn't fill the entire screen so there is white showing on the edges of the image.

Website review: Behance

Behance

Behance is a network site for artists and designers to share work. Think of it like DeviantArt for Designers.

What I like about this site is it's a place that I can go to to get inspiration and get design ideas (It's where I found the Gaia 10 site mention below). I really like the site design in terms of ease of navigation and being able to see everything clearly. The way the content is layed out in columns is also good with the main menu across the top and the sidebar menu on the left.

I also like how the work is displayed on the main page, which shows an image with title and artist name but also categories below which the user can also use to navigate to seeing work in that category only.

My only criticism of the site is it doesn't fill up the entire browser window that a site like DeviantArt does. This makes it worse for people like me that use a large resolution monitor. My screen res is 2560 x 1440 which isn't that large now with the 27" iMac's all having that res and this site does look a bit small at that res.

Website review: Gaia 10

Gaia 10

Gaia 10 describes itself as a "worldwide community to celebrate the beauty of nature through digital art."

What I like initially with the website are the colours. The colour choices are harmonious and  they work well together. The use of a gradient background which flows into the main content area of the site is also nice touch. With the navigation menu, I like the position of it with the padding around it for the content area, which also has a darker area in the menu for the current page you are currently on.

One criticism with the design is that when there is a lot of content on the page, you have to scroll back to the top of the page to either go back or go to another section on the site. Adding a return to top button or a base navigation menu would resolve this issue.

Overall I really like the design of this site especially the magazine page. The Gaia 10 website was also a major influence for the design of my site which you can see in my mock designs below.

Design Process

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.

Validator Link