Style Guides, Style Tiles & Wireframes • Amethyst Design

Style Guides, Style Tiles, and Wireframes are all essential elements of the design process. They serve as a foundation for your design project. Knowing what they are and how they can be useful will improve your design process. This will give structure and consistency of your projects. Let’s start with learning what each of these elements is. Next I’ll show you how they integrate with the process of designing an interface.

So What Are Wireframes?

A Wireframe is a set of un-styled elements which displays the functionality of a website or page. It’s used for planning a site’s structure and functionality.

Why Are Wireframes Useful?

Wireframes are your layout. They help you plan your UX and UI elements without having to focus on any design elements. Your wireframe is foundation you will use to create the layout of your project.

When creating a wireframe, ask yourself these questions before you get started:

What do I want the User to focus on when they first view my site/app/interface?
What information or functionality should be easily and immediately accessible to the end User?
How should the information/functionality options flow as the User continues to scroll down and interact?

Answering these questions beforehand will give you a much clearer approach to creating your interface. It will also give your designs a much more purposeful look and feel.

So What Are Style Tiles?

A Style Tile is a visual reference to the design language of a project. It’s not like a style guide.

Style tiles are a collection of design and style elements that give an idea of the types of fonts, colors, UI elements, and images that may be incorporated into a project. They give you a suggestion of a style without having to create an entire site mockup or worrying about layout.

Why Are Style Tiles Useful?

They help make decisions on a design direction. It’s useful to create several style tiles to let a client choose from. They are meant to be a guide in the early stages of a design. This helps get an idea of what kind of stylistic choices you’ll make throughout the project.

They are useful when you have a client who is undecided, or unsure of the type of look and feel they want in the design. Furthermore Style Tiles save you time. Instead of creating several whole mockups Style Tiles give you the ability to suggest a style. In addition you could present a client with several style tiles to choose from. This saves time instead of having revise an entire mockup.

So What Are Style Guides?

A Style Guide is a set of standards for the writing and design of an interface.

Style Guides are an established and finished set of UI guidelines that are used to keep branding and styles consistent. Unlike a Style Tile, a Style Guide is a template for any further iterations of a project. They’re used to keep any future updates to the interface consistent.

Why Are Style Guides Useful?

In a finalized project, Style Guides are an all-encompassing reference to the design elements that you’ll use. They are larger than style tiles, and more detailed. Furthermore a Style Guide is something you will add to, and edit throughout the project. When collaborating a style guide provide consistency. It is important however to update your style guide over time.

Here’s an example of a finished Style Guide:

Lastly, here are some resources for those who want to learn more.

Sources: