Jozef Toth Mogdesign.eu

29
Jozef Toth Mogdesign.eu 23 Aug ust 2012 The Strategy Behind Designing for a CMS

description

23 August 2012. Jozef Toth Mogdesign.eu. The Strategy Behind Designing for a CMS. Drupalcon Munich Jozef Toth , Mogdesign.eu. The strategy behind designing for a CMS. mogdesign.eu. @ jojototh. @ jojototh. @ jojototh. Who are you?. Designers Themers Developers - PowerPoint PPT Presentation

Transcript of Jozef Toth Mogdesign.eu

Page 1: Jozef Toth Mogdesign.eu

Jozef TothMogdesign.eu

23 August 2012

The Strategy Behind Designing for a CMS

Page 2: Jozef Toth Mogdesign.eu

THE STRATEGY BEHIND DESIGNING FOR A CMS

Drupalcon MunichJozef Toth, Mogdesign.eu

@jojototh

mogdesign.eu

Page 3: Jozef Toth Mogdesign.eu

@jojototh

Page 4: Jozef Toth Mogdesign.eu

@jojototh

Page 5: Jozef Toth Mogdesign.eu

• Designers• Themers• Developers• PM/Business guys

Who are you?

@jojototh

mogdesign.eu

Page 6: Jozef Toth Mogdesign.eu

• Geek• Designer• Themer• CEO• UX designer

Who am I?

@jojototh

mogdesign.eu

Page 7: Jozef Toth Mogdesign.eu

• Geek• Designer• Themer• CEO• UX designer

Who am I?

@jojototh

mogdesign.eu

Page 8: Jozef Toth Mogdesign.eu

• Geek• Designer• Themer• CEO• UX designer

Who am I?

@jojototh

mogdesign.eu

Page 9: Jozef Toth Mogdesign.eu

Who am I?

@jojototh

mogdesign.eu

• Geek• Designer• Themer• CEO• UX designer

Page 10: Jozef Toth Mogdesign.eu

Who am I?

@jojototh

mogdesign.eu

• Geek• Designer• Themer• CEO• UX designer

Page 11: Jozef Toth Mogdesign.eu

• Geek• Designer• Themer• CEO• UX designer

Who am I?

@jojototh

mogdesign.eu

Page 12: Jozef Toth Mogdesign.eu

• Print design vs web design• Successful design• Design for users• Beauty vs usability

Designer

@jojototh

mogdesign.eu

Page 13: Jozef Toth Mogdesign.eu

Differences• Canvas vs Screens• 72 dpi vs 300 dpi• Font size – 10 vs 14• Colors - CMYK vs RGB• Image compression, size, format

Print design vs web design

@jojototh

mogdesign.eu

Page 14: Jozef Toth Mogdesign.eu

Problematic elements: • Shadows• Gradients• Rounded corners• Typography Grids • Mark Boulton - http://bit.ly/grids-mbInteractivity

Print design vs web design

@jojototh

mogdesign.eu

Page 15: Jozef Toth Mogdesign.eu

Set goals and expectations• think before you design• focus on needs, not on the pictureResearch• core of the business• what is the purpose• what is the message• target group• conversion/selling point

Successful design

@jojototh

mogdesign.eu

Page 16: Jozef Toth Mogdesign.eu

• don't like to think, act intuitively• are impatient• get distracted• hate visual noise• like conventional patterns

Design for users

@jojototh

mogdesign.eu

Page 17: Jozef Toth Mogdesign.eu

more effects ≠ awesomer design

The holy grail of web design• Content is the King• KISS - keep it simple stupid

Beauty vs Usability

@jojototh

mogdesign.eu

Page 18: Jozef Toth Mogdesign.eu

• Print design vs web design• Successful design• Design for users• Beauty vs usability

Designer

@jojototh

mogdesign.eu

Page 19: Jozef Toth Mogdesign.eu

• To theme or not to theme?• Consistency• Clean up your PSD

Themer

@jojototh

mogdesign.eu

Page 20: Jozef Toth Mogdesign.eu

• 15-25% vs 75% of project• Learn about Drupal• Learn about the hot new stuff• Talk to developers• Get feedback

To theme or not to theme?

@jojototh

mogdesign.eu

Page 21: Jozef Toth Mogdesign.eu

• use same layout/style• design in a generic way• content navigation• grid system• image sizes

Consistency

@jojototh

mogdesign.eu

Page 22: Jozef Toth Mogdesign.eu

• layers• groups• versions

Clean up your PSD

@jojototh

mogdesign.eu

Page 23: Jozef Toth Mogdesign.eu

@jojototh

mogdesign.eu

Page 24: Jozef Toth Mogdesign.eu

• Cost effectivenes• Delivering on time

CEO

@jojototh

mogdesign.eu

Page 25: Jozef Toth Mogdesign.eu

• To theme or not to theme?• Consistency• Clean up your PSD

Themer

@jojototh

mogdesign.eu

Page 26: Jozef Toth Mogdesign.eu

• all of the above• style guide / design manual• update the design manual• post it notes• design what is necessary• use real life content• required vs optional content

Cost effectivenes

@jojototh

mogdesign.eu

Page 27: Jozef Toth Mogdesign.eu

• define terminology upfront• QA with client & PM• set rules for feedback• finish the project

Delivery on time

@jojototh

mogdesign.eu

Page 28: Jozef Toth Mogdesign.eu

Drupal elements & style guide• Mogdesign.eu - http://bit.ly/OWxjLD• Zivtech - http://bit.ly/OWxsif• Chapter 3 - http://bit.ly/OWxx5s• Reload.dk - http://bit.ly/OWxAhA

Modules• http://drupal.org/project/styleguide• http://drupal.org/project/styleguide_extras

Videos• LA Drupal - http://bit.ly/OWxGpB

Resources

@jojototh

mogdesign.eu