Arla Global Platform

Page types

Block pages

Block page types

  • Start page
  • Campaign page
  • Brand page

Built up by different blocks.

Primary purpose is to send the user to relevant destination pages.

Ribbon menu to support the sitemap overview.

See page examples here: https://creuna.invisionapp.com/share/QCO5PGOJ9XK

Tips & tricks

  • Building landing pages using configurable blocks allows us to achieve an endless combination of page designs, while keeping enough consistency to ensure that the site remains professional looking.
  • The system forces editors to create pages with either a Hero Block or a Page Title at the top of the page. This is done to establish a clear hierarchy for both the end user and search engines.
  • Alternating between different types of blocks in the body of the page keeps the end user visually interested as they scan the page.
  • Ensure that white backgrounds are used frequently to give the users’ eyes a break as they scan pages that use a lot of heavy colors.
  • Most block pages are overview pages, containing multiple brief summaries that tease longer form content pages like articles, recipes and product pages. Block pages are also good for visual storytelling on page types such as campaigns.
  • When two consecutive blocks have the same background color, removing the bottom padding of the top item will create more uniform spacing between the blocks and avoid too much white space.
  • Whenever possible use carousels to show lower level content (articles, recipes, etc.) instead of just using a teaser block for a link to the entire section (see Arla.se Arlakadabra mockup > recept & mattips).
  • When you have 1-3 content pages to promote in a row, use alternating full width teaser blocks. When you have more, consider using the carousels or grids. 
  • When 2 or 3 stacked full width teaser blocks are about the same topic - use the same color text backgrounds to link them visually (see Pink Fitness mockup)
  • Create a custom single column “centered block” by combining the Inline title block and the Image block in sequence and using the same background color. (see Pink Fitness mockup > app teaser) 
  • Use light background Banner text blocks with dark text to break up pages with a lot of dark background teaser blocks.

Product page (old style)

Page template

Header area: Name, image, description

Core: Nutrition, package details and more

Related content: Product grid

imagefxzg.png

Product page (new style)

Page template

Header area: Name, image, description

Core: Nutrition, package details and more

Related content: Product grid

Recipe page

Page template

Header area: Title, image, description, ratings, cooking time

Core: Ingredients and cooking instructions

Related content: Recipe grid

Article page

Page template

Header area: Heading, image

Core: Body text, images, video, quotes

Related content: TBD