| Design System

Portfolio Design System

| Overview

This design system was created to establish a clear, accessible, and scalable foundation for my portfolio. It aims to reflect not only my professional aptitudes, but to reflect my personality, heritage, and legacy. I developed the foundations of this system through typography, color, and logo variations. I developed components such as navigation bars, buttons, cards, and footers. I developed page patterns detailing desktop, tablet, and mobile designs with specifications. A Bootstrap based exploration of this design system is available at this link.

Role

UX Designer, Web Developer

Affiliation

DePaul University, Jarvis College of Computing and Digital Media

Areas

Design, Web Development

| Foundations, Components, Grids

Color palette chart showing primary, secondary, tertiary, grey, red, and green colors with their shades and hexadecimal color codes.
Comparison of different heading styles: default, bold, and italic typography on a black background with purple labels.
The image shows various digital device screens displaying the same pink and white checkered pattern, labeled as 'Desktop', 'Tablet', and 'Mobile' for different display sizes.
A dark-themed mockup website layout with a navigation bar, header with stars and name, footer, and two styled cards labeled 'Project Title'. The layout includes buttons, tags, logo icons, and sample contact information.

| Designs - Dekstop, Tablet, Mobile

Dark-themed personal portfolio webpage for Nicholas Mirabile, featuring navigation links, a name and profession header, qualifications overview, and project showcase with four sample projects labeled Design, Research, Leadership, and Design.
Online portfolio homepage of Nicholas Mirabile, a UX researcher and designer, featuring sections on qualifications and multiple project listings with different titles and tags.
A mobile webpage for Nicholas Mirabile with a dark background. It features a blue star logo at the top, followed by Nicholas Mirabile's name. The page introduces Nicholas as a UX researcher and designer, listing qualifications including a Master's in Human-Computer Interaction, a Bachelor's in Psychology, and over 5 years of experience. Below, there is a section titled 'Projects' with placeholder project cards, each containing a title, descriptive text, and a small orange 'Design' label. The footer credits Nicholas Mirabile, 2025, and includes an email address.
A dark-themed professional presentation slide titled 'Digital Exclusion' with sections on overview, methods, analysis, findings, and recommendations, including placeholder images and text.
A webpage titled "Digital Exclusion" with sections for overview, methods, analysis, findings, and recommendations, containing text, a transparent image placeholder, and navigation links.
Screenshot of a document or presentation slide with a dark background and light text. It includes headings such as 'Heading 2,' 'Overview,' 'Methods,' 'Analysis,' 'Procedure,' 'Calculations,' 'Findings,' and 'Recommendations.' The slide also contains placeholder text, numbered lists, and graphical elements like gray checkered boxes.
A professional resume or CV webpage for Nicholas Mirabile featuring sections for qualifications, projects, and skills. It includes contact information and navigation options.
Screenshot of Nicholas Mirabile's personal webpage showcasing his profile as a UX researcher and designer, with sections for qualifications and projects, including project titles, descriptions, and placeholder images.
A dark-themed resume or portfolio page of Nicholas Mirabile, a UX researcher and designer. It includes sections for qualifications with degrees in Human-Computer Interaction and Psychology, over five years of experience, and showcases multiple projects with titles, descriptions, and placeholder images.
A resume or CV template for Nicholas Mirabile with sections on digital exclusion, methods, analysis, findings, recommendations, and tools, featuring text, charts, and data visualizations.
Screenshot of a research presentation slide titled 'Digital Exclusion' with sections on overview, methods, analysis, findings, and recommendations, including charts, numbered lists, and placeholder text.
A screenshot of a research presentation slide outlining sections including an overview, methods, analysis, findings, recommendations, and conclusions. The slide has a gray and blue color scheme with various charts, bullet points, and placeholders for content.