Next11.com.

Here you go, the chili of websites
Crafting an extensive Webflow site with advanced interactions, custom code and complex Masterclass CMS setups. In this case I helped football startup Next11 with a new visual identity, get online, compliant and ready to market.

The final product.

A Webflow website, visual identity and marketing material
The design is aimed at football fans of all ages and player level. Energetic, fast-forward and inclusive. With abstract vector splashes, a fresh gradient palette and plenty of animations, the brand guide and website for Next11 started to take form.

Required skills.

Crafting the design
  • Conceptualisation
  • Webflow design and development
  • Finsweet
  • Zapier
  • Hubspot
  • After Effects
  • Premiere Pro
  • Illustrator
  • Figma
  • Photoshop
  • Marketing strategy
  • Cookieinformation for GPDR
  • GTM for GPDR
  • Copywriting
  • Custom HTML and CSS

Executing team.

Key responsibilities
  • Client CMO
  • Client head of product
  • Client CTO
  • Client product UX
  • Client CEO
  • Myself as designer, developer and strategist

Deliverables.

Design hand-offs
  • Webflow website with 50+ subpages, complex CMS and much more
  • Internal design guide
  • Internal components library
  • Pre-launch Webflow site
  • Hubspot setup
  • Google Tag Manager setup
  • Facebook, Instagram and LinkedIn ads
  • Premiere Pro video editing
  • Strategic planning over Slack

Overview.

PROBLEM | Take the company's existing visual identity, keep the main traits but translate it into a digital environment in shape of a Webflow site, marketing content and scaleable for more.

CONTEXT | Next11 had been developing their football tracking system for 4+ years when I was approached to help them refresh their brand and build a new website to get them ready to launch.

Design patterns.

Key color palette | Next11 initially had gradient sections with black and white text. I decided to invert this design decision and keep most of the energetic pieces in gradient text and abstract background splashes. For this, I created 4 key gradients; Autumn, Spring, Winter and Summer, each with a different mood to complement the key brand color; Dragonfruit.

Graphical splashes| To capture the energy in sprints, swiftness in dribbles and power in tackles, I decided to work with graphical vector splashes. Combining brush strokes, half tone patterns, grids of dots, tiretracks and similar grunge textures, I ended up with a library of assets that serve as a key design trait for the brand.

Black and white base | The website of Next11 was always intended to be an Enterprise level platform from the get-go. This means an extensive Help center, overview of the product status, FAQ center, long overviews of each subproduct, Masterclasses, articles and much more. For this, I decided to work from a black and white base. Sections can be paired in groups of black or white background, and easily be converted from one to the other when needed. Main components should not be dependent on a specific image or background color, something that wouldn't have been possible with gradient backgrounds, that could quickly compete with each other visually.

cinematic animations| In the screenshow below what we see is an animation in progress; instead of a simple fade-from-black animation, a black-to-transparent overlay is moved upward as the user scrolls down into a section. I spent time on subtle effects like this to induce a feeling of the cinematic quality and visuality.

Complex webflow interactions | The client wanted the website to feature complex animations and interactions. I crafted dozens of those, including long sticky sections, dynamic counter-up loading animations and clip-masked scroll-based interactions like in the screenshot below. The result is a website that feels – hopefully – ambitious and modern, which is also an important aspect for the brand in whole.

Subpages with subidentities| The masterclass  segment of Next11 is an extensive academy with hundreds of videos spread across modules, categories, different speakers and subchapters. I developed everything from scratch using Webflow CMS multi-references, Memberships, Logic and crafting a sub identity with a unique menu and flow. For the visuals I trained myself using text-to-image artificial intelligence to create hero images, assets and inspiration without having to rely on the limited amounts of football stock material out there.

Learnings and reflections.

Building upon a visual identity | The client had a visual identity in place and only wanted it translated into a website, with few changes. As I presumed, there was in fact a lot of room to reposition it. My experience is that this is often the case, when clients see a brand unfolded in a new way.

The best clients | Clients new to web design and with limited funds tend to be all over the project. Top clients trust designers like myself with creative freedom and few process meetings. In my experience this also leads to better products that aren't stripped of everything controversial that some stakeholders can't agree on.

See more.

Next11 has launched and many pages, products and features have been released since then.