The added depth dimension to the scrolling experience
Minimal menu navigation
Thibaut Courtois is a Belgian national team and Real Madrid goalkeeper widely regarded as one of the best players in his position.
His website, conceived and executed by Three Sixty digital agency, employs a unique navigation concept. As opposed to scrolling the website from top to bottom, the visitor moves “in-depth.” The scrolling action zooms into the screen and conveys a feeling of moving forward as it goes past the images and bits of different content.
The mostly dark-mode website uses plenty of black negative space, with the monochrome imagery centered and delicate floating effect thrown in. The gold and white accents are scattered throughout, including the main navigation menu. Logos like “Nike,” “Real Madrid” and Courtois’ very own are placed on the left.
Its custom-made serif font is both stylish and contemporary-looking. The subtle motion effects in the background lend more liveliness to the website, while the space-saving tabs help organize content for certain pages.
yfitnesslab is a personal training program developed by a Belgrade, Serbia-based speed fitness EMS instructor and senior physiotherapist. The website for his services is a brainchild of General Condition branding and web design specialists.
The website’s concept and visual identity take the instructor’s unique blend of medicine and fitness into account. It uses Supertype angular typography, black and grey tones and minimal photography to emphasize this duality.
"Materials” in the background, such as concrete, black fabrics, shattered glass and gritty surfaces convey the sweltering, hard-working nature of yfitnesslab’s training routine. A particularly eye-catching visual is the animated static noise in the background.
The homepage covers the entire user journey of an interested prospect or a casual visitor who can find compelling info delivered directly and fluff-free. The sliding navigation menu on the left takes up half the screen and points to several other pages/points of interest that elaborate on the homepage’s content.
PSV Eindhoven is one of the Netherlands’ most successful soccer clubs. Its “Philips” stadium has a special lounge section in the stands that hosts celebrities, club legends and VIP members. And this lounge section has its own website, courtesy of De Jongens van Boven.
Above the fold, the full-screen videos provide spectacular backdrops showcasing the view from the lounge as well as luxurious amenities enjoyed by the visitors. As this is another monochrome website on this list, the white and gold accents counterbalance the restrained palette.
A high-end serif typeface is used on the larger, accentuated bits of copy while a more conventional sans-serif font lends legibility to a greater chunk of content. Scrolling down the site, the visitor sees which Dutch sports legends they get to meet up close and personal and which awarded Chefs prepare the delicacies they get to sample.
The one-page website doesn’t require any navigation menu. The only two outbound links are to the Legends Lounge’s Facebook and Instagram pages.
In stark contrast to the previous entries on this list, the Squadeasy website – developed and designed by Guillaume Azadian – uses the boldest shade of electric green to wow the audience and make vital elements pop.
Besides the choice of color, two things jump out as the most striking impression: the symmetry of elements (the slogan in the center, the menu, brand logo, mission statement and CTA in the corners) and the quirky animated dog head that rotates as the user moves the mouse cursor.
The page animation loads as the user commences the journey. An elongated sans-serif font contrasts the background and provides good readability. The sticky main menu appears on the screen again as soon as the visitor scrolls back up a little.
The most notable part of the website’s homepage is the showcase of how the app works. A screenshot of the app in action is accompanied by simple to follow, step-by-step instructions. The next section with case studies and social proof is even better-looking, with stat images overlaying the content beneath them.
Several call-to-actions appear on the page, sporting different looks and different copies. This inconsistency doesn’t harm the overall user journey and instead contributes to a fuller and richer experience.
Route One is an eCommerce website selling sports clothing, shoes, accessories and equipment. It is designed and created by Eastside Co, a Birmingham, UK-headquartered agency specializing in Shopify projects.
The scope and breadth of the website’s offering are apparent through a well-organized main menu that contains all the essential categories. The vital bits of information, such as phone contact, next-day delivery and login form are all located near the top of the page, quite visibly and well-integrated into the overall design.
Furthermore, large-format photography above and below the fold links to the most common points of customers’ interest - be it specific items or general shopping sections. The product pages focus on the visual representation of each item through a neatly arranged description, specifications and other info.
Related items that up-sell and cross-sell to the visitor appear just above the visible Add to Cart button. Personal recommendations and a very seamless checkout process complete the overall pleasant user experience on Route One’s eStore.
The website for W Series, an all-women motor racing championship cup, was created by Organic website design agency. Since the 2019 digital launch of the W Series, it required a digital presence that would enhance the functionality and provide more consistent and refined aesthetics.
The minimalist visual flair and overhauled mega main menu provide rich content, updated weekly with every new race. The digital expansion of the W Series is also reflected in the site’s functionality to stream the races on any device.
The website’s navigation, site structure and page design make the information easy to access. The quick page overviews are made possible with the clever use of modules and tab elements that come especially handy for complex facets such as race stats.
Lastly, the majority of the website uses white negative space, while the accents in purple and electric yellow help numerous elements stand out.
Xperience Park leisure park located in the French region of Alsace offers multiple activities such as shuffleboard, Ninja Warriors, arcades and even augmented reality enhanced sports.
Their website, a product of Mars Rouge design agency, conjures the excitement of the place through a vibrant yellow-black color palette. The website aggregates info on activities, events and even an online store on a single platform.
The main menu navigation is not only sticky and in line with the user’s journey. It also comes with an unusual appearance: uneven borders, an animated yellow circle to highlight the selected menu item and the so-called mega dropdown menu showing the contained items with images, not just words.
The highly saturated photographs interrupted by boxy “grid” layout of content arrangement balance out the information-rich middle section containing tabs module with multiple content pieces occupying the same space.
Product pages open with a full-screen video of a product
Kitelement is an eCommerce website selling outdoor equipment, backpacks, kiteboards, travel bags and other items used by avid freestyle aficionados.
The recurring design element, implemented by Czech design agency Able, is the downward arrow that appears in various forms throughout the website. It is apparent in the two top-side elements, cart and main menu button, the shape of a CTA button and screen/photo design frame that separates different sections as the visitor progresses on their user journey.
Within the arrow-shaped frame are hi-res images of the products or full-screen videos showing them in action. Various CTAs, from “Read now,” “Follow us” to “Shop now” utilize the same cutting-edge, sans-serif typography found elsewhere on the website.
The most interesting aspect of this website is the main menu navigation. Clicking on the menu button in the top right corner will open a quick-sliding menu across the entire screen.
Last but not least are the product pages, which showcase the items in full-screen videos before detailing specifications, price and close-up images.
Team Elite Kickboxing is a kickboxing academy from Nottingham, UK. Their website is conceived, designed and developed by Framework Design and relies heavily on videos – the most critical consideration of their work with this client.
A brand-led website captures the essence of the school, values and skills they profess. The visual representation of the school branding demonstrates speed, precision and agility – three core qualities of kickboxing.
Action-shot video in the site’s background, tinted in brand colors of purple and red, is incorporated within the graphic’s thin and sharp lines to convey the feeling of fast movements and precision. The bold colors and lines also represent the energetic personality of the Team Elite Kickboxing team.
The videos feature people of all ages and genders to encapsulate the school’s inclusivity and cross-generational appeal.
Well-incorporated team colors into the website design
Brilliant use of various media
London-based agency Deltatre’s extensive experience in sports branding and web design has landed them a job of creating a website for Italy’s most successful soccer club – Juventus.
The stunning website opens with a full-screen video showcasing the current happenings in the club – at the time of this writing, it was the launch of the team’s third kit. Scrolling down displays the main portion of the website, including a distinctive main menu design that moves from the left side to the top.
The tailored Juventus font adorns the pages, as does the extensive use of multimedia such as videos, motion effects and user-generated content like the fan’s Instagram feed containing Juventus memorabilia. The navigation is fairly simple and focuses mostly on the interaction with fans and exclusive content devoted to the club’s followers.
The minimal search bar takes up the top of the screen only when called upon. The black and white palette of the main menu, headers, module titles and other details perfectly align with the current best practices in layout organization and is also an on-brand representation of the team’s colors.
Short Par 4 is a brand that specializes in golf apparel. Their website is developed and designed by The Movetic creative agency.
Above the fold on the homepage, the main menu navigation is quite clearly indicated with a lot of white space. The thick white line leaves enough breathing room for menu items to be very noticeable among all other content on the page.
As is the custom with clothing eCommerce websites, large images take up the majority of screen. Boxy modules and content sections utilize a very legible sans serif font in black color against the white background.
The explanatory messaging that describes the process of ordering the apparel is quite understandable and follows the natural progression of the user journey on the homepage. The CTAs use the red border to differentiate this vital element of the conversion funnel from the rest of the content.
GO180 is a company committed to helping people achieve their physical goals through guided diet, exercise and lifestyle. They collaborated with junction, a creative and digital agency focused on branding.
Upon entering the website, visitors are greeted with a full-screen video display that plays on repeat. It showcases the whole gym facility and equipment used by coaches and trainees. Positioned in the center of the video is a distinct CTA button in white that redirects users to a Join Now page. The agency designed the website with a seamless transition in mind. Each section has a dedicated image background, a tagline and a CTA that links them to different pages of the site.
It’s also commendable that the agency capitalized on the brand’s evocative images. Displaying these in full high-quality view gives the potential customers a peek at what kind of services they can expect from the brand.
Lastly, the sticky navigation menu is a smart decision. With this, visitors can easily access the page they need anywhere on the site.
Discover more award-winning sports website designs.