Skip navigation

First off, here is how not to design a webpage: This wonderful quasi-compilation of ‘old-time’ web pages (a new one appears every time you refresh the page) is a great resource for seeing all the wrong things one can do when designing a website.
http://www.kesselskramer.com/

Things to pay attention to:

01) Do not work against the grain of the medium! Any smart designer knows that one of the most efficient tricks for creating really superb design work is to work with the medium, emphasizing it’s intrinsic properties. An html website is something that works within a table structure which is comprised of rectangular, 90 degree angle cells. Do not try to make your web site look like a poster, or a CD cover and especially not like a flash website!

02) Pay attention to the content of your design project: Do not use visual elements because you “like them”. We all have visual preferences, be they colors or type or imagery. A lot of these preferences will not work together, will clash visually and may have nothing whatsoever to do with the contents of your site. Work with what the content of the site tells you to work with and pay attention as to whether your choices make up one cohesive visual whole.

03) Any good design work involves bringing together diverse visual material ranging from type to imagery to shapes to color. Try things out, combine things – but always with an eye to the whole! Do not get stuck on one component (even if you really really really like it!) if it isn’t working with everything else. Good design needs to be like good music. Not the individual notes, but the whole of the sound is what counts.

Color:

The thing to pay attention to when you are deciding upon a color scheme for any screen based work is that the medium is back-lit and will thus cause a visual “flicker”, even on very well made and finely tuned screens. Thus pure black and white schemes need to be considered and worked out very carefully before they are implemented, especially when there is also reading material involved. In fact, my advice would be to stay away from these altogether until you are thoroughly comfortable working with color: Type displayed on a pure white or pure black background will prove to be very hard to read, especially if the amount to be read is lengthy. The smart thing to do is usually toning things down to softer ranges.

In the image above the background is pure white and black as is the type, whereas in the image below both background and type have been toned down to dark grays and off-white. Result: Enhanced legibility. And – also looks better! ;-)

When it comes to adding color to the mix however, I would definitely advice novice designers to start out with a neutral color scheme of grays and then to add the colors very gradually and carefully: Although the color scheme on the image below is an analogical contrast which completely obeys the laws of color theory, the result leaves much to be desired… Definitely too much of a good thing!

01) Use the color scheme designer to decide upon a color scheme. Remember that strong contrast schemes (the little wheels to left) are much harder to work with than are the softer analogic and tetradic schemes. Also remember to take advantage of the adjustments tab to soften saturation and lightness values. Pure saturated hues, again, are much harder to work with than are the less saturated schemes.

02) Import a series of the hex numbers given to you on the color list tab in photoshop and try out the result on a dark as well as a background.

In most cases you will observe that once the pale background enters the equation a lot of design elements that were very plainly visible against the dark background will become far more problematic against the lighter version. Thus, you will need to a lot of fine tweaking when working with a paler color scheme in order to achieve a really smooth result, one that looks good and where things remain plainly visible.

Page elements:

Since it seems that we tend to use a boxed system to visually understand and navigate the web page, establishing the underlying page elements upon which your content will be structured is amongst the very first steps when constructing a good web page.

Alignment: The table within which your website resides will see to it that a lot of your visual material is aligned by default. That said, I have seen folk manage to not to align things even within the tightest table system! Although it is perfectly possible to achieve very good design in which the elements are deliberately unaligned, this is a trick best left to really experienced pros!

For the novice designer: Please please please – align everything! As much as you possibly can!

Lines: These are an excellent design aid to visually demarcate boundaries. You can create lines through code or as images in photoshop. My advice is to use very thin lines and sometimes combine them with slightly thicker ones for a double effect. Dashed lines will also work very well, especially when used together with slightly thicker straight ones.

One thing to pay very close attention to is that your straight lines should always end in perfect rectangles, with sharp contours when zoomed into. Lines which do not end perfectly make your design look messy.

To achieve really crisp lines use the photoshop custom shape tool in its bitmap state and uncheck the anti-aliased button to make the shapes and lines aliased, i.e., not fuzzy!

Boxes: Filling the table’s boxes with color is a very effective way of achieving a good web page structure.

You can use boxes together with lines, to even further enhance this effect.

Filling the boxes with patterns (photoshop > layer > layer styles > pattern) will give a web page an instant visual identity. The two images above are the exact same layout. Note how big a difference the fabric textures make to the “airfield” stripes!

Background: The images below will give you a rough idea as to what viewers with different screen sizes will see when the come to visit your site.

Type:

Placement: All experienced graphic designers know that the place to start with the design process is typography. Not the visuals but type! There is a perfectly simple explanation for this which is that type is the visual manifestation of the spoken word and as such is at the top of the pecking order of the semantic hierarchy. Place your type correctly and use good fonts and the rest of the design work is actually quite easy.

There is however also a hierarchy within the text material itself. Thus the headline, which in the case of a website is the foremost informational content, gets placed first; next in the pecking order is all the navigational stuff and third will be the actual content.

Type selection: Until very recently designers used to be very limited with the fonts that they could use in web design, since anything  other than the cross platform system fonts was unlikely to display correctly on the browser of the end user, unless they had the font used installed on their computer. WordPress has recently introduced typekit fonts, which for a small charge will let you use any font that you like and be sure that the viewer is seeing your choice correctly. However, even with this novelty, my suggestion would be to stick to very simple, legible sans serif fonts

Understated, generic fonts seem to work best in most design processes but when it comes to web design there is a lot to be said for using really “clean” typography.

You can test your type by pasting Lorem Ipsum dummy text into photoshop, which you can generate from here. You can also preview web text by going here.


Type and Color: While an experienced designer can achieve great effects with colored type this is something that I would urge the novice designer to stay away from. When you use either black or as white as text color you are engaging in a much safer bet. There are a number of reasons which all relate to our perceptual abilities as to why this is so, why color and text are things which in 9 cases out of 10 will not work well together. Keep your color options for other elements of the design.

Thus it may be a good idea to use color in secondary typographic elements such as boxes and underscores.

Visual Material:

Vectors, clip-art and icons: In medieval book design, designers were faced with the same problem of economizing on page real estate as we are with web pages today. They came up with a system of subdividing the page through ornamental elements which is very similar to the way we are constructing web pages today, where we also bring in the ornamental element into the web design system to a far greater extent than we do with printed design. The usage of ornamentation in the shape of vector elements and icons seems to add a great deal to the legibility and the charm of we pages. Thus, web design is an area where you can indulge to your heart’s content in finely detailed ornamental design elements!

Design in the 21st century is more about using resources and knowing where to get them, than it is about making everything yourself. And, the really good news is that there are plenty of web sites out there which give you very well designed bundles of vector art and shapes which you can add to your design, either modifying them or even as they are.

http://www.vecteezy.com/

http://www.freeiconsweb.com/

http://www.iconshock.com/icon_sets/

Here I have used these shield icons from vecteezy to create an instant web interface. ;-)

And here is another one using these, again from vecteezy.

And here are a few fool-proof tips to get it all to work:

Vector clip art is not the only visual element you can use to complement your typographic system. Ready made icons which you can download from the sites above (as well as countless others you can find through a google search), are a playful means to achieve great results as well.

The great news with these is that there will usually be png files of many different sizes, some going all the way up to 512 pixels and most as low as 16 pixels in the pack which you download, making these usable for clip art purposes as well as button icons.

Patterns and textures:

http://www.theinspirationgallery.com/

Images:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: