Design Styleguide

styleguide screenshot

So we did this android app redesign exercise for a big client. When we were done with phase 1, we decided to create a styleguide in order to document all the design decisions so that future phases can be build with design consistency.

We decided to create the syleguide in Sketch so that we can use the newly introduced , at the time, feature of symbols in Sketch. Our approach was to create symbols to as many components as possible. It not only lets us increase the speed of churning out mockups but more importantly it keeps the variations in check, leading to a more sanitary design.

Color:

color_styles

We defined colors for links, positive, negative and warning messages, text colors for UI copy and body copy, greys for dividers and background. All styles were made shared styles in Sketch.

Typography:

textstyles2

The most used font size was 14. Other font sizes were 12 for labels, 16 for buttons, 18, 24 and 28 for headings.

Layout:

layout

Since different designers worked on different sections of the app, it was important set the overall layout and spacing between primary toolbar and content area

Lists and Cards:

lists and cards

Different kinds of cards were made into templates. We used two kinds of dividers, 0.5 px and 8 px. All the padding and margins related to cards were defined.

Buttons:

Buttons2

All button styles were made into symbols

Selection Controls:

selection controls

All states were defined in the stylesheet.

Blockers and dialogs

blockers

nonblockers

Dialogs and customized Snackbars for different kinds of notifications.

Form fields:

text fields

These were some of the components and rules defined for the app. Creating the stylesheet was a good learning experience for me. Since I had been primarily a UX designer, I never worked technically on this aspect of design. I loved it and I believe I came closer to design because of this.

Leave a Reply

Your email address will not be published. Required fields are marked *