Now the style guides have to be more extensive as they have to not only cover print but also digital products/aesthetics.
Style guide
Physical or digital document that represents the styles, patterns, practices, and principles of a design system and teaches how to use it. They encompass a company’s branding guidelines, including logo usage, designated colour palette, typography, etc. You should update your brand guidelines to include digital outputs. Pattern libraries are a detailed subset of the overall style guide.
Good examples
- Comprehensive GitHub style guide
- Loads of great examples here
- A list apart
- Article by Harry Roberts with good advice and information
Things to consider
- Establish a table of contents
- Break info in to manageable chunks
- Use plain English and explain things clearly
Modern Tools that help
- Style Tiles are a design deliverable consisting of fonts, colours and interface elements that communicate the essence of a visual brand for the web. It offers a template to work and design around.
- Element Collage, an alternative tool by Dan Mall. Mall uses it as triggers for client conversations; it starts a free form conversation to gauge a better direction to go in for the client. It can help clear up the brand direction. The only problem with a vertical element collage is that it can look like a webpage you’ve built, so horizontal is a better format for us.
- Interface inventory; taking stock and categorizing the components making up a website. The fewer buttons you have in a website the better the design as it ensures better consistency for the interface.
Managing code
HTML, CSS and JS, building a guide we can use to ensure everything’s consistent. Some elements within your style guides will have definable CSS properties such as colours, type and layout, etc.
Pattern library
An organised set of related, reusable components, often containing code examples, design guidelines and use cases. It ensures a consistent user interface. Big sites are developed by different people over a prolonged period and revised regularly. That almost always leads to a fragmented user interface unless there is something in place to ensure consistency. Essentially it’s a collection of design components that appear multiple times on a site, such as: navigation, slideshows, social media features, news listings, related links, carousels and more. It documents all these ‘patterns’ (also known as components) and defines how they behave, what they look like and how they are coded.
Good examples
- BBC design framework for consistent user experiences.
- Google material
- Mailchimp
- Apple human interface guidelines
Component
A self-contained and reusable pattern that represents a specific piece of interface or functionality.
Task
01 Interface inventory
Choose a website and complete an interface inventory, documenting all the interactive elements used throughout. This could be the website for the brand you completed a set of guidelines for last week, but it is not essential. The important thing is to observe the sorts of buttons and elements of the UI included. For more information follow this link.
02 Element Collage
Create an element collage for your personal brand in anticipation of designing or styling your portfolio website. For more information follow this link.
03 Update your research blogs
Make sure your research blogs are up to date and organised. Daniel will be reviewing these and providing feedback prior to the Easter break.
What should be included
Weekly summaries
- Lecture content
- What you’ve learned
- Reflection on tasks
- Analysis of books and sources you’ve looked at
Research
- Writing and values
- Monograms
- Typography
- Wordmarks
- Colour
- Visual Marques
- Brand guidelines
Practical Work
- All weekly tasks
- Pizzeria brand
- Business cards
- Example brand guidelines
- Interface inventory
- Element Collage
- All development work, sketches and iterations
04 Portfolio site
Portfolio site design and mapping your style guides on to a site. You MUST at least have a skeleton of a site to work on next week.