Transcript
Page 1: Wireframing Smarter (BADcamp 2014)

Garret Voorhees SENIOR DESIGNER, CHAPTER THREE

WireframingSmarter

BADCAMP / NOVEMBER 9, 2014

Page 2: Wireframing Smarter (BADcamp 2014)

chapter_three

Page 3: Wireframing Smarter (BADcamp 2014)

Wireframes.

Page 4: Wireframing Smarter (BADcamp 2014)

Why-erframes?

Page 5: Wireframing Smarter (BADcamp 2014)

✓ Explore iterations quickly✓ Allows focus on usability before design✓ Serve as a technical reference for developers✓ Saves time and effort✓ Very testable!

Page 6: Wireframing Smarter (BADcamp 2014)

Why not dive right in to design?

www.flickr.com/photos/61615889@N00/539312776/

Page 7: Wireframing Smarter (BADcamp 2014)

Footer

Header

Primary Navigation

Sidebar

Carousel Slider

Wireframes arethe blueprint of your website.

www.flickr.com/photos/63631877@N00/3168068107/

Page 8: Wireframing Smarter (BADcamp 2014)

Paper is important.

(seriously)

Page 9: Wireframing Smarter (BADcamp 2014)

Meet your new best friend.

Page 10: Wireframing Smarter (BADcamp 2014)

Patient Care Research Education Make An Appointment Refer A Patient Make A Gift

About Faculty News Locations Log InDepartment of Urology

News & HighlightsHome > News

CAROUSEL

Title of the carousel item goes in this spot

Subtext for the carousel item goes right here and it's very comfortable in this space. But probably only a few lines.

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

2 3 65 ... 2241 Next21

Filter By TopicPatient CareResearchEducationCancerAdult (Non-Cancer)Children

PATIENT CARE

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

RESEARCH

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

PATIENT CARE

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

RESEARCH, PEDIATRIC

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

PATIENT CARE

Media ContactUCSF Department of Urology San Francisco, CA 94143-1695 415/476-8843 [email protected]

View Archived News

Follow us on Twitter@ucsfurology

About Make Appointment Refer A Patient Make A Gift Log In tyt

Page 11: Wireframing Smarter (BADcamp 2014)

Patient Care Research Education Make An Appointment Refer A Patient Make A Gift

About Faculty News Locations Log InDepartment of Urology

News & HighlightsHome > News

CAROUSEL

Title of the carousel item goes in this spot

Subtext for the carousel item goes right here and it's very comfortable in this space. But probably only a few lines.

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

2 3 65 ... 2241 Next21

Filter By TopicPatient CareResearchEducationCancerAdult (Non-Cancer)Children

PATIENT CARE

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

RESEARCH

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

PATIENT CARE

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

RESEARCH, PEDIATRIC

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

PATIENT CARE

Media ContactUCSF Department of Urology San Francisco, CA 94143-1695 415/476-8843 [email protected]

View Archived News

Follow us on Twitter@ucsfurology

About Make Appointment Refer A Patient Make A Gift Log In tyt

Page 12: Wireframing Smarter (BADcamp 2014)
Page 13: Wireframing Smarter (BADcamp 2014)

Patient Care Research Education Make An Appointment Refer A Patient Make A Gift

About Faculty News Locations Log InDepartment of Urology

News & HighlightsHome > News

CAROUSEL

Title of the carousel item goes in this spot

Subtext for the carousel item goes right here and it's very comfortable in this space. But probably only a few lines.

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

2 3 65 ... 2241 Next21

Filter By TopicPatient CareResearchEducationCancerAdult (Non-Cancer)Children

PATIENT CARE

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

RESEARCH

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

PATIENT CARE

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

RESEARCH, PEDIATRIC

Title of the news article goes hereJuly 10, 2012This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

PATIENT CARE

Media ContactUCSF Department of Urology San Francisco, CA 94143-1695 415/476-8843 [email protected]

View Archived News

Follow us on Twitter@ucsfurology

About Make Appointment Refer A Patient Make A Gift Log In tyt

Page 14: Wireframing Smarter (BADcamp 2014)
Page 15: Wireframing Smarter (BADcamp 2014)

