:root { --body-vw: 18vw; --body-px: 18px; --text-l-vw: 20vw; --text-l-px: 20px; --text-m-vw: 16vw; --text-m-px: 16px; --text-s-vw: 14vw; --text-s-px: 14px; --xxl-vw: 64vw; --xxl-px: 64px; --xl-vw: 56vw; --xl-px: 56px; --l-vw: 42vw; --l-px: 42px; --m-vw: 36vw; --m-px: 36px; --s-vw: 24vw; --s-px: 24px; --xs-vw: 20vw; --xs-px: 20px; } @media only screen and (min-width: 1440px) { body { font-size: calc((var(--body-vw)) / 1440 * 100); } .text-l { font-size: calc((var(--text-l-vw)) / 1440 * 100); } .text-m { font-size: calc((var(--text-m-vw)) / 1440 * 100); } .text-s { font-size: calc((var(--text-s-vw)) / 1440 * 100); } h1, .headline.xxl { font-size: calc((var(--xxl-vw)) / 1440 * 100); } h2, .headline.xl { font-size: calc((var(--xl-vw)) / 1440 * 100); } h3, .headline.l { font-size: calc((var(--l-vw)) / 1440 * 100); } h4, .headline.m { font-size: calc((var(--m-vw)) / 1440 * 100); } h5, .headline.s { font-size: calc((var(--s-vw)) / 1440 * 100); } h6, .headline.xs { font-size: calc((var(--xs-vw)) / 1440 * 100); } } @media only screen and (min-width: 1920px) { body { font-size: calc((var(--body-px)) * 1.3333); } .text-l { font-size: calc((var(--text-l-px)) * 1.3333); } .text-m { font-size: calc((var(--text-m-px)) * 1.3333); } .text-s { font-size: calc((var(--text-s-px)) * 1.3333); } h1, .headline.xxl { font-size: calc((var(--xxl-px)) * 1.3333); } h2, .headline.xl { font-size: calc((var(--xl-px)) * 1.3333); } h3, .headline.l { font-size: calc((var(--l-px)) * 1.3333); } h4, .headline.m { font-size: calc((var(--m-px)) * 1.3333); } h5, .headline.s { font-size: calc((var(--s-px)) * 1.3333); } h6, .headline.xs { font-size: calc((var(--xs-px)) * 1.3333); } }

spacely

A digital illustration of a planet made by me for the purposes of website design

spacely

A digital illustration of a planet made by me for the purposes of website design

spacely

A digital illustration of a planet made by me for the purposes of website design

spacely

A digital illustration of a planet made by me for the purposes of website design

spacely

A digital illustration of a planet made by me for the purposes of website design

spacely

A digital illustration of a planet made by me for the purposes of website design

spacely

A digital illustration of a planet made by me for the purposes of website design

spacely

A digital illustration of a planet made by me for the purposes of website design

spacely

A digital illustration of a planet made by me for the purposes of website design

spacely

A digital illustration of a planet made by me for the purposes of website design

spacely

A digital illustration of a planet made by me for the purposes of website design

spacely

A digital illustration of a planet made by me for the purposes of website design
new landing page for a platform for creators and their communities

UI DESIGN

WEB DESIGN

LIGHTPAPER

ILLUSTRATIONS

Spacely Landing Page Mockup - Streamlined Communication Hub. A dynamic mockup presenting revamped landing page, serving as a centralized communication platform tailored for Creators and their communities.
Check mark icon violet

Research

Check mark icon violet

Concept

Check mark icon violet

Wireframing

Check mark icon violet

Illustrations

Check mark icon violet

Ideation, UI Design

project
Spacely wanted to guarantee a seamless launch of their new platform. They needed a captivating token page with a visually engaging theme that blend with their existing style guide. The designs were made with Spacely’s motive and objective considered: space exploration and gamified education.
client
Spacely is a specialized platform that empowers creators to monetize their passions and foster thriving communities.
deliverables
web design
illustration
Spacely Landing Page Mockup - Streamlined Communication Hub. A dynamic mockup presenting revamped landing page, serving as a centralized communication platform tailored for Creators and their communities.
explorer and creator
Spacely's product consists of two paths, each of them offers a range of features tailored to user needs. To showcase these offerings on the website in an intuitive, simple way, we strategically presented distinct paths for users: Creator and Explorer.
process
I joined the UI process during the tokenomics page's concept phase and contributed until the final high-fidelity result, including social media publications. The client had a clear understanding of the page's elements but left the visual aspects open for interpretation.
Website design and development process illustrated on a scheme
Macbook mockup showcasing Spacely's community portal. This mockup emphasizes user-friendly features, cohesive branding, and interactive elements.
Gradient Green
We made conceptual and visual examples for illustrations and schemes infused with existing style guide elements. Following a structured iteration process led to a highly consistent outcome.
Mockup showcasing Spacely's community portal. This mockup emphasizes user-friendly features, cohesive branding, and interactive elements.
Mockup revealing the redesigned homepage and interactive diagram design, as a compelling visual of the company's data.
Mockup showcasing Spacely's community portal. This mockup emphasizes user-friendly features, cohesive branding, and interactive elements.
Gradient Purple
Our goal was to ensure complex information became easy to understand. The result is a simple, user-friendly graph illustrating token allocation. Looking ahead to the company’s future, this graph can be adjusted and updated as Spacely grows and adds further value.
Mockup showcasing Spacely's community portal. This mockup emphasizes user-friendly features, cohesive branding, and interactive elements.
spacemap
I bet you've never seen a roadmap like this before. Planets depict the company's milestones, while the animated logo signifies Spacely's team achieving them. Designed for user experience, hidden descriptions avoid overwhelming users.
Roadmap design step 1Roadmap design step 3Roadmap design step 2Roadmap design step 4
Gradient Purple
Working with Spacely was a pleasure. It rarely happens for a client to place such a high level of trust in designers throughout the process. This project serves as an great example of how having genuine creative freedom can greatly benefit a project.
Next project

EisQueen

Rebranding for a Berlin-based premium ice cream factory