Freelance%20user%20experience%20consultant%20and%20web%20designer.%20Available%20for%20custom%20Webflow%20sites%2C%20as%20well%20as%20UX%20design%2C%20research%20and%20prototyping.
fry has 93 followers on Webflow.
Colourful%20Bullerful
Webflow%20implementation%20of%20https%3A//codepen.io/tmrDevelops/pen/vOPZBv%20by%20https%3A//twitter.com/tmrDevelops%20-%20slightly%20altered%20but%20essentially%20just%20dropped%20in%20an%20embed%2C%20beautiful%20stuff%21
Tags:
- colour
- colourful
- animation
- codepen
- tmrdevelops
- gradient
- header
Visit Site
Patch%20Music%20%u2014%20Portfolio
Portfolio%20site%20for%20Patch%20Music%2C%20showcasing%20selected%20work%20and%20partners.%0A%0AWe%20wanted%20to%20have%20a%20very%20classic%2C%20minimal%20design%20appearance%20for%20this%2C%20drawing%20inspiration%20from%20old%20school%20magazine%20layouts.%20I%20also%20enjoyed%20creating%20the%20logomark%20for%20Patch%27s%20brand.%0A%0AThe%20individual%20case%20study%20pages%20make%20it%20easy%20to%20see%20everything%20at%20once%20with%20a%20css%20grid%20layout%20that%20also%20exposes%20a%20menu%20to%20navigate%20between%20projects.%0A%0AA%20few%20fun%20things%3A%0A-%20Flex%20animated%20navigation%20bar%0A-%20Sticky%20section%20headers%0A-%20Copy%20to%20clipboard%20option%20for%20email%20address%0A-%20Overlapped%20footer%0A%0AI%20really%20loved%20working%20with%20Patch%20Music%20%u2014%20if%20you%27re%20ever%20looking%20for%20soundtrack%20or%20sound%20design%20I%20strongly%20recommend%20giving%20him%20a%20shout%21
Tags:
- portfolio
- music
- sounddesign
- producer
- music%20producer
- flexbox
- interaction
- animation
- responsive
- minimalist
- classic
- graphicdesign
Visit Site
Overlapped%20Header%20Effect
I%20created%20this%20effect%20to%20help%20someone%20out%20on%20the%20Webflow%20Discord%2C%20and%20I%20thought%20I%27d%20make%20it%20cloneable%20in%20case%20anyone%20else%20wants%20to%20use%20it%21%20I%20also%20decided%20to%20spice%20it%20up%20a%20little%20with%20some%20lovely%20animations%20from%20Lottieflow%20%3A%29%0A%0AThe%20basic%20effect%20is%20achieved%20just%20by%20setting%20the%20header%20as%20fixed%20at%20a%20lower%20z-index%20than%20the%20%28relative%20positioned%29%20content%20below.
Tags:
- clonable
- header
- overlap
- overlapped
- hidden
- animation
- lottieflow
- lottie
- interaction
- scroll
- scrolleffect
- scrolleffects
- cover
Visit Site
Match%20Pairs%20Game%20-%20Sia%20Sia%20Bowie%20Bowie%20Giraffe%20Giraffe
This%20is%20an%20initial%20test%20of%20building%20a%20pairs%20matching%20memory%20game%20in%20Webflow%21%20All%20of%20the%20main%20functionality%20is%20native%2C%20using%20interactions%20and%20conditional%20visibility.%20Small%20piece%20of%20custom%20code%20for%20randomising%20the%20order%20each%20time.%0A%0AI%27ll%20be%20updating%20this%20at%20some%20point%20and%20refining%20a%20bit%20%u2014%20it%20was%20built%20for%20Webflow%20Maker%20Day%20in%20about%2010%20hours%2C%20and%20can%20still%20be%20improved%20a%20lot%20but%20glad%20to%20have%20figured%20out%20the%20principles%21%20I%27ll%20make%20it%20clonable%20when%20it%27s%20a%20bit%20tidier.%0A%0ACredit%20to%20@sarkis%20for%20leaving%20the%20breadcrumbs%20to%20the%20techniques%20that%20make%20this%20possible%21
Tags:
- game
- memory
- match
- cards
- test
- experiment
Visit Site
3D%20Button
A%20%28fake%29%203D%20button%20using%20only%20hover%20state%20and%20a%20trick%20with%20borders%20to%20make%20triangles.%20Improved%20thanks%20to%20a%20positioning%20trick%20from%20Sako%21%20Staying%20away%20from%20actual%203D%20was%20my%20preference%20here%20in%20the%20end%20due%20to%20slight%20anomalies%20in%20positioning%20when%20updating%20the%20button%20content.%0A%0AI%27ve%20tried%20so%20many%20ways%20of%20doing%20this%21%20Happy%20with%20this%20implementation%20for%20now%20but%20interested%20if%20anyone%20else%20has%20another%20approach%21%0A%0ACheck%20out%20the%20other%20solutions%20to%20this%3A%0A%0AActual%203D%20from%20Sako%3A%20https%3A//webflow.com/website/3D-Button%3Fs%3Dfry3d%0A%0ACustom%20CSS%20from%20Zach%3A%20https%3A//webflow.com/website/3D-Button-with-Custom-CSS-3dbuttonchallenge
Tags:
- pseudo3d
- 3dbutton
- 3d%20effect
- buttonhover
- button
- hover
- hovereffect
Visit Site
Sunflower%20Therapy
Client%20site%3A%20A%20simple%20one%20page%20site%20for%20Sunflower%20Therapy%2C%20a%20Nottingham%20based%20Psychotherapy%20centre.%0A%0AThis%20site%20uses%20a%20cross%20fading%20image%20interaction%2C%20where%20the%20image%20section%20remains%20sticky%20as%20you%20scroll%20and%20changes%20based%20on%20the%20section%20you%27re%20looking%20at.%20I%20felt%20this%20was%20effective%20for%20this%20site%20since%20the%20imagery%20is%20purely%20decorative.
Tags:
- clientwork
- therapist
- therapy
- united%20kingdom
- one%20page
- crossfade
- interaction
Visit Site
Day%203%20Clone%20Comp%20%u2013%20Hypermode%20%28Earth%20Was%20Lost%29
My%20Day%203%20project%20-%20Hypermode%21%20We%20had%20the%20chance%20to%20go%20back%20and%20traverse%20time%20and%20space%20after%20going%20through%20a%20black%20hole%20so%20I%20went%20back%20to%20my%20day%201%20project.%20Was%20great%20fun%20working%20on%20someone%20else%27s%20yesterday%20but%20I%20really%20wanted%20to%20do%20some%20extra%20bits%20to%20this%21%0A%0AWe%20now%20have%3A%0A-%20Dark%20mode%0A-%20Sort%20of%20responsiveness%0A-%20%27How%20it%27s%20done%27%20tips%0A-%20Updated%20Graphics%0A-%20A%20new%20%27Cargo%27%20section%20with%20CMS%0A-%20Jetboost%20filters%0A-%20A%20black%20hole%0A-%20A%20thank%20you%20message%0A-%20Possibly%20some%20other%20stuff%20I%20can%27t%20remember%20now%0A%0AMe%20talking%20through%20it%3A%20https%3A//www.loom.com/share/66990f6cf66f41ab9e961117c0711b7b%0A%0ASo%20much%20fun%20doing%20this%2C%20and%20I%27m%20amazed%20by%20the%20projects%20I%27ve%20seen%2C%20everyone%20in%20this%20competition%20was%20just%20incredible%20so%20well%20done%20all%21
Tags:
- clonecomp
- clonecomp2020
- darkmode
- responsive
- funny
- space
- clone
- clonable
- cms
- filters
- grid
- cssgrid
- jetboost
Visit Site
Day%202%20Clone%20Comp%20%u2013%20It%20is%20not%20over
Day%202%21%20I%20am%20as%20dead%20as%20this%20alien.%0A%0Ahttps%3A//www.loom.com/share/c93d0fdbd4504ed9b9164154eaa6f4a1
Tags:
Visit Site
Day%201%20Clone%20Comp%20%u2013%20How%20Earth%20Was%20Lost
My%20submission%20for%20Clone%20Comp%20Day%201.%0A%0AI%20didn%27t%20have%20much%20time%20so%20had%20to%20scale%20back%20a%20lot%20and%20there%20is%20no%20responsive%20stuff%2C%20but%20maybe%20someone%20will%20want%20to%20pursue%20it%3F%21%20I%20had%20fun.%0A%0Ahttps%3A//www.loom.com/share/fca273304eb4451387e120e3f1b7581f
Tags:
Visit Site
Section%20based%20progress%20line
Just%20a%20quick%20attempt%20at%20replicating%20something%20seen%20elsewhere%u2014can%20definitely%20be%20improved%20upon%20but%20hopefully%20enough%20to%20demonstrate%20the%20principle.%20Interested%20to%20see%20anyone%27s%20improvements%20or%20other%20ways%20of%20achieving%20this%20effect%21%0A%0AYou%20need%20to%20have%20a%20decent%20amount%20of%20content%20above%20and%20below%20this%20at%20the%20moment%20for%20it%20to%20be%20effective.%20Play%20with%20the%20interaction%20assigned%20to%20%27outer%20block%27%20to%20tweak.
Tags:
Visit Site
Heirloom%20London%20%u2014%20Jewellery%20Services%20and%20Ecommerce%20Site
Heirloom%20London%20is%20a%20well%20established%20Jewellery%20consultancy%20based%20in%20London.%20They%20create%20bespoke%20engagement%20rings%20as%20well%20as%20offering%20diamond%20buying%2C%20remodelling%2C%20arthritis%20friendly%20solutions%20and%20more.%0A%0AThe%20owner%20Ruth%20wanted%20to%20make%20a%20big%20visual%20and%20UX%20update%20across%20her%20site.%20We%20worked%20together%20on%20bringing%20her%20existing%20brand%20to%20life%2C%20and%20creating%20a%20user%20journey%20that%20is%20closer%20to%20a%20%27services%27%20website%20than%20a%20standard%20jewellery%20store%2C%20to%20emphasise%20her%20personal%20approach.%20The%20design%20was%20strongly%20centred%20around%20some%20fantastic%20photography%20produced%20for%20this%20build.%0A%0AWe%20also%20wanted%20to%20bring%20some%20ecommerce%20features%20into%20the%20site%20however%2C%20and%20while%20they%27re%20not%20front%20and%20centre%2C%20Heirloom%20is%20now%20selling%20some%20of%20their%20most%20popular%20designs%2C%20as%20well%20as%20curated%20diamonds%20through%20this%20site%2C%20all%20with%20Webflow%20Ecommerce.%0A%0AThe%20site%20also%20uses%20the%20CMS%20heavily%2C%20and%20pretty%20much%20every%20other%20Webflow%20feature%2C%20but%20is%20entirely%20native.
Tags:
- small%20business
- ecommerce
- london
- jewellery
- engagement%20rings
- cms
- blog
- search
Visit Site
Duke%20Makes%20%u2014%20Landing%20Page%20for%20a%20Modern%20Makerspace
Duke%20Makes%20is%20a%20Makerspace%20in%20the%20heart%20of%20Leeds.%20They%20started%20out%20as%20part%20of%20Duke%20Studios%2C%20but%20they%27re%20ramping%20up%20their%20services%20with%20a%20separate%20identity%20and%20a%20whole%20host%20of%20fancy%20new%20machines.%0A%0AAlready%20home%20to%20Laser%20and%20Vinyl%20Cutting%20services%2C%20they%27re%20going%20to%20be%20offering%203D%20printing%2C%20CNC%20routing%20and%20much%20more%2C%20and%20are%20set%20to%20become%20a%20community%20driven%20maker%20hub.%0A%0AThis%20is%20the%20first%20step%20for%20their%20new%20website%2C%20a%20holding%20page%20to%20announce%20their%20existence.%0A%0AIt%27s%20great%20to%20be%20part%20of%20such%20a%20cool%20project%2C%20to%20help%20them%20tell%20people%20all%20about%20what%20they%27re%20doing%21%20They%20already%20had%20a%20great%20brand%20identity%20to%20get%20started%20with%2C%20and%20I%20put%20together%20this%20dynamic%2C%20vibrant%20design%20to%20match%20their%20energy%21
Tags:
- onepager
- landingpage
- smallbusiness
- leeds
- userexperience
- scrollinteraction
- colourful
Visit Site
Spinification%20%u2014%20Clonable%20Mouse%20vs.%20Viewport%20interaction%20experiment
Just%20a%20fun%20experiment%20with%20spinning%20circles%20using%20mouse%20vs.%20viewport%20interactions
Tags:
- experiment
- experimental
- digitalart
- fun
- viewport
Visit Site
Paint%20With%20Webflow
I%20had%20to%20make%20this%20once%20I%20realised%20I%20could%21%0A%0APixel%20art%20paint%20with%20Webflow%21%20Made%20with%20Grid%20and%20IX2%20in%20one%20evening%2C%20just%20having%20some%20fun%20%3A%29%0A%0A**%20Not%20good%20on%20mobile%21%20**
Tags:
- experiment
- experimental
- fun
- paint
- pixelart
- cssgrid
- ix2
Visit Site
Randomly%20Order%20Cards%20%28with%20CMS%29
This%20is%20an%20example%20of%20how%20to%20randomly%20order%20content%20on%20each%20refresh%20using%20custom%20code.%20I%20tried%20this%20because%20the%20standard%20random%20order%20setting%20in%20the%20CMS%20wasn%27t%20giving%20a%20new%20random%20order%20every%20time%20%28this%20seems%20to%20have%20been%20improved%20now%20but%20maybe%20is%20still%20not%20consistent%29.%20Just%20showcasing%20because%20I%27ve%20seen%20it%20requested%20but%20was%20an%20experiment%2C%20may%20update%20it%20a%20bit%20later%20but%20you%20can%20clone%20it%20to%20see%20how%20it%20works.%0A%0AMy%20example%20was%20for%20when%20I%20get%20a%20chance%20to%20work%20on%20some%20music%20stuff%2C%20pick%20one%20or%20two%20things%20I%27m%20going%20to%20do%20at%20random.%0A%0AYou%20can%20see%20in%20the%20custom%20code%20there%20is%20a%20class%20name%20which%20has%20to%20be%20assigned%20to%20the%20cards.%20There%27s%20also%20an%20non-cms%20version%20at%20/nocms
Tags:
- random
- experiment
- example
- test
Visit Site