Credentials Presentation

1
Introduction to Web Design
2
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

3
Grid example
4
Grid example
5
Grid example
6
Grid example
7
Grid example
8
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

9
Whitespace example
10
Whitespace example
11
Whitespace personality example
12
Whitespace active vs passive
13
Whitespace active vs passive
14
Whitespace active vs passive
15
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.

16
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

17
Contrast tools
18
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

19
Contrast example
20
Contrast example
21
Contrast example
22
Contrast example
23
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/

24
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

25
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

26
HTML Fonts
27
HTML Fonts Families
http//www.ampsoft.net/webdesign-l/WindowsMacFonts
.html
28
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

29
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

30
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

31
Last year's best works

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

32
(No Transcript)
33
(No Transcript)
34
(No Transcript)
35
(No Transcript)
36
(No Transcript)
37
(No Transcript)