HACKCLUB PROJECT

This is an overview of my design process for the HackClub Study. Watch how it came to life, or,  

Click here to go back.
01   Planning & Sketching
Planning and sketching.
03   Wireframing/Prototyping

i use figma to lay out the basic design. For larger applications, it helps me explore different user flows and interactions.

Figma screenshot of prototyping.
05   Development

I introduced custom animations (button glow, fade-in, etc) to make the user's interactions feel more natural and engaging.

06   Designing

Original illustrations using Adobe Photoshop and Illustrator.

Illustrating with Photoshop.
02   Typography and Swatching
Swatches and typography.
04   Stack Selection

Landing page (frontend) : Next.js, React, HTML, CSS, JavaScript, Tailwind CSS

Brand materials & designs : Adobe Photoshop, Adobe Illustrator, Figma

07   Link to Project
HackClub Study