Background

This issue covers the design visuals for the ‘Out of The Box experience initiative’. We are carrying out design work for a demo installation profile for Drupal core. All the background on this initiative can be found at the roadmap issue #2847582: Out of The Box initiative

Problem/motivation

In summary of the problem/motivation. We are creating a demo of Drupal that will provide a valuable showcase experience of Drupal ‘in action’. This is something that is offered by most other CMS platforms but currently missing from the Drupal project. First impressions are extremely important, and we want this demo to look great, inspire further evaluation of Drupal core’s capabilities and to help those wanting to understand more about how Drupal works.

Designing the experience

The out of the box initiative has followed a design process that has taken the following steps:

Agreement on the sample content scenario

The scenario is based on a food magazine publisher called 'Umami'. This scenario is appropriate for reaching a broad and international audience, whilst being well-suited to demonstrating key concepts and capabilities of Drupal core.

Creation of user stories

During our weekly initiative calls, the goals for the scenario were laid out and mapped to a number of user stories which have been reviewed by the product managers.

Design the content model

The content model (https://www.drupal.org/node/2818741) defines the content types, fields and taxonomies for the scenario. The design for the theme has been created to closely follow this model and to demo key Drupal core features identified in the user stories.

Design wireframes

The wireframes have been designed and can be accessed here: https://www.drupal.org/node/2818741#comment-12093013 These wireframes map to the features in the content model and illustrate the layouts for sample content that will exist in the installation profile.

Create sample content

The work to produce the sample content has been progressing in parallel with the current design work.

For recipes, if we don’t create our own, we believe we’ll be able to use recipes from https://www.cookipedia.co.uk/recipes_wiki/Category:Favourite_recipes.

For featured articles, we are creating articles specifically for this project that may have feature designs created to accompany the copy.

For images, we are likely able to use images such as the ones in the design mockups since these are released under CC0. We also hope to create our own images.

Umami design mockups

And so to the designs for the Umami demo installation profile. We are sharing the designs for this initiative and asking the community for their thoughts and feedback. You will find below links to access the design visuals which illustrate the following layouts:

  • Home
  • Featured articles
  • Article
  • Recipes
  • Recipe
  • Magazine (Page type)

We are also presenting mockups of how the design might be presented on a mobile screen.

Umami, designing a scenario brand

We are creating a scenario that is modelled on a food publication's website providing articles, recipes and promotion of the faux Umami brand and magazine publication. The name Umami, which is one of the five basic tastes (savoury), was selected from a long list of name options during one of the initiative's weekly meetings. The name is fun, looks great in logo form and to the best of our knowledge is not used by an existing food publisher.

A number of font-based logos have been produced and the one used in theses designs uses the Kewl Script font, chosen because it's fun, energetic and looks great! This logo also works well when presented in the brand orange or when used white-out in the magazine front page mockups that have been produced.

The brand style is to be bright, colourful and inviting and as the sample content and media comes together, we intend to use the brand and the design of the content to inject as much energy into the design as possible. This is important because we are hoping to deliver content that keeps things interesting from the design perspective whilst the theme can remain minimal and therefore easily repurposed in the future.

Except for the logo and feature designs, the fonts used are Google fonts. Headings are ‘Scope One’ and the rest is in ‘Open Sans’. A styleguide has been started to support the production of these designs and we are using a modular scale for the sizing of typography. The colours used for typography have been checked for their compliance against AA at small font size and should be compliant.

Your feedback

Feedback is vital for our next steps. The designs have been produced iteratively and the process we are keen to follow remains iterative. We want this project to succeed in achieving its goals and for that reason it is important that review of the designs is given for both aesthetics (do these designs excite you, draw you in, do you like them?) and purpose (how is this scenario working given the user stories).

Design notes

To help you review and feedback on these designs, here are some design notes for each of the visuals:

Home

  • The home page introduces the site subject (food magazine), the brand, promotes the types of content available, routes users to areas of interest and promotes the latest edition of the umami magazine
  • We have discussed including a further 'message' block for this page where a paragraph of text could serve to concisely introduce the scenario. For now we've left this out in lieu of feedback
  • As with similar websites that the scenario is modelled on, the user is presented immediately with visually rich curated content and signposts to more content of interest. We want there to be no doubt that there is a great experience on offer and that the content has you wanting more from the get-go
  • Navigation is typical following the model of collapsed hamburger menu for small screens and primary links displayed for larger screens. Search is in a primary location as it would be on a site of this type and a login link is included for the sake of the demo
  • We use different layouts for each of the content bands which helps to avoid the design being too 'samey' and provides a good opportunity to demo Drupal core site building features such as view modes and blocks
  • From the perspective of the theme as a Drupal core demo, the home page kicks things off by showcasing Drupal's suitability for creating rich, great looking, content managed websites. And with that, the importance of easily being able to create and present different types of content in a structured way. We want the demo to be instantly familiar for its users and of course we want it to impress
  • The functionality on show includes different content types, field-based structured content, Views, content curation (promote to front, sticky), custom blocks and block types, image styling, menus and responsive theming, taxonomy. All this from Drupal Core features alone
  • As an initiative it's still early days in terms of our plans for how we might want to add a narrative for those users who want to know more about what's going on under the hood

Features

  • The features landing page lists the article content type only
  • The lead article is presented in hero banner format. This is proposed to be a custom block type demonstrating different types of blocks and it will link through to the article
  • At least 9 additional articles will be listed using a card view mode which displays the main image field for each article in the standard 3 x 2 ratio, along with title and view link
  • The umami current edition promotion block is reused at the foot of the page
  • An additional block promoting a magazine offer is used to present the links through to the contact form and a page that will go into details about the demo

Article

  • Articles will demonstrate the ease of creating content primarily through the ckeditor/body field. The plan is to include various body style elements and images that have been included into the body copy
  • Articles could include their own vocabulary and this has been illustrated as a link beneath the article title. This would link through to a View of articles filtered for that term. At this time, the content model does not reflect this but it remains an option
  • The sidebar promotes a number of other articles that are listed using the standard card view mode. This will demonstrate how simple it is to setup a View as an aside

Recipes

  • The recipes landing page lists the recipe content type only
  • Like the Features page, the Recipes page uses same custom block type to create a hero banner, this time promoting a selected recipe
  • Recipes are to be categorised and each category will have a View created to display 4 recipes from each. These Views can then be placed as we wish to in order to build up the page. Ajax will be used to load more results from each category
  • The card view mode is used again but this time with 4 columns rather than 3. Demonstrating the use of different view modes, these cards include the difficulty level for the recipe as an additional label
  • The taxonomy terms applied to the recipes will be listed as links at the food of the page and these will link through to filtered views of the recipes

Recipe

  • The Recipe page lays out the various content type fields in a structure that makes sense for working through a recipe, going from overview to the recipe details
  • There is discussion ongoing around whether the method will be a body field with heavily styled ordered lists or a more structured step by step field approach. Either way, we want to show how simple it is to create this sort of content
  • Recipes are both categorised and tagged. These values are displayed beneath the title
  • The 'More recipes' list at the foot of the page is a great opportunity to demonstrate referenced/related content and it reuses the card view mode from the recipes listing page
  • Icons have been purchased from thenounproject.com for the sake of these design visuals. We will be designing our own icons for the theme

Magazine (Page type)

  • Like Articles, the Page content type will further demonstrate content being laid out using the ckeditor by providing this content-rich 'about the magazine' page
  • The page type will additionally be setup to belong to the main navigation and provide a demo for creating content within a traditional menu structure
  • The featured articles View is reused on this type of page
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

kjay created an issue. See original summary.

kjay’s picture

markconroy’s picture

Great work here Keith, thanks for all the effort you have put in to this so far.

mherchel’s picture

Looks wonderful! Great work -- I wouldn't change a thing. I'd suggest that you timebox the discussions, so we don't bikeshed too much :)

rachel_norfolk’s picture

This is a fab piece of work. Nice one!

I agree with mherchel - there will be comments forever unless there is a specific timebox given. It will help you progress.

andrewmacpherson’s picture

I'll have a more detailed look at this from an accessibility viewpoint soon. Meanwhile I'll encourage other accessibility contributors to look at it too. Already mentioned on the #accessibility Slack channel.

Can we have the colour palette please (the actual colour codes)? From first glances most of the colours look to have good contrast, but there are some that look borderline. For instance, the grey-on-white "image credit" text after a photo.

Have any focus styles been designed, interactive elements?

kjay’s picture

Thank you everyone for the feedback so far :)

