Frameworks Are The Future of Design

Design Frameworks ...are the Future

Joe LamantiaEuroIA 2008

Joe LamantiaActive in User Experience & the Internet since 1996.

Started a company that failed.

Speak and write on diverse topics inspired by work.

Just moved to Amsterdam.

Todays MenuModularity in all thingsItʼs a DIY FutureExample: Hot Framework Action!Framework Design Tips

Design frameworks are

Whatʼs in a design framework?Goals and principlesStandard componentsBoundaries and connectionsGuidelines and rules

Joe LamantiaEuroIA 2008 6

IA Summit 2008 | Joe LamantiaEffective IA For Enterprise Portals: The Building Blocks Framework

What You Can Build

Modularity In All Things

Web 1.0Model = centralizedConcerns• organization• structure• architecture

Together, Ubiquity and Web Slices lead me to believe we're entering an era of fracturing Web content. Already we have seen content separated from presentation with RSS, and we've given developers access to online data for their mashups via Web APIs. Rafe Needleman

Mozilla Ubiquity, Microsoft IE8, and the fracturing of Web pages

Welcome to the coalmine

Developers build the world we all live and work in. Theyʼre like canaries in the coalmine for designers.What happens to them first......happens to us next!

So whatʼs happeningto the developers?

It means that developers will have to learn how to code pages for modularity. ...letting their sites be mashed up and refactored into tiny pieces all over the Web, by anyone. Rafe Needleman

Modularity is Everywhere

BrowserArchitecture

Modularity is Everywhere

BrowserExperience

In the Operating System

Physical & InformationExperiences

The iTablet...?

The Kitchen of the Future...?

Web 2.0Model = de-centralizedConcerns• participation• interaction

...the growth of Microformat-coded Web pages will make it possible for users to more easily create their own mashups--personal profile pages that have just the pieces of Web content they want.Rafe Needleman

IA Summit 2008 | Joe LamantiaEffective IA For Enterprise Portals: The Building Blocks Framework 25

Web 2.0 resembles enterprise

environments

Syndication streams of modular content and functionality

Social Structures tangible networks & communities

Services identity, security, publication, data management

The Ubiquitous Portlet

Executive dashboard Dashboards Portals Enterprise portals Tile-based UX WidgetsDIY experiences Hackware Fablab

IA Summit 2008 | Joe LamantiaEffective IA For Enterprise Portals: The Building Blocks Framework 28

It’s A DIY Future

Industrial Production Model

The Walls Are Coming Down

DIY (Do It Yourself) Shift

Lowered entry barriers to design and create

Creator vs. consumer distinction blurs

Flattened control & management structures

Fluid economic and cultural models

Web 2.0, culture of contribution, self-publishing

Commoditized design, development & manufacturing

ʻShadow ITʼ

Open Source & public data sets

APIs, Web Services, SOA

Mashup infrastructure: Yahoo Pipes, Google Gadgets

Physical goods: fab, ReadyMade, Make

New Creators

“The systems we keep will be hybrid creations. They will have a strong rootstock of peer-to-peer generation, grafted below highly refined strains of controlling functions. Sturdy, robust foundations of user-made content and crowd-sourced innovation will

feed very small slivers of leadership agility. Pure plays of 100% smart mobs or 100% smart elites will be rare.

The real art of business and organizations in the network economy will not be in harnessing the crowd of "everybody" (simple!) but in finding the appropriate hybrid mix of bottom and top for each niche, at the right time. The mix of control/no-control will shift as a system grows and matures.”

Kevin Kelly The Bottom is Not Enough

http://www.kk.org/thetechnium/archives/2008/02/the_bottom_is_n.php

Together, Ubiquity and Web Slices lead me to believe we're entering an era of fracturing Web content. Already we have seen content separated from presentation with RSS, and we've given developers access to online data for their mashups via Web APIs. But the growth of Microformat-coded Web pages will make it possible for users to more easily create their own mashups--personal profile pages that have just the pieces of Web content they want, or e-mail messages made up of live maps, automatically updating weather forecasts, up-to-the-minute travel information, and so on.

It means that developers will have to learn how to code pages for modularity. Conceptually that's not that big a deal, although if coding for Ubiquity and coding for Slices is different, it's going to be a technical mess. What I am waiting to see is how managers wrestle with the branding and revenue implications of letting their sites be mashed up and refactored into tiny pieces all over the Web, by anyone. Rafe Needleman

Ecology of Co-Creation

CreativeCommons(Infrastructure)

What’s An Architect To Do?

Herecomeseverybody!

...no designer required!

Itʼs bad to be a commodity in a digital world.

Creating frameworks allows designers to sell high value services.

We have framework superpowers!human insightdesign skillsarchitecture

Designers create the tools other people use...

...to create experiences for themselves, and the world.

