web design and programming introduction to web design

WEB DESIGN AND PROGRAMMING

Introductionto Web Design


A look at the grid• Imagine an invisible grid over your design• Think about it before you begin• Using photoshop guides will help• Take the total width of your webpage and divide it into 4, 5, or 6 columns

• Don't forget to include the gutter width• Your page doesnt have to have 5 columns, but you can create divisions from those columns

• It restricts your design, means you keep a tidy layout and can concentrate on making it all pretty


Grid example


Using whitespace

• “Whitespace,” or “negative space” is the space between elements in a composition

• Macro whitespace is the space between major elements

• Micro is that between smaller element– Between lines of text– Between a caption and an image

• Whitespace can– Increase readability and balance– Create a particular tone, or air of professionalism

– Be used to lead the eye of the user


Whitespace example


Whitespace personality example


Whitespace active vs passive


Whitespace final note

• Whitespace usage is subjective and takes a lot of practice to perfect

• Whitespace is about manipulating the space outside, inside, and around your content

• Can be used to give your readers a head start

• Position products more precisely• Perhaps even begin to see your own content in a new light.


Contrast and meaning• Design is an exercise in creating and exploiting contrasts in order to convey meaning

• Nothing has meaning by itself– A cheetah is fast– Element X in the page layout is important

• Every element on the page will only have importance when compared to other elements

• Contrast is closely tied to human perception and survival instincts

• It is a powerful tool in design and conveying meaning


Contrast tools


Contrast and meaning• Contrast can also help lead the eye• It can influence user choices and compel action

• It can denote heirarchy of information• Makes it easier to see what is important• It helps people to scan by exploiting our natural survival instincts

• The ability to lead your audience through your content is highly valuable

• Cultural elements will also affect how you use contrast

• Contrast can also be used in the content


Contrast example


Fonts

• Your font must reflect the personality and tone of your site

• Read your text first, and get an idea of the tone

• Best to research and look at fonts in action– http://www.typetester.org/

http://www.typetester.org/




Fonts and CSS• Paragraph text should be no smaller than 11px

• Slight increases in header sizes will give an impression of elegance

• Emphasising text should primarily be done with bold, maybe colour and capitalization

• Avoid underlining and and italics most of the time

• For readability line height (leading) should be at least 1.4em

• Letter spacing should be avoided as it is unpredictable and may distract the eye


Fonts and CSS

• Large text margins will feel open and free

• Small, tight margins will feel more professional

• Justified text should generally be avoided online


HTML Fonts


HTML Fonts Familieshttp://www.ampsoft.net/webdesign-l/WindowsMacFonts.html


Colours• Decide on a colour pallette early• Use low saturation for content or larger areas

• Darker and higher saturation for highlighing and borders

• Don't use too many colours. 5 colours is too much for your main design (maybe for icons)

• Avoid clashing colours. High saturation colours of opposing hues are going to compete

• Find two complementary colours and use varying saturations and lightnesses of them

• Too few colour is as bad as too many. Youneed variance to break up your design


Considering build• Gradients can give your site extra depth or highlight an area, but they complicate your build– Each gradient will require an extra HTML element

– A gradient on a flexible content area should fade to a uniform colour after 70px or so

– Too much gradient usage in the wrong areas can restrict the versatility of your build

• Rounded corners are also very popular, and will make for a more complex build– A content box with rounded corners which needs flexible width and height will require 4 html elements

– Advanced, but not too difficult to do– Try combining rounded corners and gradients


Considering build• Make things smoother for yourself (or the poor coders) by considering the following– Can you reuse the same content box in different places

– Anytime you reuse a design element, you reduce code

– How is your site going to be broken into divs– Are there overlapping areas that don't need to

– Can you keep content areas consistent and in consistent positions

– Can the same button design be used throughout• Luckily, many actions that make for a more versatile and robust build also make for a clean, consistent design


Last year's best works

• The following are some of the best works from last semester's class

web design and programming introduction to web design

Documents