Discover the best united-kingdom websites created by professional designers. Get inspired and start planning your perfect united-kingdom web design today!

Joshua Fry

I created this effect to help someone out on the Webflow Discord, and I thought I'd make it cloneable in case anyone else wants to use it! I also decided to spice it up a little with some lovely animations from Lottieflow :)

The basic effect is achieved just by setting the header as fixed at a lower z-index than the (relative positioned) content below.

Overlapped Header Effect

Just a quick attempt at replicating something seen elsewhere—can definitely be improved upon but hopefully enough to demonstrate the principle. Interested to see anyone's improvements or other ways of achieving this effect!

You need to have a decent amount of content above and below this at the moment for it to be effective. Play with the interaction assigned to 'outer block' to tweak.

Section based progress line

Webflow implementation of https://codepen.io/tmrDevelops/pen/vOPZBv by https://twitter.com/tmrDevelops - slightly altered but essentially just dropped in an embed, beautiful stuff!

Colourful Bullerful

Ion (Ivan) Sipilov

Due to the COVID time, one of the ways to explore new parts of the world is through your design! So here is my modest template for a travel agency. Fully animated. Enjoy! 

Check out my dribbble page: https://dribbble.com/ivanshdesign
Figma file for it: figma.com/@ionsipilov

[Free to clone 🤙] Conquer The Jungle | Travel Website | Travel Agency

A (fake) 3D button using only hover state and a trick with borders to make triangles. Improved thanks to a positioning trick from Sako! Staying away from actual 3D was my preference here in the end due to slight anomalies in positioning when updating the button content.

I've tried so many ways of doing this! Happy with this implementation for now but interested if anyone else has another approach!

Check out the other solutions to this:

Actual 3D from Sako: https://webflow.com/website/3D-Button?s=fry3d

Custom CSS from Zach: https://webflow.com/website/3D-Button-with-Custom-CSS-3dbuttonchallenge

3D Button

Demonstrating a cool effect where a sliding highlight box moves around a grid of clickable items. I've also included an alternative fallback for mobile, where the highlight moves based on scroll instead. This is pure experimentation, but could be used as a starting point for something interesting.

Sliding Hover Highlight Effect

Portfolio site for Patch Music, showcasing selected work and partners.

We wanted to have a very classic, minimal design appearance for this, drawing inspiration from old school magazine layouts. I also enjoyed creating the logomark for Patch's brand.

The individual case study pages make it easy to see everything at once with a css grid layout that also exposes a menu to navigate between projects.

A few fun things:
- Flex animated navigation bar
- Sticky section headers
- Copy to clipboard option for email address
- Overlapped footer

I really loved working with Patch Music — if you're ever looking for soundtrack or sound design I strongly recommend giving him a shout!

Patch Music — Portfolio

My Day 3 project - Hypermode! We had the chance to go back and traverse time and space after going through a black hole so I went back to my day 1 project. Was great fun working on someone else's yesterday but I really wanted to do some extra bits to this!

We now have:
- Dark mode
- Sort of responsiveness
- 'How it's done' tips
- Updated Graphics
- A new 'Cargo' section with CMS
- Jetboost filters
- A black hole
- A thank you message
- Possibly some other stuff I can't remember now

Me talking through it: https://www.loom.com/share/66990f6cf66f41ab9e961117c0711b7b

So much fun doing this, and I'm amazed by the projects I've seen, everyone in this competition was just incredible so well done all!

Day 3 Clone Comp – Hypermode (Earth Was Lost)

This is an initial test of building a pairs matching memory game in Webflow! All of the main functionality is native, using interactions and conditional visibility. Small piece of custom code for randomising the order each time.

I'll be updating this at some point and refining a bit — it was built for Webflow Maker Day in about 10 hours, and can still be improved a lot but glad to have figured out the principles! I'll make it clonable when it's a bit tidier.

Credit to @sarkis for leaving the breadcrumbs to the techniques that make this possible!

Match Pairs Game - Sia Sia Bowie Bowie Giraffe Giraffe

Client site: A simple one page site for Sunflower Therapy, a Nottingham based Psychotherapy centre.

This site uses a cross fading image interaction, where the image section remains sticky as you scroll and changes based on the section you're looking at. I felt this was effective for this site since the imagery is purely decorative.

Sunflower Therapy

Kev Charlton

Ecommerce website for Great Yorkshire Hampers. Handpicked, curated hampers full of the finest Yorkshire produce.

Great Yorkshire Hampers

Attila Vaszka

Hello! I’m a Multidisciplinary Designer based in Bournemouth, UK. I specialise in Web Design and UI/UX Design and recently started learning Webflow.

I really wanted to refresh my website, but I'm not confident enough to build one from zero so had to buy a template to start with. 

It's far from perfect and I will probably tweak it further in the next couple of weeks, but for now I think it looks good enough to share it.

I want to polish the project pages more and want to have a more custom layout, but for now this should be all right 😄

Attila Design | Portfolio

Forage Studio

Forage Studio is a design agency for brands with a story to tell. We work closely with start-ups, creatives, communities and businesses to create unique brands and projects that resonate deeply with their audience. Our specialties include websites, branding, production and marketing, and have a wealth of experience working with global brands as well as starting companies from the ground up.

Forage Studio Website

Ethan Suero

Thin Reel Media had its website on a different platform with a poor mobile experience. We decided to create a whole new design and move to Webflow for better performance and UX.

Since the website went live (June 2021) the agency has been getting several new projects resulting in an increase of revenue.

thin-reel-media

Heirloom London is a well established Jewellery consultancy based in London. They create bespoke engagement rings as well as offering diamond buying, remodelling, arthritis friendly solutions and more.

The owner Ruth wanted to make a big visual and UX update across her site. We worked together on bringing her existing brand to life, and creating a user journey that is closer to a 'services' website than a standard jewellery store, to emphasise her personal approach. The design was strongly centred around some fantastic photography produced for this build.

We also wanted to bring some ecommerce features into the site however, and while they're not front and centre, Heirloom is now selling some of their most popular designs, as well as curated diamonds through this site, all with Webflow Ecommerce.

The site also uses the CMS heavily, and pretty much every other Webflow feature, but is entirely native.

Heirloom London — Jewellery Services and Ecommerce Site

Michal Tekiela

ANEGIS Consulting is a Microsoft Gold Partner and PIPOL Alliance Partner with industry expertise in: manufacturing, distribution, profesional services and advertising.

anegis-consulting

Laura Jouan

Beat Routes, holding, 2020.

'Beat Routes is a creative collective for young people aged 13-25, from disadvantaged backgrounds, offering each individual the time, space and tools to express themselves.' 

https://www.beatroutes.co.uk
instagram: @beat_routes

Beat Routes, holding

Sprint Online

Simple and transparent website design for a window cleaning company in the UK.

Discover united kingdom websites built by the Webflow community

Discover united kingdom websites built by the Webflow community