Discover subdomain site for Endlesss, a collaborative music making app — promoting and exploring their web3 music marketplace.

UX, UI, interaction design and custom development.

Discover Endlesss

Duke Makes is a Makerspace in the heart of Leeds. They have a tonne of machines for laser cutting, CNC routing, vinyl cutting, 3D printing, plastic recycling and more, and make bespoke products for a range of clients using a combination of all of the above.

Using existing branding as a base I worked on all aspects of design across UX and UI, as well as creating new icons and styles for this site.

Duke Makes

Band website for Capital Party function band 🤘

Full design and development with at least 90% Finsweet Client First styles, plus a little improv.

Capital Party

This is a simple Youtube tabs setup, no CMS — there are a fixed number of tabs each with a different video. A small snippet of code in the <body> section of the page settings stops the current video playing when any tab is clicked. Please don't ask me how to further customise the code as I don't know howwwwwwwwww

Thanks to @samliew and @weebhek for this solution.

youtube-video-tabs

Final day of Clone Comp 2021! I've done a story piece and a game so today I went more traditional web design. I cloned Wyatt's great follow up to my day 1 story so that I could take the green on black aesthetic I hinted at a bit further.

I also wanted to play with Lottie files, as I've not done much with them before, and try out the Jetboost live search functionality. As with Day 3 last year, I paid homage to some of the other projects in the competition! I wanted to input them all but as it was manual that would've taken a while!

Had so much fun this year, thanks to everyone involved!

Clone Comp 2021 Day 3 | Tirawire | Fry

Finsweet Island 2.0! Made entirely with Native Webflow (apart from the 'try again' button!)

I wanted to try and implement some of the game like behaviour I've seen in the competition using only plain Webflow. I'm not sure how other people did it exactly but it was fun finding a way!

I also thought it'd be cool to follow up on this project's theme but add a bunch of features to it as a legit 2.0.

Try and survive and find all the coins!

Clone Comp 2021 Day 2 | Finsweet Island 2.0

Here's my Day 1 project! I wanted to leave a little simple idea for people to continue with, you'll see it at the end... hoping people will want the bird brain to hang around ;)

Clone Comp 2021 Day 1 | Stranded

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

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

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

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

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

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

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

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)

Day 2! I am as dead as this alien.

https://www.loom.com/share/c93d0fdbd4504ed9b9164154eaa6f4a1

Day 2 Clone Comp – It is not over

My submission for Clone Comp Day 1.

I didn't have much time so had to scale back a lot and there is no responsive stuff, but maybe someone will want to pursue it?! I had fun.

https://www.loom.com/share/fca273304eb4451387e120e3f1b7581f

Day 1 Clone Comp – How Earth Was Lost

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.

Joshua Fry

About

Skills

About