I've added a note in our New Theme slack channel about discussing the timeline.

@andrewmacpherson Thank you for this. Really appreciate it. I'll update here with all the colours. We're waiting on feedback before going too much further on the finer-grained interactive design work but you raise a valid point that this will need accessibility review as well, so the sooner the better. I'll raise this in the next meeting and update the designs asap.

ChandeepKhosa’s picture

This looks fantastic. I look forward to hearing more about it at your session during DrupalCon Vienna!

webchick’s picture

When discussing timelines, note the release cycle for 8.5.0: https://www.drupal.org/core/release-cycle-overview#next-development-cycle

So Jan. 15 is the deadline for new features. December is usually largely a write-off since people (including committers) go away for holidays and whatnot. So it would be good to get as much done by end of November as possible. That leaves time for the inevitable needs review/needs work feedback cycle.

yoroy’s picture

Issue summary: View changes
Bojhan’s picture

Overall this is great, I can clearly see all the makings of what Drupal is about nicely showcased in one theme.

Some initial feedback:

  • Could you elaborate on your usage of serif/sans-serif? Typically these "cooking brands" use serif much more to capture that "home-style cooking" style (e.g. http://www.cookinglight.com/)
  • It could be worthwhile to do an initial WCAG pass, it can have significant impact on your designs - better to catch that early
  • There is a repeating "in this months issue" block across all the pages, this reduces the focus of say the "gallery" or "article" page. Perhaps we can do a smaller version and/or leave it out.
  • The break of the layout with "in this months issue" block on the frontpage feels rather sudden. Where as the "attached" items dinners to impress, learn to cook, baked up give the impression they are related but they are actually not? Some ideas:
    • Seperate the in this months issue from the links below (e.g. vertical spacing)
    • Use a different visual language to denote the "banner", right now it uses brown tiling, brown front-image, brown cover. This makes it hard to focus on the "important" part which is the text.
  • What is "Features"? This is the "Gallery page" I assume, but the title is nonsensical to me. I am assuming this is Editorial content, other labels could be "Magazine", "How-to's", "From the editor", "Editorials", "Columns", "Cooking", "Techniques",
  • The primary call to actions (pink buttons) are somewhat hard to read, perhaps using a heavier weight helps.
kjay’s picture

@Bojhan, thanks for the feedback

Could you elaborate on your usage of serif/sans-serif? Typically these "cooking brands" use serif much more to capture that "home-style cooking" style (e.g. http://www.cookinglight.com/)

This is a design choice that we've taken based on referencing a number of similar scenario brands. In our early discussions around creating the brand, we agreed that we want to keep things 'fun' and using a slab-serif font on headings, like the one we've chosen, helps achieve a style that avoids being too 'traditional' or serious in tone whilst being warm. We're thinking vintage / home-style / lifestyle.

The sans-serif font for body text has been used for the same reasons and to ensure good legibility.

It could be worthwhile to do an initial WCAG pass, it can have significant impact on your designs - better to catch that early
There might be color contrast issues.
And ideally you don't run into https://www.drupal.org/node/890362

Absolutely. I've done initial checks and alterations on colour contrast for AA compliance but I'm very happy to do more checks and take advice where necessary.

There is a repeating "in this months issue" block across all the pages, this reduces the focus of say the "gallery" or "article" page. Perhaps we can do a smaller version and/or leave it out.

Early designs did indeed use a smaller/different version of this repeated block on pages other than front. The conversations around our wireframes and various design iterations have resulted in features being removed or simplified in order to make the theme simpler to produce. Simply repeating this block is a result of one of those 'simplify' conversations!

I'd be concerned about removing completely since I think there are both 'demo' advantages to this being there and it reinforces the scenario. Doing a further design iteration with a more compact and possibly adjusted block would be no problem at all if the consensus is that this block is too large when used across the board.

The break of the layout with "in this months issue" block on the frontpage feels rather sudden. Where as the "attached" items dinners to impress, learn to cook, baked up give the impression they are related but they are actually not? Some ideas:
Seperate the in this months issue from the links below (e.g. vertical spacing)
Use a different visual language to denote the "banner", right now it uses brown tiling, brown front-image, brown cover. This makes it hard to focus on the "important" part which is the text.

This sudden visual shift exists because the design approach for the theme has been to achieve as much of the design interest through the content itself, rather than the underlying 'theme'. As such, if you removed this block then the theme visually returns to being pretty much flat and simple, hopefully ideal for repurposing.

We want the scenario to be as convincing as possible and I think that such a website would use contrasting bands to grab attention to the promotion of the magazine. It is strong, but intentionally so and is intentionally designed in a 'magazine' visual style. I am hoping to avoid this being a wishy-washy content feature. This is a band of content where we can inject more fun into the design and I'm very happy to produce some more versions of this block and present the magazine in different ways.

What is "Features"? This is the "Gallery page" I assume, but the title is nonsensical to me. I am assuming this is Editorial content, other labels could be "Magazine", "How-to's", "From the editor", "Editorials", "Columns", "Cooking", "Techniques",

Features are featured articles so yes, editorial. This can easily be renamed to something less confusing. The site contains Feature articles and Recipes and each are listed on their relevant landing page.

The primary call to actions (pink buttons) are somewhat hard to read, perhaps using a heavier weight helps.

Heavier font weight would be a good move for these, agreed :)

yoroy’s picture

Status: Needs review » Reviewed & tested by the community

Thanks for the detailed review @bojhan and the thoughtful reply @kjay. I too think we should keep the "this month" block as is for now and can iterate more. It will be easier to make that call based on a live (demo) implementation instead of on these flat sketch renderings.

I've been closely involved with the whole process of defining the content model and evolving this visual design approach. I feel we're lucky for @kjay and team to invest this level of time and expertise in this initiative. This has been designed very thoroughly and it's all looking great. We do want those accessibility checks and maybe refine an font weight here or there, but I think this design is done for where it needs to be now. So marking this rtbc

Dries’s picture

This looks fantastic to me. Thanks kjay and everyone involved for the steady progress and leadership. +1 from me to move this forward!

webchick’s picture

+1 from me too. :) I've been so incredibly impressed with this team's ability to execute on this, and the results are incredibly exciting. Onward to implementation!

