Wondertabs
October 2026
Three design concepts
for PCI
Early homepage explorations for pciltd.com, prepared for Diana John and the PCI team.
- Horizon
- Blueprint
- Precision
How to read this deck
These are three early, static homepage explorations for desktop, prepared to show design direction and range. They are not final designs, and none is a recommendation.
Developed after selection
The chosen direction, or a combination of several, is developed across every key page with PCI’s own content, imagery and input.
Placeholder content
Imagery, news items, dates and some copy are placeholders, used to show how each section would work.
The Figma file
All three concepts are in one Figma file: open the PCI concepts in Figma. Each homepage screen also links to its own frame.
Moving through the deck
Use the arrow keys or swipe to move between screens. Select any page to see it in full, and press Esc to close it. Select the counter for a list of every screen.
Reading this PDF
Each homepage appears at its first screen, followed by the full page shown in columns.
What we designed for
Each concept was designed around the same three aims for pciltd.com, and answers them in its own way.
Look like a global partner
PCI works with technology companies around the world. Each concept aims for a presence that matches the scale and quality of its engineering.
Make engineering easy to follow
Business segments, capabilities and case studies are explained in plain language, with imagery and film doing more of the work.
Lead to an enquiry
Certifications and case studies build confidence, and every page offers a clear way to reach PCI’s team.
The three at a glance
Horizon
PCI’s work shown out in the world: warm evening light, open white space and the products PCI helps build, on the road and in the home. It is the most approachable of the three, written for buyers meeting PCI for the first time.
Type
A light, wide grotesque for headlines at large sizes, with short orange labels marking each section. Text is set in a plain sans for easy reading.
Colour
A white canvas and charcoal type. PCI orange for actions and labels, with sunset tones carried in by the photography.
Motion once built
The hero moves through a set of scenes on a timed slider. Segment cards lift on hover, and the capabilities carousel slides one card at a time.
Pages explored
Homepage
Homepage
Opens on a truck at dusk and a single line about engineering the next era. The page moves through PCI’s story and certifications, the four business segments, capabilities, case studies and news, then closes on an enquiry form.
Imagery, dates and news items are placeholders.
Open in Figma8 screens longThe full page follows on the next sheet.
Horizon, homepageFull page, read in columns from left to right
Three moments
Select a moment to see it in place on the full page.
Blueprint
PCI as an engineering drawing: a dark canvas ruled by a visible grid, with confident capital headlines and orange used like a signal. It presents PCI as a specialist manufacturing partner for engineers and procurement teams.
Type
A wide grotesque in capitals for headlines, with small labels and plain sans text set inside the cells of the grid.
Colour
Near black and white, with PCI orange reserved for actions, the active segment and the closing contact panel.
Motion once built
Grid lines draw in as each section arrives. Moving through the segment list brings up each photograph, and the hero opens into PCI’s company film.
Pages explored
Homepage
Homepage
Opens on a close view of a circuit board and a promise of partnership. A company overview, the business segment index, certifications, capabilities, case studies and filterable resources follow, then an orange contact panel.
Imagery, dates and news items are placeholders.
Open in Figma7 screens longThe full page follows on the next sheet.
Blueprint, homepageFull page, read in columns from left to right
Three moments
Select a moment to see it in place on the full page.
Precision
PCI presented the way leading global technology manufacturers present themselves: clean white space, large editorial type and close views of automated assembly. It is the most polished of the three, and the closest to an international brand.
Type
A light grotesque at display sizes with tight spacing, short orange labels, and generous text set in a plain sans.
Colour
White and pale grey with a dark footer. PCI orange is used sparingly, for actions and labels.
Motion once built
The company film plays from the about section. Recognition cards drift at different speeds as the page scrolls, and the capabilities walkthrough steps through each stage.
Pages explored
Homepage
Homepage
Opens on robotic assembly and a statement of precision. Segment cards, a short company statement and film, a wall of recognition, an end-to-end capabilities walkthrough, a featured case study and news follow, then a closing invitation.
Imagery, dates and news items are placeholders.
Open in Figma9 screens longThe full page follows on the next sheet.
Precision, homepageFull page, read in columns from left to right
Three moments
Select a moment to see it in place on the full page.
Three homepages, side by side
Scroll each column, or select it to open the page in full.
Horizon
A truck at dusk, PCI’s story, segment cards, a capabilities carousel, case studies, news and an enquiry form.
Blueprint
A circuit board hero, an overview, the segment index, a certifications band, case studies and an orange contact panel.
Precision
Robotic assembly, segment cards, a company film, a recognition wall, a capabilities walkthrough and one featured case study.
Where the three sit
Placement describes the concepts as drawn. In design, the chosen direction can move along either axis.
What happens next
- 1
Reactions
PCI’s team and management react to the three: which direction, sections and moments feel right for PCI, and which do not. A reaction to a single section is as useful as a preferred concept.
- 2
Design
The chosen direction, or a combination, is developed across every key page with PCI’s content and imagery, with unlimited revisions within each stage.
- 3
Build and launch
The site is built on Webflow or WordPress while the current site stays live, then launched once PCI approves it.
Useful questions for the review
- Which concept feels closest to how PCI wants global customers to see it?
- Which sections should carry forward, whichever direction is chosen?
- Is anything wrong for PCI, its customers or its industries?
Thank you
Reactions and questions
Wondertabs
Creative technology agency