Harvest ofthe Month

OurPrograms

In TheClassroom

In YourHome

In YourCommunity

In TheGarden

About | Locations | Events | Blog | Volunteer English | Español

Jobs | Media | Donate

Some text that indicates the relationship with the Alameda County of Education

In Your Community

This is some intro text for this section. I would expect this to be maybe a medium to long paragraph. Vis ne fugit menandri. Qui agam assum constituto ne. Cu ius odio iisque oporteat, in cum sonet iudico quaestio. Eius appareat argumentum mei in, pro te debitis ancillae, ne quas reformidans deterruisset vix. This is a snippet of the article. I would expect this to be maybe a medium to long paragraph. Vis ne fugit menandri. Qui agam assum constituto ne.

This is some intro text for this section. I would expect this to be maybe a medium to long paragraph. Vis ne fugit menandri. Qui agam assum constituto ne. Cu ius odio iisque oporteat, in cum sonet iudico quaestio. Eius appareat argumentum mei in, pro te debitis ancillae, ne quas reformidans deterruisset vix. This is a snippet of the article. I would expect this to be maybe a medium to long paragraph. Vis ne fugit menandri. Qui agam assum constituto ne.

How to Volunteer

Make a Donation

Youth Showcase

Vis ne fugit menandri. Qui agam assum constituto ne. Cu ius odio iisque.

"I loved working with Project EAT and look

forward to volunteering more in the future!"

Maria L., Hayward

Share your testimonial

Title of the event goes hereJune 17, 2012, 2–5 pmChapter Three Offices, San Francisco

Related Events Related Blog Posts

Title of the event goes hereJune 17, 2012, 2–5 pmChapter Three Offices, San Francisco

Title of the event goes hereJune 17, 2012, 2–5 pmChapter Three Offices, San Francisco

Title of the event goes hereJune 17, 2012, 2–5 pmChapter Three Offices, San Francisco

Community ChampionsTitle of the post about this champion personA snippet of the article should go in this space but probably just a few lines like this.

Title of the post about this champion personA snippet of the article should go in this space but probably just a few lines like this.

Title of the post about this champion personA snippet of the article should go in this space but probably just a few lines like this.

Youth Showcase Our Stories Community Resources

Title of the blog post goes hereBy Christine Boynton

A snippet of the article should go in this space but probably just a few lines like this.

Title of the blog post goes hereBy Christine Boynton

A snippet of the article should go in this space but probably just a few lines like this.

Title of the blog post goes hereBy Christine Boynton

A snippet of the article should go in this space but probably just a few lines like this.

Page 16: Wireframing Smarter (BADcamp 2014)

Harvest ofthe Month

OurPrograms

In TheClassroom

In YourHome

In YourCommunity

In TheGarden

About | Locations | Events | Blog | Volunteer English | Español

Jobs | Media | Donate

Some text that indicates the relationship with the Alameda County of Education

In Your Community

This is some intro text for this section. I would expect this to be maybe a medium to long paragraph. Vis ne fugit menandri. Qui agam assum constituto ne. Cu ius odio iisque oporteat, in cum sonet iudico quaestio. Eius appareat argumentum mei in, pro te debitis ancillae, ne quas reformidans deterruisset vix. This is a snippet of the article. I would expect this to be maybe a medium to long paragraph. Vis ne fugit menandri. Qui agam assum constituto ne.

This is some intro text for this section. I would expect this to be maybe a medium to long paragraph. Vis ne fugit menandri. Qui agam assum constituto ne. Cu ius odio iisque oporteat, in cum sonet iudico quaestio. Eius appareat argumentum mei in, pro te debitis ancillae, ne quas reformidans deterruisset vix. This is a snippet of the article. I would expect this to be maybe a medium to long paragraph. Vis ne fugit menandri. Qui agam assum constituto ne.

How to Volunteer

Make a Donation

Youth Showcase

Vis ne fugit menandri. Qui agam assum constituto ne. Cu ius odio iisque.

"I loved working with Project EAT and look

forward to volunteering more in the future!"

Maria L., Hayward

Share your testimonial

Title of the event goes hereJune 17, 2012, 2–5 pmChapter Three Offices, San Francisco

