Link

Working in the open with W3C and Studio 24.

Search

Designs for the default, landing and business templates

Updates Design

By Julia Sang - 26 Nov 2020

Following approval on the global design, we’ve moved into the detail design stage of work. In this phase we are:

  • Designing page templates at three different breakpoints - starting with mobile and moving up to wide screens
  • Defining page components - which ones do we need to effectively display content, and importantly, how will they work
  • Defining the content model for the CMS, to deliver the designs and content on the site front-end.

This week we shared the following designs with the W3C project team for their comments and sign-off.

Default page template and navigation options

Template to create a generic page of content. Includes the following navigation options:

  1. Beta banner & feedback option. To encourage people to feedback on content via an email address.

  2. Language selector. At top of page, so users can translate the page before getting into content (assumes beta banner, nav and all content will be translated). Note: In the small & medium size screens, language selector is first, but on desktop it is second. This is recommended because on desktop key user actions are commonly right aligned, and follows the design placement of sign-in on desktop. It’s an approach that makes visual sense to the user within a limited space. When the Beta message is removed it will be left aligned and the first thing people will see on the desktop page.

  3. Sign into account link. Account link ‘signed in’ version. This user has no image so it uses the first letter of their name in the circle (TBC, may just be placeholder profile image if not photo). Because of the amount of different actions / items already in this space, we recommend the user link always goes to the user’s account page, which then features all links to members only sections that someone might have access too.

  4. On the page anchor navigation (page contents). In-page anchor navigation. Will be auto populated by any heading 2 or heading 3’s on page. Can be turned on in CMS.
  5. Secondary navigation (related content). Dynamically populated by sibling pages. Note: other related content can be populated on the page in separate components.

View the designs:

Landing page template

Template to create high-level pages that link through to more specific entries. For example, we suggest using the landing page template for the ‘Get Involved’ page that links through to various pages describing ways to participate in the work of the W3C.

Business ecosystem page template

Template to tell a story including content about specific industries, who the W3C are, why W3C are trustworthy, and the benefits of being a member.