(02) Overview

(01) Intro

(05) Outro

(01)

Intro

(02)

Project Overview

Case study of a landing page that showcases Eames chairs. Project consists of interactive layouts that correspond with iconic designs creating a pleasant and harmonious experience.

Software

Figma Principle Photoshop Illustrator After Effects

Scope of work

UI/UX Design Motion Design Interaction Design Prototyping

Responsibility

Design of desktop and mobile layouts, components and design system. Development of interactive prototype, animations and mockups.

Contributors

3D animations of Eames chairs were developed by Lush 3D under the creative direction of Tom Biskup.

(03)

Design System

Typography


Typeface

Helvetica Neue

Regular / Bold

Colours

Main

Palette


Primary

Secondary

Grids


Type

Column

Desktop: 12 col

Mobile: 2 col

(04)

User Interface

Design Process


Results and Achievements

I tested responsive and interactive layouts with animation triggered on page scroll. I presented the product in an attractive way based on the current trends and personal creative direction.

Desktop

I started by designing the desktop layouts, creating a short sequence that leads to the product sales page. I found the right balance between showcasing the product in an intriguing way and presenting all the information in the form of a structured design.

Mobile

The product selection page consists of an interactive layout that allows dragging the 3D model of the Eames chair and rotating it in different directions.

Mobile

The landing page consists of the product’s animations that are triggered on page scroll. Transitions used in this prototype are parallax and delay. I paid great attention to optimizing the easing and timing.


Key Takeaways

I learned how to design mobile and desktop interactions triggered by various user actions. I had a chance to work with high-quality content and developed consistent branding and a design system.

malekalicja@gmail.com

© 2024 Alicja Malek

Previous
Previous

Neua Web

Next
Next

Dance School