HTMLCSSJavaScriptPHPFull-StackUX/UI Design

My First Devine Project!

Project hero section

This colorful, illustrated website is a glimpse of my earliest days as a Devine student, the end project of the first semester of the first year. The brief was to make a concept that makes saving money easier, more fun and relatable for young adults and make a website for it. We had full creative freedom on how to execute this.

The Concept

I wanted to cater to the hero archetypes of students, those who are motivated by the act of saving those around them. From then, I took it quite literally: a hero character traversing a magical world, saving the world one cent at a time. The luscious, neon-on-dark illustrations and website spoke out to me. I must credit the inspiration for most of my art style: zuttoworld.tumblr.com.

Project

Design Process

This project, as with all integration projects, was completely conceptualized, designed, and executed from the ground up by yours truly, with the tireless guidance of my awesome lecturers:

Research & Planning

  • Research into visual design and current trends
  • User personas and journey mapping

Design Phase

  • Wireframing: Created low-fidelity wireframes to map user flows
  • Illustrations: Conceptualized, sketched, and fleshed-out all illustrations with Adobe Illustrator

Development Phase

  • Built responsive front-end with semantic HTML and CSS
  • Deployed the site on my own domain for the first time, using FileZilla!

Technical Details

  • Frontend: HTML5, CSS3
  • Design Tools: Figma, Adobe Illustrator
  • Timeline: Winter 2023-2024 (First-year project)
  • Role: Solo researcher, designer and developer

Key Features

  1. Vibrant Design - Made to entice the youth with its vibrance and ease of access
  2. Custom Illustrations - Hand-crafted visuals that enhance the adventurous vibes

Project

The Challenge

The biggest challenge was creating an entire website concept from scratch within my first year of studying. This meant managing both creative and technical aspects independently. I am also very new to the design and development world in general, which made this all the mroe challenging!

Working with guidance from lecturers, I navigated these challenges by breaking the project into manageable phases. And keep on keeping on, eventually you get there. Although, we had just shy over one month to do it all, so there is a bit of a time limit.

What I Learned

This project was a pivotal moment in my development journey. I learned that it is completely possible to make an entire website with a novel concept from scratch within one year of studying Devine.

Key takeaways:

  • I can do it!
  • Time management and project planning skills
  • I love color and adventures haha!

If I were to revisit this project, I would explore:

  • Interactivity! GSAP! JS! The possibilities are endless
  • Responsive design, of course
  • Cleaning up my Illustrator files more (^^;;)

Journey before destination!


Experience it yourself: Visit The Coined Crusader →