84 Bytes

28 August, 2008 12:16 am

Evaluate the Quality of Your Website

Posted by Richard Wong under Development, Others | 2 Comments

Since I just updated the design of the site, I start thinking whether this new design is better. But realising there so many different aspect of site that we need to look at in order to measure the quality.

Then I found 50 Questions to Evaluate the Quality of Your Website by Carsten Cumbrowski from my starred item in google reader. It covers a wide range of areas including accessibility, design, navigation and more.

A sample of questions includes:

• Is content structurally separate from navigational elements?

• Are links labeled with anchor text that provides a clear indication of where they lead?
• Do clickable items stylistically indicate that they are clickable?
• How intuitive is it to navigate? Are signs obvious or obscured? Buttons/Links Like Text, that are not clickable and vice versa, links/buttons that cannot be identified as such
• Clear statement of PURPOSE of the site? Purpose must become clear within a few seconds without reading much or no text copy at all.

• Are the colors used harmonious and logically related?
• The fonts should be easily readable, and degrade gracefully.- Should look OK on various screen resolutions.

• Does the copywriting style suit the website’s purpose and ’speak’ to its target audience?

Although the list isn’t particularly targeting developers / designer, I think it is still a very useful list to reference if you are running your own site. If you can answer YES on most of the questions, you have done a great job. For me there are still a lot of work to do here…

25 August, 2008 11:42 pm

New Look for 84 Bytes

Posted by Richard Wong under Others | 1 Comment

I have finally created my own theme for this blog. This is still a very early version which I will be busy updating for the coming weeks. The plan is to release often, release small :p

This is what the old design looks like

And it was based on .

I hope everyone will like this new design. Feel free to leave some feedback.

20 August, 2008 9:09 pm

8 Golden Rules of Interface Design

Posted by Richard Wong under Design, Development | 30 Comments

Considering the only way users can communicate with your application is through the interface, interface design then should be one of the most important part of any application. A good interface will enhance the experience, usability, effectiveness or even success of your system.

From the book by Ben Shneiderman, he pointed out 8 rules to guide us to good interaction design.

Continue reading »

19 August, 2008 10:44 pm

Web 2.0 Design Generators For Developers

Posted by Richard Wong under Tools, Web Apps | 26 Comments

If you are a busy web developer that also need to work on the interface, here is a handy list of online tools to help you save time and effort creating nice graphics for your sites or apps.

Buttons

1. – Fully featured button creator allowing you to customize colour, gradation type, stripe, filter, image, and of course text.
2. – Another Button generator with a big range of different style buttons
3. My Cool Button – Simple and easy to use button generator

Continue reading »

18 August, 2008 2:41 pm

Raphaël – simplify development of Vector Graphics

Posted by Richard Wong under Javascript | 0 Comment

When it comes to cross browsers vector graphics, there have always been debate about whether to use SVG/VML or Canvas/VML. Even if you made the decision, you still need to know how to implement them.

Now Raphaël is aiming to simplify development with vector graphics across browsers. It provides us with a simple adapter to work with vector graphics using SVG/VML.

Below is an example of the basic:

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);

// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white (#fff)
circle.attr("stroke", "#fff");

If you want to create your own specific chart or image crop-n-rotate widget, you can simply achieve it with this library.

Raphaël – javascript library