VISTA

This website is bursting with vivid colours and gradients, surprising interactions and playful shapes. The goal was to inspire scientists of all ages and allow them to explore the vast diversity 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 to design a playful yet structured experience that made complex information engaging and accessible.

ROLE

I defined the UX and UI, created responsive layouts and established the visual direction. My focus was on merging a clear structure with creative elements to express the brand’s scientific precision in an approachable way.

IMPACT

The relaunch strengthened Vista’s digital identity, demonstrating how thoughtful UX design can transform 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