CSS Design

We couldn´t do it all by ourselves!

Over time we have become a team
of six people who all share
the eagerness to develop
outstanding websites
while still having fun.
We believe in thorough
planning and organisation,
hard work, transparency and

user interface design

Here at Handmade CSS Design we are fully aware that website interface design is not simply about a pretty picture!

image of a quotation mark

It didn’t take long for the commercial Web’s pioneers to learn that the slogan “If you build it, they will come“ was a hollow joke: You have to build it well, thoughtfully and ambitiously and inventively, and then you have to keep rethinking it and rebuilding it, if you have any hope of attracting a crowd.image of a quotation mark

Scott Rosenberg

Planning a web site:

The first step we take in designing any web site is to define your goals. Without a clearly stated mission and objectives, the project will drift, bog down, or continue past an appropriate endpoint. We here at Handmade CSS Design’s development team execute careful planning with a clear purpose so as to ensure the successful and timely build of your web site.

  1. We gather the development team, analyze your specific needs and goals, and work through the development process outlined by your sites requirments.
  2. Next we create a Project Charter document (which is signed and agreed by both parties) that details what we intend to do and why, which technology we’ll be using and what content we’ll need, and how long the development process will take.
  3. We then collect the content and any other information we will need, prior to starting the project (Time is money, not only for us but you to! This is a vital step in ensuring the speedy completion of all projects we undertake).

The Site Development Team

In most small to medium projects one person may handle multiple tasks or someone with specialised expertise (i.e. Information Architect) is used for specific assignments. When we recieve a new project, we inventory the skills and aptitudes in the team we assemble so as to ensure the best possible result for your specific needs.

The core skill sets we make use of daily and are needed in a web site’s development team are:

  • Project management
  • Information architecture and user interface design
  • Web design for the web, Multimedia design and Graphic design
  • Front end developer, Back end developer, Information Technology (IT) Engineer
  • Database Analysts

In larger web projects each role may be filled by a separate person, although in more specialised skill areas those contributors are not full-time team members for the duration of the project. We do this so as to ensure that we keap our costs down to the absolute minimum so as to ensure Return on Investment (ROI) for our clients.

image of a quotation mark

A fundamental reality of application development is that the user interface is the system to the users.  What users want is for developers to build applications that meet their needs and that are easy to use. Too many developers think that they are artistic geniuses – they do not bother to follow user interface design standards or invest the effort to make their applications usable, instead they mistakenly believe that the important thing is to make the code clever or to use a really interesting color scheme.image of a quotation mark

The Object Primer – 3rd Edition, Cambridge University Press

Design Process

  • Information Design – How information is presented and displayed in a site (Also known as Information Architecture)
  • Interface Design – How a user interacts with the site
  • Aesthetic Design – The overall look and feel of the site

Information Design

Analysing Audiences

In any website there are at least three distinct parties involved – the client or owner of the site, the users of the site and the designer or builder of the site. In fact often there are multiple groups of users, a few different client representatives and possibly a few people on the design team. These are all what people like to refer to as stakeholders.

In the world of stakeholders, it’s always important to remember that users come first. If you want a successful site you have to negotiate your own plans with your users, they have to be happy and find what they need. This is why here at Handmade CSS Design one of the first things we do in planning a website is to figure out who the target audience is.

Audience Classess

This is about targeting the design process to the percieved target audience for your site, blog, business social network, portfolio site, eshop etc., that is different groups of people who are going to use the site we are developing. Each audience class has a set of tasks they are trying to perform and information they are interested in or product they are wishing to purchase.

Our web designers make it their primary task to figure out who these classes of people are, what they want and how they are going to use the site. To complicate matters, you can generally break up an audience in several different ways, some of which will be more helpful than others, for example:

  1. Visiting Tweens
  2. Visiting Teens
  3. Visitors aged upto 18
  4. Visitors over 18
  5. Visitors over 30
  6. Visitors over 50
  7. Shoppers (Stumbler’s, Bargain hunters, Returning customers and Future customers)
  8. Readers (Information seeking, Learning and Gossiping)

The list is to extensive to fit the scope of this area, suffice to say that we cover every aspect of audience class so as to ensure we target the right audience for your needs.

Prioritising User Tasks

Once we’ve identified your sets of users, figured out what they want to do on the site and roughly how big and important the different sets are, we can then work out priorities for the different user tasks. Importantly our client/owner goals come into play here as they will weight the importance of different user groups.

At the end of the day analysis is only so good, the client is usually the best barometer to find out who the true target audience is, as they interact with them on a daily basis.

Interface Design

We learn the most about the designs we develop simply by watching. We make use of +/- 30 individuals in our test panel whom have minimal PC knowledge and have spent a small amount of time on the  internet. The best way to know how people are going to use a website is to watch them do it, this is called user testing.

It is an essential part of the debugging process we provide for our clients in the testing phases just before final handover, this can be done in the presance of the client or without. The intresting thing is that our clients get to see exactly how people interact with their new web design, in the results the panel offer, a sight not normally seen.

Post Launch Analysys Tools

  1. Click analysisCrazyEgg, Google Analytics Site Overlay, ClickHeat
    With these services you can see heatmaps of where people click. The only one we have really used is the one in Google Analytics (click on Content > Site Overlay in the side menu). These are pretty great for seeing roughly where most people are going on a given page, but of course you don’t know much else about what the users are doing or trying to achieve, so it really is only half the story.
  2. Path analysis -Most good analytics packages
    Figuring out what paths users take through a site can be determined by stats packages like Google Analytics. Between setting up goals, funnels and events, tracking exit pages, as well as just browsing by content and looking at navigation paths, there really is more information than you can shake a stick at. For the newcomer this may be a bit overwhelming sometimes, but I guess it’s better to have more than you need, than be left asking for more.
  3. Split Testing – Most good analytics packages
    Split testing is when you alternate between two different versions of a page to see how each one converts. It’s a pretty handy technique for figuring out how to optimize sales and landing pages in particular, but you could use it on pretty much any type of interface design.

Navigation and Orientation

  1. Users should always be able to work out where they are on a site
    This is called orientation and we achieve good results through highlighted menu items, breadcrumb trails, buttons and headings. Being able to orient yourself on a site is key to making it understandable and usable. In the real world the physical equivalent of orientation are street signs, they let you know where you are right now.
  2. Navigation
    There is nothing more confusing than having a menu bar move somewhere else, change dramatically or just disappear. A site’s navigation is one of the most important tools visitors use to understand a site. In the real world the physical equivalent of navigation is a street map, it let’s you figure out where you can go imagine that changing everytime you turn a corner.

image of a quotation markDesign is not just what it looks like and feels like. Design is how it works.image of a quotation mark

Steve Jobs

Image of the back button

You may remain informed as to all of our latest news and events via the RSS 2.0 feed that you will find here!