Demolition club night flyer

“Demolition is back with a bang on Saturday 10th March….. Kicking off the night will be BOCO followed by BENNIE DWYER playing back 2 back with DECO O’ CONNOR,then next up will be AIDO BROWNE back 2 back with DAVID MURDOCK and then finishing of the night will be CRAIG FORSYTH.”

Entrance on the night will be 10euro and the tunes kick off at 10 and finish at 2.30

http://www.facebook.com/events/386009828092224/

These are all examples of online shop designs that I’d regard as being pretty sweet. The recurring pattern with most of these type of eshop websites is that there’s normally a page for listing the items for sale, usually with some form of filter and sorting controls depending on the quantity of available items. Then there’s a details page for viewing a particular item in more… detail. So for this reason I’ve captured a shot of each page from each website. You might want to hide your credit card before continuing

1. The North Face

The North Face - Listing

The North Face - Details

2. Animal

Animal - Listing

Animal - Details

3. Hurley

Hurley - Listing

Hurley - Details

4. Fox Europe

Fox - Listing

Fox - Details

5. Oakley

Oakley - Listing

Oakley - Details

6. O’Neill

O'Neill - Listing

O'Neill - Details

7. Billabong

Billabong - Listing

Billabong - Details

8. Zippo

Zippo - Listing

Zippo - Details

9. SkullCandy

Skullcandy - Listing

Skullcandy - Details

10. Stussy

Stussy - Listing

Stussy - Details

11. Roxy

Roxy - Listing

Roxy - Details

12. Giro

Giro - Listing

Giro - Details

13. Driftworks

Driftworks - Listing

Driftworks - Details

14. Ugmonk

Ugmonk - Listing

Ugmonk - Details

15. Burton Snowboards

Burton Snowboards - Listing

Burton Snowboards - Details

16. Globe

Globe - Listing

Globe - Details

17. Ezobrand

Ezobrand - Listing

Ezobrand - Details

18. Etnies

Etnies - Listing

Etnies - Details

19. Cinder Block

Cinder Block - Listing

Cinder Block - Details

20. Vizio

Vizio - Listing

Vizio - Details

Vizio - Interesting Layout

Hopefully you found this interesting and useful. Please feel free to share it and follow my Twitter/RSS/Facebook for more updates in the future!

A small web design agency in Galway came to me to ask me if I would design and create the site, so there was a lot of bouncing of ideas around before anything was settled on. I wanted to go with something fresher than the existing site they had up, but they wanted to keep a lot of the existing design elements. The design I wanted to go with was something like this:

WineFoodBeer homepage, my original concept

The gap in the centre was needed at the time in case a 5th pub was added. They weren’t too sure what the craic was with it at the time so we kept it open. This design didn’t push the right buttons for them though so in the end the site ended up looking like this:

WineFoodBeer homepage, the current live version

The background here was carried across from their old site because they liked it. It is a pretty nice pattern, so I can see why they kept it. Another thing they wanted to keep was the logo:

Header with current logo

I didn’t agree with this myself, because it’s one of the first things your eyes land on when you load a web page, as well as your anchor to return to the homepage on the vast majority of websites. It holds a lot of weight, so I wanted to spruce it up a bit so it would fit into the design and be less of an eyesore:

Header with quick and basic logo I put together

The basic white logo was what existed on their previous site though so they wanted to keep that too. It was unfortunate, but these things happen!

One of my problems when I’m designing things is that I spend way too much time playing with shadows and details to try to make things look like you could touch them. That’s one of the parts of design I really enjoy most. Subtle touches can make a huge difference to how things are perceived.

Shadows and textures

More shadows and textures

Menu links for each bar/restaurant

The design was agreed on in the end anyways, and I went ahead and began coding up the website. Each pub-restaurant was to have a landing page and it’s own sub-pages with photo galleries, location maps, contact pages, event pages and menu pages.

Individual landing pages for each pub/restaurant

Group menus menu, which each link off to the specific menu page per restaurant

Events page which holds flyers for upcoming events, linking to more details