larowlan’s picture

Woohoo RTBC!

Great work @kjay et al

markconroy’s picture

Hi Folks,

Just a note to say I started putting "something" together last night towards a styleguide - all is up for grabs in terms of my approach, but I just wanted to get something started so we could start having classes to make our CSS and JS. That development is here: https://github.com/lauriii/umami_styleguide

I'm hoping to spend all day Friday on it, so if you have any ideas/criticisms send them this way.

andrewmacpherson’s picture

webchick’s picture

Status: Reviewed & tested by the community » Needs work

I was going to mark this issue "fixed," since it has product management sign-off, but then noticed the "needs accessibility review" tag.

Pinging in #accessibility on Slack, it sounds like @andrewmacpherson is blocked on doing this review because he needs a list of the colours that are used in the design. Can anyone help out with that?

webchick’s picture

Priority: Normal » Major

Also, bumping to major since this is one of our top 7 targets for Drupal 8.5.0.

webchick’s picture

FileSize
553.97 KB

Ok, here is the design styleguide, from @kjay on Slack.

webchick’s picture

Status: Needs work » Needs review
andrewmacpherson’s picture

I grabbed the colour codes from the style guide in #21, and plugged them into my favourite palette analyzer form NCSU. Here's a link to an interactive contrast comparator:

