Portfolio Website UI Design
A full design and prototype for a dark editorial portfolio website, built in Figma with desktop, tablet, and mobile breakpoints. The project spans initial wireframes through to final visual design and component documentation.
Design Goal
Create a portfolio experience that feels gallery-quality without sacrificing clarity or hiring-focused usability. The design needed to make strong first impressions while maintaining fast navigation to project details.
Audience
Primary: creative directors, hiring managers, and agency recruiters. Secondary: collaborators and peer designers. The information hierarchy was built around hiring-manager needs: quick scanning of skills, then depth-of-work exploration.
Wireframes
Low-fidelity wireframes established the information hierarchy across six pages before any visual design decisions were made. Key decisions: hero-first layout, project grid with category filtering, and case study structure as the primary proof-of-process format.
Visual Direction
Dark background (near-black espresso), warm off-white text, a single terracotta accent. Editorial serif display headings paired with a clean DM Sans body. All color decisions were tested against WCAG AA contrast requirements.
Desktop & Mobile Screens
Full screen designs for home, work, case study detail, fine art, resume, and contact, at 1440px desktop and 375px mobile. Tablet breakpoints defined at 768px.
Component Notes
Built a reusable Figma component library including: project card (default/hover states), navigation (desktop/mobile), button variants (primary/secondary/ghost), artwork modal, and skill pill. All components are auto-layout based and responsive.
Demonstrates end-to-end digital design process: from wireframe thinking through visual systems to responsive UI decisions. Shows fluency in Figma, understanding of web design constraints, and ability to design for multiple screen sizes.
Poster & Campaign Design