Designing A Basic Web UI Kit Using Gravit Designer
Style guide driven development offers a hugely flexible approach to modern web design. It is a practice that encourages the separation of UX, design & front-end from back-end concerns. This is achieved by developing the UI separately in a style guide. It allows teams to iterate fast on prototypes and designs without having to make changes to the back-end. With careful planning they should plug-and-play together nicely.
In this tutorial I’ll walk you through designing a UI (user interface) kit using Gravit Designer, whilst also explaining the decision-making that will keep our UI kit consistent and reusable.
The App, Gravit Designer
Gravit Designer is a a full featured free vector design app where you can create user interface designs, illustrations, presentations, print design and logo design. Every single element on Gravit’s interface was designed to look great and also make your life as a designer much more intuitive and easy. Gravit Designer is available on Windows, Mac, Linux and Chrome Operating Systems. You can also user Gravit Designer online (right in our browser). I still wonder why Gravit is totally free. Yes, FREE!
Assets and their Sources
For this tutorial we’ll be making use of the following free resources:
Colors from MaterialUIColor
Stock photo from Pexels
Face from DiverseUI
Getting Started
Step 1
Fire up Gravit Designer and click on the Create button. Note that the width and height textboxes are blank. This allows us to design on an infinite canvas.
Step 2
It is important and a good practice to set some guides so our kit is organized and aligned. Setting some constraints will ensure neatness and consistency using guidelines. Let’s use 1000px as a website starting width and keep our UI kit within these dimensions. To use guidelines, drag out guidelines from the vertical and horizontal rulers. My vertical guideline are set at 100px, 600px and 1100px.
Typography
Typography is very important and we’ll need to set up the perfect look for our project. It is important that we make out text readable by ensuring reasonable contrast levels — a background that is neutral and easy on the eye. We’ll be using a subtle light gray — a neutral color but strong enough to read and a foreground color #EFEFEF to go with. To do this, click on your canvas and click on the color chooser, type in the HEX color code #EFEFEF, this changes the color of the entire canvas.
Step 1
Pick the Text Tool and select the Roboto font. Roboto ia a sans-serif typeface family developed by Google as the system font for its mobile operating system Android. It is a modern typeface which comes in many different weights, it is professional and easy to read, little wonder it is incorporated in the Android OS. It’s good enough for headings, but also practical enough for body copy on the web. Gravit Designer has this as a webfont sourced from Google fonts.
Roboto has several variants, so for this tutorial, I will be using just the one font. Bear in mind that you should be careful if using more than two different fonts for your projects as things can get messy quickly. To help with this you can get ideas from FontPair.
Step 2
Let’s establish a hierarchy for our typography. HTML (HyperText Markup Language) has many different tags which help browsers interpret the content of a page. Many of these tags are specifically used for web typography such as <h1>, <h2>, <h3> and so on. These describe headlines, <h1> being the most important one. After that there is a <p> tag used for paragraphs.
Create three headlines, h1, h2, and h3. I’ve used Roboto (Light) 55px for h1, 44px for h2 and 32px for h3 leaving 30px gap between them. Spacing is another important thing to keep in mind. Leave enough space so your type is easily readable and looks balanced. Regular weight was used for the h3 because the Light variant becomes less legible will a smaller font size.
Step 3
Time to create the actual content copy. Consider all possible variations of copy and display it in your UI kit so developers can implement what you have planned. Think of a headline style inside the paragraph, bold, italic styles and also links.
For the main copy color I’ve picked grey #838383, for the headline #222222 and #E91E63 for the link color.
To generate dummy text also known as Lorem Ipsum, Type “Lorem” and space, Gravit Designer will generate a paragraph of dummy text you can use.
The headline will be noticeably darker than the main copy, giving it greater impact. The main content color should be relaxing and easy to read. Ensure you pick a different color for your links so that users understand that they’re clickable — a visual cue. Set headline and link font to Semibold weight to make them look bigger and more important.
Creating Buttons
Buttons are very important for web and mobile interfaces. They serve a call to action (CTA) function by leading people through the pages and operations, they help to make quicker decisions. It is essential to define a consistent look to buttons so the user is familiar with them throughout the website.
Step 1
Let’s create some new vertical guidelines to divide our content area into three equal areas with 35px gaps between. Set the following vertical guidelines: 410px, 445px, 755px and 790px. This is where we’ll place our buttons so all of them are equal and consistent.
After that enter three titles of button states: Normal, Hover and Active. Place these to the left of our three equal sections, keeping in mind the 35px gap between first, second and third areas.
Step 2
Now pick up a Rectangle Tool, draw a 310x44px size rectangle shape and set Corner Radius to 3px. Place it between the first two guidelines under the “Normal” headline. To finalize the button, give the rectangle a foreground color of the previously used #E91E63, type some text on it using white color #FFFFFF so it is clearly readable.
Step 3
Repeat Step 2 to create the Hover and Active state buttons. You can duplicate selected elements using CTRL + D (or CMD + D on Mac),
Hover describes the state of a button once you move your mouse cursor over it, so we need to illustrate some feedback from the button. A link becomes active when you click on it.
For styling hover and active states of buttons we’ll simply darken them. For this tutorial, I have used the following color options that I picked up from MaterialUIColor. I picked the Material Design Pink 500, Pink 700 and Pink 900.
Pink 700 — #C2185B for Primary Hover
Pink 900 — #880E4F for Primary Active
Step 5
Now duplicate all the previous button group and change their titles and color to secondary. We’ll be defining UI kit colors later in this tutorial, for now simply pick one color and replace the previous #E91E63. I’ve used green #4CAF50 for this tutorial, also picked the hover and active color options from MaterialUIColor.
Designing Forms
We’ll be designing a basic form so developers can stick to the same style and keep design consistent.
Step 1
Duplicate the section title from the previous button section and rename it to “Forms”. We’ll create some basic form input types including text input, password field, dropdown or select field and submit field (a simple button). When designing forms clarity and familiarity are the key factors. Don’t try to reinvent the wheel.
Let’s begin with an input field label. Use the text tool and type, in my case it is “First Name” using the same 18px size, color #707070, Roboto (Regular) font.
Now duplicate one of the button shape layers and move it into the Name group. After that change its background color to white #ffffff and add a 1px grey #d5d5d5 inside stroke. Finally, place an example of the input text inside the white rounded rectangle. For my example I’ve used 16px Roboto (Regular) and the color grey #838383 as used previously for the body text.
Step 2
Create some more input fields with titles by simply duplicating the first input field. Traditionally, for password field use dots • or asterisks *. Remember, it is important to stay consistent and reuse previously created elements.
Step 3
While sticking to a very basic user interface, let’s now create another type of input field; the <select> field.
Duplicate one of the input field groups and place it between the third and fourth vertical guidelines, ensure the elements are well aligned. Change the value to whatever you want and add a simple triangle to indicate that it is a drop-down field.
Step 4
To make developer work easier, again make sure you include an active state. Think of how the dropdown will look like when user clicks on it? It is your job, as a designer, to guide the developer to create a consistent and unified experience across the website.
Step 5
We’ll now create a simple error message scenario, such as if someone has entered a password which does not match the previously typed password.
Use CTRL + D to duplicate the previously created password field and place it below the dropdown fields. After that, change the field’s border to a subtle red (I used #eb8686) and the background to a greyish red #e9dde3. Finally, pick a stronger red #b63131 and enter a simple error message.
That’s it with forms! We’ve covered the basics but that’s enough to get started designing more complex forms.
Avatars
Avatars are almost standard in any web app these days, so it is handy to have some visuals for easier communication and identification of users.
Step 1
Pick the Ellipse Tool and, holding down Shift, draw an 80x80px circle. Head over to DiverseUI and download an image. Copy it and paste above the recently created circle. Select the thumbnail of the image and the circle together then click the Clip Tool.
It is important to think about how avatars will be used and include some different sizes for developers to use. For example, bigger avatar images could be used on the profile page and smaller ones in the comments section.
Simply duplicate the avatar and scale it down, holding down Shift key in order to keep the proportions.
Images
Let’s how images will be displayed in our project. I’ll simply put one picture inside a rectangle (using the Clip method used for Avatars) and give the rectangle a Corner Radius of 5px to show that images should have rounded corners.
Defining Colors
Let’s now talk about colors. A solid color palette is crucial and you should check color theory in order to better understand the meaning and importance of colors you use. We’re opting to choose colors right at the end of the process because we now have a good idea of the element we need to style.
Step 1
Draw a rectangle shape with corner radius of 3px , then pick Text Tool and type the title of the color, or what it will be used for e.g. “Primary Color” and provide the color codes in HEX, RGB or any other format needed. Create a new group, give it a name of the color and put all layers into it.
Step 2
Now simply duplicate the color group and make as many color swatches as you need. Usually it is best to stick to four or five colors as more colors can make things look messy. Check out Coolors for amazing color palettes and inspiration.
For this tutorial, I’ve used “Primary” and “Secondary” colors, one color for body text and one for headlines, also white for input backgrounds. These are all shown below.
And that’s it, folks!
I hope you learned and understood the basics of creating a style guide, why some decisions were made and how they benefit the project.
Web UI Kits are not limited to the few UI elements we’ve designed in this tutorial, you can find many more awesome ideas from Dribbble or Behance.
I’ll love to read your comments answer your questions, and most importantly see you create awesome design.
NB: The Source file to this tutorial can be found here.