Related Events Related Blog Posts

Title of the event goes hereJune 17, 2012, 2–5 pmChapter Three Offices, San Francisco

Title of the event goes hereJune 17, 2012, 2–5 pmChapter Three Offices, San Francisco

Title of the event goes hereJune 17, 2012, 2–5 pmChapter Three Offices, San Francisco

Community ChampionsTitle of the post about this champion personA snippet of the article should go in this space but probably just a few lines like this.

Title of the post about this champion personA snippet of the article should go in this space but probably just a few lines like this.

Title of the post about this champion personA snippet of the article should go in this space but probably just a few lines like this.

Youth Showcase Our Stories Community Resources

Title of the blog post goes hereBy Christine Boynton

A snippet of the article should go in this space but probably just a few lines like this.

Title of the blog post goes hereBy Christine Boynton

A snippet of the article should go in this space but probably just a few lines like this.

Title of the blog post goes hereBy Christine Boynton

A snippet of the article should go in this space but probably just a few lines like this.

Page 17: Wireframing Smarter (BADcamp 2014)

(graph paper rules!)

Page 18: Wireframing Smarter (BADcamp 2014)

Solving a Real-World Fraction Division Problem

16:9

0:00 / 4:59

Raising the Bar on Instruction21st Century Learning Standards Search

Privacy Policy Disclaimer

Copyright ©1995 - 2014 WestEd

Common Core 101

Next-gen Science 101

Browse Content

English Language Arts

Math

Science

About

Assessment

Resources

Services

Community

EdModo

LinkedIn

Related Standards

7.RP.A.2A

10th Grade Math Classroom Video

Categories

Algebra

Resource Node - Video (VERTICAL) 6 / 30

! Classroom Video

You can calculate the volume of a cone easily once you know its height and radius and can plug those measurements into the formula for finding the volume of a cone. The formula for finding the volume of a cone is v = hπr2/3.

Download Audio (150 MB)

Download Transcript (PDF)

"

"

Share

Add to My Favorites

# 5 comments

License informationFeaturing

Brett Mosely, Eliza Hart Spalding School of Math and Technology, Boise, ID

Related Resources

$ Web Shots for Spiderman Problem: A problem used in a lesson on division with fractions. Also includes examples of students’ work.

% Add Fractions with Unlike Units Using the Strategy of Creating Equivalent Fractions

! Identifying Proportional and Non-Proportional Relationships in Graphs

This resource is in these collections and blogs:

& Geometry Resources

& Introductions to 10th Grade Mathematics

Page 19: Wireframing Smarter (BADcamp 2014)

Solving a Real-World Fraction Division Problem

16:9

0:00 / 4:59

Raising the Bar on Instruction21st Century Learning Standards Search

Privacy Policy Disclaimer

Copyright ©1995 - 2014 WestEd

Common Core 101

Next-gen Science 101

Browse Content

English Language Arts

Math

Science

About

Assessment

Resources

Services

Community

EdModo

LinkedIn

Related Standards

7.RP.A.2A

10th Grade Math Classroom Video

Categories

Algebra

Resource Node - Video (VERTICAL) 6 / 30

! Classroom Video

You can calculate the volume of a cone easily once you know its height and radius and can plug those measurements into the formula for finding the volume of a cone. The formula for finding the volume of a cone is v = hπr2/3.

Download Audio (150 MB)

Download Transcript (PDF)

"

"

Share

Add to My Favorites

# 5 comments

License informationFeaturing

Brett Mosely, Eliza Hart Spalding School of Math and Technology, Boise, ID

Related Resources

$ Web Shots for Spiderman Problem: A problem used in a lesson on division with fractions. Also includes examples of students’ work.

% Add Fractions with Unlike Units Using the Strategy of Creating Equivalent Fractions

! Identifying Proportional and Non-Proportional Relationships in Graphs

This resource is in these collections and blogs:

& Geometry Resources

& Introductions to 10th Grade Mathematics

Page 20: Wireframing Smarter (BADcamp 2014)
Page 21: Wireframing Smarter (BADcamp 2014)
Page 22: Wireframing Smarter (BADcamp 2014)
Page 23: Wireframing Smarter (BADcamp 2014)
Page 24: Wireframing Smarter (BADcamp 2014)
Page 25: Wireframing Smarter (BADcamp 2014)

