Links of the Week 10
August 14th, 2009 — No Comments
Ultimate A/B testing recources, Think Geek background fade technique, reduce clutter, usability best practices for beginners and web browser elements to use in your designs.
Web Browser Elements
Downloadable browser elements in Photoshop files, such as radio buttons, separated by browser and operating system. Very handy for use in designs.
Ultimate A/B Testing resources and how I used them
Testing is an extremely important part of web design and this is a great collection of resources for A/B testing.
Think Geek Background Fade Technique (Screencast)
Think Geek have a cool background effect that changes the background from Robots to Zombies and this is a great screenshot showing just how simple but clever it is.
How to reduce clutter in web design
Reducing clutter is an important thing to do in web design so here are some tips to help you along the way.
8 Web Usability and Best Practices for Beginners
Usability best practices for beginners but even season pros can forget some of the simple things so it is always good to brush up on your knowledge.
Read more...Making the Most of Icons in Web Design
August 13th, 2009 — 14 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 — 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...Links of the Week 8
July 31st, 2009 — No Comments
Usability lessons from Don’t Make Me Think, text rotation with CSS, fresh portfolio inspirations, a/b testing and free analytics tools.
10 Usability Lessons from Steve Krug’s Don’t Make Me Think
If you haven’t read Steve Krug’s book, Don’t Make Me Think, then you really should. Even if you have read it here are ten usability lessons learnt straight from the book.
Text Rotation with CSS
Jonathan Snook shows a way of rotating text in CSS. There’s even a method that works in Internet Explorer! I’ve noticed that this doesn’t work in Opera however.
50 Fresh Portfolio Websites for Your Inspiration
Looking to redesign your portfolio? Think of doing something different with this unique collection of inspirational designs.
How to do A/B Testing in WordPress
A/B testing is a great way of trying our two or more aspects of a design to see which has a greater effect. Ryan Carson talks through the process of setting this up in WordPress. Well worth checking out.
Best Free Website Analytics Tools
The best free (all except one) analytics options for your websites. Analytics tools are vital to testing a site so make sure you use at something at least.
Read more...Rejected Designs and What We Should Do With Them
July 30th, 2009 — 11 Comments
When it comes to web design, a standard practice in the industry is to create multiple mock-ups of a design and have the client choose which one they think is most suitable like the most. What usually happens is that rejected designs get thrown away or stored deep down in the murky depths of a hard drive somewhere to never be seen again.
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...