How I streamlined my workflow with Indigo.Design
As a UX intern, I had an assignment to get acquainted with the design system approach and understand the advantages it offers. And more precisely, I had to use Indigo.Design by Infragistics for that purpose. I have to mention I was impressed that the Infragistics design team, following the best design practices, uses a design system approach to assure consistency and a more structured way to build quality solutions.
In order to dive into the task, I had to make a sample Home page and Shipping page for a Delivery site. The web design had to be presented in desktop, tablet, and mobile responsive versions. I will lead you briefly through my process of building the sample pages. And I will explain to you what I found extremely useful through using for the very first time the Indigo.Design System for Sketch and the plugin that comes with it.
Creating wireframes with Indigo.Design Libraries
The first thing after the design brainstorm for the Delivery site was to install the Indigo.Design Sketch UI Kits. Infragistics thought of an easy way to explain the installation with the help of a video guide. I was new to Sketch and the concept of libraries so the video helped me effortlessly to follow the steps.
Next, I built the wireframes for the Home page and Shipping page in Sketch. At this point in the process, the UI Kit was really helpful. What I found was the Indigo.Design Libraries have a big variety of components and patterns which I used even for the wireframes. Thanks to the libraries it was possible for me to test my ideas and create the pages in no time.
And here you can take a quick look at my roughly made wireframes for the Home page and the first step of the Shipping page for desktop, tablet, and mobile version for the Delivery site:
Another great aspect of the Indigo.Design System is an option that allows you to customize all the imported UI components, patterns, and icons to fit your needs and style. For example, in the preset menu, I wanted to add two more icons and I could do this really easily. Or the inputs — I had the alternative to test different available types (border, box, etc.), plus different states of presets such as placeholders, labels, etc. which was a pleasant surprise for me indeed. It helped me to take a decision for the look in a fast way without bumping my head unnecessarily.
Customization with Indigo.Design Plugin
The next step of the process was to install the Indigo.Design Plugin for Sketch which I can tell it was an easy-breezy task.
What the plugin allows you is to create new themes and edit existing ones. Also, you can adjust the colors (primary, secondary, and special), as well as properties of the typography according to your brand characteristics. I have to make an important note that when you provide your primary and secondary colors, the plugin generates Material-like palettes from these base colors for your convenience to match your branding. How cool is that!
After I saved and applied the colors I chose, I was amazed by how much I was able to achieve with only a few clicks. In several places, I had to make insignificant changes because of little displacements but it was not a big deal. And if I wanted to, I could choose the exact colors for different components from the ready-made palette beside these that already have been applied automatically. I did not know that I have the necessity for this kind of plugin but I am grateful that I found out how awesome it is and how it can facilitate my design work.
Below you can take a glance at my prototypes for the Home page and the first step of the Shipping page for desktop, tablet, and mobile version for the Delivery site after using the Indigo.Design Plugin:
Final thoughts
In conclusion, I definitely can say that Indigo.Design System allows rapid prototyping and it improves the design process. And I cannot leave out how Indigo.Design Plugin let me adjust the whole UI Kits. Certainly, I convinced myself of the great value of using the UI kits and the plugin. They are extremely handy for streamlining my workflow and keeping a consistent look and feel throughout my user interface designs. Also, the UI kits and the plugin are huge time-savers for all designers who want to create smooth and intuitive UI.
I think you have to give Indigo.Design System a shot. I am sure you will not regret it!
