NovaGrid Studios Portfolio Site
Tim Wylie
Project Overview
Client: NovaGrid Studios (Design Studio)
Type: Company Site portfolio—single‑page website
Duration: 2‑week sprint
Tools: Figma (design & prototype), Framer (interactions), Webflow (build)
Objective: Showcase end‑to‑end design mastery—strategy, wireframes, hi‑fi UI, interactive prototype, and live site—to drive discovery calls and service inquiries.
The Challenge
NovaGrid wanted a lean, one‑page format that:
Introduces their personal brand (credentials, expertise, personality)
Highlights core services (UI/UX design, visual identity, information design)
Showcases diverse projects (web, mobile, print, code, passion work)
Drives action ( book a call, or send an email)
Key hurdle: Balancing comprehensive content (bio, testimonials, services, portfolio, contact) with a scannable, fast‑loading experience that would impress recruiters, founders, and agencies alike.
Research & Strategy
Audience Profiling:
Primary: Startup founders and hiring managers seeking rapid‑turn design sprints
Secondary: Recruiters and design directors vetting candidates
Competitive Scan: Reviewed 10+ leading product‑designer portfolios—identified trends: bold hero visuals, micro‑animations, concise service cards, case‑study carousels, and sticky CTAs.
Information Architecture:
Hero → Bio Drop → Testimonials → Services → Portfolio → Contact
Prioritized content blocks by impact and scalability.
Wireframes & Low‑Fi Sketches
Desktop & Mobile Flows: Hand‑drawn wireflows mapping user journey from hero to contact.
Lo‑Fi Layouts:
Hero: Headline + subhead + two CTAs + hero image
Bio Drop: Text block over accent background + portrait
Testimonial Carousel: Horizontal scroll of client quotes
Service Cards: Grid of four service highlights with icons
Portfolio Grid: Filterable categories + card hover states
Contact Bar: Three quick‑access methods (phone, email, form)
Visual Design
Moodboard & Style Tile:
Typography: Modern sans‑serif for headings (600 weight) and body (400 weight)
Color Palette: Creamy off‑white background, pink‑purple accent band, dark charcoal text, gold CTA buttons
Illustration Style: Space and game‑inspired hero art to infuse personality
Hi‑Fi Mockups:
Hero Section: Left‑aligned headline (“Hi, I’m Tim…”), right hero collage of Tim + abstract space art
Bio Drop: Circular portrait and “PUSH” badge to draw eyes, with purple overlay
Service Cards: Soft shadows, rounded corners, pastel icons
Portfolio Cards: Image+title+category+like count, hover lift effect
Contact Icons: Large tap targets with icon + text
Mood Board
Client wanted to explore designs created with water color that showcased their personality while also gaining the users attention.
Interaction & Prototype
Figma Prototype:
Scroll reveals: Sections fade/slide into view
Hover states: Service cards lift, portfolio cards show like counts
Framer Build:
Sticky navigation that underlines active section
Smooth scroll transitions between anchors
“Book a Call” modal popup with embedded Calendly widget
Lazy‑loaded portfolio images for performance
Development & Launch
Webflow Implementation:
Responsive breakpoints at 320px, 768px, 1024px
Optimized Lottie animations for hero splashes
CMS for portfolio items enabling quick future updates
Performance & SEO:
Compressed images, minified CSS/JS
Meta tags, Open Graph images for LinkedIn previews
Google Analytics & Hotjar installed
Like this project
Posted Jul 2, 2025
Designed and developed a single-page portfolio site for NovaGrid Studios.
Likes
0
Views
4
