‘‘
Designing Elina Svitolina’s website project was a perfect experience. A chance to create emotions for the user through design
‘‘
Designing Elina Svitolina’s website project was a perfect experience. A chance to create emotions for the user through design
‘‘
Designing Elina Svitolina’s website project was a perfect experience. A chance to create emotions for the user through design
VISUAL
VISUAL
VISUAL
VISUAL
[ 06 / 07 ]
[ 06 / 07 ]
As mentioned earlier, the colour palette is inspired by clay courts which Elina’s preferred surface. To complement these tones, I chose warm, light colours for the body text to ensure readability and harmony.
To add depth and contrast, I used a dark background, allowing the clay-inspired colours to stand out reflecting a tennis-related atmosphere.
For typography, I selected the Oswald font to bring a bold, athletic feel that aligns with the overall theme.
As mentioned earlier, the colour palette is inspired by clay courts which Elina’s preferred surface. To complement these tones, I chose warm, light colours for the body text to ensure readability and harmony.
To add depth and contrast, I used a dark background, allowing the clay-inspired colours to stand out reflecting a tennis-related atmosphere.
For typography, I selected the Oswald font to bring a bold, athletic feel that aligns with the overall theme.
COLOURS
COLOURS
COLOURS
#000000
#000000
#000000
#F5E1C8
#F5E1C8
#F5E1C8
#D2691E
#D2691E
#D2691E
#FFFFFF
#FFFFFF
#FFFFFF
TYPOGRAPHY
TYPOGRAPHY
TYPOGRAPHY
OSWALD
OSWALD
[ headlines ]
[ headlines ]
Helvetica Neue
Helvetica Neue
[ body text ]
[ body text ]
MOBILE ADAPTATION
MOBILE ADAPTATION
MOBILE ADAPTATION
MOBILE ADAPTATION
[ 05 / 07 ]
[ 05 / 07 ]
The main goal of the mobile adaptation was to preserve all blocks and keep the storytelling equally engaging.
Some elements, like the "Match Locations" block, depend on hover interactions, which don’t work on mobile. So, I decided to adapt it by showing the information about the country on tap instead.
While most blocks adapted easily, this one required a more thoughtful solution to support usability.
The main goal of the mobile adaptation was to preserve all blocks and keep the storytelling equally engaging.
Some elements, like the "Match Locations" block, depend on hover interactions, which don’t work on mobile. So, I decided to adapt it by showing the information about the country on tap instead.
While most blocks adapted easily, this one required a more thoughtful solution to support usability.
BUT WHAT about mobile adaptation?
BUT WHAT about mobile adaptation?
BUT WHAT about mobile adaptation?
BUT WHAT about mobile adaptation?
KEY DESIGN DECISIONS
KEY DESIGN DECISIONS
KEY DESIGN DECISIONS
KEY DESIGN DECISIONS
The main task in this block was to make UX design usable as much as possible.
The main task in this block was to make UX design usable as much as possible.
[ 04 / 07 ]
[ 04 / 07 ]
The main task in this block was to make UX design usable as much as possible.
01
01
01
STORYTELLING
STORYTELLING
STORYTELLING
Since the project is personal and focused on Elina Svitolina, I explored her background and found that many tennis players start their careers as early as 5–7, facing many moments of struggle and perseverance.
This inspired me to use storytelling as the core of the design what help fans connect emotionally and admire her journey.
To avoid overwhelming users, I kept the narrative blocks minimal, highlighting only the most meaningful moments.
Since the project is personal and focused on Elina Svitolina, I explored her background and found that many tennis players start their careers as early as 5–7, facing many moments of struggle and perseverance.
This inspired me to use storytelling as the core of the design what help fans connect emotionally and admire her journey.
To avoid overwhelming users, I kept the narrative blocks minimal, highlighting only the most meaningful moments.
Since the project is personal and focused on Elina Svitolina, I explored her background and found that many tennis players start their careers as early as 5–7, facing many moments of struggle and perseverance.
This inspired me to use storytelling as the core of the design what help fans connect emotionally and admire her journey.
To avoid overwhelming users, I kept the narrative blocks minimal, highlighting only the most meaningful moments.
Since the project is personal and focused on Elina Svitolina, I explored her background and found that many tennis players start their careers as early as 5–7, facing many moments of struggle and perseverance.
This inspired me to use storytelling as the core of the design what help fans connect emotionally and admire her journey.
To avoid overwhelming users, I kept the narrative blocks minimal, highlighting only the most meaningful moments.
Since the project is personal and focused on Elina Svitolina, I explored her background and found that many tennis players start their careers as early as 5–7, facing many moments of struggle and perseverance.
This inspired me to use storytelling as the core of the design what help fans connect emotionally and admire her journey.
To avoid overwhelming users, I kept the narrative blocks minimal, highlighting only the most meaningful moments.
02
02
02
NECESSARY INFORMATION
NECESSARY INFORMATION
NECESSARY INFORMATION
Storytelling is powerful, but I understand that many visitors come to Elina’s website for necessary information, such as upcoming matches, past results, her charity foundation, and more.
To support that need, I placed these key sections in the header and positioned them at the top of the page, before the personal story begins.
This way, users can quickly access what matters most without losing the emotional depth of the design.
Storytelling is powerful, but I understand that many visitors come to Elina’s website for necessary information, such as upcoming matches, past results, her charity foundation, and more.
To support that need, I placed these key sections in the header and positioned them at the top of the page, before the personal story begins.
This way, users can quickly access what matters most without losing the emotional depth of the design.
Storytelling is powerful, but I understand that many visitors come to Elina’s website for necessary information, such as upcoming matches, past results, her charity foundation, and more.
To support that need, I placed these key sections in the header and positioned them at the top of the page, before the personal story begins.
This way, users can quickly access what matters most without losing the emotional depth of the design.
Storytelling is powerful, but I understand that many visitors come to Elina’s website for necessary information, such as upcoming matches, past results, her charity foundation, and more.
To support that need, I placed these key sections in the header and positioned them at the top of the page, before the personal story begins.
This way, users can quickly access what matters most without losing the emotional depth of the design.
Storytelling is powerful, but I understand that many visitors come to Elina’s website for necessary information, such as upcoming matches, past results, her charity foundation, and more.
To support that need, I placed these key sections in the header and positioned them at the top of the page, before the personal story begins.
This way, users can quickly access what matters most without losing the emotional depth of the design.
03
03
03
VISUALS
VISUALS
VISUALS
The first screen features a video of Elina sharing her preference for clay courts, which inspired me to use a colour palette that reflects the tones of clay. (More on this in the Visual block)
Since fans often look for detailed information, I added an interactive map showing Elina’s match locations. Users can explore each event, view results, check opponents, and read more, making the experience both informative and engaging.
The first screen features a video of Elina sharing her preference for clay courts, which inspired me to use a colour palette that reflects the tones of clay. (More on this in the Visual block)
Since fans often look for detailed information, I added an interactive map showing Elina’s match locations. Users can explore each event, view results, check opponents, and read more, making the experience both informative and engaging.
The first screen features a video of Elina sharing her preference for
clay courts, which inspired me to use a colour palette that reflects the tones of clay. (More on this in the next block)
Since fans often look for detailed information, I added an interactive map showing Elina’s match locations. Users can explore each event, view results, check opponents, and read more — making the experience both informative and engaging.
The first screen features a video of Elina sharing her preference for clay courts, which inspired me to use a colour palette that reflects the tones of clay. (More on this in the Visual block)
Since fans often look for detailed information, I added an interactive map showing Elina’s match locations. Users can explore each event, view results, check opponents, and read more, making the experience both informative and engaging.
The first screen features a video of Elina sharing her preference for clay courts, which inspired me to use a colour palette that reflects the tones of clay. (More on this in the Visual block)
Since fans often look for detailed information, I added an interactive map showing Elina’s match locations. Users can explore each event, view results, check opponents, and read more, making the experience both informative and engaging.
‘‘
Once the problem and its solution are clearly defined, it’s time to translate key decisions into the design.
Let’s bring it to life.
‘‘
Once the problem and its solution are clearly defined, it’s time to translate key decisions into the design.
Let’s bring it to life.
‘‘
Once the problem and its solution are clearly defined, it’s time to translate key decisions into the design.
Let’s bring it to life.
WHAT I DID IN PROJECT
WHAT I DID IN PROJECT
WHAT I DID IN PROJECT
WHAT I DID IN PROJECT
[ 01 / 07 ]
[ 01 / 07 ]
I was involved in shaping UX structure, crafting UI, and ensuring responsive, consistent visuals
I was involved in shaping UX structure, crafting UI, and ensuring responsive, consistent visuals
01
01
Created Hi-Fi wireframes with strong storytelling
Created Hi-Fi wireframes with strong storytelling
01
Created Hi-Fi wireframes with strong storytelling
01
Created Hi-Fi wireframes with strong storytelling
02
02
Designed a responsive and emotionally engaging UI
Designed responsive and emotionally engaging UI
02
Designed a responsive and emotionally engaging UI
02
Designed a responsive and emotionally engaging UI
03
03
Structured user flow to highlight key information
Structured user flow to highlight key information
03
Structured user flow to highlight key information
03
Structured user flow to highlight key information
04
04
Designed a mobile version of the desktop layout
Designed a mobile version of the desktop layout
04
Designed a mobile version of the desktop layout
04
Designed a mobile version of the desktop layout
05
05
Applied consistent visuals using colour, type, and imagery
Applied consistent visuals using colour, type, and imagery
05
Applied consistent visuals using colour, type, and imagery
05
Applied consistent visuals using colour, type, and imagery
BUT WHAT WAS the PROBLEM?
BUT WHAT WAS the PROBLEM?
BUT WHAT WAS the PROBLEM?
BUT WHAT WAS the PROBLEM?
PROBLEM
PROBLEM
PROBLEM
PROBLEM
The goal was to redesign the website, and our briefing helped reveal the core issues
[ 02 / 07 ]
[ 02 / 07 ]
The goal was to redesign the website, and our briefing helped reveal the core issues
The goal was to redesign the website, and our briefing helped reveal the core issues
no website where fans can check any needed info about Elina
no website where fans can check any needed info about Elina
SOLUTION
SOLUTION
SOLUTION
SOLUTION
Here are the key actions I took to turn the website into a functional and user-friendly design
[ 03 / 07 ]
[ 03 / 07 ]
Here are the key actions I took to turn the website into a functional and user-friendly design
Here are the key actions I took to turn the website into a functional and user-friendly design
create design for the desktop and mobile versions
create design for the desktop and mobile versions
create well structured design highlighting key information
create well structured design highlighting key information
NAVIGATION
NAVIGATION
NAVIGATION
NAVIGATION
Due to the big amount of information in this project, I created a navigation, in which you can find the block you are interested in
Due to the big amount of information in this project, I created a navigation, in which you can find the block you are interested in
Due to the big amount of information in this project, I created a navigation, in which you can find the block you are interested in
Due to the big amount of information in this project, I created a navigation, in which you can find the block you are interested in
Elina Svitolina
Elina Svitolina
Elina Svitolina
[ website project]
Wave91 is a charitable foundation that strengthens Ukraine’s defense by delivering FPV drones to the frontlines and fostering civic engagement
WHAT I GOT FROM THE PROJECT
WHAT I GOT FROM THE PROJECT
WHAT I GOT FROM THE PROJECT
WHAT I GOT FROM THE PROJECT
Here are a few key insights I gained while designing the project website
Here are a few key insights I gained while designing the project website
[ 07 / 07 ]
it's essential to analyze the target audience before designing
it's essential to analyze the target audience before designing
mobile adaptation isn't just about replicating the desktop version; it's an opportunity to make the experience even better
mobile adaptation isn't just about replicating the desktop version; it's an opportunity to make the experience even better
UI design becomes truly impactful when it reflects the personality behind it
UI design becomes truly impactful when it reflects the personality behind it