UX/UI and web design
I design the sites I build.
As Senior Web Designer and Developer at Jonas Club Software, I took private clubs from sitemap and live mockup to launch, and at Design Republik and TeamQ I designed sites as well as built them. This page is that side of the work: how I approach a design, and the palette and type of every site I designed or built. Each case study states my role exactly.
How I design
Structure before colour
Sitemap and content first, then a live mockup the client can click through before any production code. At Jonas I ran that process end to end for the top tier of club clients, through build, QA and migration.
The mockup becomes the site
I design in Figma, Adobe XD, Photoshop and Illustrator, and I write the PHP, the JavaScript and the CSS myself, so what was designed is what ships. Motion goes where it explains something, like the GSAP and ScrollMagic work on the British Club’s dark mode.
Accessible by default
Every club site I shipped met AODA and WCAG: contrast, focus states, keyboard paths and type that stays readable. I also worked as a teaching assistant on the University of Toronto UX/UI bootcamp.
Palette, type and design, site by site
Every site I designed, grouped by agency, with the colours and typefaces read from the live site. The clients own their sites, and some have changed since I worked on them.
At Jonas Club Software
The British ClubLusitana / RalewayRenaissance-style serif + elegant geometric sansA colonial club in the tropics. Navy panels and slate type sit beside full-height resort photography, with a calm Renaissance serif for headings and plenty of air between sections.Effect The first dark mode at Jonas, with frosted-glass panels and captions that slide in on scroll, built with GSAP and ScrollMagic.
Lonesome ValleyEB Garamond / MontserratOld-style serif + geometric sansNature, drawn by hand. Dry-brush edges between sections, photographs that fade out like ink on paper, EB Garamond over cream, and an olive band the colour of the valley's hillsides.Effect Dry-brush ink edges, photos that fade out like ink, and my own script that swapped the band's background on hover.
The Caledonian ClubCinzel / RalewayRoman inscriptional capitals + elegant geometric sansScottish heritage in the middle of London. Carved Roman capitals in plum and cream, photography of the club rooms, and a restrained layout that feels like the building itself.Effect Caption cards hang off each tile over a gold offset frame, then grow to fill the photo on hover, in pure CSS.
The Lansdowne ClubBrandon Grotesque / BaskervvilleGeometric sans + transitional serifArt deco Mayfair with a colour for every department. Navy and old gold carry the club, and dining, sports, weddings and events each bring their own colour to the photos, the section edges and the footer.Effect Every department has its own colour, and the photo tiles, section edges and art deco footer change with it.
Mentor Harbor Yachting ClubMontserratGeometric sansSummer on Lake Erie in the colours of the club burgee. Navy, white and red, Montserrat throughout, frosted glass over the photography, and a homepage that moves with the scroll.Effect A scroll-to-top ring that turns as you scroll and changes colour with the section behind it, a pinned harbour in GSAP and ScrollMagic, and frosted glass.
Osler Bluff Ski ClubPlayfair Display / RalewayHigh-contrast serif + elegant geometric sansFour seasons on the escarpment. Frosted glass panels float over the club's own photography, Playfair Display headlines sit on winter navy, and trail-marker orange marks the way.Effect Glassmorphism: the homepage doors frost into navy glass on hover, and room descriptions sit on frosted panels.
Bayview Golf and Country ClubCormorant Garamond / LatoOld-style display serif + humanist sansCountry club calm. Wide photography of the course opens the page, the section titles are burned into the photos with a CSS colour-burn blend, and olive and parchment keep it quiet and premium.Effect Section titles burned into the photos with mix-blend-mode: color-burn.- Private11 more sites are privateRequest to see full portfolio
At Design Republik
Phisique OnlineOswald / MontserratCondensed gothic sans + geometric sans
UWI CosmeticsRoboto / LatoNeo-grotesque sans + humanist sansAncestral beauty told like an editorial. Dusty rose and black frame big portrait photography, the menu runs in spaced capitals, and a build-your-own flow lets shoppers mix their own products.Effect Crea tu producto: a conditional WooCommerce builder where every choice shapes the next, so shoppers mix their own products.
Ñan MagazineLato / RalewayHumanist sans + elegant geometric sans
Restaurante Pim’sIbarra Real Nova / LatoSpanish transitional serif + humanist sansOld Quito warmth in a modern layout. A split hero pairs bottle green with food photography, a classic Spanish serif carries the headlines, and gold and brick red work as accents.Effect The hero is a layered Slider Revolution scene with parallax, a film of the food playing beside the logo.
Amati FoodsAvera Sans / OverlockRounded humanist sans- Private7 more sites are privateRequest to see full portfolio
At TeamQ Developers
Oro Verde HotelsHermann, Gotham / RobotoNeo-grotesque sans
EnergyNowOpen SansHumanist sans
The Quality GroupArialNeo-grotesque system sans
SPL GroupEurostile / PoppinsSquared technical sans + geometric sans
Natural Capital CorporationExo 2Geometric sans with a technical edge
Gaumen FreundeDomine / Open SansSturdy text serif + humanist sans- Private15 more sites are privateRequest to see full portfolio
5 questions about Arvind Kumar, answered
Does Arvind design websites as well as build them?
Yes. As Senior Web Designer and Developer at Jonas Club Software, I took private clubs from sitemap and live mockup to launch. This page shows the palette and type of every site I designed or built, and each case study states my role exactly.
What is Arvind's design process?
Structure before colour: the sitemap and content first, then a live mockup the client can click through before any production code. Then I build it myself, so what was designed is what ships.
Which design tools does Arvind use?
Figma, Adobe XD, Photoshop and Illustrator for design. I write the PHP, the JavaScript and the CSS myself, and use GSAP and ScrollMagic where motion explains something.
Are Arvind's designs accessible?
Every club site I shipped met AODA and WCAG: contrast, focus states, keyboard paths and type that stays readable.
Does Arvind create brand guidelines?
For several of my design clients I also built the brand guidelines, at no charge, so the palette and the type pairing stay consistent beyond the website.