How to Spot Quality within Web Design: Examples & Tips by wefunction.com

We all have certain RSS feeds we regularly keep on top of. I have certain ones pulled to my Google homepage that I like to check often like Smashing Magazine, Web Designer Wall etc etc. I have recently added a new one and found an interesting article on how to spot good web design.

Below are a sample of points taken from their article to give you a taster. Make sure you get over there and check out what they have to say.

Design using a grid system
Using a grid certainly helps you to understand the importance of spacing

Try & Try again
You can always use a method of trial and error until you find what looks right.

White Space isn’t a wasted space
Just because you have an empty area, it doesn’t mean you have to fill it.

Less really is More
Rather than trying to fit more in an area, fit less, give it space and keep just the vital important information.

Keep it Subtle
Small details that compliment the content are the key.

Think in Pixels
Borders, gradients, lines and shadows etc don’t have to be huge to be effective.

Before & After
Compare your results to how they looked before you applied the effects. Then you can see just how effective they are.

Is it Readable?
Don’t be scared of making your titles big and bold.

Have you thought about spacing?
Spacing can vastly improve readability.

Do your fonts fit the mood?
Make sure your fonts compliment the design.

Design using a Grid
Grids allow you to make the most of your space.

Test the Placement of Elements
Be the visitor, would you be able to use it.

Remove any unnecessary Elements
Anything that isn’t essential should be removed, or out of the way

Balance of Attention
Some things need to stay simple to allow others to shine

Build up your layers
Never just use one brush or texture, build your details up.

Experiment with opacity & Colour
Sometimes even 3% opacity can have a positive impact.

Don’t worry, Be Brave
Done be afraid to be too subtle, or too faded.

Experiment
A boring topic doesn’t have to have a boring colour scheme.

Variety
Try using gradients, patterns, brushes on your colourful backgrounds. Colour alone doesn’t make something look good.

Stick to a Theme
Make sure your colours are relevant to your product/service.

Keep it Relevant
If you’re going to do something very new and unique, ask yourself “does it make sense” and “does it fit with the branding?” if so then go do it!

Ignore everything you know!
Okay maybe not everything, basic principles may stay the same, but there’s no point looking for inspiration on new ideas, you’ll just be heading in the wrong direction.

Keep a level of quality
I think generally if your new idea looks good, and works well it’s much easier for you to justify.

To view the article in full click the link below.

Quality within web design

Text and image above are sourced from the article in question and copyrighted to FUNCTION

Pixel Perfect - an amazing tool

I colleague recently told me about a firebug plugin called Pixel Perfect. I thought the idea sounded good so had a look - creating looks of concern from the surrounding developers who already think I pixel push too much already. I was amazed. This simple tool creates another tab in your Firebug extension and allows you to overlay a jpeg visual in the actual browser. This has two benefits:

1/From a designer/bug checking point of view it allows you to overlay the visual and see what is out of place.

2/From a developers point of view it ensures precision by allowing them to overlay the visual when creating a layout, lower the opacity so they can see what they are coding below and ensure the visuals are met exactly. This will result in fewer visual issues needing to be fixed at the end of the project.

This tool seems to be feared by many developers who are happy enough to make it close enough to the design. However, they know deep down that the designer will only come along and say move that 2px up please so they might as well start harnessing the power of this tool and improve their accuracy and standard before it's spotted.

www.pixelperfectplugin.com

New site design

[update - 04.06.08] - I have now implemented this new design across the entire site.

As you can see the layout and design of the blog has changed dramatically over the past day. I have been working on a redesign for the whole Nypocreative site and thought I'd implement this on the blog before anything else. I have kept to my principles of simplicity is key and have basically gone for the opposite to what I had. I have had a clean, crisp, white site for far too long now and thought I'd go for the darker with vibrant colours approach.

I also wanted to see if it was possible to create a completely new design and cross over from the whole site on a very tight deadline which I accomplished so am happy.

Feel free to let me know what you think.

Thanks

litmusapp.com has arrived

For those of you that haven't discovered Firebug yet, well, shame on you basically. Anyone that is still adding background-color: red; seriously needs to get with the times because tools like this make your life so much easier - as a designer or a programmer.

Firebug basically worked on the idea of being able to edit the code of a page whilst looking at it. What litmus have done is try to take this a step further by allowing you to edit the code of a page and actually save it to the original file meaning you can make changes live, see how it looks and save it. Amazing stuff. I'm still trialing it at the minute so I'll let you know my opinions but, so far, so good. Although, it would take a lot for me to stop using Firebug - I feel I have a loyalty to it as it has, literally, improved my life.

The other intersting product form Litmus - the one you actually have to pay for - is the testing program. This allows you to test what email bulletins and websites would like like cross browser and cross email program. There are loads of other features as well and we'll be doing the 30 day trial at work so I'll keep you posted.

For those of you who want this kind of stuff in your own product / site there is also an API buy in section with more info.

Cheers, keep well.


http://litmusapp.com/labs
Firebug add on

