Specs & Info for Designers
This document should contain all the information needed to create a design that the We.Publish team can efficiently implement for newsrooms.
Last updated
This document should contain all the information needed to create a design that the We.Publish team can efficiently implement for newsrooms.
Last updated
The We.Publish CMS has a few different content types that behave slightly differently.
The different content types are:
Articles
Pages
Events
Comments
Navigations
Polls
Navigations as the name already suggests allow the editor to set up different types of navigations inside the page. For example the header, hamburger menu drawer, footers, social media links, etc.
These are essential to make pages easily accessible to a user inside a page.
Events are
Polls can have just 1 answer and can also have more than 2, they can be scheduled ahead of time and close at some point which will disable voting. Anonymous voting can also be configured. Logged in users could change their vote but we generally don’t allow that.
A comment can have a title, lead, and the comment itself. We generally do not give the users a possibility to write a lead and this is just for the editor to add one. Comment nesting depth can be configured & so can anonymous commenting.
Comments can also be (anonymously) rated and multiple different rating categories are possible.
Articles & Pages use something we call the block editor, which allows an editor to place various content on a page.
The block editor is the heart of the CMS and allows users to place different types of content. Blocks are similar to Lego blocks but are always taking up a whole row. It supports various types of content that an editor can fill a page or an article with.
While a block is always taking up a full row, the content inside that row can be re-arranged based on what the design specifies. To differentiate the same content but displayed in a different fashion, blocks support to give them a styling.
The image gallery block comes with 2 different stylings out of the box:
An image gallery just like your phone has (default)
A slider element styling
A break block is content that breaks out of the current context and displays meta call to actions, information etc.
These usually contain iframes, for example: YouTube, Instagram Posts, Vimeo, SoundCloud etc.
A teaser is a reference to another piece of content, showing a small glimpse of what it is about. It is either another Article, Page, Event in the CMS, or an Article from another We.Publish media or any 3rd-party content. It is usually the main content type of a media’s homepage.
Which comes in 4 different forms
Included for completeness sake but does not need a design.
Allows to include a poll in the content
Allows to include one or more comments in the content
There are a few big limitations in the CMS that are not possible right now without extra implementation from the CMS:
Each block is its own row which means we can not place blocks next to each other in the CMS or create a layout with it.
Blocks can not have a background color set via a color picker but would need a block style implemented.
The teaser flex grid only configures the layout for the desktop view
Not all text can contain rich text
Events do not use the block editor
We use Hanken Grotesk as the default font
We work in increments of 4px generally
We currently have set these breakpoints as the defaults:
xs: 0px
sm: 600px
md: 900px
lg: 1333px
xl: 1536px
We will need a design in Figma that either displays a full page/article etc with all the changed elements, or every single element.
We will need at least the following colors:
Primary (Navigation bar, links, buttons etc)
Secondary (Buttons)
Accent (Highlights within content)
Accent Light (Highlights within content)
Also good colors to include:
Error, Info, Warning, Success etc.
Divider/Gray scales
Foreground colors for Primary, Secondary, Accents (else one will be calculated based on contrast).
If there are more colors, we will incorporate them as needed from the design
We will need a link to the Google font, font file etc depending on the source of the font.
If multiple fonts will be used, we need to know the logic how they are used (like a different font should be used for headings, or article vs pages, etc.)
While a mobile-first would be nice to have, it is not required, but we would need some pointers how ideally we should break down a component on smaller screens. Else they will be assumed.
Block: Similar to a Lego block but is always taking up a whole row. It supports various types of content that an editor can fill a page or an article with.
Teaser: A reference to another piece of content, showing a small glimpse of what it is about. Is either another Article, Page, Event in the CMS, an Article from another We.Publish media or any 3rd-party content. It is usually the main content type of a media’s homepage.
