The Big Awesome
Styleguide

The big AWESOME styleguide

T - BAS was designed to help an entire website projects information in one easy to access place. Where anybody can find all the information needed regarding a web design project.

The Goal

The goal for this fist version of The Big Awesome Styleguide was to create an easy way to manage the style-guide and assets needed for web design projects in one easy to edit location.

Research

In researching and defining this project my main focus was to determine all the necessary assets and components that a large website design team would need. That once I had it built out more in the coming version I would then work on more on aesthetics and usability feature once I have it built out more after the first couple iterative versions.

Features

Style guide, Layouts, UI Elements, Documentation, Editing & Building Portotypes

Style-guide

The style-guide this area help to store all your design specifications regarding overall style rules and guide lines for each project. With easy updating capabilities and assets allocation.

Layouts

In order for various designer to create new web pages you can store your web site layouts and templates in T - BAS. Which easily allows designers to pick a template for easy marketing pages, or create new layouts based on their common layout designs.

UI Elements

To make sure that all the designer are always using the most up to date user interface components and element. The Big Awesome Styleguide also has a place to store all the user interface element.

Documentation

To make sure that everyone in using the style-guide properly we also have plenty of documentation thought the style-guide and have an additional documentation page. So that you can document any additional details that your team might need to know.

Editing / Prototyping

Going for design to development as the style-guide is often used not only by the designers but as well as for clarification for development. The Big Awesome Stylegude not only allows you to link and store assets but with Webflow can be used to store your front end development assets as well by being able to export everything into a front end solution in HTML, CSS, and JavaScript. As well as being able to store custom code inside special blocks. Allowing a seamless solution from design to development.

Final Result

From the design phase I then handed it off to development. Continuing to work with them to get the intranet site fully implemented.

Intranet Prototype

Please view in Google Chrome or Firefox to make sure everything works properly thanks.

Since the website is for internal use only, I am only able to share a prototype version of the website. Also note that some changes had to be made to this version for non-disclosure reasons.
add left pointing arrow Back to Projects