Back to Main Site

brands.labwor.com

Homepage Mockup Comparison -- 3 Directions

Three completely different creative directions for Labwor Brands' homepage. Each demonstrates a distinct design philosophy while showcasing the same 12 service categories, portfolio, event branding, merchandise catalog, and pricing.

Mockup A

Creative Canvas

Portfolio-first, gallery-dominant

Color Palette

Near-Black #0A0A0A
Vermillion #FF4D00
Gray #F2F2F2
Off-White #FAFAFA

Inspiration

Pentagram, Collins, Sagmeister & Walsh

Hero Approach

Full-screen dark with large project title, bold vermillion accents

Layout

Masonry portfolio grid, full-bleed case studies, 12 service tiles on black

Typography

Clash Display at editorial sizes, restrained body copy

Mood

Confident. Editorial. Let the work speak.

Page Sections

  1. Hero (featured project showcase)
  2. Selected Work (masonry grid)
  3. Services (12 numbered tiles)
  4. Event Branding spotlight
  5. Merchandise catalog (horizontal scroll)
  6. Client logos (6-column grid)
  7. Process (4 numbered steps)
  8. Pricing (3-tier cards)
  9. CTA (black background)
  10. Footer (black, 3-col links)
View Full Mockup A
Mockup B

Chromatic

Playful, colorful, expressive

Color Palette

Deep Violet #1A0533
Vivid Purple #6C2BD9
Hot Pink #D92B6C
Lavender #F5F0FF
Rose #FFF0F5

Inspiration

Instrument, Fantasy, Resn

Hero Approach

Animated gradient background with floating preview cards

Layout

Color-diverse cards, rounded corners, gradient accents, pill-shaped buttons

Typography

Clash Display with gradient text fills, rounded soft forms

Mood

Energetic. Joyful. Every project gets its own color world.

Page Sections

  1. Hero (gradient + floating cards)
  2. Portfolio (color-diverse cards)
  3. Services (grid with hover states)
  4. Event showcase (stat cards)
  5. Merchandise catalog (color-coded grid)
  6. Approach (4-step timeline)
  7. Testimonials (3-card grid)
  8. Pricing (gradient-topped cards)
  9. CTA (deep violet gradient)
  10. Footer (violet, 3-col links)
View Full Mockup B
Mockup C

Swiss Precision

International typographic style, maximum restraint

Color Palette

Black #0A0A0A
Red #FF0000
White #FFFFFF
Gray #F2F2F2

Inspiration

Josef Muller-Brockmann, Massimo Vignelli, Experimental Jetset

Hero Approach

Pure white, large black headline with one word in red, NO image

Layout

Strict grid, zero rounded corners, zero shadows, generous whitespace, heavy borders

Typography

Heavy Clash Display at monumental sizes, mathematical precision, all caps

Mood

Authoritative. Minimal. Red is the only luxury.

Page Sections

  1. Hero (typography only, no image)
  2. Portfolio (strict 3x3 grid)
  3. Services (numbered text list)
  4. Event showcase (black section, numbered)
  5. Merchandise (white grid, red hover)
  6. Process (4-step grid)
  7. Pricing (3-column, featured in black)
  8. Contact (split layout)
  9. Footer (black, red top border)
View Full Mockup C

Side-by-Side Comparison

Aspect A: Creative Canvas B: Chromatic C: Swiss Precision
Hero Full-screen dark + featured project Gradient animation + floating cards Pure typography, no image
Portfolio Layout Masonry grid (mixed sizes) Color-diverse cards Strict 3x3 uniform grid
Services Display 12 numbered tiles on black Grid with color hover states Numbered text list
Events Section Split layout with stats Stat cards on violet Black section, numbered list
Merchandise Horizontal scroll strip Color-coded 5-column grid 6-column grid, red hover
Corners Sharp (square) Rounded (pill buttons, rounded-2xl cards) Sharp (square)
Shadows None Soft card shadows None
Best For High-end corporate / government Creative / youth / startup International / design-aware
Tone Confident, editorial Energetic, joyful Authoritative, minimal

Shared Across All Mockups

12 Service Categories

Brand Identity, Print, Digital, Events, Merchandise, Signage, Banners, 3D Printing, Property, Uniforms, Packaging, Documents

Client Categories

Government, Corporate, NGO, Church, Education, Startup

3 Pricing Tiers

Starter (UGX 500K-1.5M), Professional (UGX 2M-5M), Enterprise (UGX 5M-15M)

Typography

Clash Display (headings) + Source Sans 3 (body)

Event Branding Spotlight

Dedicated section showcasing event branding capabilities

Merchandise Catalog

10-12 product types with visual grid or scroll