I’ve never really experimented with the grunge design aesthetic so I thought I’d give it a go. I decided to create a band website mockup for “My Chemical Design” I’ve often thought that using grunge is an excuse to pay less regard to design and to develop things in a more artistic way, but that’s not exactly the case. As the mockup is for a popular (but fictional) band website, with thousands of visitors every day and content which get’s regularly updated, function is still priority. Launch Site

Key Points

• Layout To start with, I was thinking up all kinds of weird and wonderful ideas. I got a bit carried away in the excitement of the whole grunge concept and I found myself clutching at loose strings (or whatever the saying is). When I read Bart-Jan Verhoef’s great tutorial which advises to get the structure down before thinking about any grungy effects, I realised I was doing things in the wrong order. I decided to go for a two column layout. With a wider content area for news and updates.
• The grunge! I really wanted to go for dark and decayed colours. I went for a mix of greens, greys and reds to achieve the moody effect I wanted. For imagery I used photo’s of a lead singer, and gritty urban construction. Credit to Spike Hoban and Paul Graham Raven for the photos which I grabbed from flickr. I used the excellent Moksha font from misprintedtype for the logo. All credit to Recife for that.
• The Background I followed Elliot Jay Stocks’s tutorial on how to create a textured background.

This was an interesting project to design and build a website for a small business which does face and body painting at events. They wanted a simple and foolproof but visually attractive site which would place the emphasis on their photos of face and body paints. The client specifically wanted a gallery and a blog which can be updated quickly and easily. For this reason I decided to use WordPress as a CMS platform. Launch Site

Key Points

• Style The visual style of the site reflects the creative and playful nature of the business. The purple and white colour scheme was requested by the client.
• Site structure and navigation To aid usability I decided to make all the main pages no more than one click deep. To achieve this, I used two rows of navigation, one for the blog, gallery and testimonials and the other for the specific services the business provides.
• Gallery I built the gallery using a combination of conditional tags and the query_posts function. I also used a mini-loop in the sidebar to show recent images on other pages. On each service page, I used the Flash simpleviewer plugin to display more images.
• Logo design I designed a logo based on the site ID.

I decided to go for a simple and refined design for my portfolio site. My priority is to showcase my work as strongly as possible so I made the portfolio items more prominent than the design itself. As a key part of the site is a blog, I decided to use WordPress as a CMS.

Key Points

• Navigation I integrated the navigation into the opening paragraph. As the site is small and only made up of three main pages, this works well.
• Style and interactivity All the links are the same red colour and use an underline hover state. The links in the sidebar are converted to block level elements so there are large clickable areas to each link.
• Layout I’m using a two column fixed width layout, aligned to a strict grid.
• Updated content I used mini-loops in the sidebar and footer to display updated content. The horizontal image on the homepage is a rotating image which rotates between four screenshots of my work.

This was a personal project to showcase some of my photography in a photoblog/gallery format. I also wanted to take this opportunity to experiment with JavaScript and find out how I could extend the functionality of WordPress. Launch Site

Key Points

• JavaScript slider On the index page, I used Niall Doherty’s slider. This allowed me to use a unique main navigation system.
• Site structure Each post is a collection of photo’s from specific locations which are listed on the left column along with excerpts from the post. Each post is arranged into country categories.

I don’t usually do design contests as I kind of agree with the arguements that this sort of thing threatens to devalue design, but I had nothing else on at the time so I thought I’d give one of the competitions on 99designs a bash. Naturally I chose the competition with the largest prize money which happened to be a really exciting brief. It was for a pan-European recruitment agency called TalentDorm. They wanted a new homepage mocked up with some specific requirements about colour and style. Launch Site

Key Points

• Main image The main image is made up of two stock images merged together, the same group of students in casual wear, then in business attire. This emphasizes the step up into employment.
• Icons Instead of using vector based icons, I used images which have the same, if not more visual impact.

Whatabout2night.com is a social network and nightlife guide based in Ireland. The site is popular among clubbers in Irish towns and cities and gets updated regularly with fresh content. However, the visual style of the site was uninspiring and the layout caused confusion. The site owner wanted a fresh new look and a more intuitive layout. Launch site

Key Points

• Navigation The main problem with the old site was that there wasn’t a clear centralized navigation. There was just some menu’s scattered around in different locations around the page. I decided to use a tab system which would not only provide usable navigational links but also provide a useful ‘you are here’ indicator.
• Layout I decided to use a narrow, fixed width two column layout which would provide necessary width for the content and menu’s as well as ensuring no problems for people with smaller displays.
• Graphics I designed an eye catching logo, background textures and graphics to provide style to the site and develop a visual identity for the site.

I came across CSS ZenGarden when I was new to web design. Seeing the submissions had me realise the extent a static HTML document can be customized using a single style sheet. I spent a lot of time experimenting, but came out with a finished design which I submitted. The design features a vector graphic of a model I had created combined with a soft and serene green feel, relevant to the Zen Garden theme. Launch site