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

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

3. Who
is
the
audience
of
your
ePor)olio?

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

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

6. Content
Write
should
not
in
the
be
wriSen
by
acLve
passive-­‐
voice.
voiced
students.

7. Click here to View
view my resume. my resume.

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

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

11. Less
Is
More

12. Less
Is
More
Less

13. Headlines
1. Communicate
importance
2. Succinctly
convey
essence
of
content
3. Grab
aSenLon

14. Summer 2012
Internship in
Austin
Undergraduate
Research
Man bites dog,
Academic
Projects

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

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

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

23. 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?

25. • 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

26. Just
because
you
can
doesn’t
mean
you
should

27. hSp://youtu.be/Hzgzim5m7oU

28. Name
1
thing
you
learned
today

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