01
Home
HOMEStart with a scene.
Discover the brand through real applications and find relevant products.
- Applications
- Brand story
- Categories
B2B WEBSITE / MATERIALS & ARCHITECTURESELECTED CASE — 01
AVID.
BRAND → PRODUCT → INQUIRY
From imagined spaces
to material choices.
A building-materials website · Structure & visual design
Explore the case ↓01 / THE CONTEXT
Products, brand and enquiries.
One connected experience.
AVID presents WPC composite materials and building products to overseas audiences. The website brings together product information, supplier credentials and ways to start a conversation.
MY CONTRIBUTIONFrom structure to visuals,
From structure to visuals,
a connected contribution.
Responsible for site structure, page layouts, visual direction and image preparation; collaborating with an external development team for technical implementation.
01
Site structure
Organising page types and content relationships.
02
Page composition
Defining module order, image proportions and reading hierarchy.
03
Visual direction
Connecting spatial imagery and material presentation.
04
Image preparation
Preparing imagery for use across the website.
02 / INFORMATION ARCHITECTUREAVID — WEBSITE SYSTEM
A PRODUCT-LED STRUCTURE
Built around products.
Designed for discovery.
Connecting product selection, company information and enquiries.
A clear next step at every stage.
FIVE SECTIONS · ONE CONNECTED WEBSITEScroll sideways to explore ↔
02
Products
PRODUCTSMake an informed choice.
Explore categories, models and specifications to refine your selection.
- Categories
- Models
- Specifications
03
Company
COMPANYGive trust a foundation.
Review the factory, credentials and services to assess the supplier.
- Factory
- Certificates
- Services
04
News
NEWSKeep the brand visible.
Follow exhibitions and company updates for the latest brand news.
- Exhibitions
- Company updates
05
Contact
CONTACTStart a conversation.
Find contact details and share your product requirements or enquiry.
- Contact details
- Enquiry form
A TYPICAL JOURNEY
- Discover the brand
- Explore products & specifications
- Assess the supplier
- Make an enquiry
These are peer navigation sections. The journey is illustrative; visitors can also enter directly through a product page.
03 / VISUAL LANGUAGE
See the space.
Understand the material.
Large scenes establish the first impression, while darker sections carry the brand story. Application imagery, product close-ups and material swatches reveal different layers of information.
SCENE / FORM / TEXTUREOne visual language.
One visual language.
Distinct material qualities.
01 / DARK02 / LIGHT03 / ACCENT
Colours illustrate the relationships observed in the original website.
04 / PRODUCT DISCOVERY
From what you need
to what you choose.
Categories, model listings and product details each carry a distinct information task. The sequence moves from visual discovery towards specific product comparison.
Find the product category
Compare models and forms
Consistent views and light backgrounds bring material colour, texture and cross-sections into focus.
03 / SPECIFICATIONBring selection details
Bring selection details
closer to the enquiry.
Product form, colour, dimensions and materials are grouped alongside the Get Quote entry point.
05 / COMPANY & INQUIRY
Beyond the product.
Meet the supplier.
Company introductions, factory imagery and certificate documents add supplier context. The contact page brings communication channels together.
A CLEAR NEXT STEPA clear entry point
A clear entry point
for the next conversation.
Contact details, a map and a form are organised into distinct areas to support the next conversation.
These views demonstrate layout; no unverified enquiry or conversion outcomes are claimed.
06 / COLLABORATION & REFLECTION
Making design real
means making choices.
Multiple stakeholders took part in reviews, and some designs were changed or set aside through feedback. The experience sharpened my attention to shared criteria for design decisions.
Align goals early
Agree on audience, key information and page purpose before visual exploration.
Structure feedback
Group feedback into content, structure and visuals, then establish priorities.
Define review stages
Confirm direction at structure, visual language and key-page stages.
These are recommendations from retrospective reflection. This case draws on supplied website screenshots and role descriptions; engineers completed website development.