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

1. DESIGNING AND DEVELOPING
DRUPALCAMP SITES FOR
ESTONIAN AND FINNISH CAMPS.
Toomas Pippar
Art Director, Exove
toomas@exove.ee

2. About session
The session goes through
the design process
of how to design a
beautiful, functional,
universal and still local site
for a Drupalcamp.

3. Drupalcamp sites

4. Design process
 Benchmarking
 Concepts, drafts, sketches
 Styling
 Layouts
 Components
 Prep. for implementation
 Additional medias for event

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. Benchmarking
Drupalcon Denver 2012 Drupalcon Munich 2012
http://london2011.drupal.org/ http://london2011.drupal.org/

7. Benchmarking
Drupalcon London 2011 Drupalcon Chicago 2011
http://london2011.drupal.org/ http://chicago2011.drupal.org/

8. Concept
 Pen & paper to help
draw and test different
solutions
 Wireframes
 Feedback
 Proceed / Improve

9. Layouts
Front page News with comments Schedule
You can check the layouts at
www.drupalcamp.fi

10. Layouts
Speakers Venue Sponsors
You can check the layouts at
www.drupalcamp.fi

11. Layouts
About Search Register / Login
You can check the layouts at
www.drupalcamp.fi

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

14. Components
Menu
Header Registration
Carousel
Twitter feed
Content
Background Newsletter
Sponsors

15. Prep. for implementaton
 Graphical elements file for slicing (mockup below)
Components
Background

16. Additional medias
Presentation slides,
rollups and badges
Components
850x2000mm 60x100mm

17. Additional medias
Banners for supporters
Components
160x310px 300x250px 180x150px 120x60px

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. Thanks!
Questions, comments
and other feedback later.