(01)
Intro
(02)
Project Overview
Case study of a web page of a dance studio. The project consists of interactive layouts. Animated branding refers to the subtlety of dance and ephemerality of movement. Several flows were developed: Intro, Home, Schedule, Memberships and Teachers.
Software
Figma
Principle
Photoshop
After Effects
Scope of work
UI Design
Motion Design
Interaction Design
Brand Design
Art Direction
Responsibility
Design of desktop layouts, branding, interactive components. Development of prototypes, animations and mockups.
(03)
Design System
Typography
ES Build/ GT Ultra Median
Typeface
Regular / Bold
Colours
Main
Palette
Primary
Secondary
Grids
Type
Column
Modular system
Supports interactive and moving elements of the design. Pages slide in and out like tabs in a catalog. Thanks to that website seems to get a third dimension (depth).
(04)
User Interface
Design Process
Results and Achievements
I explored alternatives to a standard home page design and proposed layouts that give an impression of dimensionality.
Schedule page
While switching between the daily and weekly schedule, deactivated cards are scaled-down and then moved to the bottom of the page. Meanwhile the selected option scales-up and appears on the screen, resembling the behavior of browsing and choosing real tabs.
Explore page
All available pages are easily accessible from the Explore page. The user journey is not only easy but also pleasant and entertaining thanks to the original design.
Intros
Animated design of a page’s intro. The masking circle reveals the following footage of various dances. It sets the tone for the further user experience on the website.
Key Takeaways
I experimented with layouts that aren’t designed conventionally. Even though in this case study I mostly focused on the interaction design and visual experience, I am still looking forward to expanding the design system.
malekalicja@gmail.com
© 2024 Alicja Malek