Slide 1

Slide 1 text

FIXING LOREM IPSUM with CONTENT PROTOTYPING ! — ! Marko Dugonjić SmartWeb • Bucharest • 23. 09. 2014.

Slide 2

Slide 2 text

@markodugonjic

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Creative Nights

Slide 5

Slide 5 text

Source: h p://blog.njuskalo.hr/brojke-koje-pricaju-pricu (visits)

Slide 6

Slide 6 text

3.000.000 MONTHLY VISITS ! ! ! 4.500.000 POPULATION OF CROATIA

Slide 7

Slide 7 text

MENU • Designing in the Blind Ge ing the Initial Content Content Prototyping Designing the Content

Slide 8

Slide 8 text

DESIGNING in the BLIND 4

Slide 9

Slide 9 text

“We are the industry leaders.” “We are commi ed to excellence.” “Our customers are our greatest value.” logo.gif 3 months before…

Slide 10

Slide 10 text

Night Shi 1 week before…

Slide 11

Slide 11 text

Site Index Quick Guides Infographics Process Description Terms, Conditions, Guarantee Terms Explanations Customer Support Content About the Company 3 days before…

Slide 12

Slide 12 text

UNKNOWN CONTENT = GENERIC DESIGN

Slide 13

Slide 13 text

“ 80% of a website’s development is spent talking about what links go in the navigation. — Dave Rupert Paravel

Slide 14

Slide 14 text

LOGO COLORS CORNERS SHADOWS

Slide 15

Slide 15 text

Editing is easier than writing from scratch.

Slide 16

Slide 16 text

The Fear

Slide 17

Slide 17 text

VISUAL DESIGN FRONT-END DEVELOPMENT CONTENT CMS INTEGRATION

Slide 18

Slide 18 text

Everybody Unhappy

Slide 19

Slide 19 text

GETTING the INITIAL CONTENT 3

Slide 20

Slide 20 text

Google Alert Brochures and Reports Find the FAQ Why? Why? Why? Ask friends to Ask Questions Steal the Competition Content Bring your Camera

Slide 21

Slide 21 text

CONTENT PROTOTYPING 2

Slide 22

Slide 22 text

Unstyled CMS

Slide 23

Slide 23 text

Share Responsibility

Slide 24

Slide 24 text

Facilitate Authoring

Slide 25

Slide 25 text

Content Lifespan

Slide 26

Slide 26 text

PERMANENT CONTENT

Slide 27

Slide 27 text

Enter Everything you Already Have ! ! !

Slide 28

Slide 28 text

Enter Everything you Already Have Create Content Templates ! !

Slide 29

Slide 29 text

Enter Everything you Already Have Create Content Templates ! ! Gradual Disclosure ! ! ! !

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Gradual Disclosure Beginners’ Guides ! ! !

Slide 34

Slide 34 text

Step 1 Step 2 Step 3 Step 4 Step 5

Slide 35

Slide 35 text

Gradual Disclosure Beginners’ Guides Purchasing Process ! !

Slide 36

Slide 36 text

1 2 3 4

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Gradual Disclosure Beginners’ Guides Purchasing Process Glossary !

Slide 39

Slide 39 text

A E C D B F J H I G K O M N L P T R S Q U V W X Z Y

Slide 40

Slide 40 text

Gradual Disclosure Beginners’ Guides Purchasing Process Glossary Company History

Slide 41

Slide 41 text

1880 1920 1950 2000 1990

Slide 42

Slide 42 text

Gradual Disclosure Beginners’ Guides Purchasing Process Glossary Company History Employees’ Profiles

Slide 43

Slide 43 text

3 3 3

Slide 44

Slide 44 text

Enter Everything you Already Have Create Content Templates Hi-Res Photos ! Gradual Disclosure Beginners’ Guides Purchasing Process Glossary Company History Employees’ Profiles

Slide 45

Slide 45 text

Enter Everything you Already Have Create Content Templates Hi-Res Photos Trim the Strings Deadline

Slide 46

Slide 46 text

TEMPORARY CONTENT

Slide 47

Slide 47 text

Publishing Schedule Recurring Seasonal Activities A List of Topics 3 Articles per Category Deadline

Slide 48

Slide 48 text

DESIGNING the CONTENT 1

Slide 49

Slide 49 text

Typography ! ! ! !

Slide 50

Slide 50 text

Food DANGER! SEX SPORT movies Gardening

Slide 51

Slide 51 text

Typography Key Facts ! ! !

Slide 52

Slide 52 text

NEW CPU SPEED

Slide 53

Slide 53 text

MILLISECONDS IMPROVEMENT 500

Slide 54

Slide 54 text

Typography Key Facts Layout Based on Information Density ! !

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

Typography Key Facts Layout Based on Information Density Image Variations and Ratios !

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

Typography Key Facts Layout Based on Information Density Image Variations and Ratios Revise Main Navigation

Slide 59

Slide 59 text

Development Agency Zagreb | raza.hr Home Entrepreneurial Guides Business Glossary Education (Seminars) Services for Entrepreneurs Action Grants Support programs Development projects

Slide 60

Slide 60 text

Typography Key Facts Layout Based on Information Density Image Variations and Ratios Revise Main Navigation Homepage Hierarchy

Slide 61

Slide 61 text

PRODUCTS PRODUCTS SERVICES ABOUT SERVICES ABOUT

Slide 62

Slide 62 text

containerist.org @KonstantinWeiss

Slide 63

Slide 63 text

❤ BONUS

Slide 64

Slide 64 text

Expectations are Set Early On The Client Understands the User Accessibility > Aesthetics Structure and Consistency Form Follows Function Interesting Information

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

“ […] we improved the overall communication with our customers and learned how to explain complex concepts in simple words. — Frane Šesnić CEO, Development Agency Zagreb

Slide 67

Slide 67 text

MULTUMESC!