What is the UI Kit and why use it?
To help decrease build times, create more consistent designs, and improve design quality, we created the Mobify UI Kit. The Kit has been built to match one-to-one with Mobify's PWA SDK, offering adaptable and reusable UI elements that follow industry best practices.
By reducing the work involved in building all these components from scratch, the UI Kit allows designers to focus more attention on the overall visual design, and on more complex interaction problems.
The purpose of the UI Kit is not to act as a predefined style template for a project but to give the designer a great starting point when assembling components together into a cohesive system.
When to use the UI Kit
The UI Kit is intended for the start of any new project. The Kit includes .sketch files containing a collection of common ecommerce UI patterns. These are then used to compose core ecommerce page templates such as the Product Details Page (PDP), Product List Page (PLP) and Checkout flows.
Start using the UI Kit
Start by downloading the UI Kit Sketch files and assets from Github:
| **Download the latest version of the UI Kit** |
| **Tip:** In order to use the UI Kit, you will need to install the fonts Roboto and Roboto Mono (included in the repo). You will also need the latest version of Sketch installed. |
After downloading the UI Kit, open the kit in Sketch, and begin by reviewing the Setup pages. These pages contain all the type, color and layer styles used throughout the UI Kit. Changing any of the elements here will populate the changes globally to all the components, and will give you a great head start in customizing the components to match your client’s brand.
To customize the UI Kit, you can adjust the following Setup elements:
- Brand colors
- Type styles
- Basic form element styles
- Action and Button styles
- Background section styles
Customize the core symbols
After customizing color, font and styles, your next step is customizing the Symbols page. Here, you can adjust the layout of the common components to match the desired brand and overall user experience. (Symbols will adopt the changes you made in the Setup pages.)
Not all symbols will be required in the initial mocks, however, we recommend not to remove these symbols in case they are required at a later date.
Compose core templates
Once you've customized the overall design system, you can begin assembling pages by using the common components.
Notice that symbol names match the components in the SDK. We encourage you to customize the look and feel of the components to suit your project. As you do this, it's also a great idea to use a naming convention that makes it easy for developers to identify which components should be used to build out the designs.
Tip: To enable clear communication with Development, we recommend documenting any deviations from the default component structure. This will provide developers with a warning of any changes they'll need to make during the build.
Now that you've got the UI Kit setup and customized, celebrate! You have a big head start on the design of your Mobify Platform project.