Website Design Basics


Published on

An introduction to the terms and concepts behind designing for the web.

Published in: Design, Technology

Website Design Basics

  1. 1. Anatomy  of  a  Website   Header   Source:  Header:  top  area  of  a  website;  typically  iden;fies  the  site/organiza;on  name.  OCen  includes    logo  or  iden;fying  factor.  This  stays  the  same  throughout  every  page  in  the  site.      
  2. 2. Anatomy  of  a  Website   Body   Source:  Body:  Area  of  main  text  and  images  on  a  webpage.  Can  also  include  images  and  links.  
  3. 3. Anatomy  of  a  Website   Links   Source:  Links:  Code  connec;ng  one  page  to  another  on  the  Internet,  or  to  download  programs  or  files.  Links  should  be  visually  separate  from  the  rest  of  the  body  text,  such  as  underlining,  italicizing  or  making  a  different  color.    
  4. 4. Anatomy  of  a  Website   Links   Source:  Internal  Link:  Link  to  another  page  within  the  same  website      External  Link:    that  points  to  another  website  on  the  Internet  (highlighted  above  in  yellow)  
  5. 5. Anatomy  of  a  Website   Naviga;on   Source:  Naviga=on:  Links  to  all  the  pages  and  content  contained  within  a  website    
  6. 6. Anatomy  of  a  Website   Breadcrumbs   Source:  Breadcrumbs:  Part  of  the  naviga;on  that  indicates  the  page    a  viewer  is  currently  on,  and  its  loca;on  within  the  site.  
  7. 7. Anatomy  of  a  Website   Sidebar   Source:  Sidebar:  Area  on  leC  or  right  side  of  webpage  template  oCen  containing    items  of  interest  such  as  links,  RSS  feeds  and  social  media  updates,  etc.  
  8. 8. Anatomy  of  a  Website   Footer   Source:  Footer:  Area  at  the  boUom  of  the  page  that  typically  contains    copyright  info,  contact  e-­‐mail  address,  terms  and  condi;ons,  etc.  
  9. 9. Anatomy  of  a  Website   Other  Important  Terms  HTML  (Hypertext  Markup  Language)  The  basic  language  of  the  Internet,  HTML  uses  a  series  of  tags  to  format  and  place  content  on  a  website,  link  pages,  etc.  
  10. 10. Anatomy  of  a  Website   Other  Important  Terms  CSS/Style  Sheets:  External  document  that  controls  the    appearance  of  a  website.  
  11. 11. Anatomy  of  a  Website   Other  Important  Terms   Source:  Domain  Name/URL:  leUers,  numbers,  hyphens  and  underscores  used  to  define  where    a  website  is  located  on  the  Internet.  URLs  are  case  insensi;ve  and  typically  begin  with  “www”  (some;mes  just  hUp://)  
  12. 12. Anatomy  of  a  Website   Other  Important  Terms   Source:  Index  Page:    Home  page  or  main  landing  site  that  visitors  reach  when  typing  in  the  website  URL.  
  13. 13. Anatomy  of  a  Website   Other  Important  Terms  Meta  Data:    Invisible  bits  of  code  added  to  a  site’s  header  that  communicates  informa;on  about  the  site  to  search  engines.      
  14. 14. Anatomy  of  a  Website   Other  Important  Terms  Sitemap:  Index  of  all  informa;on  and  content  on  a  site.    Typically  found  on  home  page  of  the  site  (oCen  near  footer).    Helps  people  find  what  they  are  looking  for  on  the  site  and  to  help  search  engines  find  pages  and  links  on  the  site.  
  15. 15. Anatomy  of  a  Website   Other  Important  Terms   Source:  Form:  Area  with  informa;on  fields  that  allows  user  input,    which  is  collected  and  sent  back  to  the  server.  
  16. 16. Anatomy  of  a  Website   Other  Important  Terms   Source:  Resolu=on:  Design  for  the  most  common  viewing  resolu;ons:  800  x  600,  1024  x  768    are  commonly  used  and  are  easily  viewable  by  most  people.      The  way  that  a  site  displays  on  a  screen  is  dependent  on  the  browser  used  and  whether    it’s  set  for  op;mized  viewing;  size  of  monitor  and  device  on  which  the  site  is  being  viewed.      800  x  600  size  makes  the  site  most  accessible  for  the  largest  number  of  people.    
  17. 17. Anatomy  of  a  Website   Other  Important  Terms   Source:  Resolu=on:  Design  for  the  most  common  viewing  resolu;ons:  800  x  600,  1024  x  768    are  commonly  used  and  are  easily  viewable  by  most  people.      Larger  size  of  1280x1024  are  easily  viewable  by  people  with  large  monitors  and    op;mized  browsers.  Viewers  visi;ng  the  website  on  smaller  devices  (phones,  laptops    and  tablets)  will  need  to  scroll  horizontally  across  the  screen.  
  18. 18. Anatomy  of  a  Website   Other  Important  Terms   Source:  WYSIWYG  Editor:    Visual  editor  that  allows  the  site  designer  to  primarily  work  with  the  layout  and  design  of  the  page  rather  than  the  code.  Stands  for  “what  you  see  is  what  you  get.”  
  19. 19. Website  Design  Basics   Before  You  Begin  Designing   Source:  h4p://  Target  Your  Audience.  What  type  of  visitor  is  most  likely  to  visit  your  site?  Consider  age,  gender,  geographic  loca;on.  What  are  their  values  and  goals?  What  types  of  colors  and  imagery  might  they  find  appealing?  What  common  vernacular  do  they  use?        As  the  designer,  consider  any  unique  challenges  posed  by  working  with  this  audience.    Are  there  any  technological  limita;ons?  Are  there  any  physical  challenges,  such  as  disabili;es  or  visual  impairment  that  must  be  taken  into  considera;on?  
  20. 20. Website  Design  Basics   Before  You  Begin  Designing   Source:  h4p://  The  goal  is  to  make  sure  that  the  message  reaches  the  audience  and  emphasizes  the  overall  mission  statement.  Consider  running  your  design  by  someone  in  the  target  demographic  to  make  sure  that  the  site  is  easily  used  and  understood.  
  21. 21. Website  Design  Basics   White  Space   Source:  White  Space:  Leave  visual  “breathing  room”  on  the  page  to  avoid  over  cluUering  informa;on  on  the  page.  Keep  pages  simple  and  cluUer-­‐free.  Avoid  cramming  too  much  informa;on  in  one  area  of  the  site–  this  helps  emphasize  the  informa;on    present  on  each  page.    
  22. 22. Website  Design  Basics   Type   Source:  Type:  Type  should  be  legible.  Site  uses  clean,  readable  fonts  and  color  combina;on    with  enough  contrast.      Tip:  Avoid  large  areas  of  “reversed  out”  type  (light  text  on  a  dark  background),  as  this  leads  to  eyestrain  for  viewers.  Make  sure  that  text  and  background  have  enough  contrast  to  stand  apart  as  separate  elements  on  a  page.  Dark  text  on  light  background  oCen  works  best.      S;ck  to  common  system  fonts  (Arial,  Helve;ca,  Times  New  Roman,  etc)  
  23. 23. Website  Design  Basics   Type   Source:  Type:  Break  up  large  blocks  of  text  into  smaller  paragraphs.    This  also  helps  with  the  visual  flow  of  informa;on.  
  24. 24. Website  Design  Basics   Type  Avoid  large  areas  of  light  type  on  a  dark  background;  this  leads  to  eye  strain  for  site  visitors.  
  25. 25. Website  Design  Basics   Type   Source:  Type:  Header  can  use  more  decora;ve  fonts;  in  this  case,  design  the  header    as  a  graphic  element  in  a  design  program  such  as  Adobe  Photoshop  so  that    it  reads  as  an  image  instead  of  text,  yet  s;ll  preserves  the  appearance  of  the  font.    
  26. 26. Website  Design  Basics   Unity  and  Consistency  Create  a  consistent  system  of  page  templates  and  use  these  throughout  the  site  design.  Keep  the  header,  footer,  sidebars  and  any  naviga;on  in  the  same  spot  throughout  the  design.      This  helps  ;e  the  individual  pages  together  into  one  unit  and  avoids  crea;ng    too  many  varia;ons  that  lead  to  confusion  on  the  part  of  the  visitor.    
  27. 27. Website  Design  Basics   Unity  and  Consistency  Layout:  Keep  the  most  important  content  toward  the  top  of  the  page.          Hierarchy:  Separate  the  informa;on  on  the  page  according  to  its  importance    and  the  order  in  which  you  want  the  reader  to  read  it.  
  28. 28. Website  Design  Basics   Unity  and  Consistency      Proximity:  Similar  and  related  content  should  be  grouped    close  together  on  a  page  to  indicate  connec;ons.  
  29. 29. Website  Design  Basics   Unity  and  Consistency  Create  different  type  treatments  for  text  headings,  subheadings,  pull  quotes  and  body  text  to  differen;ate  these  areas  of  a  website;  keep  this  design  consistent  throughout  the  en;re  site.    
  30. 30. Website  Design  Basics   Color  Design  should  use  appropriate  color  and  font  choices  to  convey  the  site’s    intended  message.  Keep  a  consistent  use  of  a  company’s  brand  color  paleUe.    Keep  color  paleUe  consistent  throughout  the  en;re  site  design  in  order  to  create  unity  between  pages.    
  31. 31. Website  Design  Basics   Color   Source:h4p://  Consider  color  theory  basics  and  how  different  colors  work  together.  Colors  should  work  well  together,  not  clash  or  compete.      
  32. 32. Website  Design  Basics   Color   Source:h4p://  Colors  also  have  different  psychological  meanings  across  world  cultures.      Consider  the  geography  of  your  primary  audience  and  how  the  viewers    may  perceive  individual  colors.    
  33. 33. Website  Design  Basics   Color   Source:  Op=onal:  When  choosing  colors,  refer  to  a  hexadecimal  chart  to  create    a  consistent  paleUe  of  colors.  This  will  help  to  ensure  consistency  every  ;me  you  use  the  same  color  throughout  the  site.  
  34. 34. Website  Design  Basics   Op;mizing  Images  When  including  photos  or  graphics,  make  sure  to  op;mize  for  best  quality  and  fastest  loading  ;me.  Adobe  Photoshop  has  a  useful  “Save  for  Web  &  Devices”  feature  that  helps  compress  images  for  online  viewing  keeping  them  looking  their  best.  
  35. 35. Website  Design  Basics   Op;mizing  Images  The  “Save  for  Web  &  Devices”  feature  allows  the  designer  to  compare  up  to  4  images    side  by  side  at  different  quality  and  compression  se/ngs.      The  boUom  leC-­‐hand  corner  of  this  window  also  displays  file  size  and  load  ;me  for  each  op;on.  
  36. 36. Website  Design  Basics   Forma/ng  Images:  Image  Types  JPEG  (Joint  Photographic  Expert  Group)  Another  commonly  used  and  compressed  online  image  format.      Suitable  for:  photographic  images  and  anything  with  complex  gradients    and  areas  of  blended  color.    
  37. 37. Website  Design  Basics   Forma/ng  Images:  Image  Types  GIF  (Graphics  Interchange  Format)  A  compressed  format  used  to  save  and  display  online  images  with  flat  areas  of  color    rather  than  gradients.  Images  are  reduced  to  256  colors  or  less;  this  allows  the  file    to  remain  small  in  size  and  load  quickly.  Loss  of  quality  if  images  are  too  compressed.    Suitable  for:  logos,  computer/vector  drawn  graphics  
  38. 38. Website  Design  Basics   Forma/ng  Images:  Image  Types  PNG  (Portable  Network  Graphics)  A  format  for  encoding  a  picture  pixel  by  pixel  and  sending  it  over  the  web.    Small  file  sizes  with  no  loss  in  quality  when  saved.  Recommended  by  the  W3    (World  Wide  Web)  ConsorLum  as  a  replacement  for  GIF  images.  
  39. 39. Website  Design  Basics   Forma/ng  Images  Watch  image  size  and  resolu=on.  Pay  aUen;on  to  the  rela;onship  between  image  size/document  size  (pixel  dimensions  with  actual  width  and  height),  document  size,  resolu;on  and  file  size.    Images  should  be  set  at  a  resolu;on  of  72  ppi  for  online  viewing.  Note:  Using  the  “Save  for  Web    &  Devices”  feature  in  Photoshop  will  do  this  automaLcally,  also  allowing  user  to  opLmize  file  quality.    
  40. 40. Website  Design  Basics   Forma/ng  Images  Avoid  resizing  small  images  to  make  them  bigger.  The  result  is  oCen  blurry  or  pixelated  images,    which  makes  the  quality  look  poor.  
  41. 41. Website  Design  Basics   Quality  Control  Check  for  spelling  errors  and/or  any  inconsistent  or  inaccurate  informa;on.  Make  sure  that  the  company’s  name  and  the  names  of  its  employees  and  management  are  spelled  correctly  and  that  all  contact  informa;on  is  up  to  date.      Naviga=on  should  be  easy  to  use  and  consistent  throughout  the  site.        Forms  should  func=on  properly.  Always  test  any  forms  that  will  appear  on  the  website.      Links:  Make  sure  all  links  are  working,  and  that  they  point  to  the  right  target  page.  When  using  links  to  third  party  sites,  make  sure  that  the  link  opens  the  page  in  a  new  tab  on  the  viewer’s  Internet  browser;  this  helps  avoid  steering  traffic  away  from  your  site.        Use  ALT  tags  when  placing  images.  Using  “ALT”  tags  helps  text  reading  soCware  iden;fy  images  on  your  site,  which  in  turn  makes  the  site  accessible  for  visitors  with  visual  disabili;es.        Cap=ons  are  provided  for  audio,  video  and  photo  files  
  42. 42. Website  Design  Basics   Quality  Control  Use  search-­‐friendly  page  =tles  that  are  self-­‐explanatory  to  visitors.      Be  sure  to  use  short,  descrip=ve  and  relevant  keywords  in  all  page  ;tles      Test  your  site  for  compa=bility  in  a  variety  of  browsers,  especially  the  most  commonly  used  ones  (Internet  Explorer,  Firefox,  Safari,  Chrome,  etc).        Content  should  be  kept  updated  frequently,  and  should  sound  conversa;onal  to  the  reader.      Naviga=on  should  be  simple  and  all  pages  should  be  within  3  pages  of  every  other  page  on  the  site.  Avoid  burying  pages  several  levels  deep    on  a  website  where  it  can’t  be  easily  located.      Loading  =me:  2-­‐5  seconds;  no  more  than  10  seconds  
  43. 43. Website  Design  Basics   Quality  Control  Avoid  using  Flash  script.    Flash  content  is  not  compa;ble  with  the  majority  of  mobile  devices  such  as  smart  phones  and  iPads;  avoiding  this  ensures  that  your  site  can  be  viewed  by  the  maximum  number  of  people.      Alterna;vely,  you  can  also  use  style  sheets  to  link  to  different  versions  of    a  website,  providing  a  mobile-­‐friendly  HTML  version  for  viewers  using  cell  phones  and  tablets  to  view.      Avoid  adding  automa;c  music,  anima;ons  on  the  site,  cluUered  content,  pixelated  images.