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 |
