Inspect Element » showcase

Showcase of Some of the Most Inspiring Travel & Tourism Websites

Tom Kenny — Thu, 29 Oct 2009 01:00:53 +0000

The travel and tourism industry is a great source of inspiration when it comes to web design. The main goal of any site in this industry is to entice visitors to travel. Imagery plays a huge part in this because any potential customer wants to see exactly where they are travelling to. Here are a few great examples of inspirational travel and tourism websites.

Australia’s Official Tourism Website

Joobili

Coastal Connection

Dara’s Garden

Ride Oregon

Visit Cascadia

Opal Cove

Orchid Bay Belize

Cottonseed Oil Tour

Design Hotels

Outdoor Italia

Isla de Monterrico

Alaska Zipline Adventures

Trip Kick

The Dublin City Pub Crawl

The Really Wild Travel Travel Company

Fall for Tennessee

TuristiÄka zajednica Grada IvaniÄ‡-Grada

Lake Crackenback

Utah Travel

Live Africa

Springtime in Tennessee

Jacksonville Landing

Maine

Viva Maria

Beaches

Summertime in Tennessee

Visit Norway

Le Nordik

The Red Rock Ranch

Edgewater

Tennessee Winter

Design Trend Showcase: Textured Backgrounds

Tom Kenny — Mon, 05 Oct 2009 16:21:26 +0000

Recently there appears to have been a trend towards textured backgrounds in web design. They’ve always been around in web design but have risen in popularity recently. They can add a bit of interest or create a much needed extra layer of depth on a web design. The following are good examples of textured backgrounds.

Rocket Club

Bright Creative

Design Commission

Happy Dangy Diggy

Elliot Jay Stocks

Simone Maranzana

Dojo Design Studio

Jeff Sarmiento

Super Kix

TheManInTheSea

Crush + Lovely

Toby Powell

Cube Club Chemnitz

tweetCC

Sinetics

Sushi & Robots

Showcase of Great Video Game Related Web Designs

Tom Kenny — Mon, 14 Sep 2009 08:00:51 +0000

Video games and web design share one thing, visual design. A lot of work in both industries is geared towards visual design. Some games keep the artwork consistent between game and website while others communicate the look and feel of their games through their web design. Here is a look at some of the best examples of video game related web designs.

Left 4 Dead 2

Left 4 Dead is a zombie survival horror game, although a very action orientated one. The design of their website follows on from first game. An example of great header design. Saying that, the way the header has been built is not exactly great. Open up firebug, Webkit’s web inspector or view the source code to see what I mean.

Nintendo DSi

Nintendo uses a big javascript slider to show off their latest handheld gaming device, the Nintendo DSi.

Sidhe Interactive

Sidhe Â is a game development studio. They came to my attention with their PS3 game, Shatter. Very clean and uncluttered design with links to sites for each of their games.

Pop Cap

Pop Cap are probably the king of casual games right now. There is a huge emphasis on fun in their games which is carried over into the design of their website. The header, background and footer are all customised to promote their latest game.

Rock Band

The strong illustration as seen in the menus of the Rock Band game are carried over into the header of the game’s website.

Forza Motorsport

The visuals of Forza Motorsport 3 are very clean and crisp which is reflected in the website.

The Orange Box

The Orange Box contains five different games that could sell for full price individually. Very simple design that is striking at the same time.

Gameloft

Gameloft are one of the biggest mobile game developers in the world. The light colours evoke the kind of find that they try to achieve in their games.

Star Defense

ngmoco uses a picture of an iPhone to display videos of their tower defence game, Star Defense. All of this is displayed on a great looking background image.

Nintendo

Nintendo has laid out their main page in a grid based layout. The combination of this and and strong imagery makes the page easy to scan.

Naughty Dog

Naughty Dog uses a background image of concept art from their soon to be released PS3 game, Uncharted 2. Certainly one I am looking forward to myself as I’m currently thoroughly enjoying the original.

Wrixel

Wrixel is a gaming blog that makes good use of colours to highlight different areas in the navigation. Also, good use of a jQuery slider to highlight their latest articles.

Battle.net

Battle.net uses a visually stunning background image and transparency. It is also an example of how to use buttons to improve usability that I looked at here on Inspect Element last week.

Next Level Games

Simple, clean design for game developers Next Level Games. Good use of proactive words as navigation.

Rolando 2

Rolando 2 is a fun and colourful game just like its website.

Capcom Europe

Capcom Europe’s website does something that I haven’t seen before. If you click customise, you can upload your own image to use as the background of their homepage.

Plus

ngmoco’s social gaming network’s site, Plus, has a great, consistent interface and is another example of how to use buttons to improve usability.

Konami

Konami uses a big image to show of their latest project allowing them to attract attention directly to what they choose.