Keep it simple.

Page 26: Wireframing Smarter (BADcamp 2014)

Your wireframesshould be ugly.

Page 27: Wireframing Smarter (BADcamp 2014)

Your wireframesshould be ugly.!

ruggedly functional.

Page 28: Wireframing Smarter (BADcamp 2014)
Page 29: Wireframing Smarter (BADcamp 2014)
Page 30: Wireframing Smarter (BADcamp 2014)

Just use Helvetica and call it a day.

Wireframes

http://www.flickr.com/photos/85888233@N00/2744476573/

Page 31: Wireframing Smarter (BADcamp 2014)

(or even Comic Sans!)

Page 32: Wireframing Smarter (BADcamp 2014)

Manageexpectations.

hey, check out these beauuuutiful wireframes

I made for you guys

…what the?!$@# is this?

Page 33: Wireframing Smarter (BADcamp 2014)

Minimize yourcolor palette.

Page 34: Wireframing Smarter (BADcamp 2014)

Use color to communicate functionality.

Links can be blue.Cancel buttons buttons can be red.Otherwise, stick to black and white.

Page 35: Wireframing Smarter (BADcamp 2014)

Programs

Petroleum & Petrochemicals EconomicsProcess Evaluation/Research PlanningPolyOlefins Planning ServicesStrategic Business AnalysisSpecial Reports

Company

About ChemSystemsMethodologyWhat's NewContactMailing List Sign-up

©2000-2013 Nexant Inc. All rights reserved.

Need Help?

Help PageGlossary

Nexant

SolutionsProductsServicesYour BusinessCompany

Follow us on:

Industries

Sector name 1Sector name 2Sector name 3Sector name 4Sector name 5

Twitter

ChemSystems AboutPrograms Training Contact Search

Log in

Advanced Search

Industries

Refine Your Search

Analysis Type

Capacity Share

Refine Search

Product Family

Styrenics

Product

Styrene

Geography

Annual Styrene Capacity Share In Western Europe, 2013Thousand TonsMedium Oil ScenarioAs Reflected By Plant Owner

Process

Styrene

UnitsTons

Pounds

Plant TypeLeader

Laggard

Monetary BasisCurrent

Constant

Currency€ Euros

$ USD

Currency Base Year

2013

Refine Results

Update Search

Table Data

Label goes here

Ending Quarter 3

Download Excel Print PDF

Download Excel Print PDF

@toddmoy

@hellokv

@Twitter

@elliottmunoz

Moy

Vigneault

Last Name

Muñoz

Kevin

Todd

Elliott

First Name

3

2

1

#

Date

Download latestMacro-economic Data (.xls)

Global

By Region By Country2009

Start year

Range of yearsSingle year

2013

End Year

Patient Care Research Education Make An Appointment Refer A Patient Make A Gift

About Faculty News Locations Log InDepartment of Urology

CAROUSEL

Title of the carousel item goes in this spot

Subtext for the carousel item goes right here and it's very comfortable in this space. But probably only a few lines.

Patient Care

CancerAdult (Non-Cancer)ChildrenWhat Is Urology?

Education

ResidencyFellowshipsCME, Conferences & Events

Research

CancerAdult (Non-Cancer)ChildrenResearch Opportunities

The UCSF Department of Urology is committed to offering the best urologic care, the most productive and innovative research programs, and an outstanding educational program that trains the future leaders in the field.

We are one of the most productive urology departments in the nation, concentrating our efforts on a wide variety of research and clinical care programs. This is evidenced by our US News and World report ranking as one the very best programs in the country. In addition, UCSF Urology is the fifth highest recipient of National Institutes of Health funding reflecting the productivity and innovation of our research mission.

We are one of the most productive urology departments in the nation, concentrating our efforts on a wide variety of research and clinical care programs. This is evidenced by our US News and World report ranking as one the very best programs in the country. In addition, UCSF Urology is the fifth highest recipient of National Institutes of Health funding reflecting the productivity and innovation of our research mission.

