Design Language Purity

Design language

Travel reimagined

2017 - Defining HomeAway's Design language & Design System

Design language is the way brands and products are communicating with customers through experience. It’s a holistic living system. Design language is built upon design principles, design system, motion, sound, interaction, words, layouts, platforms. Design language saves you from chaos.

 

What Design Language consist of?

  • Design principles
  • Brand Identity
    • Brand story
    • Brand logo
    • Brand app icon 
  • Visual system
    • Colors
    • Typography
    • Grid
    • Spacing
    • Visual hierarchy
    • Icons
    • Images
  • Components
    • Simple components
    • Component groups
    • Complex components
  • Layout & structure
  • Interaction guide
  • Product content
    • Voice & Tone
    • Mechanics
    • Terminology
    • Accessibility & inclusion
  • Motion
  • Sound
  • Video & photo
  • Research

Design principles

Anticipation-full &  friction-less

Why design language needs design principles? They define and communicate the key characteristics of the product & experience we're building. Design principles articulate the fundamental goals we have. Our decisions can be run through those as a filter and help keep our experience, moving toward a holistic whole. Principles answer the question.

Purity

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

Soul

Soul is authenticity. It’s something you feel: the intangible spirit of a well-designed product. It's something that we all are primed to respond to. The way the words, visuals, and interactions combine into something beautiful, impactful, and meaningful. 

Soul is authenticity. It’s something you feel: the intangible spirit of a well-designed product. It's something that we all are primed to respond to. The way the words, visuals, and interactions combine into something beautiful, impactful, and meaningful. 

Humanity

Humanity is a choice. Having humanity means to value people above all else. It's identifying human needs and emotions, as well as designing and solving for them breaking old way of doing things. Humanity is about giving power to the people so they could do what they were unable to before. 

Tune

Tune is contextual awareness: using data and insights to close the gap between people and experiences. It’s about understanding the customer’s context and adapting our work to fit. Through testing and refinement, we can tune our designs to support any situation.

Color as a sharable element

Set the foundation. Scale it.

Color can say a lot, it's used for various need throughout the experience. While we already know that there are primary, secondary, tertiary, and accent colors it's often hard to make one single element shareable for a hundred-people team. There are many formats used within the same organization and very often as a designer, I want to have an easy way sharing a snippet of code in LESS, HEX, RGBA. For this purpose, I've designed a component as a part of internal design language website shareable component that allows you to simply copy the color with the desired format.

A brand needs voice, motion, color, pattern, interaction foundation in order to scale fast and at a high level of quality. To preserve craft and move fast you need design system.

Color interaction

Type & vertical rythm

Set the foundation. Scale it.

Historically designers would share specs for typography or it's neighboring element below by providing measurement between type baseline and top of an element below. The problem I had with this approach and I've seen others struggle is that browser does not render type this way and it changes the vertical rhythm that I established throughout all elements to make sure it's consistent. So I got together with Design Technologist to run a little test and find out what is actually going on and how can I communicate specs regarding type in a better way. 

A brand needs voice, motion, color, pattern, interaction foundation in order to scale fast and at a high level of quality. To preserve craft and move fast you need design system.

Type

Why this is important?

Set the foundation. Scale it.

When type and other visual elements come together they create an experience that can be easy to scan and understand or it could be completely broken. Gestalt is highlighting a lot an importance fo neighboring elements and it's proximity. In all cases, a design should be tactical, or at least the creator of that experience should try to make it tactical. The goal is to help people read and understand the content by leveraging proximity rules and vertical rhythm defined as a part of a design system.

A brand needs voice, motion, color, pattern, interaction foundation in order to scale fast and at a high level of quality. To preserve craft and move fast you need design system.

Default
Active_Vertical
Desktop HD