aphic
inspiration visual exploration data influx portfolio blog home
theory
design masters
branding
colour
typography
multimedia design
usability
 

web design

Hmm...where do I start? There is so much to include in this section. A lot has changed since 1996; the year that I created my first website. Since I started designing websites back in 1996 so much has changed, I have watched the web evolve and develop into an amazing medium.

When I think back on the limitations that I had to adhere to with colour usage, layouts and even animation before flash. I'm amazed that I even wanted to become a web designer and that I choose web over print. Looking back I'm so glad that I did and that I have had the chance to be part of the evolution.

As a web designer now days my main concern is for the user. I hate to say it but even 6 years ago 'the end user' was something that I really didn't think much about. Now I know better.

My approach to design has also changed, I will design beautiful sites as I have always tried to do. The difference now is that the upmost priority is to ensure the interface is user centric, even if it means that the aesthetics have to be compromised. The audiences needs come above everything, after all if the users can't find something or don't have a positive experience there's no point.


So before I put pixel to screen I do my research. It saddens me to say this, but I really think that there are still a lot of designers out there that do not do this.

I find that if I do all my research up front inspiration flows easily and the end design is always more succesful. These are some of the things that I try to find out in my
research:

Find out everything you can about your clients business, their industry, their competitors, purpose of website, goal of website, key message and goal of the homepage. Find out who is going to be using the website, why they are going to the website, why they are redesigning the site, their technological constraints.

Get intimate with their brand; not just the brand identity but what it stands for and represents and also how it sounds. The voice behind the content is part of the brands personality.

The website should be completely alligned with the offline brand, both visually and through the voice of the content. Analyse all the touchpoints of the brand.

site maps
Just as you wouldn't build a house without a plan, you should never design a website without a sitemap.
Good planning avoids frequent redesigns and a flexible site structure, not to mention good usability.

The standard tool for this job is Visio but to tell you the truth I'm not a big fan, I'd much rather use Illustrator. I like to make them look a little interesting and
to save time I often re-use some of my old files/templates. Below are some templates (files are EPS Illustrator CS) that you can download to create your own site maps.

 

 

image libraries

Stock.xchng
Getty Images
CSA Images -icons, illustrations, clip art, ornamental designs...
Stockxpert
Istockphoto
Istockpro
Dreamstime
Photocase
Freefoto
Stockvault
123rf

 

tools

slideshow

bullet Email Encryptor- If you dont want to receive spam use this encryptor when you are adding an email to your html pages.

Design Patterns

Yahoo design pattern library

Download a stencil kit

Welie- Patterns of interaction design

User Experience Design

UX toolkit by Fluid

Email marketing tools-

Most email marketing templates need to be created using the basic html without styles, here is a useful tool that tells you if your code has anything that email programs will have issues with-

http://code.dunae.ca/premailer.web/

Some useful tools & websites.

FAVICONS - Create a Favicon for your website.

Browser size & browser stats - Check your browser size and set your browser size tool.

bullet Browser usage stats W3C w3c stats

Background Patterns- from the guys at K10K. Download a pattern tile or customise your own by colorising one that you download.

Developer cheat sheets - Because sometimes Dreamweaver just doesn't do what you want it to do.

Type Tester- Compare fonts and font sizes online.

The Elements of typography applied to the Web

The web developers handbook - useful resources for web developers

A list apart - For people who make websites

Web Design from scratch - great site with really useful info specially for those starting out in webdesign.

bullet W3C Markup validator - Checks your code for non-compliant errors

w3c validator

bullet Domain tools: Includes 'Who is' look up search & SEO text browser and score.

domain tools

CSS websites and tools

CSS Beauty - Inspirational CSS websites.

CSS Elite

CSS Import

CSS Mania

CSS Nightingale

CCS Remix

CSS Thesis

CSS Zen Garden

Un Matched Style

CSS Menu Maker

 

Tutorials- to polish up those skills

Elite by Design 23 most incredible photoshhop tutorials

Good Tutorials - Photoshop, Illustrator, CSS, 3d max, HTML, Ruby, and more...

 

return to top





adobe studio
Adobe Studio features tutorials, tips and info for designers.



This site features a list of corporate brand guidelines & styleguides to download and view.



Annual Report Gallery
Good inspiration for brochure design and annual report designs.


Logo designs
Trying to find a particular logo? Also good for inspiration.


web style guide
This is a really useful site, created by Yale University. I came across it in 1999 just as they were printing the contents into a book.


UPA
Usability Professionals' Association.
Covers what is usability, guidelines & methods,etc.



www.useit.com
The so called 'guru of the web' Jakob Nielsens' website.



boxes and arrows

Boxes and Arrows is the definitive source for the complex task of bringing architecture and design to the digital landscape


eyewire
Features some tips for designers




Design forums

 

 

copyright 2005 aphic media