Design Patterns

Patterns are a simple, reusable solution to a design problem.

Accordion

An accordion is a vertical list of headers, users interact to reveal or hide content within them. They reduce page length and scrolling.

  1. v1

Account in apps

Account in apps provides a way to sign in. It also gives you access to your account information.

  1. Updates

App information

The app information screen is where you access important 鈥榬ead-only鈥� app information. This doesn鈥檛 include personal information.

  1. v1

Autoplay

Autoplay takes you to the next audio or video item after the current one has finished. It supports a hands-free experience and allows complete control.

  1. v1

Bottom navigation

Bottom navigation bars allow movement between primary destinations in an app.

  1. v1

Cards

Cards allow you to preview and share content but also discover more information without leaving the page you鈥檙e on.

  1. Updates

Carousel

A carousel presents a window to view a set of items where space is limited, while indicating there鈥檚 more available to browse than what鈥檚 currently shown.

  1. Updates
An illustration of a comments module.

Comments

Comments allow the audience to join the conversation. They help create an engaging, participatory 蜜芽传媒.

  1. v1

Confirmation and error messages

Confirmation and error messages in apps provide immediate feedback in response to your actions or system failure.

  1. v1

Content utilities

Content utilities allow the user to interact with, or perform an action for a piece of content. For example, Add or Share.

  1. v1

External linking

External links are styled differently to internal links to inform the user they鈥檒l leave the 蜜芽传媒 domain.

  1. v1

Filter

Filters help the user find what they鈥檙e looking for. Allowing the user to refine content by selecting criteria that鈥檚 relevant to their needs.

  1. v1

Games framework

The Games Framework (Games GEL) helps us make consistent games and apps experiences for children.

  1. Updates

Global search

Global search allows users to search across the whole of 蜜芽传媒 online. This guideline doesn鈥檛 cover results pages or filtering.

  1. v1

Information panel

An information panel stores helpful but not essential information. The panel appears over the content on the same page.

  1. v1
Sticker sheet of input types

Inputs

This guideline explains how to design form inputs across 蜜芽传媒 online experiences.

  1. v1

Launch screen

A launch screen is displayed after an app鈥檚 launch instead of displaying a blank screen, this can decrease the sense of a long loading time.

  1. v1

Local search

Local search allows the user to search for content within the product they鈥檙e using, rather than globally.

  1. v1

Location settings

Location settings allow the user to manage their location preferences across 蜜芽传媒 products. Users can store multiple locations.

  1. v1

Masthead

The masthead is at the top of every 蜜芽传媒 page. It contains the global navigation alongside individual branding whilst retaining a familiar structure.

  1. v1

Numbered pagination

Numbered pagination helps the user navigate through pages when there鈥檚 a lot of content.

  1. v1

Onboarding

Onboarding is the sequence of screens that appear before an app home screen. We use these to personalise the users experience.

  1. v1

Pocket

The pocket pattern allows the user to reveal content without leaving the page. Avoiding overwhelming them with excessive amounts of content.

  1. v1

Preferred location

Preferred location allows the user to set their location. Content across the 蜜芽传媒 is personalised based on that location.

  1. v1

Promos

A promo is a snippet of content which links to the full piece elsewhere on the 蜜芽传媒 site or app.

  1. v1

Ratings

Ratings lets you measure how good or popular a piece of 蜜芽传媒 content is. You can see how others have rated and add your own rating based on a 1-5 scale.

  1. v1

Recommend颅ations feedback

Recommendations feedback allows you to give feedback on your personalised recommendations for use with the algorithmic personalised recommendations system.

  1. v1

Settings

The settings screen allows the user to change how an app works to suit their needs.

  1. v1

Share tools

Share tools allow the user to share 蜜芽传媒 content on different social media platforms.

  1. v1

Side drawer menu

A side drawer menu provides a quick and easy way to navigate around an app.

  1. Updates

Sign in or register CTA

The 鈥楽ign in or Register' call to action is the only way a user can log in to access 蜜芽传媒 websites & apps. This guideline applies to all versions of 蜜芽传媒 account.

  1. v1

Tabs

Tabs organise and tuck away content into panels which you can navigate between. They help show content in a small space.

  1. v1

Topic management

Topic management provides the user with the ability to customise an app to suit their needs.

  1. v1