Portfolio Prototype Number 1.

I've always loved experimenting, learning, and upping my Webflow & design skills.

Over the years, I've designed and coded many portfolio websites, most of which have never seen the light of day. In this Portfolio Prototype series, I would love to show you some of these experiments.

Read more+

In this mini-case, we'll look at one of the first portfolio sketches I designed and developed entirely inside Webflow. The case consists primarily of screen recordings to capture the motion elements.

Services
Digital Design
Webflow Development
Prototyping
Animation
Homepage Animation Walkthrough
Homepage Load Animation.

Custom Devices

I wanted to create something unique for the case studies' thumbnails and ended up coding several custom devices, from mobile to laptop shapes, with only CSS and HTML.

I then animated them inside Webflow to actually fold open or turn into view, on hover. The result is a fun animation that feels different than the usual mockup. More importantly, some of the techniques I learned making this are some I frequently use for client projects.

Explore ↓
Scroll Through the Homepage.

The Project Page

Inspired by the custom devices I created for the case studies' thumbnails on the homepage, I looked for opportunities to present full-page screenshots inside their image placeholders. Additionally, in this iteration, the viewer controls most of the content on scrolling. This way, the case study truly comes to life.

The case study page shown in this mini-case was still a sketch and contained mostly placeholder images and text.

Explore ↓
A concept for the Project pages structure (dummy content).

What's This About?

This About page is one of the most extensive personal pages I've ever created. It's full of quirky details and cheeky jokes, and all in all, it's a pretty accurate summary of my personality.

Explore ↓
Scroll Through the Homepage.

11 Things

11 Things about me. Whether it's quirks, achievements, values, or the name of my one surviving houseplant, I present them again and again with every new portfolio. In this sketch, the 3D Globe was born.

After sketching the custom devices from before, I had this idea to create an abstract globe where each face would represent one of the 11 Things. In a way, it's a visual metaphor for my world of trial and error, exploration, experimentation, and 11 things.

I've also included a few early interactive sketches for the individual Things.

Explore ↓
11 Things.
11 Things Experiment 01.
11 Things Experiment 02.
11 Things Experiment 03.

Sketches

The road to nowhere starts somewhere. So I thought it would be interesting to show some of the early sketches that were part of the journey of this prototype. A prototype that eventually ended up getting scrapped, well, mostly.

To my surprise, I re-used the typographic exercises from this prototype to serve as the base for my Portfolio 2018 design. So feel to check that out.

Explore ↓
Homepage Sketch with an LP like feel to it.
The original sketch with scroll interaction.
The original sketch with mouse position interaction.
Sketch V1. The very first iteration of the typographic portfolio. Thought it would be cool to show the very first sketch.
Client
Personal
Services
Digital Design
Webflow Development
Prototyping
Animation
Sector
Portfolio
Year
2018
Details
Design
Timothy Maurer
Development
Timothy Maurer
Strategy
Timothy Maurer
Creative Direction
Timothy Maurer
Team