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...Humour in Web Design
August 24th, 2009 — 21 Comments
Web design is a serious business so it is nice to come across some humour now and again. Sure as designers and developers we generally enjoy our work but I don’t think there is enough comedy in the web design and development industries these days so I decided to do some research and see what is currently out there.
This is a look at the lighter side of web design, if you spot anything you find funny that isn’t here, please let us know in the comments.
Read more...Why Design Trends don't have to Completely Disappear
August 20th, 2009 — 10 Comments
Web design trends come and go but when one comes around you can’t miss it. That’s the nature of trends in the web design industry, with the ability to release something that the whole world can see immediately, designers are able to push their designs live very quickly which aides in popularising a trend.
A trend is defined in the dictionary as:
“a general direction in which something is developing or changing”
Usually most designers follow these trends resulting in a number of websites looking very similar in style.
Ever since I saw the guys From the Couch stating that ‘the letterpress trend has to go‘, I thought to myself that it still could have its place in design. Perhaps I wasn’t as bored of it as they clearly are.
Read more...37 Brilliant Examples of Transparency in Web Design
August 17th, 2009 — 39 Comments
Transparency in web design has been held back by IE6′s inability to display transparency in PNG files. Now that there are workarounds using javascript and the increasing lack of support for the aging browser transparency has become a viable option in web design.
All of the examples below make use of transparent PNGs.
Envato
Making the Most of Icons in Web Design
August 13th, 2009 — 16 Comments
When used effectively, icons can add so much to a site’s design. They can help identify list items and make navigation a more visual experience as long as the icons have enough relevance to what they’re representing. Icons as visual representation alongside content allows a user to scan a page easier than plain text.
Aiding Navigation
Rather than relying on just text to navigate, new and repeat users can find their way around a website quicker thanks to the mind’s ability to associate images with what they want when using icons as part of the navigation.
Read more...10 Productivity Tips for Web Designers and Developers
August 10th, 2009 — 59 Comments
Productivity is something that all web designers and developers strive for. We all have too much work to do so anything that can help us along the way can make a big difference.
It is difficult to remove yourself from the current ways of doing things but it is necessary to investigate what areas you can improve upon as every little detail can make a big difference. Don’t be afraid of change.
Read more...23 Excellent Examples of How to Design Online Stores
August 3rd, 2009 — 57 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...