⸺ The essence of FutureLearn's design focuses on its content, aiming to inspire enthusiasm and excitement. At the same time, it delivers essential information to guide customers in choosing a course and browsing related options.

04.

Strategy

The design strategy prioritises the development of a system that is better suitable for scalability, aiming for fewer iteration cycles during the build process. While streamlining content and minimising visual clutter adhere to established good design principles, maintaining a clear hierarchy and order is crucial to ensure easy scanning of the content. Striking the right balance between brand elements and product specifics is a key element for building structure in the design. Credibility with personality—the visual design language conveys a sense of reliability and stability while reflecting the brand's unique personality. Infusing moments of fun in interactions adds delightful surprises for users, provided these moments are crafted subtly, enhancing the overall content and experience. Drawing inspiration from Swiss Graphic Design ensures that these elements remain unobtrusive, standing the test of time without becoming quickly outdated or distracting. By adhering to robust graphic design principles encompassing layout, typography, colours, and imagery, the design should effectively evoke three fundamental emotions: 

▲  Credibility from top content and certifications

▲  Enthusiasm from customers pursuing further learning

▲  Value from content that customers are investing in

⸺ Embarking on a new skill journey often mirrors the sensation of ascending stairs towards a higher destination. With each step, you inch closer to your goal. FutureLearn's design concept draws inspiration from this metaphor, adopting a modular approach that seamlessly connects the brand mark to the platform. This approach not only aligns with the progressive journey but also facilitates the design and construction of pages with substantial content density.

05.

Design Direction

The essence lies in the content. It should inspire and evoke enthusiasm while providing essential guidance for course selection. Adopting good design practices involves simplifying content and minimising visual clutter. A clear hierarchy ensures easy scanning. Delicate, enjoyable interactions aim to surprise users without overshadowing content. Striking a harmonious balance between brand identity and product functionality is key to structuring the design.

From the discovery phase, we define the key design elements that harmonise effectively with the concept and the design direction, guided by these four design principles:

●  Every step is one step closer

Each step marks progress, and this progression can be integrated into the design using graphic devices and layout techniques. Drawing inspiration from modern, clean and simple aesthetics found in design schools like Swiss and Scandinavian, this approach ensures that content remains easily scannable on lengthy pages while also accommodating discovery and subtle, enjoyable interaction elements.

●  Prioritise content and simplicity

Content is king, and carefully curated content elevates the user experience, establishing a memorable platform. Customers discern quality and value through well-presented content, contributing to a sense of credibility. Simplify for clarity. Less but better.

●  Be bold with brand and
personal with content

Employing a bold blend of imagery, typeface and colour will support in alleviating the platform's dense content. This not only infuses brand personality but also enhances the course's credibility for customers. This approach adds an element of excitement to the overall presentation.

●  Create surprise and fun moments in the experience

Delight users with nuanced moments through interactions or animations. The infusion of fun should be artfully balanced with the platform's mature and contemporary feeling.

⸺ The design identity is segmented into four groups, each featuring distinct executions. Despite their differences, all four design groups are led by a common overarching concept idea.

07.

Design Routes

1.  Contemporary editorial

Titles drive attention with a bold and sizeable presence, occasionally overlapping images to build a parallax effect. The typography layout adapts to the template and page function, with the homepage utilising most grid columns aligned to the left. In contrast, course pages are centred, optimising the reading experience and allocating left and right columns for sticky elements like course cards and call-out components. This layout enhances user engagement while maintaining visual appeal.

Content is encapsulated in background boxes, offering versatility with options for white, black or other selected colours. This flexibility permits customisation on each course page, following a defined design system where specific modules and components may leverage this feature. The remaining editorial components adhere to the same system, providing a cohesive aesthetic while allowing room for personalisation.

Imagery, sourced from brand photoshoots, features shots of people or objects against vibrant backgrounds. Consistent image ratios are employed across all imagery, ensuring uniformity within the design system and facilitating asset creation. The steps mark serves as a graphic design element, framing imagery and infusing a solid layer of brand personality.

A restrained colour palette, with the brand's pink reserved for interactions and call-outs, creates a cohesive visual language that strengthens the brand's identity.

2. Vibrant playful

Utilising the vibrant pink brand colour to illuminate the digital canvas, this approachable hue is synonymous with harmony. A brighter saturation of the brand colour infuses the design with a refreshing and lively feel, striking a balance with white, black and complementary secondary colours.

The distinctive steps, derived from the logo mark, are thoughtfully integrated to construct engaging layouts on the pages. To ensure a dynamic visual experience, this graphic device is reserved for hero modules and page footers, steering clear of monotony. The steps concept is further used in the design through an elegant and subtle application in layout and modular components.

Typography and imagery are bold, conveying confidence and elevating the brand's perception. The careful crafting of assets for the platform not only enhances the brand's visual identity but also adds substantial value and credibility.

The learning idea, integral to the brand name, finds representation through the use of learning shapes. This introduces a playful element and a sense of approachability to the design. The concept offers an opportunity to create customised shapes, seamlessly weaving them throughout the design to amplify brand personality. Whether crafted as 3D-rendered images or implemented using webGL for added dynamism, these shapes can employ parallax scrolling effects, while a specific colour palette enhances the overall brand aesthetic.
 

3. Angular stepped

Titles make a strong statement, overlapping with imagery to introduce a captivating parallax effect. Typography and layout dynamically adapt to the template and page function, creating intriguing layouts and variations that seamlessly integrate into the overarching design identity.

Imagery takes on versatile arrangements, featuring central alignment, offset positioning or fullscreen display. This adaptability creates diverse template variations, injecting a continual sense of interest and engagement throughout the platform. Typically set against white background containers, content may also cleverly overlap with images, adding a touch of dynamism through a parallax effect.

The steps graphic device adds a nice touch to the hero module headlines, enhanced by subtle animations. Reserve the steps for hero modules, perhaps in conjunction with sponsored content or similar logic, introducing delightful variations in layout and templates. This strategic approach ensures distinctiveness for specific pages, breaking monotony while maintaining cohesion with the brand and concept. The inherent blockiness complements the steps graphic device, simplifying the design and build of components.
 

4. Bespoke

The layout leans towards a magazine aesthetic, generously embracing white space. Typography takes a bold stance with sizeable headlines and a serif typeface, imparting a distinctive look and feel to the pages. The imagery and colour palette exudes freshness and contemporaneity, taking the brand to new heights.

This approach facilitates the seamless integration of components with the overall page design. It opens spaces for subtle interactive elements or modest animations to unfold as users scroll down the page. While the serif typeface may not suit the entire platform, it could be a perfect fit for subjects like Fashion, History, Law, Literature, Politics, and others.

While bespoke designs can introduce complexity, this route offers a simplified solution by combining bespoke and non-bespoke components. Specific components can be tailored to work seamlessly with certain pages and content, complemented by standard components that are universally applicable. The design and build process for this route may take longer, but the outcome will be a design that is not only distinct but also leaves a lasting impression.

© 2024

SV IS A REGISTERED LTD COMPANY IN THE UK & EU AND VAT–REGISTERED. © COPYRIGHT SV & CLIENTS AND RESPECTIVE OWNERS OF IMAGES AND CONTENT USED.