2016 Modular Architecture
0 likes•141 views
The document outlines a modular architecture for a content management system, detailing various modules such as headlines, subheadlines, lead teasers, drop caps, credits, and tags. It specifies design choices like alignment, color schemes, and font styles, as well as functionality for galleries and social icons. The content is structured to facilitate user interaction and visual consistency across different devices.
2016 Modular Architecture
- 1. Modular Architecture K R U N C H T I M E I NT E RACT IV E
- 4. 4
- 5. 5
- 6. 6
- 7. 7
- 8. 8
- 9. 9
- 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 3columns 4columns 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 3columns 5columns 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 aligncenter aligncenter 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/alignright 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 54pxcenter 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 4cols 3cols
- 23. CONTAINER
- 24. FU LL S CR E E N for Top Stories STAGE D for standard articles SPLIT for images in portrait ratio DIA very simple/small articles Panda H E R O C O N T A I N E R
- 25. CUTOUT BODY FULL WI DTH CH I LD 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 KRUNCHTI M E I NTE RACTIVE