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.

Single page website
Single page website
Stooty Technologies
Stooty Technologies
CodeiKids
CodeiKids
UI/UX Design Assets
UI/UX Design Assets

Join 50k+ companies and 1M+ independents

Contra Logo

© 2025 Contra.Work Inc