DMIT 1529 — Web Design & Usability I

Projects from DMIT 1529 Web Design & Usability I, applying usability heuristics, information architecture, Figma prototyping, and semantic HTML/CSS to build accessible, user-centred web experiences.

DMIT 1529 — Project

Comic-Con Website Redesign

Figma
Wireframing
Hi-Fi Prototype
UX
Responsive

A full UX design process for a Comic-Con website redesign, from moodboard and lo-fi wireframes through to high-fidelity Figma prototypes for both desktop and mobile, demonstrating information architecture, interaction design, and visual design decisions.

Download Moodboard PDF 6.4 MB

Comic-Con redesign moodboard — colour palette, typography, and visual direction references — Moodboard

Comic-Con lo-fi wireframes in Figma canvas — overview of all lo-fi screens — Lo-fi — Figma canvas

Comic-Con lo-fi wireframe mobile — stacked content flow at narrow viewport — Lo-fi — mobile

Comic-Con lo-fi wireframe desktop — layout skeleton showing content structure and navigation — Lo-fi — desktop

Comic-Con hi-fi prototype mobile — fully designed mobile layout — Hi-fi — mobile

Comic-Con hi-fi prototype desktop — fully designed desktop layout with typography and imagery — Hi-fi — desktop

Comic-Con hi-fi Figma mobile view — prototype in Figma canvas with mobile frame — Hi-fi — Figma mobile

Comic-Con hi-fi Figma desktop view — prototype in Figma canvas with desktop frame — Hi-fi — Figma desktop

DMIT 1529 — Exercises

HTML & CSS Exercises

HTML
CSS
Typography
Web Fonts

Foundational exercises exploring design principles applied to the web, web typography systems, and custom web font implementation using @font-face and Google Fonts.

DMIT 1529 — Web Design & Usability I

Comic-Con Website Redesign

HTML & CSS Exercises

Exercise 1 — Design Principles

Exercise 2 — Web Typography

Exercise 3 — Web Fonts