Design a responsive page using smart UX components.

Please note: this is not an introductory course on responsive design. Some prior knowledge of responsive design and UX is recommended, which you can access here:

Design for Every Device: Responsive Web Design with Spencer Schimel
Responsive Web Design: Learn to Design a Responsive Landing Page with John Ashenden

____________________________

INTRODUCTION

Today we're going to design a responsive web article using a series of smart components.

Learning a few interesting patterns is one thing, but applying them to your project is another thing entirely. Sometimes components might not fit well together, because they don't work well within a given context. You can't just design a responsive table in one place, responsive navigation in another, and responsive typography in a yet another and then just pull everything together and call it a design.

Design needs a big picture, a series of refinements, a series of dead ends and discoveries and "aha" moments when everything feels just right. The trickiest part is to put all these components together, usually building a prototype mobile-first, and more specifically, finding which solution works best for a given use-case.

And that's exactly what the project is all about. I'd like to encourage you to design a responsive art-directed article using components like:

stunning typography
sidenotes
pull quotes
a table
a lightbox
a map
a calendar
a chart
an embedded video
a web form

...and any of the other components I go over in the class.

You don't have to use all of the components, of course, but try to incorporate 3-5 of them into your finished article design.

____________________________

ASSIGNMENT

So your task is to design (or redesign) an art-directed article — similar to Design Machines — then share it in the Project Gallery for feedback.

The Design Machines article is helpful because it has so many components for you to manipulate, but you could also choose one of your own, or create one from scratch!

By going through the sections of the class, you will learn a few ways of making modules of the page responsive. So if you could extract the meaning of the article, and look only into the content, and not layout, how would the modules on the page behave in a responsive way?

935c76a8

Think about the components alone first, and then how they fit together, and perhaps establish rules on how they should fit together.

Next, here's your roadmap:

Study the article closely first, and identify responsive behaviors different modules have on the page.
Think about how you could change the behavior of the components, or improve it — think creatively — come up with something that's never been done before!

If you have a technical background, think about combining technologies such as Flexbox, vh/vw units, perhaps Service workers and responsive illustrations via SVG. And if you are a visual person, how would the components change to best accommodate for different form factors — think about mobile as well as TV, think about portrait orientation as well as landscape orientation. Get creative!
Start reassembling the components and/or adjusting them — visually in Photoshop or Sketch, or in HTML/CSS (see attached documents).
Redesign and rebuild, but most importantly, play! Try out something you've never done before. Don't worry about browser support at this point — it's an exercise in using design patterns creatively!
Submit your ideas, thoughts or proposal for review in the Project Gallery, and iterate!

____________________________

COMPONENTS

Your components lie ahead of you (see attached PDF at the bottom of this page):

10a269c4

What responsive behavior should each of them have, and why?

If you are a visual person, you could actually redesign the entire article from scratch; if you feel at home with CSS and JavaScript, you could rebuild the responsive behavior of the components and use the same visual design, just behaving differently.

____________________________

DELIVERABLE

Your completed project could include:

Description. A [short] explanation outlining the idea/vision behind the design — whether visually, or layout-wise; perhaps it would be a good idea to play with crazy art-directed features and do something entirely different?
Sketches or mockups. Any quick low-fidelity sketches or designs — no need to design a fully-fledged Photoshop/Sketch mockup (unless you'd like to, of course!)
A working prototype. An HTML/CSS/JavaScript prototype — imagery isn't important, but the responsive behavior of the components is; a link to the HTML/CSS/JavaScript prototype for review would be enough.

____________________________

RESOURCES

Links

Tools

Photoshop, Sketch or even a napkin! Ideas matter more than implementation.
Patternlab
Styleguide and Boilerplate Patterns Spreadsheet

Good luck — and as promised, this is going to be quite a journey! ;-)

Vitaly Friedman

Editor-in-chief, Smashing Magazine

4,025

1