In the finished website I added a sliding panel above the footer which will rotate through the events and offer flyers. This features on all pages and it’s a good idea, because when your website users get to the bottom of any page you want them to stay interested and click on something, rather than bouncing off to another website!

Check out the site at winefoodbeer.com if you like, and thanks for reading!

This is the full layout of the homepage, with sliding header images at the top and some useful bits along the sidebar.

DJ Tom Lavin's homepage

I created the logo too, I think it fits with the modern/futuristic type of style of the site.

DJ Tom Lavin's logo

This is the other side of the header slider section. Had fun messing with lighting effects here to give the illusion of depth.

Header image surround

The homepage can be updated with news posts quickly and easily from the admin area.

Homepage posts

Also added some social and subscription features to the footer and sidebar.

Footer social links

A few different pages for contacting Tom and for further information.

Contact page

There’s also a gallery page, which can be used for showing flyers for gigs, as well as other promo stuff and photos from gigs.

Gallery page

Thanks for checking out the article, and here’s a link again just in case! www.djtomlavin.com

The Helm, Westport - Homepage

The website homepage has some interactive sliders on the right side of the main image, a link to a video which pops open on the same page, a rotating special offers slider, and social media functional in the footer to encourage users to share the website with their friends.

The Helm, Westport - Logo

I used a nautical chart style background here to add to the maritime theme of their brand.

The Helm, Westport - Sliders

The little boxes to the right of the above image slide open to reveal further information and link to their respective pages.

The Helm, Westport - Video

They provided us with a lovely short video clip about the area, which I embedded in this page for easy viewing.

The Helm, Westport - Location map

Google maps are a great addition to any relevant website, allowing users to generate a printable sheet of directions to the destination from wherever it is that suits them most.

The Helm, Westport - Full page

This is the overall layout of the secondary pages. The header banner fades in and out between various photos of the premises and surrounding areas.

The Helm, Westport - Homepage buttons

The Helm, Westport - Rates page

There is an update due to their site soon which improves the alignment of some elements and adds further features. Feel free to pop over there for a visit at www.thehelm.ie.

Thanks for reading!

06.01.12 – Update

The Helm website was updated last week to include some new features requested by the owners. They also informed us that they received 140% more bookings via their website over the Christmas than the previous year with the older website!

Newer updated version

A quick speed test is showing that the website is extremely quick, thanks to a combination of efficient code and some advanced server techniques discovered by Ronan.

Speed test

Canon 400D

My equipment at the moment consists of a Canon 400D like the one above. A tripod, remote shutter trigger, a bunch of batteries and memory cards, and three lenses. A wide angle 10-20mm lens which is ideal for landscapes and building interiors. A 50mm “Nifty Fifty” lens which I’d use and highly recommend as a general purpose lens, and a 55-250mm lens which is good for zooming in on things.

50mm, 10-20mm and 55-250mm respectively

My wide angle lens hood after some sticker bombin'

I came up with a quick and simple logo for watermarking my photos, and to have in case of emergency if I need some quick business cards or anything. The cog wheel in the logo has camera aperture blades in the centre, so it’s representing photography and engines… You get the idea

My photography logo

Finally here’s a few of my favorite photographs from my Flickr account to give you an idea of what I enjoy. Thanks for visiting and reading, I’ll put up the odd photography post on my site here when I have something interesting to show…

Claddagh rooftops, Galway, Ireland

Blackrock Pier, Salthill, Galway, Ireland

Autumn in Amsterdam

Funky lighting & graffiti

Work CrKai alloys from my car

I was also asked to take photos for Freshfix.net, an Irish car enthusiast website. Hope to organise some proper photoshoots for them once the weather gets better and days get brighter.

BMW M3 at a charity car meet

Twin Cam at same charity meet

So yeah, landscapes and cars! Love em

You can follow me on Twitter or Facebook if you like! Thanks!

Have a look around and hopefully you’ll get an idea of what it is I do and have done. I work full time as a web developer in Dublin, and design and build my own websites on the side. I’ll update the site shortly with examples. Thanks for checking it out!

Conor