Nojuka Crimson homepage with its custom hero banner

A self-initiated personal brand site for the Nojuka Crimson creative identity — built from scratch in HTML, CSS and JavaScript to establish a professional web presence while developing practical front-end and visual design skills.

Live site: nojukacrimson.com

Brief

Design and build a fully custom personal brand site for the Nojuka Crimson creative identity, serving two parallel goals: establishing a credible public presence for the brand and developing practical skills in front-end web development and visual design from scratch.

Nojuka Crimson cast and character-selection screen

Approach

Rather than jumping straight into building, I worked through a structured visual planning phase. An initial attempt at a formal design system — defining typography, colour and layout rules upfront — gave way to a more productive experimental method: producing comparison documents to test decisions side by side. This included typeface display tests, colour palette trials using the 60/30/10 rule and multiple layout explorations for key pages. The chosen results were compiled into a single pattern library, organising the site’s designs and patterns across multiple artboards.

Nojuka Crimson character splash screen

All visual design plans were produced in Adobe Photoshop and Illustrator before a single line of code was written, and the sitemap was mapped out in Adobe XD.

Outcome

  • Character bios layout from the Nojuka Crimson pattern library
  • Character-select background designs
  • Early Nojuka Crimson logo concept explorations
  • Final Nojuka Crimson logo design
  • Nojuka Crimson pattern library across multiple artboards
  • Responsive header design shown across screen sizes

A live, hand-coded site built in HTML, CSS and JavaScript — no frameworks or templates. It features interactive UI components built with custom code, original imagery including banners, frames and type treatments and detailed brand and author information. It works as both a portfolio artefact and an ongoing record of the brand’s development.

Tools

HTML · CSS · JavaScript · Adobe Photoshop · Adobe Illustrator · Adobe XD