Showcase of Some of the Most Inspiring Travel & Tourism Websites
October 29th, 2009 — 33 Comments
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.
Read more...Design Trend Showcase: Textured Backgrounds
October 5th, 2009 — 6 Comments
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
Showcase of Great Video Game Related Web Designs
September 14th, 2009 — 6 Comments
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.
Read more...23 Excellent Examples of How to Design Online Stores
August 3rd, 2009 — 44 Comments
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.
Read more...Superb Examples of Online Order Form Design
July 28th, 2009 — 4 Comments
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.
Read more...20 Great Examples of the Use of Brown in Web Design
June 15th, 2009 — 23 Comments
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:
Read more...