Design: Now

Persistence

Design: Now

component

Persistence

Design: Now

component

template

Persistence

Design: Now

component

product / solution

template

Persistence

Design: Now

component

product / solution

template

Persistence

pattern

Design: Now

component

product / solution

template

systemScope

Persistence

pattern

Design: Now

component

product / solution

template

system

process / service

Persistence

pattern

Design: Now

component

product / solution

template

system

process / service

Persistence

network

pattern

Design: Now

component

product / solution

template

system

process / service

environment / framework

Persistence

network

pattern

Design: Now

component

product / solution

template

system

process / service

standard

Persistence

network

pattern

Design: Now

component

product / solution

template

system

process / service

standard

Persistence

network

pattern

Design: Now

component

product / solution

template

system

process / service

standard

Persistence

network

pattern

Co-creators / DIY

Design: Now

component

product / solution

template

system

process / service

standard

Persistence

network

pattern

Co-creators / DIY

Design: Now

component

product / solution

template

system

process / service

standard

Persistence

network

pattern

Designers

Co-creators / DIY

"I created the platform, and then I got out of the way. Sometimes the best thing you can do is get out of the way.''Craig Newmark

http://www.sfgate.com/cgi-bin/article.cgi?file=/chronicle/archive/2004/10/10/LVGU693SFD1.DTL

SporeOver 1.8 million creatures created by people using the Spore Creature Creator.

..more than the number of known species in the world (1.5 million)!

EA was hoping to get 100,000 creatures uploaded by players with the Creature Editor by September. They hit that number in 22 hours.

E3 2008: More Creatures in Spore Than in Real Life

By Sam Kennedy, 07/14/2008

The Problem With PortletsThe Forrest Gump School of Architecture

The Common Portlet“portletus flaticus”

Two part structureNo ʻhooksʼ or connectionsOnly purpose = displayA little bit anti-social...

The Box of Chocolates Model

Everything in a portlet

Portlets are islands

?? Add more portlets!

Advantages

Single toolSimple methodClassic strategy

...but only one outcome.52

Advantages

Welcome to Flatland!Structure?Connection?Interaction?Context?

The Bigger Box of Chocolates

One-Way Aggregation

??????

Increased...Information costsManagement costsTraining costs

DecreasedUsability

FindabilitySatisfaction

Experience qualityAdoption

Perceived valueROI

Escaping Flatland

Two-way Conversation

Vision: Enterprise Portal Suite

NeedsAllow for growth and changeEstablish common language for all perspectivesConstruct scalable, reusable structuresEncourage high-quality user experiencesEnable sharing of assetsFurther vision of 2-way conversation

A Better Experience

structure

Environments rich in

Structure Connection Interaction Context

Building Blocks OverviewWhat’s In the Bag...?

The Building Blocks System

Basic PrinciplesStandardized Components

Containers manage content

Connectors define structure & navigation

Assembly RulesSuggested Functionality

Convenience, Utility, Social

Best Practices [soon]

Containers7 typesBegin with Tile, range up to Portal SuiteMakeup and behavior defined in detailSmaller Containers deliver contentLarger Containers create structureWork together with Connectors

Container Blocks Overview

Tilegroup

Section

Portal

Portal Suite

Connectors Overview8 Connector typesSome enable navigationSome provide interactivity for ContainersMakeup and behavior defined in detail

Connector Components Overview

ControlBar

Geography Selector

Page Connector

Section Connector

Crosswalk

Contextual Crosswalk

Portal Connector

Utility Navigation

Free-form content

Section Connector

Page Connector

Utility Navigation

Control Bar

Convenience Functionality

Basic PrinciplesBoundaries

OpennessUse blocks for some or all contentMix blocks and free-form content

PortabilityBlocks can be:

•syndicated

•shared

• reused

•placed elsewhere

•duplicated

•moved

Independence

Blocks are independent

•content

• interaction

•display...until “stacked” together

InheritanceBlocks inherit from those stacked above:

• content

• properties

• interaction

Inheritance cascades top to bottomAll blocks stacked below inherit from above

Inheritance

Layering

Blocks can define all layers of an environment...not just visual / IA / UX

Blocks can cover *any* combination of layers...some, all, one, UX, tech, biz

Layering

Putting It All TogetherRules

Stacking HierarchyAssigns “size” to all blocksDefines possible combinations

Stacking Rules1. Smaller blocks inside larger blocks2. Multiple smaller blocks allowed3. No larger blocks inside smaller blocks4. Can stack blocks sequentially5. Can skip sizes when stacking6. Can stack different sizes on the same level

Container Stacking Hierarchy

Tile 1

Tilegroup 2

Tile 1

Tilegroup 2

Tile 1

Tilegroup 2

Tile 1

Section 5

Tilegroup 2

Tile 1

Portal 6

Section 5

