Vista

This website is bursting with vivid colours, gradients, surprising interactions and playful shapes. It was made to inspire scientists of all ages to explore the wide range of workshops, events and exhibitions on offer.

ROLE

UX Concepting

UI Design

Screen Layout

Responsive Design

Design Systems

Creative Direction

COMPANY

Vista

CREATION

2022

LINK

Offline

CHALLENGE

Vista required a bold and modern website to communicate its scientific expertise and innovative spirit. The goal was a playful yet structured experience that made complex information accessible.

ROLE

I defined the UX and UI, created responsive layouts and set the visual direction. I focused on merging a clear structure with creative elements to express the brand’s scientific precision in a friendly way.

IMPACT

The relaunch strengthened Vista’s digital identity and demonstrated how thoughtful UX design can turn complex scientific content into an interactive experience.

60+

Screen designs

for desktop and mobile

+12%

Average monthly

growth in sessions

300+

Icons, illustrations

and UI elements

Project Overview  88 Responsive Screens  2 Breakpoints
→ Project Overview → 88 Responsive Screens → 2 BreakpointsScroll ↓
Colours
→ Colours
Gradients
→ Gradients
Typography
→ Typography
Illustrations
→ Illustrations
→ Vista → Startpage → Viewport → DesktopClick toplay/pause
Mobile
→ Mobile
Vista  Startpage  Modules #1
→ Vista → Startpage → Modules #1Scroll ↓
Mobile
→ MobileScroll ↓
Vista  Menu  Desktop
→ Vista → Menu → Desktop
Mobile
→ MobileScroll ↓
Vista  Startpage  Modules #2
→ Vista → Startpage → Modules #2Scroll ↓
Vista  Startpage  Modules #3
→ Vista → Startpage → Modules #3Scroll ↓
Vista  Startpage  Modules #4
→ Vista → Startpage → Modules #4Scroll ↓
→ Vista → Slider Transition → DesktopClick toplay/pause
Vista  Content Modules  Desktop
→ Vista → Content Modules → DesktopScroll ↓
Mobile
→ MobileScroll ↓
→ Vista → Hover Effect → DesktopClick toplay/pause
→ Vista → Hover Effect → DesktopClick toplay/pause
→ Vista → Hover Effect → DesktopClick toplay/pause
→ Vista → Hover Effect → DesktopClick toplay/pause
→ Vista → Hover Effect → DesktopClick toplay/pause
Vista  Page Example #1  Desktop
→ Vista → Page Example #1 → DesktopScroll ↓
Vista  Page Example #2  Desktop
→ Vista → Page Example #2 → DesktopScroll ↓
Vista  Page Example #3  Desktop
→ Vista → Page Example #3 → DesktopScroll ↓
Vista  Page Example #4  Desktop
→ Vista → Page Example #4 → DesktopScroll ↓
Vista  Page Example #5  Desktop
→ Vista → Page Example #5 → DesktopScroll ↓
UX/UI Project