How about responsive product design?
The responsive design is out of the product design, which
requires the engagement of product managers, interaction designers as well as
engineers. It’s of necessity for us to break the traditional way of thinking in
the design, shifting from the web to mobile applications. The first step is to
build a clear information architecture, then get the design started on the
smallest display of mobile devices with the abandon of interference so as to
ensure the best experience of the core function.
Meanwhile, the participation of interaction designers should
deal with the responsive design problems and the
issue of how to make the module much smaller and flexible. They also need to
confirm the design style and framework. For the developing engineers, their
responsibility is to make the test of coding and programming on the basis of
the completed project, taking full advantage of individual device’s
characteristics and building frame structure.
How does the interface design look like in the RWD?
Previously, most of the interface designs aim to the desktop
products, and there will be one single size with fixed location of each module.
But everything has changed in the responsive design. According to those
responsive web design tutorials on the web, it proves that designers need to
make multiple versions of design. A typical example is the module A which is
shown in a black background in the width of 1024px is shown in a white
background in the width of 768px.
Does the traditional media query breakpoints still go popular?
From the perspective of traditional design, it’s possible to
change the page layout through Media Query. For instance, we can change the
layout in a fixed width (that’s what we call breakpoint). The usual way of
thinking is to set breakpoints in accordance with some devices, such as
desktop, tablet and mobile phone. As a matter of fact, the media query
breakpoint is unreliable as the screen size will continue changing with the
development of technology.
But the responsive design shouldn’t be targeted only at some
devices with certain sizes, and there needs an interval value during the design
process, rather than a resolution corresponding to a device. Henceforth, it’s
necessary to make correspondent settings according to the content need. For
designers, they need to find a critical point – that is the value when the
visual effects start failing to meet the aesthetic of people or the acquisition
of content.
What are the differences between interaction design and RWD?
In the responsive design, it requires a comprehensive
consideration about the way of interaction, which is one of the responsive web
design key features. An excellent interaction designer
should not only consider the habits of desktop users, but also must take the
portable devices of different sizes into account. For instance, we’re used to
using the floating layer on PC, but it cannot be used on some devices of small
sizes. Also, some links of a small responsive area are not easy-to-operate by
fingers.
This requires designers to seek common ground while
reserving differences. For example, they can decide whether to use floating
layer, increase the operating area and keep unified or not, on the basis of
screen size. To ease the process of design, we’d like to recommend a
simple-yet-powerful prototyping tool – Mockplus. It enables rapid prototyping
and highly-visualized interactions with the simple drag-and-drop option.
In Conclusion
Above are the responsive
web design guidelines for product design, interface design, media query
breakpoints and interaction process. Hopefully, you can find it helpful, and
you can also learn about the difference between responsive and adaptive
design.
%20in%20India.png)