Our residency program is one of the best in the country, attracting the finest applicants available. The department enjoys the strong support of the Medical Center, School of Medicine and patient advocates who have made resources available to support our academic activities. Members of the department have helped develop multidisciplinary research and patient care programs in key areas throughout the UCSF Campus.

Mission Statement

Peter Carroll, MD, MPHProfessor and Chair of UrologyKen and Donna Derr-Chevron Distinguished Professor

Learn More

About Make Appointment Refer A Patient Make A Gift Log In tyt

Brief description text that should be about a sentence or two and talk about what this grouping means.

Brief description text that should be about a sentence or two and talk about what this grouping means.

Brief description text that should be about a sentence or two and talk about what this grouping means.

Welcome back, Gregg!Favorites

! Identifying Proportional and Non-Proportional Relationships in Graphs

" Factored Form of a Quadratic Function

# Add Fractions with Unlike Units Using the Strategy of Creating Equivalent Fractions

Gregg TurkingtonTeacher

$ Edit Profile

Delete

Delete

Delete

! Identifying Proportional and Non-Proportional Relationships in Graphs

" Factored Form of a Quadratic Function

# Add Fractions with Unlike Units Using the Strategy of Creating Equivalent Fractions

Delete

Delete

Delete

Raising the Bar on Instruction21st Century Learning Standards Search

Privacy Policy Disclaimer

Copyright ©1995 - 2014 WestEd

Common Core 101

Next-gen Science 101

Browse Content

English Language Arts

Math

Science

About

Assessment

Resources

Services

Community

EdModo

LinkedIn

My Profile (VERTICAL) 22 / 30

%

%

%

%

%

%

Page 36: Wireframing Smarter (BADcamp 2014)

www.meettheipsums.com

Don’t be afraid to use placeholder copy.

Page 37: Wireframing Smarter (BADcamp 2014)

www.meettheipsums.comMeet The Ipsums

Page 38: Wireframing Smarter (BADcamp 2014)

Single-origin coffee pork belly, Banksy selvage scenester

pop-up tousled selfies vinyl VHS you probably haven't

heard of them meh DIY pickled. Synth bitters you probably

haven't heard of them, fixie photo booth organic street art

irony. Ethical Terry Richardson High Life, Pinterest meh

Wes Anderson try-hard irony bicycle rights dreamcatcher

Portland twee bespoke.

www.hipsteripsum.me

Hipster Ipsum

Page 39: Wireframing Smarter (BADcamp 2014)

www.rikeripsum.com

Commander William Riker of the Starship Enterprise.

I suggest you drop it, Mr. Data. We could cause a diplomatic

crisis. Maybe we better talk out here; the observation lounge

has turned into a swamp. A lot of things can change in

twelve years, Admiral. Smooth as an android's bottom, eh,

Data? I'd like to think that I haven't changed those things, sir.

Worf, It's better than music. It's jazz.

Riker Ipsum

Page 40: Wireframing Smarter (BADcamp 2014)

OmniGraffle

omnigroup.com/omnigraffle

Page 41: Wireframing Smarter (BADcamp 2014)
Page 42: Wireframing Smarter (BADcamp 2014)

https://www.flickr.com/photos/justin_case/2741082045/

Page 43: Wireframing Smarter (BADcamp 2014)

www.graffletopia.com stencils.io

Graffletopia Stencils.io

✓ $24/year for access (some individual stencils cost more)

✓ Huge library of quality stencils

✓ Search and browse by category

✓ Lots of content that can be found for free elsewhere

✓ Free (as in beer)!

✓ Limited library of stencils (but has some great ones)

✓ Lacks search/browse by category

✓ No account required

Page 44: Wireframing Smarter (BADcamp 2014)

iB u 123

A abFormat Font Size

enter text

Label

LabelLabel

Label

Label Label

TabTabTabTab

agriculture 12 autos 72

business 345

cities 65 companies 254

Cancel OK

ButtonButton Button Button

ButtonButton Button Button

ButtonButton Button Button

ButtonButton

888 Select a date

30 329 1 231282421 23 25 272622

201814 17 191615129 1187 10 13

S6

F5

T4

W3

T21

M30S

December 2008

