Website building: purpose, navigation and identity, IDBM case.

When I got the task and had to build the website for IDBM program that would replace the old one (that was down at that moment) I was so excited and had a lot of fireball ideas and wanted to try all of them at the same time. 🙂

In reality I was not able to code anything but very simple html (now I’m a bit better and still learning the basics of coding), and of course my colleagues have had some sort of ideas what kind of website they would like to have (”We need a new website and it is quite urgent. “ :)). Continue reading

“We can’t design experiences. Experiences are reactions to the things we design.” Amen.

A very interesting and quite long reading about perspectives of digital design, homogeneity and patterns in a designing a user experience. There are a few quotations from it, something that grabbed my attention and resonate with my recent thoughts. You might find there something for you as well. Continue reading

24.06.15, Helsinki. /Material design/

From Flat design to Material design.

1. Material design is a design science. Article that introduce the main idea of Material Design.

2. Google introduction manual to the material design philosophy.

“We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design.”

Our materials are space, time, light and shadows.

Space. The material environment is a 3D space, which means all objects have x, y, and z dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the positive z-axis extending towards the viewer. Every sheet of material occupies a single position along the z-axis and has a standard 1dp thickness.  There are certain rules how this environment inside your mobile device is functioning, and all of those a natural extension to the surrounding.

Every command and every operation has its own depth scale in this 3D space and follows the common rules. Illustration of the elevation principle.

Light and shadow. Within the material environment, virtual lights illuminate the scene. Key lights create directional shadows, while ambient light creates soft shadows from all angles. Shadows in the material environment are cast by these two light sources. In Android development, shadows occur when light sources are blocked by sheets of material at various positions along the z-axis. On the web, shadows are depicted by manipulating the y-axis only. The following example shows the card with a height of 6dp.

Time is working as a connector between elements and create a smooth authentic motion while user’s browsing. Smooth and natural animation mechanics, connected to the physics theory and following the principles of reality around.

“Motion design can effectively guide the user’s attention in ways that both inform and delight. Use motion to smoothly transport users between navigational contexts, explain changes in the arrangement of elements on a screen, and reinforce element hierarchy.” Main ideas are visual continuity, hierarchical timing and consistent choreography.

And finally, colours.
“Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights. Material takes cues from contemporary architecture, road signs, pavement marking tape, and athletic courts. Color should be unexpected and vibrant.” Less is more. Or just enough.

Icons. Build and prototype.