Different devices showing a responsive view for a redesign I made as a practice for Banesco.

Responsive

“Create a family of designs with similar look and feel but appropriate for each device”.
Scott Klemmer.

Responsive

In this times of changing technology you can find all sort of devices: walls, watches and more. It’s time to know how to adapt design according to each project and target audience, but also we need to learn how to keep harmony and consistency.

Tips from Scott Klemmer:

Here are some tips to take in consideration when creating a Mock-ups for different form-factors (devices)

  • Why mobile first: More ability to expand, more easy than contract
  • Start from the mock-up perspective, aiming to the main devices at the same time.
  • More frequent interactions should be more “visible” than less frequent interactions.
  • If there is extra information that is not so relevant to regular users, you can show in the end, Sample: Edition date.
  • Make larger/bolder/darker: elements that are important, frequently use o dynamically changed.
  • Make smaller/thiner/lighter: elements that are unimportant, rarely used, or always the same.
  • Use color in combination with another signal to improve usability.
  • Highlight to show current context.
  • Colors are more than decorative.
  • Colors: Interactive, Non colors: means non interactive.
  • Large bars draw too much attention, event subconsciously, be carefully.
  • Red means “danger”, do not use for informative text.
  • Use space wisely.

Note: As an extra recommendation from me… keep always in mind the Heuristic principles of Nielsen.

Coursera’s Assignment

For this particular assignment we were asked to “create a family of three related form-factor designs: phone, tablet, and laptop”

Here are the sizes:

  • phone: 480 px (4″) w × 720 px (6″) h
  • tablet: 768 px (6″) w × 1024 px (8″) h
  • laptop: 1200 px (10″) w × 800 px (7″) h

We were welcome to use any software, but if you happen to have a MAC I do recommend using Sketch.

I particularly use Inkscape + gimp (If you are in windows you can use Ilustrator + Photoshop). If you are having trouble with this software you can even use Power point or keynote.

Submission

Write two common tasks for each device, 1-2 sentences each, that a good interface would enable users to accomplish well. These can be the same ones you created for the previous assignment, or they can be different.

Three PDF files: one for the phone, one for the tablet, one for the laptop.

My submission

All the steps showing the User Interface before my suggestion, then the wire-frame, and the final Mockup with colors.
All the steps showing the User Interface before my suggestion, then the wire-frame, and the final Mockup with colors.

In my particular experience, this took more time because I decided to work with “Banesco online” instead of “twitter” ([my wireframe assignment][wireframingblog]). I have to start all over again from wire-frames. One thing that actually helped me was to quickly draw the interface on paper first and then proceed to wireframes and Mock-ups.

Wearable mockup
Wearable mockup
Desktop Mockup
Desktop Mockup
Different devices showing a responsive view for a redesign I made as a practice for Banesco.
Final Mockups mobile, tablet and desktop

If you want to check my submission, here are the mock-ups I sent to this assignment:
Cellphone Mock-up: Banesco Online Cellphone sample
Laptop Mock-up: Banesco Online Latop sample
Tablet Mock-up: Banesco Online Tablet sample

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial 4.0 Internacional.

Part of this material is based on Coursera’s Interaction Design Specialization

Update
This is now (2022) consider an old practice, front-end developers now talk more about adaptive design More information here: What is Adaptive Design? | Interaction Design Foundation (IxDF) (interaction-design.org)

Related Posts