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.

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