a selection of my work

Frontify

Swish Oral Care

Enigma

Borderless AI

Branding by Spencer Peppiatt.
EmailBoutique

Design by Blubird Creative.
Spraggs Group

The Branded Agency

Brim Analytics

8 West Clinic

Gallant Investment Partner

Project completed while at Slam Media Lab.
Sprig & Sprout

International Aviation Marketing

Popcorn Digital

La Chaine Vancouver

Media Profile

Design by Deutsch.
Pathway

A&D Engineering
The Project
Redesign and develop a modern website for a software sales representative in Asia.

A&D Engineering

Twigs Paper
Twigs Paper is an eco-friendly paper products e-commerce store. They have a beautifully curated website with products that are equally as beautiful. This Webflow development is done as practice to create responsive sites and as my take on Flux Academy's Design Challenge for June 2021.

Development Criteria
The challenge highlights the following as elements for evaluation:
- How visually similar the development is to the original
- Class usage efficiency
- Load speed
- CMS simplicity (if applicable)
- Responsiveness
- Animations
- Layout efficiency
- Element usage efficiency (ex. no extra divs)
The Process
Replicating or recreating the general look of a website is pretty straightforward, but nailing small details can be challenging. In the case of Twigs Paper's homepage, every section had slightly different layout and different animation. As much as I want to say it was easy recreating Twigs Paper's homepage, it was not all straightforward.
I used a combination of the CSS Peeper extension and Chrome DevTools to inspect the make of each web element. This process was lengthy but I gathered a lot of information on class, div, and animation specifics. Specifically how they all responded to different screen sizes.
Aside from native customization-abilities in Webflow, some elements and interaction required custom code. Below are a few of the custom elements.
Custom Fonts
Twigs Paper's site uses custom fonts purchased from Klim Type Foundry, specifically they use Tiempos and Calibre. I was able to download test fonts to use for free. Custom fonts can easily be implemented on Webflow.
CSS Customization
CSS code was added to customize scroll bar colors, select hover interactions, and text selection color.
Custom Slider Using Slick
The slider in "Our Best Seller" section uses slick slider by Ken Wheeler. Slide styling and customization was done through HTML.

The Result
The overall development was a lot of fun and I think it turned out really well! Check out the live site to see all the custom interactions - I must say The Papestielliz did a killer job on the design. If you're interested in seeing my development up close, you can clone the site on Webflow.
After a lot of waiting, the challenge results were finally announced in November: I WON the challenge! 🎉
Check out the challenge review below and see all the other top entries!
Design by The Papestielliz.
Twigs Paper
.png)