2016 Modular Architecture

This session as part of the Swipe x PAGE Academy (http://page-online.de) gave examples of how we create UX/UI at Swipe (http://swipe.de) efficiently when building digital products.

Transcript

1. Modular Architecture K R U N C H T I M E I NT E RACT IV E
13. MODULES
14. M O D # H E A D L I N E S T E A S E R • Headlines can be centered, left-aligned or right-aligned
 depending on hero container. • There will be many different styles with varying heights 14 Palm Lap Font styles • Heading = HEADLINE BLOCK (Example shown) Scroll Event • TBD 32px 32px 24px 32px 95% box 95% box
15. M O D # S U B H E A D L I N E T E A S E R 15 Palm Lap 32px 32px 16px 3 columns 4 columns Font styles • Lead = LEAD SANS • Color #222929 • Left aligned 32px 32px
16. M O D # L E A D T E A S E R 16 Palm Lap Scroll Event • TBD 16px 16px 16px 16px Font styles • Lead = LEAD SANS Lead Position Lap • 5 columns in width • centered, off-grid 3 columns 5 columns off-grid
17. M O D # D R O P C A P T E A S E R 17 Palm Lap Font styles • Drop Cap = DROP CAP 16px 16px 32px 32px 16px
18. M O D # C R E D I T S T E A S E R 18 There are various types of Credits Alternating: • Author Credits (default, below the Headline) • Text Credits (below the Paragraph) • VIP Credits (rare, left column on Desk) Mandatory: • Issue Credit (at the very end, combined with Date) Optional: • Photo Credits (inside Caption module)
19. M O D # T A G S T E A S E R 19 Palm Lap Rollover • COLOR CHANGE 16px 16px 16px 16px Font styles • Tags = MICRO Font color • Tags = BLACK 16px 16px align center align center 8px
20. M O D # S O C I A L I C O N S T E A S E R Icon colors Facebook #3B5998 Twitter #4099FF Google+ #D50F0F Mail #05c6af Icon colors (hover) Facebook #324E7F Twitter #3B8FE2 Google+ #BF1010 Mail #08b39f Hover effect slide → bottom to top (http://tympanus.net/Development/IconHoverEffects/#set-5) Border Radius = 14px 20 Palm Lap S H A R I N G Rollover • TBD 16px 16px 16px 16px 16px 16px center
21. M O D # G A L L E R Y # C L A S S I C • Consists of minimum 2 images or autoplay videos (Phase1) • IN Phase2 it could be possible to include Quotes, Tipps, Embeds like YT, FB, Twitter (tbd) • Desired to have a fix height depending on the first image • Looks and shall work very similar to the XL Gallery • Loops infinitely; next image slides in • Paging via Swipe (Touch) • Paging via Click on buttons (No-Touch) • Paging via Click on the image too (No-Touch) T E A S E R 21 Palm Lap Animation • SLIDING GALLERY • http://www.e-types.com/#/article/digital_is_expanding • http://thisisacult.org/another-magazine • http://www.celinemanz.com Caption 76px / align right Font styles • Paging Numbers = MICRO Paging style • Background-color = GREY, DARK • Font-color = WHITE Paging style LAP & DESK (active) • Background-color = WHITE • Font-color = BLUE 54px center center Caption active 54px 54px 54px
22. M O D # S E Q U E L S • Container: BODY • Position after last Paragraph or Content Module T E A S E R 22 Palm Lap Font styles • Chapter Info = CAPTION UPPERCASE • Headline = QUOTE CONDENSED S • Copy = INTRO SANS Font color (standard) · Chapter Info = WHITE · Headline = DARK GREY · Copy = DARK GREY Colors · Line = GREY MID LIGHT · Background (chapter info) = DARK GREY Color (active article) · Headline = RED · Copy = GREY · Background (chapter info) = GREY MID LIGHT · Background = WHITE 32px 10px 32px 20px 27px 27px 1px 10px 8px 8px c l i c k a r e a 4 cols 3 cols
23. CONTAINER
24. FU LL S CR E E N for Top Stories S TAG E D for standard articles SP L I T for images in portrait ratio DI A very simple/small articles Panda H E R O C O N T A I N E R
25. CU TO U T B O DY FU L L W I DTH CH I L D A R T I C L E C O N T A I N E R
26. ATOMIC DESIGN
28. Atom Atom Atom Atom Molekül Atom Organism
49. Alexander Meinhardt krunchtime.org KRUN C H T I M E I NT E R ACT I V E