Manchester is My Planet goes live!

Manchester is My Planet brings together the ten Local Authorities, organisations, businesses and individuals across Greater Manchester to address climate change and energy efficiency. We were approached to revamp their current site and to create a full CMS. The results can be seen at www.manchesterismyplanet.com

What's your favourite design / development program?

As I've never created a poll before I thought I'd try it out here. In response to a comment I received regarding my post 'Web design Good Practice - the basics' [09/02/07] that disagreed with me that Photoshop is probably the most used program for creating web layouts I thought I'd find out. Please feel free to complete this simple poll and add any comments if you want to expand on the subject.

Amaznode - ActionScript 3.0 for Amazon

This is amazing. Not only does the initial homepage go back to the roots of great search engines (ie a just text box and simple options) but the scripting and linking between results is great. It was described by adobe as:

“A relation-based search engine for Amazon.com that is made with Flash and ActionScript 3.0. Visualize a relation network of products from the data of "customers who bought this item also bought" by digging related products again and again. Amaznode is not only for searching but also good for researching and making an associate link.”

Is it the future of online shopping? Maybe not or, if it is, then a suitable method of finding one specific item without loads of options appearing should be sought. What it is, however, is a really nice visual method of viewing relationships between products. It’s like Thinkmap Visual Thesaurus for the online retail world.

Visit the site here: amaznode.fladdict.net/ or check out Takayuki Fukatsu (designer and developer of Amaznode) and discover some of his great flash experiments.

Let me know if anyone has any other examples of really nice ActionScript3.0 stuff.

Firebug - Web Devlopment Evolved

'Web Devlopment Evolved' is a pretty bold statement but from what I have seen so far it seems a pretty fair comment. I am a designer first, a still learning front end developer second, but already I have reaped the benefits this tool has to offer making development so much quicker and easier.

The tool (available for Firefox) allows you to inspect elements on the page and alter values on the fly to see the impact it has. Obviously, the changes can't be saved to the original source file to keep any changes made but you can see changes as you do them and then alter the markup afterwards. It sees the end of background: red;.

There is still so much to learn about this great tool and I sadly missed a talk last night at Geekup, Manchester where they went over some useful features. I think it will be around for a while and, unbelievably but thankfully, it's free. When discussing it with my wife's brother last night we talked of how it is probably the only free tool he will probably ever make a substantial donation to the author purely for the impact it has on development and testing.

Get Firebug

Web Misunderstandards

Having worked in the web industry for some time now I have learnt what is possible, what is impossible and what will be possible soon. Web standards are the basic rules all web designers should work to. It adds another dimension to the requirements designers are often faced with but, in the long run, results in a better design.

Andy Rutledge (Creative Director of Netsuccess) states in his recent post - 'Web Misunderstandards':

"Create the designs you want. Be conscious of the practical characteristics of the medium, but create anything you can conceive of and know that you’ll not be limited when you take your work online, even in a manner consistent with Web standards. You may indeed have to work hard to gain skill and understanding of the technical factors involved in doing so, but this is a situation common to all professions."

Web standards are not something introduced to restrict design but to make it more effective. What use is design if it can't reach the intended audience. All web standards do is ensure online content is accessible to the largest possible audience and, as Andy comments on, tools such as flash replacement (sifR) allow you to use non-system fonts whilst still degrading nicely to system fonts when flash in unavailable. This also ensures your flash content is indexed by searched engines as well.

In response to the original email Andy received that stated:

"The Web standard has little flexibility, isn't conducive to creativity, and I think it's actively preventing our moving forward in truly creating the next step in communications."

I couldn't disagree more. You only have to see the high level of creativity that is emerging with the good use of CSS to realise standard compliant sites can look great.

Web Misunderstandards by Andy Rutledge
Web standards by Andy Rutledge

Simple Rounded Corners and so much more

I have just discovered a great flash replacement tool that I think, on the right situation, could prove quite valuable. Created by John Aldinger, Mark Huot and Dan Mall, the simple inclusion of some javascript will take your images (or specific images) and insert them into a .swf file letting you round the edges by simply altering the border value in the javascript:
round.specify ('border-radius', '10');

The higher the number the more rounded the corners.

That is not all though, this sfwIR allows you to add drop shadows, rotate images, add borders and enlarge images inline with text (although ie7 does this now anyway this seems to result in a higher quality larger image).

Maybe, until CSS3 is implemented cross browser, this might prove to be a useful method of adding effects to elements on a page.

Visit the swfIR page at www.swfir.com

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.

http://24ways.org/

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.

The magical use of white space

The use of empty space in design is a major factor, and often one which will distinguish good design from bad. In the world of the web - especially since the big "Web2.0" phenomena - the good use of white space is vital but it doesn't have to be 'white space'. Having a good eye for space in general is important.

As I was taught at university, often it is not the placement of elements on a page but often the spaces these leave that make a design work. I recently read an interesting article on A List Apart by Mark Boulton which looks into the essential tool - 'White Space'.

Read the article here >