Sketch Brand Guide Template
UI style guides are something that always comes in handy and that will simplify our work enormously.
According to Wikipedia, we can define a style guide as:
A style guide establishes standard style requirements to improve communication by ensuring consistency both within a document, and across multiple documents. Because practices vary, a style guide may set out standards to be used in areas such as punctuation, capitalization, citing sources, formatting of numbers and dates, table appearance and other areas. The style guide may require certain best practices in usage, language composition, visual composition, orthography and typography. For academic and technical documents, a guide may also enforce the best practice in ethics (such as authorship, research ethics, and disclosure), pedagogy (such as exposition and clarity), and compliance (technical and regulatory).
Source: Wikipedia
Although many times we will see projects that do not have an adequate style guide, having it will greatly reduce work time and team discussions.
One thing to note: it's a common misconception to confuse UI style guides with UI kits. However, while similar, they're not the same.
To make it better understood: A UI kit is a collection of elements that make up a user interface. For example, typography, colors, buttons, forms, layout, and so on. A UI kit can be found in both user interfaces and web design, and it always has an added technological aspect.
In contrast, a UI style guide is not as punctual when it comes to building interfaces or web designs. The style guides are broader, and have more to do with the brand image. It is for this reason that the style guides affect all the products and by-products of a brand: web, mobile apps, impressions, advertising, communication with users and many other dimensions that make brand design.
Of course, even if they are different things, there is a significant degree of overlap.
For comparison, imagine that you are going to build a building to sell your apartments.
The doors, windows, bulding height, architectural style, electrical installations and other construction elements are equivalent to the UI Kit.
And on the other hand, the decoration, the color of the paint, the style, the laws of coexistence between neighbors, the methods of sale, the tone of the advertising, the color of the posters or the neighborhood where the building is located are equivalent to the style guides.
As you can see there is an overlay, but the UI Kit is more related to the specific elements, while the UI style guides cover elements that go far beyond the interface, so they are more related to the user experience ( UX).
Having clarified the point, it is important to note that in this case they are UI style guides: that is, they are style guides that apply to user interfaces. Therefore, they are not as broad as the brand guidelines, but they are a little broader than a UI kit since they take into account these guidelines.
We use style guides on all projects, you can see some of them in our UX work portfolio.
UI Style Guides in Sketch Format
Bohemian Sketch is one of the most popular tools between UI and web designers. Although only available for Mac users, it became quickly popular. At the time of launch, it replaced the program of choice for many designers (Photoshop). Now it's facing a lot of competition, including Adobe's answer to Sketch: Adobe XD. Another app that is quickly getting a lot of traction is Figma, a firm contender in the UI design app battlefield
Web Style Guide Sketch Resource
This is very nice web style guide with the following categories: Typography, Colors, Bases, Icons, Buttons, Inputs, Selectors & Dropdowns.
The styles are simple, yet very complete, so you'll be able cover most UI design elements (or maybe just add a few ones).
Download Web Style Guide Sketch
UI Style Guide Template
This is a beautiful style guide , very elegant and clean. It's quite UX oriented, and features the following UI elements:
- Intro
- Intent
- Attitude
- Typography
- Colors
- Iconography.
Download UI Style Guide Template
Simple UI Style Guide
As its name suggests, a simple template, but suitable for most projects. If you're a web designer rather than a UX or UI designer, this will probably be very helpful
Download Simple Style Guide
Responsive Style Guide
Responsive web design came to stay. Nowadays, it's almost impossible to think about web design in fixed sizes, so having something that is useful for all device sizes.
In this case, we have a style guide focused on responsive formats, with representation of different formats (web, tablet, mobile).
It also contains a good explanation about the reasoning behind the construction of this guide.
Download Responsive Style Guide
How to create a UI style guide in Sketch in 3 seconds
In this case, we don't have a template, but rather an article on how to create a style guide using Sketch and Craft from InVision.
The article is very short and simple, so even those starting with InVision and Sketch will probably understand it immediately.
See Tutorial on how to create a style guide in sketch in 3 seconds
UIDE Kit – Style Guide Template
Probably the most complete of the list, it includes all kinds of elements, even some you wouldn't find on most style guides. Some of the included elements are:
- colours
- typeface & typography (before you open this file make sure you have Lato font on your mac ๐ )
- buttons (small & large option)
- text inputs (regular, hover, active + validation)
- dropdowns (normal, hover and active)
- switch (on/off)
- checkbox (off, hover, on)
- radio (off, hover, on)
- slider
- tooltips
- calendar & date picker
- 4 different graphs
- tables
- nav bars & menus (lot of them ๐ )
- alerts
Download UIDE Kit – Style Guide Template
Tutorial: Create UI style guides in Sketch
Another tutorial, but this time much more complete (and complex). For those who need to understand how to build guides from scratch, especially for large projects.
Nevertheless, if your project is small, or even if you don't have a design project, it's a great resource to learn by example
See Tutorial on How to create UI style guides in Sketch
Style Guides in PSD Format
PSD is the extension for Photoshop. While nowadays Photoshop has lost a good chunk of its users base, it's still teh tool of choice for many designers, specially those oriented to web design. UI designers will probably feel more comfortable with Sketch, Figma or XD, but Photoshop still has a lot of fans!
UI Style Guide Template
Quite complete, with a good selection of design elements. It looks very good and it's free, so, what else can you ask for?.
Download UI Style Guide Template
Template and Style Guide Tutorial
In this case, we have the PSD design template, but also the author Rafal Tomal teaches us the theory to build the guide, which we can adapt for our purposes. Attention: Requires free registration.
Watch and Download Template and UI Style Guide Tutorial
Style Tiles
A very interesting concept: Rather than a UI style guide, UI designer Samantha Warren builds something like a style pre-guide to avoid generating additional design work.
It includes both the tutorial on how to work with this concept, and a PSD template to get started. Personally, I see it as a very simplified style guide, but see for yourselves.
Watch Tutorial / Download
Style and Workflow Guide
This template made by French web designer Stephanie Walter is very complete and includes something that no one else considered: Accessibility.
The PSD file uses artboards, so at least the 2015 version of Photoshop is required. You can download this project from GitHub, which means you can fork the project.
Watch Tutorial / Download
How to Make the Perfect Web Design Style Guide
An article that includes an example PSD on how to create a "perfect style guide" (sic). The concepts are very good, and can be useful, especially for beginners at UI and web design.
However, I gotta admit I'm including this as a curiosity, since in my modest opinion this is not a style guide. Instead, it's a nice example of how could a UI style guide look. Or, in other words: more a suggestion for an approach to web design guidelines than a style guide by itself.
Watch Tutorial / Download
Style Guides in AI Format (Illustrator)
Adobe Illustrator style guides are mostly oriented to the presentation of such styleguides and guidelines in print format. This may include PDF as well, but it's very common for large companies to have their style guides presented as books.
Brand Style Guide
Template for guides intended to be printed, kind of "old school". It serves both for work projects and to present in a university task. Very useful indeed!
Download Brand Style Guide
Brand Style Guide Template
Another template designed to show web design and UI style guides in printing. It includes a PDF with instructions on how to use it. Simple and somewhat limited for professional projects, but it can work well as a complement to mood boards or for small design tasks.
Download Brand Style Guide Template
Cool Blue – Brand Guidelines Template
Excellent option for printed style guide manuals. It includes 8 pages in the free version, or 26 in the paid version. The price is small and it really deserves a look.
Classy, elegant and well designed, just the kind of design you'll want to use to impress clients from big companies
Attention: requires registration to access the design template
Download Cool Blue Brand Guidelines Template
The Harmony – Brand Guidelines Book
Same as the one above, and made by the same designer.
This one is a beautifully designed, sophisticated 8-page brand image book, ready to print. Includes files in AI, INDD, IDML and PDF formats.
Attention: requires registration to access the design templates
Download The Harmony Brand Guidelines Book
Style Guides in Adobe XD format
As mentioned above, Adobe XD emerged as the answer from Adobe to Sketch. In order to gain momentum and steal some of Sketch's market share, Adobe offers the app for FREE, which is very good news for most UI designers. Still, XD faces some fierce competition from Figma, which is free as well and has some very interesting features.
Free Adobe XD Styleguide
A simple, clean and yet complete style guide with well documented layers and all the basic elements you may need for most UI design projects.
While it lacks some complex elements, it has a very nice presentation and lots of color, which is always a good thing.
Ideal for basic web design projects that don't have a lot of UI elements, or as a starting point for more complex style guides
Download Free Adobe XD Styleguide
Adobe XD Freebie-UI Style Guide
This is a free design resource created by UI designer Muharrem Yaฤan. And here, free design doesn't mean demo-like, freemium or restricted. Quite the opposite, it's an amazing resource like you have never seen before.
This MASSIVE UI Style Guide template includes everything: more than 500 UI elements, Bootstrap grids, Google fonts, color swatches, dark and light modes… it's like a web design agency dream came true.
Probably one of the more complete UI kits I've ever seen, at least for free. A huge time saver, so be sure not to miss it!
Download Freebie UI style guide (sorry, the link is now dead, will replace it soon)
XD Web Design Style Guides
Another nice, clean and massive free resource, this time by Vivek Popat. You may argue on some of UX principles like usability and accessibility, but a great web design styleguide for most designers.
Also, while the author titled it as UI, this is mostly oriented to web design so I include it as such. With 300+ web design elements and free to download, there's no much room to complain!
Download XD UI Style Guides
Free Dark Style Guide for Adobe XD
As the title says, this is free, and it's dark. And I mean DARK. It's nice, well presented and elegant. It will never pass any accessibility test, though.
Interesting as a concept or to evolve from this. Not recommended for use "as is", unless you hate accessibility and UX guidelines with a passion!
Jokes aside, I really mean it: be really careful if you want to use this design resource.
Download Free Dark Style Guide for Adobe XD
Conclusion
UI style guides are of great importance for our projects. They will ease our work and provide a clear foundation for our projects. This is specially useful when working with other stakeholders such as other designers, programmers, marketing departments or the clients themselves.
We hope that the ones mentioned in this article will be useful to you!
Shameless plug: Here at Dorve we specialize in creating high end UX work which includes clearly documented style guides, user flows, research, etc. Contact Us if you need us to create a succesful, effective and well documented project
We can improve your business!
Let us help you with the best solutions for your business.
It only takes one step, you're one click away from getting guaranteed results!
I want to improve my business NOW!
Source: https://dorve.com/blog/ui-design-blog/20-ui-style-guides-sketch-ps-ai-xd/
Tidak ada komentar:
Posting Komentar