Presentation on June 29, 2013, at OrgSync Connect, the second annual user conference for OrgSync campus partners.

1. Design Portals
LIKE A ROCKSTAR
Valarie Martin Stuart
UI DESIGNER / ORGSYNC, INC

2. BE YOUR AUDIENCE

6. USE OF COLOR

7. DON’T BE AFRAID OF COLOR

8. USE YOUR POWER WISELY

9. just because you
CAN
doesn’t mean you
SHOULD

13. DESIGN TEXTwith

14. Avoid underlining text for emphasis.
Your readers will wonder
why the link is broken.

16. You may want to use
justified text because it
s e e m s “ t i d i e r . ” T h e
downside on the web is
that you cannot control
your word or letter spacing.
As a result, justified text
can look sloppier than left-
aligned text.

17. Left-aligned text is better.
It maintains word and letter
spacing, and provides clues
on where the next line starts.
It is also considered more
accessible.

18. just because you
CAN
doesn’t mean you
SHOULD

22. we read shapes

23. just because you
CAN
doesn’t mean you
SHOULD

24. BEST PRACTICE:
Follow your school’s
brand standards for color.
Secondary palettes may be desirable.

25. BEST PRACTICE:
Save the uppercase text
for short subheads.

26. BEST PRACTICE:
Left-aligned text is
usually best for web pages.
If you choose another alignment option,
have a good reason.

27. BEST PRACTICE:
Don’t underline text unless
your text is a link.
And even then, you don’t have to.

28. FORMS

29. This is Luke Wroblewski.

30. LukeW knows forms.
And according to LukeW...

31. FORMS SUCK.
“
“

32. If you don't believe me, try to find
people who like filling them in. You
may turn up an accountant who gets
a rush when wrapping up a client's
tax return or perhaps a desk clerk
who loves to tidy up office payroll.
“
“

33. But for most of us, forms are just
an annoyance. What we want to do
is to vote, apply for a job, buy a book
online, join a group....
“
“

34. FORMS JUST
STAND IN OUR WAY.
“
“

35. you need to collect
DATA
people don’t like
FORMS

36. Is the information necessary?

37. Really, really necessary?
Is the information necessary?

38. Keep questions consistent.

39. Keep questions consistent.
Answers, too.

40. Provide positional feedback.
That’s the fancy way to say
PAGE 1 OF 3.

41. YOUR OWN FORM
Complete

42. BEST PRACTICE:
Be consistent.
Will you make forms less painful?
Yes
No

43. BEST PRACTICE:
Ask only what’s necessary.
Will you use the information you’re
gathering? Seriously, will you?

44. BEST PRACTICE:
Use helpful page titles.
Positional feedback lets students know
how much pain is left.

45. LET’S BUILD CONTENT
now that we’re designers...

49. YOU LOOK MARVELOUS
best practices

53. or student design club
might be able to help
your graphics department

56. PLEASE YOUR AUDIENCE

57. http://www.flickr.com/photos/noahbulgaria/199834532/
http://www.flickr.com/photos/73207064@N00/404319562/
http://www.flickr.com/photos/melaniehumble/7218718724/
http://www.flickr.com/photos/53068636@N00/3920363262/
http://www.flickr.com/photos/88209423@N00/4280435876
Other images purchased and licensed from
iStockPhoto and Fotolia.
PHOTO CREDITS

58. thank you
ROCK YOUR PORTALS
Valarie Martin Stuart
valarie@orgsync.com