Designing Drupalcamp sites

558 views

Published on

This sessions goes through the design process of how to design a beautiful, functional, universal, and still local site for a Drupalcamp.

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

No Downloads
Views
Total views
558
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Designing Drupalcamp sites

  1. 1. DESIGNING AND DEVELOPINGDRUPALCAMP SITES FORESTONIAN AND FINNISH CAMPS.Toomas PipparArt Director, Exovetoomas@exove.ee
  2. 2. About sessionThe session goes throughthe design processof how to design abeautiful, functional,universal and still local sitefor a Drupalcamp.
  3. 3. Drupalcamp sites
  4. 4. Design process  Benchmarking  Concepts, drafts, sketches  Styling  Layouts  Components  Prep. for implementation  Additional medias for event
  5. 5. Benchmarking  List of requirements  Check latest Drupal event sites (http://buildamodule.com/drupal-camps-calendar)  Visual data collection  Making notes  First drafts and sketches
  6. 6. BenchmarkingDrupalcon Denver 2012 Drupalcon Munich 2012http://london2011.drupal.org/ http://london2011.drupal.org/
  7. 7. BenchmarkingDrupalcon London 2011 Drupalcon Chicago 2011http://london2011.drupal.org/ http://chicago2011.drupal.org/
  8. 8. Concept  Pen & paper to help draw and test different solutions  Wireframes  Feedback  Proceed / Improve
  9. 9. LayoutsFront page News with comments Schedule You can check the layouts at www.drupalcamp.fi
  10. 10. LayoutsSpeakers Venue SponsorsYou can check the layouts atwww.drupalcamp.fi
  11. 11. LayoutsAbout Search Register / LoginYou can check the layouts atwww.drupalcamp.fi
  12. 12. Styling  Header/title info with city name  Background image (related to venue, city)  More options in the future:   Usage of Webfonts   Colours (country related or event specific, custom)
  13. 13. Styling
  14. 14. Components Menu Header Registration Carousel Twitter feed Content Background Newsletter Sponsors
  15. 15. Prep. for implementaton  Graphical elements file for slicing (mockup below) Components Background
  16. 16. Additional mediasPresentation slides,rollups and badges Components 850x2000mm 60x100mm
  17. 17. Additional mediasBanners for supporters Components 160x310px 300x250px 180x150px 120x60px
  18. 18. Future plans  Improve functionality  100% responsive  More customization options  Downloadable design package  Make it available to the community and spread this design solution to many sites around the world
  19. 19. Thanks!Questions, commentsand other feedback later.

×