orgsync connect 2014: design tips & tricks
DESCRIPTION
Originally presented on June 26, 2014 at OrgSync Connect, Dallas, TX. Design your messaging to delight your members. We’ll explore best practices for building forms, news, events, pages and more portal elements through typography, color, images, and logical information hierarchies. Learn to think like your users to present the content they want in a way they can use.TRANSCRIPT
![Page 1: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/1.jpg)
ORGSYNC CONNECT
designTIPS & TRICKS 2014
![Page 2: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/2.jpg)
YOUcan delight your users
![Page 3: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/3.jpg)
The UI team wants to delight your users, too.
![Page 4: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/4.jpg)
CODE NAME: Longhorn
![Page 5: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/5.jpg)
LESS MORE=
![Page 6: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/6.jpg)
Navigation
![Page 7: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/7.jpg)
Navigation
![Page 8: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/8.jpg)
Navigation
![Page 9: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/9.jpg)
Navigation
![Page 10: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/10.jpg)
Navigation
![Page 11: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/11.jpg)
Navigation
![Page 12: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/12.jpg)
Navigation
![Page 13: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/13.jpg)
Page Layout
![Page 14: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/14.jpg)
BEST PRACTICE
Less is more.
![Page 15: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/15.jpg)
If you’re not using modules in a portal, turn them off.
BEST PRACTICE
![Page 16: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/16.jpg)
communityBRANDING
![Page 17: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/17.jpg)
don’t be AFRAID of color
![Page 18: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/18.jpg)
use your POWERwisely
![Page 19: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/19.jpg)
use your POWERwisely
![Page 20: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/20.jpg)
![Page 21: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/21.jpg)
![Page 22: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/22.jpg)
#C0FFEE#DECAF5#0079FF
#BADA55
![Page 23: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/23.jpg)
Community Logo and Profile Image
![Page 24: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/24.jpg)
Community Logo and Profile Image
![Page 25: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/25.jpg)
![Page 26: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/26.jpg)
![Page 27: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/27.jpg)
Community Logo and Profile Image
![Page 28: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/28.jpg)
Branded Emails
![Page 29: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/29.jpg)
Branded Emails
![Page 30: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/30.jpg)
Branded Emails
![Page 31: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/31.jpg)
Branding Official Departments
![Page 32: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/32.jpg)
Branding Student Organizations
![Page 33: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/33.jpg)
or student design clubmight be able to help
your graphics department
![Page 34: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/34.jpg)
Logging In
![Page 35: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/35.jpg)
Logging In
![Page 36: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/36.jpg)
BEST PRACTICE
Contact your campus consultant to set your campus colors or to change your primary logo.
![Page 37: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/37.jpg)
Update your community profile picture in your community settings.
BEST PRACTICE
![Page 38: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/38.jpg)
Turn on branded emails (if desired) in your community settings.
BEST PRACTICE
![Page 39: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/39.jpg)
Brand official school departments to help them stand out from student organizations.
BEST PRACTICE
![Page 40: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/40.jpg)
Link to your custom login page.
BEST PRACTICE
![Page 41: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/41.jpg)
it’s a multi-deviceWORLD
![Page 42: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/42.jpg)
![Page 43: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/43.jpg)
![Page 44: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/44.jpg)
![Page 45: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/45.jpg)
Remember that you’re creating content for multiple devices.
BEST PRACTICE
![Page 46: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/46.jpg)
Use formatting tools sparingly.
BEST PRACTICE
![Page 47: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/47.jpg)
Input text, not just images or links.
BEST PRACTICE
![Page 48: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/48.jpg)
designing withTEXT
![Page 49: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/49.jpg)
Creating Content
![Page 50: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/50.jpg)
Avoid underlining text for emphasis.
Your readers will wonder why the link is broken.
![Page 51: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/51.jpg)
![Page 52: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/52.jpg)
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.
![Page 53: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/53.jpg)
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.
![Page 54: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/54.jpg)
![Page 55: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/55.jpg)
![Page 56: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/56.jpg)
![Page 57: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/57.jpg)
Don’t underline text unless it’s a link. Even then, it’s not necessary.
BEST PRACTICE
![Page 58: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/58.jpg)
Left-aligned text is usually best.
BEST PRACTICE
![Page 59: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/59.jpg)
Save the uppercase text for short subheads.
BEST PRACTICE
![Page 60: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/60.jpg)
Creating Content
![Page 61: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/61.jpg)
Creating Content
![Page 62: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/62.jpg)
understandingFORMS
![Page 63: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/63.jpg)
GET EXCITED! It’s time to fill out a form!”Said no one ever.
“
![Page 64: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/64.jpg)
FORMS SUCK.““
LUKE WROBLEWSKIUsability expert
![Page 65: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/65.jpg)
““
LUKE WROBLEWSKIUsability expert
If you don't believe me,try to find people who like filling them in…
![Page 66: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/66.jpg)
““
LUKE WROBLEWSKIUsability expert
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....
![Page 67: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/67.jpg)
““
LUKE WROBLEWSKIUsability expert
FORMS JUST STAND IN OUR WAY.
![Page 68: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/68.jpg)
Is the information NECESSARY?
‣ Keep ‣ Cut ‣ Postpone ‣ Explain
![Page 69: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/69.jpg)
Be CONVERSATIONAL.
Meeting InformationPlease include day(s), time(s), and location(s) of your meetings.
When and where are your meetings held?
![Page 70: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/70.jpg)
Keep question and answers CONSISTENT.
Choose your preferred t-shirt colorBlueRed
What color hats do you want?RedBlue
![Page 71: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/71.jpg)
Keep question and answers CONSISTENT.
Choose your preferred t-shirt colorBlueRed
Choose your preferred hat colorBlueRed
![Page 72: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/72.jpg)
Provide POSITIONAL FEEDBACK.
Page 1 of 3: Your Information
![Page 73: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/73.jpg)
Provide POSITIONAL FEEDBACK.
Page 2 of 3: Your Vehicle Information
![Page 74: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/74.jpg)
Provide POSITIONAL FEEDBACK.
Section 1 of 3: Event Details
![Page 75: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/75.jpg)
Provide POSITIONAL FEEDBACK.
Section 2 of 3: Catering Details
![Page 76: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/76.jpg)
Use the right ELEMENTS.
‣ Checkboxes ‣ Radio Buttons ‣ Dropdowns
![Page 77: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/77.jpg)
Use PAGE LOGIC when applicable.
The best way to speed up form completion process is to not ask the question.
![Page 78: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/78.jpg)
QUESTION EVERYTHINGwhen moving a paper form online.
The best way to speed up form completion process is to not ask the question.
![Page 79: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/79.jpg)
Fill out your OWN FORM.
OWN IT.
![Page 80: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/80.jpg)
PEOPLE
![Page 81: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/81.jpg)
RELATIONSHIPS
![Page 82: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/82.jpg)
COMMUNICATION
![Page 83: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/83.jpg)
NEWS POST
demo
![Page 84: OrgSync Connect 2014: Design Tips & Tricks](https://reader037.vdocuments.us/reader037/viewer/2022102721/53efe7568d7f72e94b8b4579/html5/thumbnails/84.jpg)
THANK YOU.
Valarie Martin Stuart OrgSync UI Designer