09/30/13 #bbcon 1
Homepage Design Slam
PRESENTED BY NYLEVA CORLEY, INFORMATION ARCHITECT
MICHAEL CHANG, CREATIVE DIRECTOR
...
09/30/13 #bbcon 2
1. Who We Are
2. Why We’re Here
3. RWD Tools We Use
4. Our Design Examples
5. Design Slam
6. Resources
7...
09/30/13 #bbcon 3
WHO WE ARE
09/30/13 #bbcon 4
Michael Chang, Creative Director
• Creative strategist, leads team of designers and copywriters
• Client...
09/30/13 #bbcon 5
WHY WE’RE HERE
09/30/13 #bbcon 6
IT’S A MULTI-DEVICE WORLD
Credit:
ormlondon.com
09/30/13 #bbcon 7
Future proof
Browser
compatibility,
device
compatibility
SEO friendly
Single URL for
improved
analytics
...
09/30/13 #bbcon 8
Desktop-only Mobile-only
Responsive
Design
User Experience
and Design
Web Development
QA and testing
Tot...
09/30/13 #bbcon 9
CAN’T IGNORE THE TRENDS
Credit: dotcominfoway.com
09/30/13 #bbcon 10
CAN’T IGNORE THE TRENDS
Credit: Blackbaud’s August 2013 The Next Generation of American Giving report
(...
09/30/13 #bbcon 11
TRAFFIC TRENDS
mobile
tablet
desktop
Organization A: Animal Welfare
Mobile + Tablet Traffic
Total Site ...
09/30/13 #bbcon 12
TRAFFIC TRENDS
mobile
tablet
desktop
Organization B: Hospital
Mobile + Tablet Traffic
Total Site Traffi...
09/30/13 #bbcon 13
BOUNCE RATE TRENDS
mobile
tablet
desktop
Organization B: Hospital
09/30/13 #bbcon 14
RWD TOOLS WE USE
09/30/13 #bbcon 15
PRIORITIZATION
Content Audit
09/30/13 #bbcon 16
PRIORITIZATION
Sitemap
09/30/13 #bbcon 17
PRIORITIZATION
Page Description Diagrams
09/30/13 #bbcon 18
LAYOUT
Layout Patterns include:
Credits:LukeWroblewski,JoshuaJohnson
http://bit.ly/wZCiPcandhttp://bit....
09/30/13 #bbcon 19
LAYOUT
Layout Patterns include:
Credits:LukeWroblewski,JoshuaJohnson
http://bit.ly/wZCiPcandhttp://bit....
09/30/13 #bbcon 20
LAYOUT
Layout Patterns include:
Credits:LukeWroblewski,JoshuaJohnson
http://bit.ly/wZCiPcandhttp://bit....
09/30/13 #bbcon 21
LAYOUT
Layout Patterns include:
Credits:LukeWroblewski,JoshuaJohnson
http://bit.ly/wZCiPcandhttp://bit....
09/30/13 #bbcon 22
LAYOUT
Layout Patterns include:
Credits:LukeWroblewski,JoshuaJohnson
http://bit.ly/wZCiPcandhttp://bit....
09/30/13 #bbcon 23
LAYOUT
Navigation Patterns include:
Credit:BradFrost
http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5
09/30/13 #bbcon 24
LAYOUT
Navigation Patterns include:
Credit:BradFrost
http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5
09/30/13 #bbcon 25
LAYOUT
Navigation Patterns include:
Credit:BradFrost
http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5
09/30/13 #bbcon 26
LAYOUT
Navigation Patterns include:
Credit:BradFrost
http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5
09/30/13 #bbcon 27
LAYOUT
Navigation Patterns include:
Credit:BradFrost
http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5
09/30/13 #bbcon 28
LAYOUT
Navigation Patterns include:
Credit:BradFrost
http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5
09/30/13 #bbcon 29
LAYOUT
Navigation Patterns include:
Credit:BradFrost
http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5
09/30/13 #bbcon 30
LAYOUT
Wireframes
09/30/13 #bbcon 31
OUR DESIGN EXAMPLES
09/30/13 #bbcon 32
CMS REDESIGN
Current project
09/30/13 #bbcon 33
PEER-TO-PEER REDESIGN
Site launches tomorrow (10/1)
09/30/13 #bbcon 34
VOLUNTEERS FOR DESIGN SLAM
Please be respectful and nice.
The egg timer rules.
See us afterward in the ...
09/30/13 #bbcon 35
By focusing on prioritization and layout — and using the tools,
patterns and best practices we’ve share...
09/30/13 #bbcon 36
Our faves
• “The Elements of Content Strategy” by Erin Kissane, @kissane
• “Content Strategy for Mobile...
09/30/13 #bbcon 37
Our faves
• “Responsive Web Design” by Ethan Marcotte, @beep
• “Mobile First” by Luke Wroblewski, @luke...
09/30/13 #bbcon 38
Want to chat more about your Interactive needs and UX/Design?
Meet Nyleva and Michael in the
“Strategic...
Upcoming SlideShare
Loading in …5
×

Homepage Design Slam

1,499 views

Published on

bbcon 2013

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,499
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Homepage Design Slam

  1. 1. 09/30/13 #bbcon 1 Homepage Design Slam PRESENTED BY NYLEVA CORLEY, INFORMATION ARCHITECT MICHAEL CHANG, CREATIVE DIRECTOR #bbcon
  2. 2. 09/30/13 #bbcon 2 1. Who We Are 2. Why We’re Here 3. RWD Tools We Use 4. Our Design Examples 5. Design Slam 6. Resources 7. Meet Us at the UX/Design Booth OUR AGENDA
  3. 3. 09/30/13 #bbcon 3 WHO WE ARE
  4. 4. 09/30/13 #bbcon 4 Michael Chang, Creative Director • Creative strategist, leads team of designers and copywriters • Clients include Make-A-Wish, National Association of REALTORS, American Cancer Society, Canadian Wildlife Federation • Best-in-Class Award from Interactive Media Awards for UNICEF USA mobile site • Outstanding Achievement Award from IMA for POGO website • 15+ years in advertising, marketing and design • michael.chang@blackbaud.com HELLO! MY NAME IS … Nyleva Corley, Information Architect • Specialties: Content Strategy, Usability, Social Media • Clients include Memorial Sloan-Kettering, Michigan Humane Society, Common Cause, JDRF, American Jewish Joint Distribution Committee • Speaker: SXSW Interactive • Speaker: CASE Social Media and Community and HighEdWeb on crisis communications • 12 years in digital strategy for higher education • nyleva.corley@blackbaud.com
  5. 5. 09/30/13 #bbcon 5 WHY WE’RE HERE
  6. 6. 09/30/13 #bbcon 6 IT’S A MULTI-DEVICE WORLD Credit: ormlondon.com
  7. 7. 09/30/13 #bbcon 7 Future proof Browser compatibility, device compatibility SEO friendly Single URL for improved analytics Easier to manage Single content base, single code base Cost effective See next slide THE BENEFITS ARE CLEAR
  8. 8. 09/30/13 #bbcon 8 Desktop-only Mobile-only Responsive Design User Experience and Design Web Development QA and testing Total BENEFIT SPOTLIGHT: COST EFFECTIVE 2 breakpoints All breakpoints
  9. 9. 09/30/13 #bbcon 9 CAN’T IGNORE THE TRENDS Credit: dotcominfoway.com
  10. 10. 09/30/13 #bbcon 10 CAN’T IGNORE THE TRENDS Credit: Blackbaud’s August 2013 The Next Generation of American Giving report (https://www.blackbaud.com/nextgen)
  11. 11. 09/30/13 #bbcon 11 TRAFFIC TRENDS mobile tablet desktop Organization A: Animal Welfare Mobile + Tablet Traffic Total Site Traffic 20.69%2011- 2012 34.61%2012- 2013
  12. 12. 09/30/13 #bbcon 12 TRAFFIC TRENDS mobile tablet desktop Organization B: Hospital Mobile + Tablet Traffic Total Site Traffic 14.08%2011- 2012 21.32%2012- 2013
  13. 13. 09/30/13 #bbcon 13 BOUNCE RATE TRENDS mobile tablet desktop Organization B: Hospital
  14. 14. 09/30/13 #bbcon 14 RWD TOOLS WE USE
  15. 15. 09/30/13 #bbcon 15 PRIORITIZATION Content Audit
  16. 16. 09/30/13 #bbcon 16 PRIORITIZATION Sitemap
  17. 17. 09/30/13 #bbcon 17 PRIORITIZATION Page Description Diagrams
  18. 18. 09/30/13 #bbcon 18 LAYOUT Layout Patterns include: Credits:LukeWroblewski,JoshuaJohnson http://bit.ly/wZCiPcandhttp://bit.ly/HeOmq0
  19. 19. 09/30/13 #bbcon 19 LAYOUT Layout Patterns include: Credits:LukeWroblewski,JoshuaJohnson http://bit.ly/wZCiPcandhttp://bit.ly/HeOmq0
  20. 20. 09/30/13 #bbcon 20 LAYOUT Layout Patterns include: Credits:LukeWroblewski,JoshuaJohnson http://bit.ly/wZCiPcandhttp://bit.ly/HeOmq0
  21. 21. 09/30/13 #bbcon 21 LAYOUT Layout Patterns include: Credits:LukeWroblewski,JoshuaJohnson http://bit.ly/wZCiPcandhttp://bit.ly/HeOmq0
  22. 22. 09/30/13 #bbcon 22 LAYOUT Layout Patterns include: Credits:LukeWroblewski,JoshuaJohnson http://bit.ly/wZCiPcandhttp://bit.ly/HeOmq0
  23. 23. 09/30/13 #bbcon 23 LAYOUT Navigation Patterns include: Credit:BradFrost http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5
  24. 24. 09/30/13 #bbcon 24 LAYOUT Navigation Patterns include: Credit:BradFrost http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5
  25. 25. 09/30/13 #bbcon 25 LAYOUT Navigation Patterns include: Credit:BradFrost http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5
  26. 26. 09/30/13 #bbcon 26 LAYOUT Navigation Patterns include: Credit:BradFrost http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5
  27. 27. 09/30/13 #bbcon 27 LAYOUT Navigation Patterns include: Credit:BradFrost http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5
  28. 28. 09/30/13 #bbcon 28 LAYOUT Navigation Patterns include: Credit:BradFrost http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5
  29. 29. 09/30/13 #bbcon 29 LAYOUT Navigation Patterns include: Credit:BradFrost http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5
  30. 30. 09/30/13 #bbcon 30 LAYOUT Wireframes
  31. 31. 09/30/13 #bbcon 31 OUR DESIGN EXAMPLES
  32. 32. 09/30/13 #bbcon 32 CMS REDESIGN Current project
  33. 33. 09/30/13 #bbcon 33 PEER-TO-PEER REDESIGN Site launches tomorrow (10/1)
  34. 34. 09/30/13 #bbcon 34 VOLUNTEERS FOR DESIGN SLAM Please be respectful and nice. The egg timer rules. See us afterward in the “Strategic & Creative Services” Booth for Q&A.
  35. 35. 09/30/13 #bbcon 35 By focusing on prioritization and layout — and using the tools, patterns and best practices we’ve shared with you today — Responsive Web Design is within your organization’s reach. THE TAKEAWAY
  36. 36. 09/30/13 #bbcon 36 Our faves • “The Elements of Content Strategy” by Erin Kissane, @kissane • “Content Strategy for Mobile” by Karen McGrane, @karenmcgrane CONTENT STRATEGY RESOURCES
  37. 37. 09/30/13 #bbcon 37 Our faves • “Responsive Web Design” by Ethan Marcotte, @beep • “Mobile First” by Luke Wroblewski, @lukew • http://bradfrost.github.io/this-is-responsive/patterns.html • http://foundation.zurb.com • http://getbootstrap.com RWD RESOURCES
  38. 38. 09/30/13 #bbcon 38 Want to chat more about your Interactive needs and UX/Design? Meet Nyleva and Michael in the “Strategic & Creative Services” Booth! Location: Across from Booth #105 Time: 3:00 – 4:00 EST THANK YOU!

×