Tilegroup 2

Tile 1

Container Stacking HierarchyPortal Suite 7

Portal 6

Section 5

Tilegroup 2

Tile 1

6. Can stack different sizes on the same level

Tilegroup 2

Tile 1 Tile 1

Tile 1

Tilegroup 2

Tile 1 Tile 1 Tile 1

Tile 1

More About the Blocks@Boxes and Arrows Building Blocks articleshttp://www.boxesandarrows.com/person/88-joelamantia

@JoeLamantia.comCategories: Building Blocks, Dashboards & Portals

Tags: building_blocks, executive_dashboards

ia_building_blocks, portals

@del.icio.us: jlamantia

Apple Stole My Framework!Just Kidding...

Tile View

View Selector Utility Navigation

Free-form

Case StudyChange and Growth

ClientBiopharMEGAceuticialsGlobal enterprise ~100k staff R+D > manufacturing > sales > distributionRecent mergers = new size and complexity

Series of portal effortsVendor: strategy, design, build, supportEngaged across enterpriseBuilding blocks leveraged as:• Concept langauge• Design Tool• Prototype Accelerator• Governance Framework

Global Executive Portal

Global Leadership TeamEnterprise insightBusiness intelligence

US Dashboard

US Leadership TeamMajor market insight, enhancing dialog Business intelligence, social commentary

*Introduced social mechanisms

Approvals Portal

Senior Managers, ExecsStreamline finance operationsInvoice tracking & approval

*Portability = critical

Expense Management Portal

Managers, budget coordinatorsStreamline invoicing, improve forecastingInvoice & project management capability

Sales Dashboard

Unit LeadershipUnit operations insightBusiness intelligence, social asessment

Working With the BlocksEveryone Loves Structural Frameworks!

Use the blocks at the right levelHow will you use the blocks?Common languageReference / exampleStarting point for designSet of defined componentsPolitical shield

Adapt things as needed

What is the environment?What needs to be portable, open?Is inheritance useful?Are these the right blocks?

Change or add principles with care

Selling the Building Blocks

Pitch the outcome, not the frameworkSpeak the buyersʼ language (IT, user, biz)Always explain the minimumStart simple, promise less, do more

Possible Future StuffWikiCommunity of PracticePatterns & Pattern LibraryMailing List, Blog, FeedDestinationWorkshops & SeminarsCoursesBook...?

On Designing Frameworks

Framework Checklist Goals & Purpose Components Boundaries Rules (behaviors)

Define the goals first.

Start simple: 3 Containers 2 Connectors

Use stable language.Donʼt change names!

Conserve simplicity.Add only essential elements. 7 Containers 11 Connectors

Set boundaries carefully.

Make as few rules as possible.

In Conclusion...

Frameworks are

More About the Blocks@Boxes and Arrows Building Blocks articleshttp://www.boxesandarrows.com/person/88-joelamantia

@JoeLamantia.comCategories: Building Blocks, Dashboards & Portals

Tags: building_blocks, executive_dashboards

ia_building_blocks, portals

@del.icio.us: jlamantia

Bedankt!joe@joelamantia.comjoe.lamantia@gmail.comtwitter: moJoeslideshare.net/moJoe

Frameworks Are The Future of Design

Design

Transcript of Frameworks Are The Future of Design

Capacity Design Optimization of Steel Building Frameworks ...

Node.js Frameworks & Design Patterns Webinar

Frameworks front end para design responsivo

Unit 7 Patterns and Frameworks. Key Concepts Design classes Components Design architectures EAD Patterns Packages Frameworks.

Simon Powers - Scaling Frameworks in Organisational Design

Design thinking frameworks as transformative cross ...eprints.qut.edu.au/82004/1/Anderson SD12_2552_Report_2014.pdf · Design thinking frameworks as transformative cross-disciplinary

Design Patterns and Frameworks for Object-oriented ...

DSIT_Appraisal Frameworks for Assessing Inclusive Transport Design

Analysis on policy frameworks to drive future investment in

Design and Application of Metal Organic Frameworks

Web Frameworks of the Future - O'Reilly Mediaassets.en.oreilly.com/1/event/12/Web Frameworks of the Future_ Flex... · Web Frameworks of the Future Flex, GWT, Rails and Grails ...

Unified Accessible Design & Accessible Code Frameworks · Unified Accessible Design & Accessible Code ... Unified Accessible Design & Accessible Code Frameworks ... – Integrated

Foundation Design Suite - Frameworks Plus Interface

Advertising Design: Theoretical Frameworks and Appeals.

A literature review of gamification design frameworks

Design Patterns and Component Frameworks Presentation

Web Frameworks of the Future

Edit open day responsive design frameworks

Responsive Design & CSS Frameworks

Web Frameworks of the Future - O'Reilly Media - Technology Books