Design Think Studio

Blog

Thinking Adaptiveness in Various Scales

Google proposes a very interesting Feature for Android – Adaptive Icons. Analysing the feature various strategies can be outlined that allow us to enhance the digital experience of brands and interfaces. Here is what we discussed on a quick look:

Domains – Discuss Design Strategies & Thinking

  1. Brand Experience & Story Telling (adapt to context with contingency: vertical & horizontal) > Your interface and your content is not static – so is your Brand. How are modern brands built? Adaptive?
  2. Design Refinement & Design Adaption (multi Layering: content, mask, effects) > Think Design Principles made interactive – How to enhance the capabilities of design elements? 
  3. Application & Implementation Strategies (start simple but leave the gap adaptive) > Define the gap right – How to implement complex design systems in your development process?

Scale your Code – your Web Design and Code
(see also concepts like Atom Design...)

Rules – Design Guidelines: Google – Material Design + Adaptive Features
Is this the way Google thinks us to move forward on screen.

Subject – Holistic Approach on Adaptive Design: Story Depth – Scale – From Brand to Journey to Interaction Experience

Focus & Challenges – Be aware of slow loading, Too many or the wrong effects might affect the experience of your site, and might prolong the experienced loading time or responding time of interaction. How much effects can there be? Distraction?

Figure 1.  Adaptive icons support a variety of masks. (Google 2017)

Figure 1. Adaptive icons support a variety of masks. (Google 2017)

 

If brand experience demands a more adaptive experience not only through out different devices but also horizontally in a story we must think brands differently. Not only design needs to be structured differently but also the implementation of Corporate Design demands a different approach. Basically we must think brand elements rather in layers that

This is particularly interesting because it points to were design in the digital age is going. What are the overarching principles of such a feature? To discuss the principles might be helpful to understand digital products and brands better. What strategical thinking comes with it? 

Figure-Ground-Principles well done. This is one very nice examples how content and design elements should be outlined in the future. Layering an Icon (as proposed here by android) offers more angles to one (here the icon). This will probably be standard to refine digital experiences in the future. But it also means that you must think of one element as something that actually tells a story, or fits to different scenarios. It means to see one element such as an icon, as part of a story.

UX Strategy
vertically:
here Material Design (Respond to Interaction) > e.g. Shadows, Movement deepen the experience when the user pushes a button
+
horizontally:
Adaptive Design (contextual story telling) > the same thing appears different in different context.

This means also: Adaptiveness is not only about screen sizes and mobile devices. Same elements need to work in different context. But it also means that we must think corporate design and product design with the ability to adapt to different scenarios. This makes particularly sense for elements that interact (such as a button) or show a process (such as the loader/launcher icon).

Strategy: To implement adaptive content. Such as here the two layers. Use it as one version first. Then adapt and refine it when needed. 

Design Principles applied:

Figure-Ground Elements (two layers) as Content
+
Figure-Ground Form with Masks as the Container
+
Figure-Ground Transformation with visual Effect by a System

Link to article:
https://developer.android.com/preview/features/adaptive-icons.html

Figure 2.  Adaptive icons are defined using 2 layers and a mask. (Google 2017)

Figure 2. Adaptive icons are defined using 2 layers and a mask. (Google 2017)

Figure 3.  Adaptive icons support a variety of visual effects. (Google 2017)

Figure 3. Adaptive icons support a variety of visual effects. (Google 2017)

Mathias Krupna