Select Today

Konigi Wireframe Stencilswww.konigi.com/tools/omnigraffle-wireframe-stencils

Page 45: Wireframing Smarter (BADcamp 2014)

Section 3Section 2Section 1

Label

Search

Label @

Unchecked Checked

Unselected Selected

Oh Snap! Change a few things and try submitting again.

×

Well Done! You successfully read this important alert message.

×

Heads Up! This alert needs your attention, but it's not super important.

×

Primary Action

Primary Action

Primary Action

Default

Primary

This is a Warning

Info

Success

Danger

Default

Primary

Info

Success

Warning

Danger

Checkout

Delete

Refresh

×

Cancel Save

Protip : Try resizing only this table cell. The header "x" and footer buttons should stay in the proper place without distorting.

Modal Header

@toddmoy

@hellokv

@Twitter

@elliottmunoz

Moy

Vigneault

Last Name

Muñoz

Kevin

Todd

Elliott

First Name

3

2

1

#

Twitter Bootstrapwww.viget.com/inspire/an-omnigraffle-stencil-for-twitter-bootstrap-2

Page 46: Wireframing Smarter (BADcamp 2014)

Inline Label

Label

Inline LabelText Area label Radio Button

Radio Button

Checkbox

Checkbox+

This is a dropdown

Sub Nav Item 1

Sub Nav Item 1

Sub Nav Item 1

Sub Nav Item 1

Nav Item 1 Navigation 2 Navigation 3 Navigation 2

Filter: Active Pending Suspended All

Simple Tab 1 Simple Tab 2 Simple Tab 3

Vertical Tabs 1

Vertical Tabs 2

Vertical Tabs 3

Vertical Tabs 4Regular Label Secondary Label

Success Label Error Label

Regular Button »

Regular Button »

Regular Button »

Regular Button »

Button »

Button »

Button »

Button »

HOME / FEATURES / GENE SPLICING / HUMAN CLONING

This is a right tooltip!

Zurb Foundationwww.zurb.com/playground/foundation-stencil-sets

Page 47: Wireframing Smarter (BADcamp 2014)

Programs

Petroleum & Petrochemicals EconomicsProcess Evaluation/Research PlanningPolyOlefins Planning ServicesStrategic Business AnalysisSpecial Reports

Company

About ChemSystemsMethodologyWhat's NewContactMailing List Sign-up

©2000-2013 Nexant Inc. All rights reserved.

Need Help?

Help PageGlossary

Nexant

SolutionsProductsServicesYour BusinessCompany

Follow us on:

Industries

Sector name 1Sector name 2Sector name 3Sector name 4Sector name 5

Twitter

ChemSystems AboutPrograms Training Contact Search

Log in

Advanced Search

Industries

Refine Your Search

Analysis Type

Capacity Share

Refine Search

Product Family

Styrenics

Product

Styrene

Geography

Annual Styrene Capacity Share In Western Europe, 2013Thousand TonsMedium Oil ScenarioAs Reflected By Plant Owner

Process

Styrene

UnitsTons

Pounds

Plant TypeLeader

Laggard

Monetary BasisCurrent

Constant

Currency€ Euros

$ USD

Currency Base Year

2013

Refine Results

Update Search

Table Data

Label goes here

Ending Quarter 3

Download Excel Print PDF

Download Excel Print PDF

@toddmoy

@hellokv

@Twitter

@elliottmunoz

Moy

Vigneault

Last Name

Muñoz

Kevin

Todd

Elliott

First Name

3

2

1

#

Date

Download latestMacro-economic Data (.xls)

Global

By Region By Country2009

Start year

Range of yearsSingle year

2013

End Year

Page 48: Wireframing Smarter (BADcamp 2014)

Sketch

bohemiancoding.com/sketch

Page 49: Wireframing Smarter (BADcamp 2014)
Page 50: Wireframing Smarter (BADcamp 2014)
Page 51: Wireframing Smarter (BADcamp 2014)

Other Software

Axure

LucidChart

Balsamiq

Visio

Keynote

InDesign

Fireworks

IllustratorHotGloo

Pencil

FlairBuilder

A napkin Sketch

Page 52: Wireframing Smarter (BADcamp 2014)

