EVR Brands
Wireframe Reference Index — March 2026 — 1440px Desktop — 4 Color-Way Variations
This document accompanies the wireframe PDF exports for the EVR Brands website. Because the live prototype environment is temporarily unavailable, these static exports are being provided for an initial review of the wireframe structure and layout direction.
The reference below explains how the deliverables are organized, what each page represents, and provides context for interactive elements that would normally be implicit in the hosted prototype.
Once the environment migration is complete, a live interactive prototype will be provided so you can interact with these wireframes as intended — overlays, carousels, hover states, and navigation will all be functional.
A wireframe is a structural blueprint for a website. Its purpose is to define layout, spatial relationships, content hierarchy, and user flow — before visual design, copywriting, or creative assets are introduced.
Everything you see in these wireframes is intentionally provisional. The headlines, body copy, button labels, placeholder images, and iconography exist solely to demonstrate where content will live, how much space it occupies, and how sections relate to one another. None of it is final. The actual copywriting, photography, illustrations, and brand-specific creative assets are developed after the structural foundation is reviewed and agreed upon — so that the design and content teams are building on a layout that has already been validated.
Think of it like an architectural floor plan. The floor plan tells you where the rooms are, how big they are, and how you move between them. It does not tell you what color the walls will be or what furniture goes inside. That comes later, once everyone agrees the rooms are in the right place.
The four color-way variations included in this delivery are an intentional exception to the “no visual design” rule — they explore tonal direction alongside structure so that layout and visual feel can be evaluated together rather than sequentially.
The EVR website wireframes translate the strategic design plan into a consolidated single-page structure that preserves every core principle — the progressive engagement model, dual-audience architecture, and content-depth asymmetry that favors DTC — while compressing the visitor’s journey into a tighter, higher-momentum scroll experience.
Structure at a Glance
The design plan outlines ten distinct content areas plus a footer. The wireframes distill these into five landing-page sections — each denser and more purposeful than a single plan section alone — plus three supporting screens that handle navigation, lead capture, and error states independently of the main scroll.
| Wireframe Section | Design Plan Coverage | Strategic Role |
|---|---|---|
| S1 — Hero | Hero / Main Landing Area | Entry point; non-forcing, no hard CTA |
| S2 — Pathway | Pathway Cards | Self-selection accelerator |
| S3 — Swag | Swag + Logo Wall + Product Showcase | Marketing Maya conversion |
| S4 — DTC | DTC Brand + Shared Capabilities + Case Studies | Founder Fiona conviction |
| S5 — Footer | Contact CTA + Footer | Closure + newsletter capture |
| Contact Overlay | Contact / Lead Form Page | Qualified lead capture |
| Nav Overlay | Persistent Nav (mobile menu) | Navigation + passive discovery |
| 404 Page | Error state | Brand-consistent dead-end |
Key Design Decisions
Each variation consists of three PDF files. The table below maps every file to its contents. All wireframes are designed at 1440px width. Landing pages are 4500px tall (5 × 900px sections).
| Variation | Landing Page | Overlays (2 pages) | 404 Page |
|---|---|---|---|
| Dark | EVR-Landing-Dark.pdf |
EVR-Overlays-Dark.pdf |
EVR-404-Dark.pdf |
| Light | EVR-Landing-Light.pdf |
EVR-Overlays-Light.pdf |
EVR-404-Light.pdf |
| Alt-Dark | EVR-Landing-AltDark.pdf |
EVR-Overlays-AltDark.pdf |
EVR-404-AltDark.pdf |
| Alt-Light | EVR-Landing-AltLight.pdf |
EVR-Overlays-AltLight.pdf |
EVR-404-AltLight.pdf |
The wireframes are presented in four color modes to explore different visual directions. Dark and Light are conventional solid-background modes. Alt-Dark and Alt-Light introduce a glassmorphic approach with gradient backgrounds and translucent surface layers.
About the Alt Variants — Glassmorphism
The Alt-Dark and Alt-Light variations use a glassmorphic design approach: semi-transparent surface layers are placed over a diagonal gradient background. This creates visual depth through transparency rather than flat color blocks.
Alt-Dark layers dark transparent fills over a cool blue-to-purple gradient. Alt-Light layers white transparent fills over a warm blush-to-lavender gradient. All strokes in these variants are unified to a single color at 20% opacity for visual consistency.
The standard Dark and Light modes use conventional solid backgrounds and will be more familiar as a starting point for review.
Each landing page consists of five vertically stacked sections at 1440 × 900px each, totaling 1440 × 4500px. The structure is identical across all four color variations.
In addition to the landing page, each variation includes three supporting screens. These are delivered together in the Overlays PDF (2 pages) and the 404 PDF (1 page). In the live prototype, these would be triggered by user interaction — context is noted below.
Contact Overlay
A full-screen overlay with a split-panel layout. The left panel features the EVR logo, a large headline (“Let’s Create”), body copy explaining the inquiry process, and a key metric (+240% Revenue Growth). The right panel contains a contact form with labeled input fields (Full Name, Email Address), a radio chip selector for area of interest (Swag, Merch, Scale, Other), a textarea for project details, and a Submit Inquiry button.
This form overlays the landing page content rather than navigating to a separate page, preserving the single-page scroll context and reducing friction between interest and action. The radio chip selector serves as the lead qualifier.
Navigation Overlay
A full-screen overlay that replaces the page content when the user opens the main menu. The left side features a large-format numbered navigation link list (01 Home, 02 Apparel, 03 Scale, 04 Contact) with the active item highlighted. The right side contains a “Selected View” panel with a featured project card (Client Spotlight), recent project entries (Naturale, Monochrome), and a stats bar (48 Projects · 6 Years · NYC). Social icons and an “Available for Projects” indicator sit at the bottom.
The featured project card is a deliberate cross-sell surface — existing swag clients who open the menu encounter a DTC brand project without being explicitly sold to. The close button (X) returns the user to the landing page.
404 Error Page
A standalone error page with a centered layout. Features the EVR header bar with a “/ System Error” label, a large “404.” display number, a brief error message (“This page doesn’t exist.”), and a “Return Home” link. The glassmorphic variants use a translucent container over the gradient background. The footer bar includes copyright, privacy policy, and terms of service links.
This page is independent from the landing page layout and would be served by the router when no matching route is found.
These wireframes establish layout, structure, and spatial relationships. The following conventions are used throughout and will be resolved in the design phase.
The goal of this review is to evaluate the structural foundation — section order, content placement, navigation flow, and the overall shape of the visitor experience. Once the structure is agreed upon, the next phases layer in final copy, photography, brand styling, and interactive polish on top of a layout that has already been validated.
As you review, focus on questions like: Are the sections in the right order? Is the right content in the right place? Does the flow from hero to footer make sense for the audiences we discussed? Are the overlays the right approach for contact and navigation?
Don’t worry about placeholder text, stand-in imagery, or rough visual details — those are expected and will be resolved in the design phase.