- Mirumee × Pretty Green
- UX/UI
- 2021
Pretty Green — Cut & Sewn: A new homepage for a British fashion brand founded by Liam Gallagher
The homepage had to be elegant, stylish and refreshing — and carry the brand’s spirit. Seven pieces make up the cut: a video section, a new-arrivals carousel, products pinned to a photo, a blog section, featured collections, product compositions and a full-screen footer. Each of them is a clickable screen here.
Open the tech pack
On a green cutting mat, pattern paper with the front of a parka and a title block “Pretty Green / Homepage / 2021 / Mirumee” slides in. A woven label with the brand’s roundel drops, a “UX/UI · 2021” tag swings, and a miniature of the homepage pieces itself together beside it.
Chapter 01 The tech pack
Seven pieces of one cut
A new homepage for the Pretty Green shop, designed with the Mirumee team — from the first screen to the footer, for desktop and mobile.
Tech packStyle: Homepage
Sheet 01
About the project
- Client
- Pretty Green × Mirumee
- Role
- UX/UI
- Team
- Head of Design: Iwo Rzepiela · UX/UI: Jakub Nowak
- When
- February 2021
- Where
- Manchester, United Kingdom
- Homepage pieces
- 7
- Tags
- UI/UX Design · E-Commerce · Fashion · Headless Commerce · Figma · Video Content
The goal: an elegant, stylish and refreshing page that carries the brand’s spirit and philosophy — music and British street culture.
Bill of pieces
Each pattern piece leads to its screen.
The pattern
The homepage’s seven pieces laid out like a paper pattern. The numbers match the list.
The brand
Pretty Green is a British fashion brand founded by Liam Gallagher — the singer and songwriter who rose to fame as the frontman of Oasis.
It draws on music and British street culture: classic silhouettes with a modern twist, signature paisley patterns and an iconic logo.
It offers a varied range, from tailored jackets to everyday wear.
The design’s recordings show two more pieces beyond the list: the Discover tiles (§ 08) and the newsletter sign-up on the phone (§ 10).
Chapter 02 The video hero
A video instead of a banner
The new homepage opens on a video section with the latest campaign and collection. It is meant to be dynamic, catch the eye and draw you into the brand’s world from the first screen.
Film from edge to edge
The campaign footage fills the full width, right under the navigation. Nothing frames it, so the page reads as film from the start, not as a catalogue.
The headline as live text
“WE ARE THE MUSIC” sits on the film as text of its own, not burnt into the footage. That is why it can change — the mobile recording shows three versions.
A card across the edge
The FREEDOM card straddles the film’s bottom edge. It ties the video to the rest of the page and leads the eye down to the new arrivals.
Try it
- NEW ARRIVALS
- CLOTHING
- FOOTWEAR
- ACCESSORIES
WE ARE THE MUSIC
FREEDOM
Our new summer collection
The photographs, prices and words come from the design’s boards and recordings; the product names, the previous collection, the previous events and the contents of the collections are samples
Design notes
Monochrome and a white headline
The board shows a model in a leather jacket, seen from behind, with the headline in the middle of the frame. The black-and-white picture never competes with the words, so the headline and the light card stand out without extra backgrounds.
Three headlines from the recording
In the mobile recording “WE ARE” stays put while the words under it change: A STATE OF MIND, THE MUSIC, THE SPIRIT. Here they change every 7 seconds, and only while the screen is in view.
A pause within reach
The boards show no controls, so the presentation adds them: the pause button stops the film and the headlines, and the bars beside it switch the headline. The headlines also hold still under the pointer or keyboard focus.
The card’s typeface, fixed
On the board the line “Our new summer collection” is in a default serif. Here it is set in the shop’s grotesque, like the rest of the card.
Chapter 03 The new-in rail
New in, on the rail
Under the video hangs a carousel of new products. It lets you browse the latest collections quickly, and simple navigation makes the brand’s range easy to explore.
Big photos, a tile cut short
Each tile takes up more than a third of the window. The first shows in full, the second breaks off at the edge — a sign that the rail runs on.
Two seasons, one click apart
The tabs on the left switch the rail between the Winter 2020 arrivals and the previous collection. Last season stays within reach, with no hunting through the menu.
The rail slides over the tabs
In the recording the section holds still while the rail moves left, over the tab column. It reveals a third and a fourth product, and only then does the page scroll on.
Try it
- NEW ARRIVALS
- CLOTHING
- FOOTWEAR
- ACCESSORIES
Sand Fishtail Parka
GBP 89.00
Olive Hooded Rain Jacket
GBP 89.00
Sand Overhead Smock
GBP 89.00
Stone Zip-Through Jacket
GBP 89.00
The photographs, prices and words come from the design’s boards and recordings; the product names, the previous collection, the previous events and the contents of the collections are samples
Design notes
New arrivals from the first screen
On the video board the new arrivals already begin on the first screen, under the FREEDOM card, so they show before anyone scrolls. The next board shows the whole section: the tabs and two tiles, each with a name and a price.
The pinned section from the recording
The desktop recording shows the rail sliding over the tabs while the page stands still. Here the “Slide the rail” button replays it, without taking over the page’s scroll.
Arrows and hearts, added
The boards show no arrows and no hearts. Here the arrows move the rail one tile at a time, and the heart adds the product to the wishlist — it then goes onto your tag at the foot of the screen.
The previous collection is a sample
Neither the boards nor the recordings show what was under the Autumn 2020 tab, so its products are samples. So are the product names: on the boards every tile carries the same placeholder, “Product Name Winter Parka”.
Chapter 04 The fitting
Products pinned to the photo
Products are pinned to a lookbook photo. Click a piece of the outfit — the hat, the T-shirt, the shorts or the trainers — and the product’s details appear at once. From there it’s one step to the bag.
A dot on every piece of the outfit
Four dots sit on the hat, the T-shirt, the shorts and a trainer. The active one is larger, so you can tell which product the panel beside it describes.
The photo and the slider move together
The active dot and the product in the panel always match. Clicking a dot turns the slider to its product, and the arrows and dots under the product move the active dot on the photo.
From the photo straight to the bag
In the case study, clicking a piece of the outfit shows the product’s details at once and lets you add it to the bag. Here VIEW THIS PRODUCT opens a quick view: pick a size, add the product, and the bag count in the header jumps.
Try it
- NEW ARRIVALS
- CLOTHING
- FOOTWEAR
- ACCESSORIES
Black British Millerain Bucket Hat
GBP 89.00
The photographs, prices and words come from the design’s boards and recordings; the product names, the previous collection, the previous events and the contents of the collections are samples
Design notes
A larger dot ties the photo to the panel
On the board the dot on the hat is larger than the other three, and the hat is what stands in the panel beside the photo. No arrows or captions are needed to link the two.
The same block on the phone
The mobile recording shows the photo across the whole screen with its four dots, and under it the same panel: the hat, its name and price, the arrows, VIEW THIS PRODUCT and the slider’s four dots.
The hat is the board’s, the rest are samples
The board only shows the hat: its packshot, the name “Black British Millerain Bucket Hat” and GBP 89.00. The T-shirt, the shorts and the trainers get sample names here and the same price as every product on the boards, with close-ups of the same photo in place of packshots.
What a click does — added here
The boards don’t show what a click does. The dots’ sync with the slider, the arrow keys, the quick view and the free-shipping meter are added by this presentation. The 199 GBP threshold comes from the banner above the shop’s header.
Chapter 05 Backstage
Stories from backstage
Between the products, the page makes room for stories. The blog section helps the brand build a community and tell stories about music, fashion and culture — the foundations of Pretty Green’s DNA.
The card overlaps the photo
The black card rises above the photo band onto the white page. It looks like a sheet laid on a print, so it reads as an article, not as a banner.
A gig, not a catalogue
The photo band shows a performance, not a garment. Here the shop talks about the music that inspires the brand.
One way on
Under the text there is only “Discover more”. The card is a teaser: a title, a few sentences and one button.
Try it
- NEW ARRIVALS
- CLOTHING
- FOOTWEAR
- ACCESSORIES
TOM GRENNAN PRIVATE ACOUSTIC SET AT PRETTY GREEN
Pretty Green and Rize Festival presented a private acoustic set by solo artist Tom Grennan at Pretty Green Carnaby Street. The event was hosted for key press and four lucky competition winners. Tom performed songs from his new debut solo album 'Lighting Matches'.
The photographs, prices and words come from the design’s boards and recordings; the product names, the previous collection, the previous events and the contents of the collections are samples
Design notes
The text from the board
The card’s title and text are copied from the board — hence the artist’s name and the album title. One sentence was missing a word, so “The event hosted” reads “The event was hosted” here. “Lighting Matches” is the album’s real title and stays as it is.
Room for the artist
The card sits on the left of the band, so it never covers the singer on the right. The photo still shows the gig, not just a backdrop for the words.
No “Previous events” on the desktop
In the desktop recording the card scrolls past with the photo and offers only “Discover more”. The link to previous events appears only in the mobile version (§ 10).
An empty pocket
Neither the boards nor the recordings show the article the button led to. Here the flap at the bottom of the card lifts and drops back, and a message says that nothing follows.
Chapter 06 The swatch book
Collections as swatches
Featured collections are one of the new homepage’s seven pieces. On the board they are three circles, each with a photo and a name.
A circle like a swatch
Each collection gets one photo in a circle and a name in capitals. Three matching circles read at a glance, like swatches in a book.
Room after the dark band
The circles stand on the white page, far apart. After the dark gig photo the eye gets a rest before the products.
A way in, not a catalogue
A circle shows no products; it leads to the collection. Here it opens a preview in the same window.
Try it
The photographs, prices and words come from the design’s boards and recordings; the product names, the previous collection, the previous events and the contents of the collections are samples
Design notes
Three circles from the board
Under the event the board shows three collections: The Pretty Green Parka, Pretty Green x Elvis and Parka Guide. In the desktop recording the row scrolls past unchanged.
A fourth circle on the phone
In the mobile recording the row of circles swipes sideways to reveal a fourth: Wear Paisley. You’ll find it in § 10.
The preview is a sample
Neither the boards nor the recordings show what was inside a collection. The preview and its products are samples, and the chosen collection goes onto your tag at the foot of the screen.
The pinked ring
Hover or focus draws a ring round the circle, as if cut with pinking shears. It is this presentation’s touch, not the 2021 shop’s.
Chapter 07 The lay plan
A composition half a step out
Products shown as outfits and pairings inspired by British street fashion. Each composition tells a story and shows how versatile the range is.
Two columns, two widths
On the board the left column is 400 px wide and the right one 571 px. The wider photo is taller too, so the captions in the two columns never land at the same height.
The whole outfit, not just the piece
Every photo shows a full look: the parka over dark jeans and trainers, the hoodie with blue denim. You see how the pieces are worn together, not just what they cost.
Into the bag without leaving the composition
Hover over a photo or focus it and a “+” appears. It opens the sizes and Add to bag, so the editorial layout keeps the shop working. The boards don’t show this — it’s added by this presentation.
Try it
Product layout
- NEW ARRIVALS
- CLOTHING
- FOOTWEAR
- ACCESSORIES
Sand Fishtail Parka
GBP 89.00
Olive Pullover Hoodie
GBP 89.00
Olive Hooded Rain Jacket
GBP 89.00
The photographs, prices and words come from the design’s boards and recordings; the product names, the previous collection, the previous events and the contents of the collections are samples
Design notes
Leaning right
The composition isn’t centred in the window: the left margin is almost twice as wide as the right. A narrow gutter holds the two columns together. The lay plan puts these measurements on the screen.
No parallax
In the desktop recording both columns scroll at the same speed. The rhythm comes from the stagger alone, not from a scrolling effect.
Why the stagger
Switch to the plain grid: the columns even out, the captions line up and the layout starts to look like a catalogue. The stagger turns the same photos into an editorial spread.
What’s a sample
The product names are samples: the board repeats “Product Name Winter Parka”. The photos, prices and measurements are the board’s. The plain grid and the lay plan are added by this presentation: the same three pieces, the same overall width and the same gutter.
Chapter 08 White Label
The label and the rain
Below the composition, the desktop recording shows two more tiles: White Label, a woven label on kraft paper, and Weatherproof Jackets, black fabric beaded with water.
The material, not a model
Each tile shows a close-up of a label or of cloth, not a figure. The picture sets the subject before you read the name: a label for White Label, wet fabric for the weatherproof jackets.
A card along the bottom edge
The name and “Shop Now” sit on a card towards the bottom of the tile. On the paper the card is black, on the black fabric light grey — it always stands apart from what’s behind it, and both tiles keep one layout.
Details you can touch
Here the label turns over to its care symbols, the size tag steps through S, M, L and XL, and the rain test shows the water running off the fabric. The chosen size goes onto your tag at the foot of the screen. The recording shows none of this — it’s added by this presentation.
Try it
The photographs, prices and words come from the design’s boards and recordings; the product names, the previous collection, the previous events and the contents of the collections are samples
Design notes
Only in the recording
The Discover tiles appear only in the desktop recording, between the composition and the footer. They aren’t on any of the six boards or among the homepage’s seven pieces.
Drawn, not cropped
In the recording a tile is too small for a sharp crop. So the paper, the labels, the fabric and the drops are drawn, following the recording.
The “M / Size 4” tag
Under the woven PG-WL label hangs an “M / Size 4” size tag, as in the recording. The other sizes and their numbers are samples, and so are the care symbols on the label’s back.
A more legible grey
On the light grey card the recording sets the title and the button in a grey that is hard to read. Here the grey is darker. Other greys from the boards that were too faint, such as the inactive tab and the slider dots, are corrected the same way.
Chapter 09 Cut on the fold
A full-screen footer
The last of the homepage’s seven pieces is a full-screen footer. Before the page ends, a film photograph across the whole window offers five more categories.
The end of the page leads back in
Five words — ARRIVALS, JACKETS, T-SHIRTS, SWEATS, JEANS — stand in the middle of the photo. Scroll to the very bottom and you don’t hit a dead end: you’re back among the categories.
Words on the gap between frames
On the board the words stand on the black gap between the two film frames, not in the middle of the window. The photo and the list share one axis.
A quiet footer under the photo
Below it sits a dark footer: INFORMATION, CUSTOMER, the white roundel and the copyright. The photo carries the mood; the footer just keeps things in order.
Try it
- NEW ARRIVALS
- CLOTHING
- FOOTWEAR
- ACCESSORIES
The photographs, prices and words come from the design’s boards and recordings; the product names, the previous collection, the previous events and the contents of the collections are samples
Design notes
Two frames of one film
The photo is two near-identical film frames side by side, with a black gap between them. The red dot on the film’s edge belongs to the photo — it isn’t a button state.
More specific than the menu
The menu at the top splits the shop broadly: CLOTHING, FOOTWEAR, ACCESSORIES. The footer’s words are specific — JACKETS, T-SHIRTS, SWEATS, JEANS — and lead straight to a kind of garment.
Live words
On the board the words are part of the picture. Here they are text, so each one is a button: hover or focus underlines a word with a running stitch and dims the rest. The recording shows no hover state — this one is added by the presentation.
The fold line
The fold-line button marks the axis the words stand on — like the line on a pattern piece that is cut on the fold. This, too, is the presentation’s own touch.
Chapter 10 Alterations
The same page, taken in for the phone
The site is fully responsive and optimised for mobile. For its audience that is essential: music and fashion fans often browse the range on their phones.
Tabs turned on their side
The new-in tabs stand on end in a narrow strip on the left. That keeps the product rail wide, and the next tile peeks in from the edge, inviting a swipe.
Cards set into the photos
The FREEDOM card and the event’s black card are narrower than the screen and overlap the photos. The photo still leads, and the words get a calm ground.
The phone shows more
The mobile recording shows three things that appear on neither the boards nor the desktop recording: a link to previous events, a fourth circle, Wear Paisley, and a newsletter sign-up under the footer photo.
Design notes
The headlines change in place
At the start of the recording “WE ARE” stays put while the words under it change: A STATE OF MIND, THE MUSIC, THE SPIRIT. Here the headlines go round once, only while the phone is in view, and they have a pause button. The backdrop is the jacket from the board, not the recording’s close-up of a face.
A tab put right
In the recording the second, grey tab repeats “NEW ARRIVALS / Winter 2020”. Here it carries the board’s name, PREVIOUS COLLECTION / Autumn 2020. The up and down arrow keys switch the tabs too.
The board’s photo, not the recording’s
In the recording a different photo illustrates the event. The phone shows the same gig photo as the desktop version (§ 05), and the inset card runs off it onto the white page. The past events in the “Previous events” panel are samples.
Added: the menu and the newsletter
The recording never opens the menu and ends on the STAY IN TOUCH panel, with the address field cut off. The slide-out menu, the field and the button are added by this presentation. The address is checked in your browser and goes nowhere. The recording’s serif title is set in the shop’s grotesque.
Try it
WE ARE A STATE OF MIND
FREEDOM
Our new summer collection
Sand Fishtail Parka
GBP 89.00
Olive Hooded Rain Jacket
GBP 89.00
Sand Overhead Smock
GBP 89.00
Stone Zip-Through Jacket
GBP 89.00
TOM GRENNAN PRIVATE ACOUSTIC SET AT PRETTY GREEN
Pretty Green and Rize Festival presented a private acoustic set by solo artist Tom Grennan at Pretty Green Carnaby Street. The event was hosted for key press and four lucky competition winners. Tom performed songs from his new debut solo album 'Lighting Matches'.
Sand Fishtail Parka
GBP 89.00
Olive Pullover Hoodie
GBP 89.00
Olive Hooded Rain Jacket
GBP 89.00
Stone Zip-Through Jacket
GBP 89.00
STAY IN TOUCH
Connect with us on email and stay in the loop with the world of Pretty Green. You can unsubscribe easily at any time.
The photographs, prices and words come from the design’s boards and recordings; the product names, the previous collection, the previous events and the contents of the collections are samples
Chapter 11 The sample room
The design’s boards and recordings
Six boards and two screen recordings — the material the screens above are built from.
6 boards · 2 recordings · 2021
Cut to measure
The tag keeps what you clicked on the way: a favourite, a pinned product, a collection, a size and a category.
The Pretty Green name, logo and the boards’ photographs belong to the brand. Shown here as client work.