Web Design Tips to Improve the Professionalism and Impact of Your ePortfolio

799 views

Published on

Class taught for the Honors ePortfolio Course, HON 4198, Spring 2013, Friday, March 29, 2013, 1-2 pm.

Web Design Tips to Improve the Professionalism and Impact of Your ePortfolio

  1. 1. Web  Design  Tips  to  Improve  the  Professionalism  &  Impact  of  Your  ePor;olio   Honors  ePor)olio  Course,  HON  4198     March  29,  2013   Rachel  Vacek,  Head  of  Web  Services  
  2. 2. Who  is  the  audience    of  your  ePor)olio?  
  3. 3. •  Content    •  Header  /  Footer  •  InformaLon  Architecture  /  Structure  •  Design  /  Style  •  NavigaLon  /  Menu  •  Images  /  MulLmedia  •  Usable  /  Accessible  
  4. 4. Site  Ltles  –  which  ones  are  beSer?  John  Smith’s   John  Smith’s  Website   ePor)olio      My  ePor)olio   The  ePor)olio  of     John  Smith  Welcome  to  my    ePor)olio   John  Smith      
  5. 5. Content   Write     should  not   in  the    be  wriSen  by   acLve     passive-­‐   voice.   voiced   students.  
  6. 6. Click here to Viewview my resume. my resume.
  7. 7. “Click  on  a  heading  to  learn  more  about  each  internship.”    “To  download  a  copy  of  this  document,  scroll  down  to  the  bo=om  of  the  page.”      You  shouldn’t  have  to  tell  your  user  how  to  interact  with  your  website!    If  you  do,  you  need  to  improve  the  layout/design  of  your  site.  
  8. 8. People  scan  text.  They  look  for  items  that  stand  out  and  may  be  important.  They  look  for  bullet  points,  headers,  graphics,  and  items  surrounded  by  whitespace.  They  look  for  hyperlinks.  They  look  for  items  that  are  somehow  different  from  the  other  things  on  the  page  and  might  somehow  be  immediately  relevant.  They  want  to  find  your  informaLon.  Theyre  on  a  mission  and  all  the  extra  text  youre  pu`ng  on  the  screen  is  ge`ng  in  the  way  of  le`ng  them  accomplish  their  goals.    
  9. 9. Less   Is     More              
  10. 10. Less   Is                      More  Less    
  11. 11. Headlines  1.  Communicate  importance  2.  Succinctly  convey  essence  of   content  3.  Grab  aSenLon  
  12. 12. Summer 2012 Internship in Austin Undergraduate ResearchMan bites dog, Academic Projects
  13. 13. Pictures  •  Remove  red  eye  •  Should  be  in  focus  •  Dress  professionally  for  main  picture   –  ExcepLon:  pics  of  you  in  acLon  •  Crop,  edit,  adjust  hue/saturaLon  •  Consider  adding  a  boarder  or  a  drop  shadow   –  This  makes  your  image  “pop”  and  look  more   professional  •  Use  tools  like  Picasa,  Gimp,  or  Photoshop      
  14. 14. Text  with  Images  •  Include  capLons!!!   –  The  “hover  over”  text  is  descripLve  text  used   primarily  for  accessibility.  If  you  want  capLons,  put   them  on  the  page.   –  If  the  image  just  help  conveys  a  concept,  and  there   aren’t  idenLfiable  people  in  it,  you  probably  don’t   need  capLons.  •  Cite  your  photographer  if  appropriate  
  15. 15. Uploaded  or  Embedded  Files  •  Text  files  should  be  PDF,  not  Word   –  You  have  more  control  over  what  the  end  user  sees  •  Thumbnails  of  files  should  link  to  either  the  PDF   or  an  image  that  can  be  viewable  easily    at  full   screen   –  User  shouldn’t  have  to  scroll  horizontally  •  Consider  using  tool  like  Scribd  if  you  are  having   difficulty  with  embedding  Google  Docs  
  16. 16. On-­‐the-­‐fly  Usability  •  Task  analysis   –  Give  colleague  a  task,  and  ask  him/her  to  speak   aloud  what  steps  he/she  is  taking  to  get  to  the  goal,   and  why  •  QuesLonnaire/Survey   –  Ask  your  colleagues  quesLons  about  style,   whitespace,  content,  overall  thoughts  of  ePor)olio   –  Does  it  look  professional?  What  are  impressions?  
  17. 17. •  Going  beyond  professional  •  PresenLng  informaLon  in  new  ways  that  cause   people  to  think  differently  •  Impressing  the  user  •  Using  images  and  infographics  to  convey  your   intent  •  PresenLng  just  the  right  balance  of  informaLon,   mulLmedia,  and  images  to  make  your  point    
  18. 18. Just  because  you  can    doesn’t  mean  you  should  
  19. 19. hSp://youtu.be/Hzgzim5m7oU  
  20. 20. Name  1  thing  you  learned  today  
  21. 21. Thanks!  Rachel  Vacek  Head  of  Web  Services  University  of  Houston  Libraries    revacek@uh.edu    

×