prototype

A test vision of how the EMBL Design Language could feel in function (not yet in look).

• View the prototype here
• Background reading and discussion

Data structure

Drive the look

A legal document about the establishment of EMBL, very rational task and outward facing.

<meta name="embl:rational" content="-10" />
<meta name="embl:external" content="10" />

A freely available online scientific service.

<meta name="embl:rational" content="-5" />
<meta name="embl:external" content="7" />

A web page about scientific service that requires authorisation to access.

<meta name="embl:rational" content="-3" />
<meta name="embl:external" content="4" />

The EMBL news landing page.

<meta name="embl:rational" content="6" />
<meta name="embl:external" content="9" />

Drive the navigation structure

We utilise the Who, What, Where facets to determine a web page's placement within the navigation system

<meta name="embl:active" content="who:ciprianiteam" />
<meta name="embl:parent-1" content="what:research" />
<meta name="embl:parent-2" content="where:grenoble" />

What about URLs?

The URL is still a useful organic indication of content's placement within the overall ecosystem and brand, but the role of the content can change over time so a URL cannot be the sole driver of navigation and look.

List of pages in this test

The four flows to trial, and a representative list of sample pages/urls needed

EMBL-Design-Language/user-stories#16

• EMBL.org
• /contact
• /jobs
• /locations
• /locations/heidelberg
• /locations/heidelberg/contact
• /search

EMBL-Design-Language/user-stories#23

• /news/[press-release]
• /news
• EMBL.org
• /research
• /research/[content on a research topic]
  • /training
  • /training/[content related to a specific domain/research area]
• /updates

EMBL-Design-Language/user-stories#24

• sampleService.com
• EDAM topic hub
• EDAM fragment pages (edam:news, edam:services)

EMBL-Design-Language/user-stories#29

• embl.org
• /about
• /about/impact
• /about/hinxton/impact

If in principle that list of URL fragments looks ok, I'll start having a look at a structure to prototype them.

Building this on your machine

You can preview changes by building on your local and serving on localhost through browserSync.

To install:

1. bower install
2. yarn or npm install

You may also need to:

npm install -g bower
npm install -g gulp-cli

To develop:

1. gulp: Will build the Sass and serve to your browser with browserSync
2. Edit an html file in ./pages