Project’s goal.
Developing the visual identity and flagship digital presence for a modern cultural brand. The project involved three strategic phases: brand/design system creation, flagship homepage architecture, and high-fidelity prototyping.
1__Design System.
The brand.
The design system process started by creating the ficticious brand, its purpose and visual design associated with it. The brand is called “The Balancing Museum”.
1__Design System.
Brand usage.
A branding system with variable principles was designed to translate the visual purpose into an actionable brand voice.
1__Design System.
Symbol imagery.
These were created to complete brand personality and visual behavior.
1__Design System.
Color.
Color elements and values were created. Resulting in three primary colors, three secondary, two semantic and five neutrals.
1__Design System.
Typography.
Two fonts were selected to represent the brand. The fonts are Anek Odia (Medium), and Myanmar Sans Pro (Regular).
1__Design System.
Grid.
The grid created for the desktop version of the digital product (web site) has the following specs: Dimensions: 1440x1024px; margin: 96px; gutter: 24px; column: 82px.
1__Design System.
Spacing.
Seven main space structures were created to help organize information and content within the product.
1__Design System.
Icons.
Icons were designed from scratch. They were given four sizes behaviors, and two main versions (Outlined and Filled).
1__Design System.
Components.
Main components were designed to be able to complete the UI design process. The components included in the product are: buttons, input text, text area, select, checkbox and radio. All of them include their different states.
2__Web Design.
Web site (Home).
The homepage of the web site of the museum was designed using visual elements included in the design system. The home has four sections, with a scroll navigation system.
Results.
Hi-Fi Prototype.
A Hi-Fi prototype of the homepage was designed including main functional interactions.
