An
UI style guide could be considered as a set of introductions and documents for
writing and designing your website’s outward. It ensures the consistency of a
standard design style in your company. You may hear a lot of other names like
web design style, human interface guideline or UI toolkits as it includes
plenty of design disciplines interacting with them. However, the main point is,
your UI style guide is the script for everyone to lead them under the same
design purpose and style. Next, I will focus on 10 inspirational examples of UI
style guides.
This
UI style illustrate a clear purpose of how to make form fields, inputs,
toolbars look like different. In addition, it also provides sample colour to
change their UI’s appearance.
Inspiration:
You may want you page contains depth, and hierarchy. The adding a wide range of
sub-colour and about 3-4 main colour for designers to choose designing the UI
style is a good idea.
Buffer’s
style guide is described as “a collection of reusable styles and components for
faster product development”. The guide then used as a style called Atomic Design.This style defines the UI
style design should start as atoms, then various atoms combine to form
molecules and finally to the whole organisation.
Except
this style, Buffer also create a set of rules to face the important component: the Call to Action.
Inspiration:
The UI style is not just about buttons and grids. It also includes delivering
the actual ideas to others. So before design a web UI, think about what your
call to action is and how to convey it. This idea can improve the consistency
of your web’s form and function.
The
Uber’s style highly concentrate on hierarchy with typography. They have a
unique rule for weight than one combine in a single design page.
The
most attractive part of it is they combine their brand with components such as
maps. As we know, Uber is a transportation tool company, the map is essential
for their product’s UI. The design team then create a guideline to work with
different maps.
Inspiration:
when your brand has a unique product or service, try to think about how combine
the UI with it. In addition, considering precisely no matter how large or small
the item is and how to bring your brand to it.
Mozilla
is the famous browser Firefox’s design team. They have now published their
design style completely. They called their style Sandstone. The Sandstone standardized the whole style of
web properties, which is from buttons to the overall grid.
Like
mentioned above, the Sandstone is just the script of the style, it does not
strictly limit what a button should look like to make everything totally same.
In contrast, they provide various examples that belongs to their style to make
their UI diversity.
Inspiration:
When considering what is your UI style, creating an overarching concept at
first. This could guarantee the design style. Then the rest part should follow
this concept but not being limited to same. Diversity makes your website more
attractive.
Their
UI guide demonstrate the features of Medium’s online identity: buttons, icons,
tooltips and so on. The Teehan+Lax who help designed the identity, said that
the product development phase had been changed a lot. The visual changes should
inspire you improve your style guide.
Inspiration:
Adding small components like loaders or image uploaders for your brand identity
is also useful. Though some web develop frameworks have already provided skins
like these, customize them to make they looks more consistent to your brand.
The
Evernote team is a passionate team to share their improving components of
website. They have uploaded icons, layouts, user flows to share their UI style.
Unlike other UI style guide, the purpose of Evernote is keeping a living,
public portfolio by receiving feedback and improve them.
Inspiration:
Sharing your best web UI to public. You will find how much practical suggestion
you would receive to improve it. The only one fixed thing in web design is
everything will change sooner or later. So taking advantage of others advice
will help you make your UI style fashionable.
7. MAILCHIMP
With
the development of your brand, there should be more components to be added for
a style guide. In order to solve this issue, Mailchimp offers a UI style
contains types of charts used to expand their brand.
To
add a brand individually, Mailchimp creates a customized set of icons called
“Freddicons”,which is stands for their mascot Frederick von Chimpenheimer IV.
Inspiration:
When others are using a same set of icons, trying to design a unique one stands
for your brand is risk but worth. These unique icons will help you stand out
from others brands and meet customers’ specific needs.
Disqus
UI style guide include two parts: Brand & Styles and Components. In this
way, it facilitates the print and web requirements. Their guide contains
specific icons, typography, and buttons. By using this guide, both office and
third party can use API to design components and design works.
Inspiration:
In some situation, you can make your API public for others, which is a way to
gather comments of your products and improve the disadvantages. If you want to
do this way, ensuring your guide is in public and everyone can find it easily.
9. YELP
At
their homepage, you can find how important they regard UI style guide.
In
addition, their guide not only provides suggestions about how a style should be
but also gives code of actual work. The example below shows that particular
code about marketing block.
Inspiration:
For designers, providing codes for them will help them better understand your
style structure and logic. Everyone can get the idea about the picture of style
guide. But that’s not means everyone can run it properly. Different designers
will using different way to achieve your component, which may cause
cross-platform or system issue. To avoid this problem, giving them some
standard code is a good way. The code will help them understand which is the
standard language of the website design.
10. VIRGIN AMERICA
This
UI style is described as “the first radical rethinking of the flight booking
experience in a decade” by Wired. An agency that develop the UI. They used an example to illustrate the new design.
This
example shows a successful web design style guide also being deployed across
traditional channels such as billboards in Time Square and airports. The
concept “digital-first branding” has been being more and more agreed.
Inspiration:
When comes todesign a digital-base product or service, first think about the
component. For example, what the web page should look like? Based on your
brand’s culture to deploy the UI style, then combine it with the traditional
channels. This way will become the leading mode of e-commerce.
Conclusion
In
conclusion, UI style guides are never considered as the barrier that limit
designers or developers’ idea. They should be more like a blueprint, which
ensure and lead others to apply them to complete diversity kinds of UI and web
pages.
