Design Library Version 1.1
Welcome to the second release of the website design library. Find out what's new and what's coming up in V 1.2.
What's new?
- Tick check iconOver 20 new design patterns
- Tick check iconExtended colour palette
- Tick check iconImproved summary tables for user entered data
- Tick check iconAdding and deleting items
- Tick check iconForm progress, check answers and summary
- Tick check iconSaving and loading form progress
- Tick check iconSearch and filters
- Tick check iconForm validation and critical alerts
Site features
- Tick check iconSearch the site using keywords or pattern reference numbers
- Tick check iconThis site follows the Brighton & Hove design guidelines contained within
- Tick check iconCode snippets for best practice and accessibility
- Tick check iconFollow links to HTML and CSS demos
- Tick check iconFollow links to patterns in the Mendix Code Library
Version 1.1 contents
New patterns have been marked with a star
Pattern Library
Section |
Patterns |
Homepage |
Service icons, Homepage banner images |
Page content |
Content area headlines, Content sections, In page alerts, Link types, Button types, List types, Comparison lists, Pull out helper / fact box, Expandable helper, Bottom of page user actions, Responsive tables, Downloads |
Sidebars |
Right sidebar, Left sidebar |
Supporting content |
Useful information, Related documents, Contact information, Call to action - user response, Newsletter sign up |
Navigating content |
Previous, next & ghost buttons, Pagination, Step by step guide, Show more content, Show / hide functionality, Services menu |
Form inputs |
Accessible forms, Field labels and descriptions, Text fields, Short text fields, Text areas, Drop down selection, In-line radio buttons, Stacked radio buttons, Stacked check boxes, Conditional questions, Repeatable fields |
Formatted data |
Date input, Date of birth, From - to dates, Prefix & post fix, Reference numbers, Address lookup, Manual address entry, User contact details, Preferred method of contact, Add multiple items, Add people, Add vehicles, Add bank or buidling society, File uploadss |
Validation & alerts |
Top of page alerts, Critical form alerts, Required & optional fields, Input field validation, Advanced validation, Data consent validation, Alert linked to field, Set password validation, Reset pasword validation |
Form output data |
Check your answers, Accordion summary tables, Form success page, Summary after submit, Reference numbers |
Form progress |
Form progress bar, Question label |
Data consent and terms |
Data Consent - new browser tab, Data Consent - in form, Terms - new browser tab, Terms - in form, Double opt ins |
User interaction |
Save progress - Auto save, Save progress - Manual, Load progress, Tool tips, Filter results and content, Sort results, Search content, Map markers |
Template Specifications
Topic |
Specifications |
Site and page |
Defining breakpoints, Site and page width, Site and page margins and padding |
Layout grids |
Three column, Left side bar, Right side bar, Four column, Two column, One column, Call to action |
Page Layout - Drupal |
Content area definitions, Breadcrumb, Page headlines, Section navigation area, Page content area, Side bars |
Page Layout - Mendix |
Content area definitions, Breadcrumb, Page headlines, Alert area, Form area, CTA area, Side bars |
Accessibility |
Screen reader only class, Accessible icons |
Website Design Guidelines
Topic |
Guidelines |
Colour |
Website colour palette, Color palette extended, Website colour usage cheat sheet, Colour tints and info boxes, Green and blue buttons |
Header and footer |
Responsive header, Header Logo, Header and logo colour options, Header size, Header orange bar, New message, Search bar, My account link, Services menu, Cookie alert, Service update, Responsive footer |
Typography |
Fonts and fallback fonts, Responsive text size guide |
Icons and buttons |
Icon cheat sheet, Buttons and icons combined, Using icons as navigation |
Inputs and links |
Using icons as navigation, Link styles |
Design Examples
Section |
Pages |
Homepage |
Homepage design, Homepage banner |
Drupal pages |
Template and components, Form start page, Service hub, , Service sub hub, Service topic page, Service updates |
Mendix and Drupal pages |
Terms and conditions, Errors |
Mendix |
Single question, Multiple question, Validation alerts, Form progress and success, Application summary, Opt in (new tab), Opt in (in form), Double opt in |
Maps and directories |
Schools map, Parking space map, SEN map interface, Directory search, Directory listing
|
My Account |
Homepage, Services, Log in / register, Council tax overview, Council tax pages |
Campaigns |
Landing page, Sub pages, Visual editor specs, Campaign style guide
|
News |
News landing page, News article, News category, News search |
Third party |
Planning register skin, Civica payment portalLink opens external website in a new window |