Monday, 26 February 2007

Real Time Data Rendering

There seems to have been a flurry of activity in this area over the last 6 months or so and a few of the best examples are listed below - 3 of which come from the Digg Team (in partnership with Stamen Design). Although these methods might not be the clearest way to navigate information there is a definite need for fresh ideas in this area. As the web continues to grow and the amount of information available to us expands we need some method of filtering out what we don't need or, in the case of the Digg examples, a way of seeing information as it becomes available and being able to scan for stories of interest.

3D Real Time Blog Post Rendering
I was sent this link from a colleague, Chris (, which shows actual blog post activity mapped onto a 3d world. Not sure how useful this would be but it is a really nice visual effect.

Digg BigSpy
News stories being dugg are placed at the top of the screen. Larger stories have more diggs.

DiggStack is amazing. As well as using colour coding and size to represent amount of Diggs the actual users who have digged a story fall from above and land on it to 'Stack' it up. The name of the stroy also appears below.

A circle is drawn as new stories are dugg. Diggers swarm around titles and make them grow. Related stories are woven together using lines and it is possible to distinguish between popular and unpopular stories with size and colour.


Monday, 19 February 2007

Flash user interface experiment

I recently completed several tutorials from Lee Brimelowe ( on creating carousel interfaces. It is quite a complex use of actionscript and external XML. The icons and text are completely outside of the flash movie and are contained within an external XML document. The size, positioning, reflections, movement etc are all created using actionscript.

You can view the finished product here: Carousel UI


Web advent calendar with a difference

Discovered a selection of web design tips and tricks in the form of an advent calendar. Thanks to Drew McLellan for the 24 simple techniques to help you create better site designs.


Friday, 9 February 2007

Web design Good Practice - the basics

I decided to write this post after seeing far too often web companies receiving poorly structured and, occasionally, unusable designs from designers - sending PSDs with just several flat layers of pages, objects moving out of place between screen designs, text in points instead of pixels and blurred lines where objects have been resized.

For a developer to successfully, and efficiently, produce a website they require basic elements that designers often don't provide. Below is a list of issues and requirements that will make life a lot smoother in the long run:

Supply layered PSDs
Photoshop is the standard for web design (although illustrator, image ready, fireworks and freehand are often used for their different stregths). Supply files with all the layers intact. You may feel it is easier to flatten the file first - you may even think this is what developers want but it isn't. It is you who will be getting constant phone calls asking what such a typeface is or what size text is this header. Most web companies will have, at the very least, a copy of GIMP.

Text sizes and anti-aliasing
When inputting text in Photoshop, make sure your preferences are set to show text size in pixels not points and reference px sizes when sending over style guides. Pixels is the standard measurement on screen (as opposed to points which is for print work). Also, set anti-aliasing to none. When smoothing text the edges are blurred. While you may think this is better to look at it isn't accurately portraying how a browser will render it. Not only will this prevent clients wondering why their site doesn't look as slick as you proposed it also means developers can take correct measurements right to the edge of the text as opposed to deciphering where a blur ends as well as a more accurate colour selection.

Screen size
To satisfy the largest audience you must design your site for the lowest possible scenario - i.e. 800px X 600px screen. This gives you a space of 770px width to work with (taking into account the edges of the browser and scroll bar). You can either make it so on larger screens there is a background colour, pattern etc or create a stretchy site although remember that text shouldn't really have a line length bigger than 10 to 12 words average so it is best to wrap it after this. It is also possible to add a couple of words onto this if the line spacing is increased slightly. As 800px X 600px screen size dwindles even further and 1024px X 768px screens become the minimum screen size, obviously, this basic design template will be increased in size. There are several articles on using specific css stylesheets depending on the users viewing device. E.g a style sheet for widescreens, one for normal, one for mobiles, one for pda's etc.

Don't make more work for yourself
Create an initial template first. As with using CSS to apply site wide styles it is good practice to get styles signed off before applying them to all your visuals as it is a nightmare to create a screen for every page of a site to be told that the client wants to change the typeface of the headers. To save time, create an initial visual of the homepage and a content page and get all styles approved by the client before proceeding to mock-up the other areas. By doing this you can ensure elements remain in the same place. For example, when a news page is completed you can save it and 'Save As' another page. This ensures all the consistent elements remain the same and you can just populate the main content area with different information.

Use Photoshop folders
Use folders. Photoshop allows you to use folders to organise layers. This is a useful tool when a developer is looking for a particular element and doesn't want to search through 100's of layers named 'Layer 112', 'vector smart object' etc. You can organise the PSD to assist the developers. Seperate layers into 'Header', 'pNav' (primary navigation), 'sNav' (secondary navigation), 'pContent', 'sContent' (often side columns, content areas that are not the main body text), 'Footer' and 'Background Elements' (or whatever naming conventions the developers find useful). You can also begin to use the template for all your web designs by including folders that contain common form elements, program icons, arrows, buttons etc saving you considerable time in the creation of your designs.

Provide a breakdown of your sites styles
Finally, although not essential, you could provide a break down of elements on the page. If you are quite clued up in simple HTML and CSS you could create a quick mock-up with each of these styles applied meaning the developer simply needs to copy and paste your code and you will know the final page will look as you intended. See Kevo Style Guide for an example although, please note, I recommend saving the use of H1s as a clickable logo through CSS. Failing that you should at least be supplying a word document which details all the typefaces, text sizes, colours, element sizes, image borders etc. This will save them having to trawl through your (now unflattened) visuals trying to find the information themselves.

Hopefully, these few simple guidelines will help you create faster designs and, more importantly, help the developers implement these designs with as few complications as possible.


Monday, 5 February 2007

New flash image library

The other day i found a site called GoodWidgets which lets you link to your image libraries from places like Flickr or upload your own. The site then embeds your images in an interactive flash movie which you can place on your site or blog. There are several templates to choose from including an image gallery which resizes according to image dimensions, an interactive flash book, a slider gallery and many more and for a very small fee you can have the Goodwidgets watermark removed and increase the number of images allowed.