Category: Articles

Categories

Creating a Digg Style Sign Up Form
Articles / 28 Sep 2008

Creating a Digg Style Sign Up Form

Digg.com is one of the most popular social networking sites, allowing you to discover and share the content all over the web. In this tutorial we are going to simulate their signup form, with unique features such as their dynamic tooltips that give you a hint on each field that is to be filled. The same approach will be adopted for displaying validation messages.

Designing With GuiMags
Articles / 1 Sep 2008

Designing With GuiMags

GuiMags are a new concept, taking the idea of designing on paper down an innovative route. They comprise a set of magnets, created to stick to a whiteboard, made of material which allows you to write on them with dry-wipe markers.

I have been trying out a sample of these for a few days and am going to share the aspects I feel that work well, and the areas that still need improvement.

Why is this a good idea?

When designing a mockup, I work differently depending on who the site is for. If it is a personal project, working on paper and then Photoshop is perfect. If the design is for a client, commonly there is a need to express ideas in a collaborative environment. This could be done with a projector/laptop, whiteboard or a flip-chart. These all work well, but a common problem is that when using a whiteboard you find yourself drawing and re-drawing common components of a site (form fields, tabs, buttons etc).

GuiMags solves this problem, allowing you to focus on designing the structure without worrying about the small fiddly pieces. Designing forms, in particular, becomes a much more enjoyable process.

Available Magnets

These are the various magnets available, comprising a selection of most common website components:

GuiMags Design Magnets

Limitations

There are two main problems with GuiMags which could stop them being an overnight success. Firstly is the fact that you need a magnetic whiteboard to use them. From my experience, the majority of whiteboards I have used are non-magnetic and wouldn’t work with these gadgets. To be truly practical, they need to work at every client’s office – professionalism takes a hit when you have to start hunting round the whole building for an appropriate whiteboard.

The second issue is the design aesthetic of the magnets. Whilst the chunky look and feel is certainly appropriate, the choice of blue as a background limits the ability to use them in any mockups which illustrate colour. Future possibilities could be to offer a range of colours, or provide a black and white set to ensure they don’t over-power any other colours on the sketch.

Conclusion

Designing mockups and prototyping alongside a group of people has always posed a challenge. GuiMags goes some way to solving the problem, allowing you to create sample designs and forms with greater speed and ease. However, at $100, these magnets don’t come cheap and you may also find yourself requiring a new magnetic whiteboard (anything from $20 to $100 depending upon size). They are a great concept and a forward thinking idea, but some of the initial drawbacks need to be addressed before they are versatile enough to become a dominant tool in my design workflow.

Integrating Flickr With WordPress
Articles / 22 Jul 2008

Integrating Flickr With WordPress

Flickr and WordPress PluginsWordPress is undoubtedly one of the most popular blogging platforms, so it’s no surprise that there are a huge variety of different plugins to allow you to integrate Flickr with your blog posts. This article does include a sponsored review of iFlickr, but we’ll also be looking at other plugins available to mix these two online platforms together.

Becks Label Design Winners
Articles / 17 Jul 2008

Becks Label Design Winners

Becks BeerThe well known international beer, Becks, have recently run a contest in the UK to find a set of new artistic designs for their beer bottles. We’ve got an exclusive preview of the winning bottle designs, which you can pass your eye over as a designer to let us know what you think.

Becks Beers

The designs have been put together by students at the Royal College of Art and Design, in London. Whilst it’s a big step away from what we consider to be ‘contemporary design’ online, it does capture the essence of the UK and Britain to an extent – with an abstract twist.

Personally, I’ve never been a huge fan of very abstract artwork, but I think these could prove to be an interesting talking point – and a great stepping stone for the new artists (such as Tom Price, below):

Becks Artist

It showcases the vast differences between product design and website design. However, the idea of using contemporary thinking and new talent to re-design a corporate brand is a great one, and something that could move across equally well to online design.

What are your thoughts?

The Footer Copyright Notice
Articles / 8 Jul 2008

The Footer Copyright Notice

Copyright Footer NoticeAlmost all websites contain some sort of copyright notice in their footer (e.g. Copyright © 2008 Apple Inc. All rights reserved.). But what’s the best way to do this? We’re going to take you through the requirements for your copyright notice, and a nifty JS (or PHP) trick for ensuring that your copyright year is always up to date.

The Impact of Firefox 3
Articles / 18 Jun 2008

The Impact of Firefox 3

Firefox Logo

Since it’s first release in November 2004, Firefox has come a phenomenally long way. Market share has sky rocketed, and a huge community has built up offering extensions and add on software. The third incarnation of Firefox offers something for web developers as well as users, continuing along their previous path of adhering to web standards and supporting the latest technologies.

Win a Year of Free Hosting
Competitions / 18 Jun 2008

Win a Year of Free Hosting

UK2 Hosting CompetitionWe’re pleased to announce a new competition on Design Shack, in partnership with UK2. Four hosting packages are up for grabs with a total value of over $450. One “business” and three “home” hosting packages are being given away. Each is completely free for one year, comes with one (or more) free domain names and would make a fantastic home for your site.

Design Critique: Mobile Me
Articles / 11 Jun 2008

Design Critique: Mobile Me

Mobile Me DesignApple have recently announced a new suite of online applications called MobileMe. The aim of the development is to allow you to keep all your information in sync between several devices (e.g. your iPhone, Mac and Windows PC). In addition, Apple have created a new online site at me.com, which will hold a suite of applications including email, calendar, address book and photos.

We’re going to take a quick look at the design and layout of this new online service, and explain what works well and what we think could have been done better.

An Informative 404 Page
Accessibility / 4 Jun 2008

An Informative 404 Page

Classic 404 error pages are prone to being relatively useless. Whilst a well designed page can provide a means to find what they are looking for, wouldn’t it be great if you could find out more about what went wrong? This tutorial will show you how simple it is to have an explanatory email sent to you whenever a visitor hits a 404 page.