CREATING VISUAL SYSTEM
Anurag Basak
WHAT IS A VISUAL DESIGN SYSTEM?
• A visual identity system is a collection of design software, templates,
colour palettes, type kits, icons, logos, and images the design
department uses under a single brand.
• Visual identity systems ensure universally consistent graphics for a
brand's digital and physical presence.
• Creating a visual identity is crucial to developing a holistic brand
identity - which encompasses both visual and non-visual elements.
• It is a collection of reusable components, guided by clear standards,
that can be assembled together to build any number of applications.
BENEFITS OF A VISUAL SYSTEM
• Increases design consistency across teams (e.g. graphic, video,
development, etc.)
• Improves cohesiveness from design to design
• Shapes brand perception
• Decreases onboarding time of new designers
• Speeds up the design process with reusable elements
HOW TO BUILD A VISUAL SYSTEM?
• Build your components:
Start by building a catalogue of reusable components. This includes patterns,
colours, text styles, icons, and grid systems.
• Establish your design principles:
Decide about the principles of design which you will emphasise within your visual
system.
• Choose your colour palette:
Decide on primary colours, naming conventions, and the system for building
primary, secondary, and accent colours.
• Decide on typography:
Choose the typefaces, sizes, scale, spacing, and leading you to want to use across
all of your brand touch products (e.g., website, web apps, print materials, emails,
etc.)
HOW TO BUILD A VISUAL SYSTEM?
• Standardise other style properties :
It’s important to standardise other style properties such as white space and
grid styles. Standardisation in this situation means eliminating
inconsistencies.
• Build one design pattern at a time:
With the foundation built, it’s time to compile a handful of patterns to
demonstrate how your components work together.
• Analyse your progress:
Run a test run to analyse progress and make necessary improvements. Test
runs, trials and soft launches can ensure quick learning across the entire
team.
DIFFERENCE BETWEEN A DESIGN SYSTEM AND
A STYLE GUIDE OR PATTERN LIBRARY
• DESIGN SYSTEM
Understanding not only the WHAT but the WHY, behind the design of a
system is critical to creating an exceptional user experience. Defining
and adhering to standards is how we create that understanding.
• STYLE GUIDE OR PATTERN LIBRARY
It is a library or collection of design assets that guide the designers
across a group or company to use in their designs for the same brand.
They should apply these elements according to the Visual system of the
brand.
FEW EXAMPLES OF VISUAL
DESIGN SYSTEM
Apple Grid System across all platforms.
CASE STUDIES: Airbnb
The company has a clear mission that drives all of its decisions: To help build a world where
everyone on earth can feel like they belong anywhere. Applying this to Airbnb’s visual system
meant designing for trust and designing for everyone.
The resulting visual system is bright, bold and inspiring, grounded on four key principles:
• Unified: Each piece is part of a greater whole and should contribute positively to the system at
scale.
• Universal: Airbnb is used by a global community, and products and visual language should be
welcoming and accessible.
• Iconic: The work should speak boldly and clearly.
• Conversational: The use of motion breathes life into products and allows Airbnb to communicate
with users in easily understood ways.
Prior to beginning the design sprint, a basic style guide, called the foundation is created. This foundation
loosely defined the typography, colours, icons, spacing and information architecture.
Each component is defined by its required elements (such as title, text, icon and picture), and may sometimes
contain optional elements.
Each component is defined by its required elements (such as title, text, icon and picture), and may sometimes
contain optional elements.
These artboards were then organized by general category into: Navigation, Marquees, Content, Image and
Speciality.
One set of these components is created for phones (iOS and Android) and adapted to tablet sizes from there. Tablet
components are largely the same as those for mobile, and on a technical level, the code only needs to exist once in two
different styles. Designers can then design a screen once using common components, and it can be easily adapted to
different screen sizes as well as to iOS and Android.
CASE STUDY: IBM
“Build Bonds.” This is the guiding ethos behind IBM’s design philosophy and principles,
helping the company distinguish every element and every experience. Bold hues and
brilliant geometric patterns to expressive motion help to capture users’ attention.
The following four design principles guide every IBM experience:
• Carefully considered: design is an exercise of decision-making – experience, judgment,
responsibility and timing.
• Uniquely unified: in order to guide, continuity and creativity must co-exist in design.
• Expertly executed: everything communicates, both the things we do and the things we
don’t do.
• Positively progressive: to guide is to lead.
The colour palette expands on their unique aesthetic and
represents a contemporary and ever-changing IBM. Balancing
mankind and machines, the colours are harmonious with
nature, yet chosen for their luminous quality in the digital
world.
Reportage: Working world
The bulk of the photography IBM uses is lifestyle,
cinematic and colourful. Their approach is editorial,
like documentary filmmaking or journalism. The result
is images that feel like frames from a film, active and
moving in their portrayal of our role in society.
Portraiture: Progress partners
The approach of portraiture in IBM is democratic. They
never invest more or less photographically based on
stature or status, but rather with equal skill and high
standards. This demonstration is another statement of
emphasis on forward thinkers.
Still-life: Exhibiting excellence
Still-life photography is best suited for celebrating the
beauty and creativity of things, showing how things
work, conveying concepts and displaying details. IBM
try to objectify the idea or item so that it can be
appreciated for its authenticity. This approach is
primarily used when presenting hardware or software
products, but can also be a creative way to convey
concepts that aren’t easily rendered in real life.
EXAMPLES OF A VISUAL SYSTEM
IN AN ART EXHIBITION
Prussian Blue: A Serendipitous Colour that Altered the Trajectory of Art
It is a survey exhibition of nineteen artists exploring their engagement with the colour Prussian Blue. This invitation is extended
to the artist to explore, investigate, and engage with the colour in their own unique and individual manner.
THANK YOU.
