DMIT 2033 — Web Design & Usability II

Advanced projects from DMIT 2033 Web Design & Usability II, building on interaction design theory with high-fidelity Figma prototypes and polished HTML/CSS implementation, focused on responsive layouts, component systems, and user testing.

DMIT 2033 — Lab 3

Tailwind Hi-Fi Prototype

Figma
Hi-Fi Prototype
Component Design
Responsive

High-fidelity Figma prototypes for a Tailwind-inspired design system layout, showcasing component design, colour system, and responsive adaptation between desktop and mobile views.

View Live Site

Tailwind hi-fi prototype desktop — fully designed desktop layout with component system — Desktop

Tailwind hi-fi prototype mobile — mobile layout adaptation of the desktop design — Mobile

DMIT 2033 — Lab 2

JB Lo-Fi Wireframe

Figma
Wireframing
Lo-Fi
UX

Low-fidelity wireframes for a mobile-first layout exercise, exploring content hierarchy and navigation patterns using Figma before moving to implementation.

JB lo-fi wireframe in Figma canvas — overview of wireframe screens and layout structure — Figma canvas

JB lo-fi wireframe mobile view — single screen wireframe showing content blocks and navigation — Mobile

DMIT 2033 — Lab 1

"Mostly Fluid" Responsive Layout

HTML
SCSS
Responsive
Fluid Grid

A responsive fluid layout exercise implementing a multi-column grid that adapts gracefully between desktop and mobile breakpoints, focusing on proportional spacing and content reflow.

View Live Site

Mostly Fluid layout desktop view — full-width responsive grid layout — Desktop

Mostly Fluid layout mobile view — stacked single-column layout at narrow viewport — Mobile

Mostly Fluid layout desktop view 2 — second breakpoint variation of the responsive grid — Desktop

Mostly Fluid layout mobile view 2 — second breakpoint variation at narrow viewport — Mobile