Style Guides
This week we learned about Style Guides, another way to present and describe a brand’s style and guidelines.
Style guide- A physical/digital document that depict the styles, patterns, practices, and principles of a design system and teaches you how to use it
Style guides establish a table of contents with a lot of information broken up into understandable chunks to explain things clearly.
Pattern library- documents all of these patterns (components) and define how they behave what they look like and how they are coded.
Pattern libraries can involve slideshows, social media features and navigations components.
Component-A self-contained and reusable pattern that represents a specific piece of interface or functionality
Element Collage- Another version of a Style Tile integrates collages of different information and designs for a website or brand. It isn’t a final design but rather an assembly of disparate pieces without specific logic or order.
Interface Inventory- a compiled page of screenshots of buttons and elements of a webpage to gather an overall look at the range of styles and colours in one webpage and how to improve or move on from there.
For our tasks this week we had to make an Element Collage for our own brand and an Interface Inventory for any brand.
Interface Inventory
I did my interface inventory on the website Beauty Bay. this is the same company I did my brand identity guidelines about.
I really liked the minimal colour scheme of the website. The homepage consists of only white and blue elements with black text. When the links in the navigation bar such as ‘Explore’ are hovered over or clicked on a screen of options comes up which can be filtered through with the secondary colourful navigation bar to help organise the products.
Element Collage
Before I made my Element collage on Figma, I decided to take some notes and sketch how I would present it first:
I then made final versions of my element collage on Figma:
These element collage contain a header and footer which I might use for my portfolio website and sample paragraphs of heading and body text I will use in my website.
I experimented with using normal navigation bar buttons, image tiles and icons to navigate through my website. This gives me a good visual for what these would look like. When i’m developing my portfolio website I might use the image tiles on the website home page and the navigation buttons.
Anna Debenham- Style Guide talk
We were given a link to this talk on Blackboard Learn and when I watched it I found it very interesting.
Debenham starts her talk by referencing all the designers that came up with similar tools, that we’ve already learned about, to Style Guides beginning with Brad Frost, who created the interface inventory. She then discusses Samantha Warren’s idea of Style tiles which is a tool that can be used between moodboarding and mockups. Style tiles should be used as a conversational tool to gather more information from the client and feedback before beginning proper working mockups. Debenham also mentions Dan Mall’s concept of an Element Collage which I’ve already described and completed a version of myself. Dan Mall uses it as a way of focussing on the design elements rather than how the whole webpage will turn out. Element Collages can run into problems though, she mentions, as they can start to look a bit too much like webpages which confuses clients upon first seeing them. However, you can counteract this by presenting elements on a wide horizontal canvas- appearing more like an actual collage.
She also mentions tools and their creators that we haven’t talked about yet, like Jeremy Loyd’s Style Prototype. Another conversational tool between designer and client that gives the client an exciting early look at how elements will perform on a live site. Usually involves elements like buttons and colour schemes coded in html and displayed at different aspect ratios to show client how these will appear and work when on live site, so they can provide better feedback and be more involved in the process. This helps particularly when the site planning is still being developed. She also mentions Harry Roberts’s CSS Guidelines and Jeremy Keith’s Pattern Primer which both account for pattern library type tools specifically for front-end deliverables
This all leads her to discuss ‘Style Guides’ which we covered slightly in this week’s lecture already. Style Guides aim to tackle complexity by containing all relevant information (such as Grid systems/ Headings..) to help provide consistency for an overall website or brand. Creating a Style Guide also helps with things like Quality assurance as all elements are presented on one page and can be tested at one time. She mentions a helpful plugin for your computer called “Tota11y” which checks the accessibility of a webpage and tests all of the functions together at once. Style Guides can help reduce redundancy, if you keep adding to them you can look back and check what things can be removed or have changed which you can then remove. Style Guides can be easily maintained when implemented at the very start and inserted into the usual workflow of the design team. Debenham says that you can test loading times and file size of elements of your style guide to help improve upon and optimise.
Style Guides can be developed at different complexities depending on the audience. If the user of the guide is a less technical person that wants information on the website/brand and how it works or a technical person- new recruit at the company that needs detailed description of how to use all the elements and tools involved.
Debenham goes into detail of what style guides are made of an their file types, which can seem quite complicated but there are now websites like ‘Frontify’ which can help you start to build your own. Debenham understands that style guides can be hard to maintain but she brings up an example of “lonelyplanet” made this more manageable by hooking their guide up to an API so the markup automatically synced to the live site. She explains that there are a lot of positives with putting the work into keeping style guides up to date but also with making them public and open-source:
- helps keep your style guides more honest
- can be used as a recruitment tool to lure employees in
- can be used to help new recruits as they already have a good understanding of the tool
- allows people outside of the company to take a look and help improve your guide
What I learned
The main points I takeaway from this talk is that there are a lot of tools and concepts available to aid creating a useful design in the professional world with an emphasis on a conversation with the client. I hadn’t heard of any of these tools before this week, besides maybe moodboarding and the usual mockup and prototype but having all of these tools at your disposal in between these steps seems really useful and is something I’ll definitely take on in future design processes.
Something I learned specifically from Anna Debenhams talk is that maintaining any sort of library or guide to do with your brand or website seems very important to keeping something consistent and modern. I’ve learned, even from this module alone, that things pile up very easily in the design world and maintaining that is key to being self aware of your work and always learning-which in turn helps you become a more successful designer.