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  

Who  is  the  audience    of  your  ePor)olio?  

•  Content    • Header  /  Footer  •  InformaLon  Architecture  /  Structure  •  Design  /  Style  • NavigaLon  /  Menu  •  Images  /  MulLmedia  • Usable  /  Accessible  

Site  Ltles  –  which  ones  are  beSer?  

John  Smith’s  Website    My  ePor)olio    Welcome  to  my  ePor)olio    

John  Smith’s  ePor)olio    The  ePor)olio  of  John  Smith    John  Smith    

Content  should  not  

be  wriSen  by  passive-­‐  voiced  

students.  

Write    in  the    acLve    voice.  

Click here to view my resume.

View my resume.

“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.  

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.  They're  on  a  mission  and  all  the  extra  text  you're  pu`ng  on  the  screen  is  ge`ng  in  the  way  of  le`ng  them  accomplish  their  goals.    

Less  Is    

More              

Less  Is    

                 More  Less    

Headlines  

1.  Communicate  importance  2.  Succinctly  convey  essence  of  

content  3.  Grab  aSenLon  

Man bites dog,

Summer 2012 Internship in Austin Undergraduate Research Academic Projects

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      

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  

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  

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?  

•  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  

 

Just  because  you  can    doesn’t  mean  you  should  

hSp://youtu.be/Hzgzim5m7oU  

Name  1  thing  you  learned  today  

Thanks!  

Rachel  Vacek  Head  of  Web  Services  University  of  Houston  Libraries    revacek@uh.edu