content first prototyping

CONTENT FIRST PROTOTYPING

#CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE

CONVEY UXSEATTLE, WA | 1 MARCH, 2017


CONTENT & DESIGN


CONTENT & DESIGN

Content

Semantic Structure

Visual Hierarchy & Style

Interactivity


CONTENT & DESIGN

FIND & REPLACE (& DESPAIR)



FIND & REPLACE


FIND & REPLACEFIND & REPLACE … & DESPAIR


THREE LEVELS OF PROCESSING

Visceral Behavioral Reflective

Adapted from Don Norman’s Emotional Design

Well learned, routine operations

Sensitive to experience, training & education

Rapid judgements about good & bad, safe & dangerous


THREE LEVELS OF PROCESSING

Visceral Behavioral Reflective

+ ?


A SYSTEM OF WORDS

“A complex system that works is invariably

found to have evolved from a simple system

that works.”

– John Gall


OPPORTUNITIES

‣ Test and iterate across behavioral & reflective processing

‣ Build simple language systems that work

‣ Encourage clients to work with content earlier in the

design process

‣ Work collaboratively on content structure and design

with team members and clients

GOALS & APPROACH



GOALS

‣ A flexible, collaborative environment in which to test,

learn and iterate quickly

‣ Built with lightweight, open source resources

‣ That is as transparent as possible, in order to model and

communicate the functioning of the system


SIMULATION: THE WHITE BOX

“Instead of the inside of the system being

perfectly hidden, it is perfectly revealed – a white

box rather than a black box.”

– Gerald Weinberg


APPROACH

<section> <article> <h1> {{ … }} </h1> <p> {{ … }} </p> </article> </section>

Structure

ContentCourse Name

Description Category

Age Range Instructor

Style

h3 { margin-top: 1rem; text-transform: uppercase; font-weight: 500; &.rule { border-bottom: solid 1px; margin-bottom: 1rem; } }

Serve


APPROACH

StructureContent Style Serve


APPROACH


Content Structure Style Serve

XLSX JSON

Images + Assets

Markdown

confi

g.ym

l

SASS

/CSS

Java

scri

pt

loca

l ser

ver

JSON+

Markdown+

Modular Includes

+HTML

Templates+

Logic

Content Structure Style Serve

XLSX JSON

Images + Assets

Markdown

confi

g.ym

l

SASS

/CSS

Java

scri

pt

loca

l ser

ver

JSON+

Markdown+

Modular Includes

+HTML

Templates+

Logic

CONTENT FIRST PROTOTYPING IN ACTION



GREEN LAKE COMMUNITY CENTER



Content



StructureContent



StructureContent Style



VS VS


OPPORTUNITIES

‣ Test and iterate across behavioral & reflective processing

‣ Build simple language systems that work

‣ Encourage clients to work with content earlier in the

design process

‣ Work collaboratively on content structure and design

with team members and clients

GETTING STARTED



GOALS

‣ A flexible, collaborative environment in which to test,

learn and iterate quickly

‣ Built with lightweight, open source resources

‣ That is as transparent as possible, in order to model and

communicate the functioning of the system


APPROACH

<section> <article> <h1> {{ … }} </h1> <p> {{ … }} </p> </article> </section>

Structure

ContentCourse Name

Description Category

Age Range Instructor

Style

h3 { margin-top: 1rem; text-transform: uppercase; font-weight: 500; &.rule { border-bottom: solid 1px; margin-bottom: 1rem; } }

Serve


GETTING STARTED

Content First Prototyping Framework

Jekyll

Zurb Foundation

https://github.com/andybywire/content-first-prototyping

https://jekyllrb.com/

http://foundation.zurb.com/


GETTING STARTED

andyfitzgeraldconsulting.com [email protected]

@andybywire

THANK YOU!

CONTENT FIRST PROTOTYPING#CONTENTFIRST