https://accessibility.oit.ncsu.edu/tools/color-contrast/accessible-color...

(Note: if you play with that tool, you'll see an alarming number of failures. Most of these are red herrings, because it shows every possible foreground-background combination that can be made form the palette. Obviously we're only interested in the fg-bg combinations that are actually used in the design.)

I'll have a more detailed look at this over the weekend.

Next step is to look though the design images in the original post, and confirm that all the combinations we find have been accounted for in the Styleguide v0. Like, are there any colours in the designs which are not accounted for in the list here?

Also attached are some text files with the colour codes.

webchick’s picture

Given #23, I'm wondering... would it be easier to perform this type of accessibility review later, once the theme is in prototyping phase and you could (presumably) point a tool in a browser at it instead of manual entering information?

I don't say this from a "shoving off accessibility review because it isn't important" POV at all—either way, accessibility compliance would be must-have for the theme to be marked stable in core (and possibly to get it initially committed as experimental, too), but more from a "the changes that will be required seem fairly straight-forward to find/replace in code, so getting some code written first might help save everyone time" POV.

andrewmacpherson’s picture

Re #24 - Yes, I was wondering if it would be better to do the a11y review as part of #2881910: Create living styleguide for Umami, which will presumably continue to tweak the designs.

The definition-of-done for the living style guide could require a11y sign-off. We'd want to say we were confident in colour contrast, use-of-color, focus styles, heading styles robust enough to suit a variety of document outlines and page layouts, and so on. The style guide could also include sufficient demonstrations and remarks about accessibility affordances.

If we move accessibility sign-off over there, then this issue could be marked fixed. Where fixed was understood as "we love the general direction of the v0 designs, let's refine them further".

andrewmacpherson’s picture

What the heck. Let's say a11y sign-off is required for the living styleguide to be considered a release candidate.

andrewmacpherson’s picture

Status: Needs review » Reviewed & tested by the community

Accessibility was the only concern since the last time we were at RTBC.

webchick’s picture

Status: Reviewed & tested by the community » Fixed

Right on. Let's do that, then!

I hereby declare this issue fixed, as in "we love the general direction of the v0 designs, let's refine them further". :D

kjay’s picture

:) This is great, thanks everyone.

ckrina’s picture

Yay!! Thank you for your hard work @kjay!

webchick’s picture

Also crediting @ckrina on this issue, since you've brought it to UX meetings several times. :)

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

webchick’s picture

Tagging it up.