✓ Paper is important✓ Keep it simple.✓ Your wireframes should be ruggedly functional✓ Minimize your color palette✓ Use color to communicate functionality✓ Don’t be afraid to use placeholder copy✓ Maybe try out Sketch on your next project?

Page 53: Wireframing Smarter (BADcamp 2014)
Page 54: Wireframing Smarter (BADcamp 2014)

Privacy Policy Newsletter Careers CreditsLinkedIn FB Twitter G+ Flickr

Our content analysis and research process lets us create custom websites that are tailored to your workflow and resources.

Strategy

Chapter Three AboutWorkServices Blog Contact

We love wrestling with complex problems. Our custom development projects enable us to push boundaries and grow Drupal.

DevelopmentWe integrate beautiful design with strategic functionality, creating dynamic projects that work well and look stunning.

Design

Services

Customized training gives our clients the skills and resources to thrive after launch and make the most of their Drupal site.

TrainingWe provide three levels of support to provide maximum flexibility in coverage for your Drupal site

Support

Some key messaging goes here that should be no more than two lines long.

“Chapter Three has been a great collaborative partner. They listen and understand our needs. They go above and beyond on a regular basis and are always a pleasure to work with.”

John Kealy, UCSF

Key CTA

Privacy Policy Newsletter Careers CreditsLinkedIn FB Twitter G+ Flickr

One line summary of this service that’s concise and gets you all pumped up.

Research

Chapter Three AboutWorkServices Blog Contact

StrategySome key messaging goes here that should be no more than two lines long.

One line summary of this service that’s concise and gets you all pumped up.

Goals

One line summary of this service that’s concise and gets you all pumped up.

Personas

One line summary of this service that’s concise and gets you all pumped up.

Page Tables

One line summary of this service that’s concise and gets you all pumped up.

Content Modeling

One line summary of this service that’s concise and gets you all pumped up.

Mobile Strategy

One line summary of this service that’s concise and gets you all pumped up.

Ongoing Content Management

TrainingSupportDevelopmentDesign

More Services

+x

+++++

We begin every project by defining objectives through business and site maintenance lenses. These goals guide the project and inform all decisions. We help you define Key Performance Indicators (KPIs) to measure the success of your website after launch.

Link to related blog postLink to related case studyLink to related miscellaneous page

Related

Blog

TopicsAnnouncementsCase StudyContent StrategyDesignDevelopmentDrupalEventsHow toMobilePresentationThemingUser ExperienceVideos

Chapter Three AboutWorkServices Blog Contact

Privacy Policy Newsletter Careers CreditsLinkedIn FB Twitter G+ Flickr

This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

Title of blog post goes here

Author Name

June 17, 2013

This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

Title of blog post goes here

Author Name

June 17, 2013

This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

Title of blog post goes here

Author Name

June 17, 2013

This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

Title of blog post goes here

Author Name

June 17, 2013

This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

Title of blog post goes here

Author Name

June 17, 2013

This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

Title of blog post goes here

Author Name

June 17, 2013

2 3 65 ... 2241 Next21

This would be the snippet preview of the article that could either be set manually or defined automatically by the first paragraph of the body or a character/word count. Probably not more than three lines or so for this list view.

Title of blog post goes here

Author Name

June 17, 2013

Title of the blog post goes here

Chapter Three AboutWorkServices Blog Contact

Privacy Policy Newsletter Careers CreditsLinkedIn FB Twitter G+ Flickr

Comments

John SmithFri, 08/05/2011 - 16:51Permalink

Comment title one

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

delete edit reply

John SmithFri, 11/05/2011 - 12:23Permalink

Reply title one

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

reply

Jane DoeFri, 08/05/2011 - 18:51Permalink

Comment title two

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Log in or register to post comments

Add new comment

Your name John Smith

Subject

Comment *

Save Preview

Filtered HTMLText format

• Web page addresses and e-mail addresses turn into links automatically.• Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>• Lines and paragraphs break automatically.

More information about text formats