WoW Insider

World of Warcraft blog, WoW Insider, utilises a big search bar for users to easily find what they want. There is also an area towards the top that displays their latest, top content.

The Beatles Rock Band

I’m not a fan of the Beatles at all but the website for the Rock Band game is quite good looking. As you move the mouse around, the layered header moves with it. A similar effect happens to the stars when you scroll up and down.

Codemasters

Codemasters uses a customised header and background to show off their latest game. In this case it is Colin McRae Dirt 2 which has an innovative in-game 3D menu. See a video of it in action.

23 Excellent Examples of How to Design Online Stores

Tom Kenny — Mon, 03 Aug 2009 08:00:55 +0000

Online stores can often be confusing and hard to use which can turn potential customers away. There are some very simple things you can do to keep your users focused on your site. Here are some great examples of sites doing just that.

CafePress

Good use of top navigation, highlighting the relevant section that the user is currently viewing. Good use of colour to ease usability.

The Mozilla Store

The Mozilla Store creates a fun, creative feel to their online store with related sketches in the header and clear navigation on the left makes it easy to find products.

HMV

HMV’s store almost jumps out at you due to the shadows either side of the content. Space for promo offers in the header to catch the users’ eye and big, bold and clear navigation.

Nerve Music Store

Nerve uses an unconventional method of dragging items to the shopping cart on the right but a big ‘Drag Stuff Here’ button above the cart instructs users what to do.

Taste Book

Taste Book gets across the message of what it is very clearly on the homepage followed by a big distinctive button indicating that it’s free to join.

Blooming Gorgeous Flowers

A design that displays the elegance of flowers with the use of vector illustrations as well as good photography. Great use of icons in the footer and for the basket in the header.

General Robots

Clean graphics and good use of colour shift the visitors’ focus to the products.

Bambino Direct

Fun colours directly relate to the products that Bambino Direct sell.

Blooming Direct

Blooming Direct’s store is ordered into three columns. On the left is the secondary navigation, in the middle is the content with the primary navigation on the top and on the right is the basket and space for offers.

Steam

Layout makes good use of whitespace especially in the left column which contains the navigation and categories. Use of colour to easily distinguish between what is and isn’t clickable.

Feel Unique

Very clear navigation through the use of tabs and login section on the left for easy access for returning customers.

Big W

Big W uses a very clean and uncluttered design that makes great use of whitespace making it easier for the user ti understand how to navigate and use the site.

Northern Tool + Equipment

Colours and design reflect the products on sale giving the users more of an association with the store.

Makoosh

Bold colours which translates into a bold and easy to navigation. Use of a big promo area and a recently viewed items in the ‘My Account’ section on the right giving the user the ability to see what they looked without remembering exactly where it is located.

REI

Another great example of top navigation but with the colour changes dependent on what section that the user is viewing.

Boots

Boots uses a promo area that cycles between three different images with a very clear indicator to show which image it is on. It even includes a pause button so that the user can stop the auto-scroll and take in the message.

Schwan’s

Big imagery allowing the company to promote specific items and draw the users’ attention to them.

Apple

Apple really keeps the focus on the products with little distraction elsewhere. It’s complete line-up of major products are displayed in the top two rows of the store.

Play

Play makes it very clear which section you are visiting due to a clear tab system. Promo area in the middle updated regularly keeping the customers coming back to new content to keep them interested in the store.

Game

Clearly defined sections with big message in the header notifying of free UK delivery which can be a great incentive for people to place an order with them rather than a competitor who charges even a small fee.

Etsy

Etsy gets across the message of what they sell with a big tag line placed underneath the logo.

QVC

QVC displays a message to users who haven’t visited the site before. This allows them to send out an introduction message to welcome new visitors.

Threadless

Great imagery of the products in use by people which is a fantastic way of presenting items.

Superb Examples of Online Order Form Design

Tom Kenny — Tue, 28 Jul 2009 07:55:15 +0000

Order form design is a very important area for online stores or companies offering paid-for services. Good design can encourage users to become a paid customers but poor design can put users off and cause them to leave before purchasing anything.

Form design in general is an overlooked part of web design in my opinion and without web forms, customers will be unable to purchase anything. Therefore it is in companies’ best interests to focus their efforts more on forms design such as the sites below.

Threadless

20 Great Examples of the Use of Brown in Web Design

Tom Kenny — Mon, 15 Jun 2009 08:00:58 +0000

This is an extensive follow up to a post that I wrote on my own personal blog a little while ago before Inspect Element was even a twinkle in my eye. Now time to let the designs to do the talking:

Forest River Timber Homes

Tuts +

Sergio Noviello’s Portfolio

Lesly G’s Portfolio

Typechart

Tea Round