Designing for the Mobile Web Workshop

#WCATL WORKSHOPDesigning for the Mobile Web

Brought to you by the folks at GreenMellen

WORKSHOP TIMELINE

1:00 - 1:50 PMPrioritizing Features for Responsive Websites

1:50 - 2:00 PM Intermission

2:00 - 2:50 PM Wireframing for Responsive Websites

#WCATLDesigning for the Mobile Web

PART 1Prioritizing Features

for Responsive Websites

WHAT ARE MOBILE RESPONSIVE WEBSITES?


RESPONSIVE DESIGN IS...

when you resize your browser windowand the website does this cool thingwhere it changes the layout


Fluid grid, flexible images, and media queries


MOBILE RESPONSIVE WEBSITES

MOBILE320px, 480px

TABLET600px, 768px

DESKTOP900px, 1200px

WEBSITE STRATEGY PROCESS


Set Goals InformationArchitecture

Determine Features

Content Strategy

ACTIVITY 1

Feature Prioritization

Find a team


Your Challenge

A client has approached you with an idea for an interactive recipe website: a platform that allows friends to submit

and share their favorite recipes with each other.


Your Challenge

Your team has $100 to spend on design and development for your client’s recipe website.

With your team, figure out how you want to spend your money. Which features do you want to support, and on

which devices? Why did you make those choices?

Debate which features have the most value for your users.

Choose a constraint and identify tradeoffs.

“It’s not just what it looks like and feels like.

Design is how it works.Steve Jobs

Time to share!

See you at 2:00!

Great job!

#WCATL WORKSHOPDesigning for the Mobile Web

Brought to you by the folks at GreenMellen

PART 2Wireframing for

Responsive Websites


WHAT IS WIREFRAMING?



MOBILE320px, 480px

TABLET600px, 768px

DESKTOP900px, 1200px

ACTIVITY 2

ResponsiveWireframing

Get back with your team

Your Challenge

A client has approached you with an idea for an interactive recipe website: a platform that allows friends to submit

and share their favorite recipes with each other.


Using your feature prioritization from Activity 1, create a design for the homepage of your client’s recipe website.

You have 20 minutes to create this design for browsers on desktop, tablet, and smartphone.

Block off where you think features will go on ALL the devices before you start sketching.

Your Challenge


EXAMPLE SKETCHES

“When good design is used, you don’t know it’s

there. It’s simply intuitive.Katie Dill :: Director of Experience

Design at Air B&B

WIREFRAMING TOOLS


WIREFRAMING > DEVELOPMENT


Don’t forget about theviewport sizes in between

Adjust your typography

Test, test, and test again

QUESTIONS?@alitaylorgreen@ashlealanier

Designing for the Mobile Web Workshop

Design

Transcript of Designing for the Mobile Web Workshop