Cauliflower radicchio bunya nuts broccoli rabe quandong collard greens coriander. Coriander mustard summer purslane dandelion daikon squash collard greens tatsoi peanut. Beet greens watercress artichoke epazote swiss chard daikon maize chickpea napa cabbage jícama kakadu plum bamboo shoot cucumber gourd water spinach endive desert raisin cress.

Melon watercress arugula coriander leek beet greens napa cabbage catsear soko potato tomato dandelion mung bean corn prairie turnip. Eggplant arugula pumpkin groundnut avocado chickweed courgette radicchio tomato water spinach burdock watercress. Courgette beet greens burdock summer purslane chickweed squash radicchio daikon welsh onion desert raisin epazote bitterleaf courgette spinach gourd. Summer purslane mung bean wakame beetroot zucchini soko fennel gourd scallion tomato napa cabbage azuki bean groundnut squash catsear kombu green bean parsley. Broccoli lettuce scallion carrot spring onion nori prairie turnip courgette asparagus bunya nuts onion.

Nica LorberJob Title Goes Here

Topics: Announcements, Drupal, Presentation

Beet greens pumpkin seakale black-eyed pea wattle seed aubergine soybean water chestnut ricebean maize. Shallot chickpea bitterleaf spinach silver beet chickweed kombu fennel. Yarrow parsley pea amaranth bell pepper kale caulie soybean pumpkin.

Napa cabbage gourd welsh onion shallot taro swiss chard cucumber potato watercress garbanzo desert raisin melon avocado bamboo shoot water spinach radish kakadu plum tatsoi. Silver beet peanut celery swiss chard seakale kombu garlic chard water chestnut desert raisin salsify sweet pepper pea avocado. Seakale green bean cucumber asparagus chickweed artichoke wakame black-eyed pea rutabaga daikon welsh onion bunya nuts radicchio watercress bush tomato komatsuna.

Turnip bell pepper sorrel maize silver beet coriander rock melon wakame spinach lentil spring onion gourd. Parsley wakame radish bunya nuts cucumber peanut tatsoi broccoli rabe eggplant. Chickpea seakale tomatillo onion azuki bean welsh onion sorrel. Celtuce komatsuna green bean rutabaga dulse kohlrabi celery brussels sprout arugula water chestnut kakadu plum. Catsear corn groundnut onion catsear napa cabbage coriander collard greens brussels sprout tomatillo plantain gumbo endive.

Social Media Links

Related Content

Title of a related content blog postTitle of a related content blog postTitle of a related content blog post

June 17, 2013

Privacy Policy Newsletter Careers CreditsLinkedIn FB Twitter G+ Flickr

Chapter Three AboutWorkServices Blog Contact

Nunc eleifend ligula eros, sit amet pharetra ligula viverra eget. Cras ut scelerisque turpis. Ut eget purus tellus.

Nunc eleifend ligula eros, sit amet pharetra ligula viverra eget. Cras ut scelerisque turpis. Ut eget purus tellus.

Nunc eleifend ligula eros, sit amet pharetra ligula viverra eget. Cras ut scelerisque turpis. Ut eget purus tellus.

About

Some key messaging goes here that should be no more than two lines long.

See our values Drupal Give

Drupal is our DNA Here for you long termUnder one roof

FirstnameJob Title

FirstnameJob Title

FirstnameJob Title

FirstnameJob Title

FirstnameJob Title

Our Team

FirstnameJob Title

FirstnameJob Title

FirstnameJob Title

FirstnameJob Title

FirstnameJob Title

FirstnameJob Title

FirstnameJob Title

FirstnameJob Title

FirstnameJob Title

FirstnameJob Title

FirstnameJob Title

FirstnameJob Title

FirstnameJob Title

FirstnameJob Title

FirstnameJob Title

Filter: All Developers Designers Managers Board Sales

Page 55: Wireframing Smarter (BADcamp 2014)
Page 56: Wireframing Smarter (BADcamp 2014)
Page 57: Wireframing Smarter (BADcamp 2014)
Page 58: Wireframing Smarter (BADcamp 2014)

Chapter ThreeWireframing Template v2.0

tiny.cc/c3wireframetemplate! it’s free!

(with bonus Chapter Three v5.0 Wireframes!)

Page 59: Wireframing Smarter (BADcamp 2014)

chapter_three