Design for a Cyber Monday Offer with Indigo.Design

In order to showcase how easy it is to create stunning designs with Indigo.Design, I’ll walk you through on how I created my Dribbble debut shot for a Cyber Monday Offer with the Indigo.Design UI Kits in Sketch.

As you probably know by now, Indigo.Design is Infragistics’ Design System including:

• UI Kits to speed up the creative process of designers in Sketch
• Cloud for prototypes to share ideas with stakeholders and quick collection of feedback or to create and execute in-depth remote usability studies with real users
• Integration with Visual Studio Code allowing you to generate Angular code from your prototypes with Ignite UI for Angular

The reason for mentioning these steps is that upon finishing my work in Sketch for the Cyber Monday Offer, I went on to publish it as a prototype in the cloud via the Sketch plugin by Infragistics. Then, I fed the link in Infragistics’ plugin for Visual Studio Code to generate an Angular layout component with Ignite UI for Angular icons, buttons and typographies, which is just one “npm start” from pixel-perfect rendering in the browser. This walkthrough will outline the steps on how to create the design in Sketch, however, you can also download and explore the original Sketch project from Dribbble to play with the prototype and use its link to generate an Ignite UI for Angular app.

To get started, any first time users will need to install the Indigo.Design UI Kit. We have a video guide that may come in handy if you’re new to Sketch and the concept of libraries. As a note, I would advise you to update the Sketch app to the latest available version when installing our UI kits.

Our design will start with the creation of a new artboard and drawing a rounded rectangle for the background. From the options on the right, we will configure the “Appearance” to use a white color style so that we have a surface on top of which to lay the user interface out. In the original project, I have applied a shape mask on the background to introduce the flame cutouts from the background because I wanted to make the offer really hot, but you can skip that part if you’d like.

Next, let’s focus on the top third of the layout that looks like it is arranged in a left column with product information and a right one with the discount.

First, we will add a headline from the text styles in the Indigo-Styling library that says “Parrot BEBOP” and position it accordingly. Below it we will insert a smaller headline that reads FPV Power and align it with the other one. Let’s group these two and set their resizing properties according to the image below. For the other part we will use an “ExtraLarge” the largest headline available in red color and text that reads “42%”. For the icon and headline we will create another group, which should appear sibling to the one previously created and the background.

Having set the resizing properties for the second group according to the image below, we will select both and create another group out of them. Within this new group we will add all other elements as siblings to the two groups.

Next, we have to layout the middle section with the drone image, “BUY NOW” button and “HOT DEALS” heading. Starting with the image all we need to do is drag and drop a photo of a drone on the Sketch canvas, that’s it. Next, we will insert a “Raised” button and update its text and color accordingly. Lastly, we will insert another headline and style it like the image that follows. All three elements have matching resizing properties that are also show below.

Last, but not least, comes the bottom section, for which we will need to insert two headlines of the same style next to each other between the flames of the cropping mask. The left one will say “CYBER MONDAY” and will be with fixed width and height, as well as pinned left, while the right one will say “Nov 26” and will be with fixed similarly, but pinned right. For these two, we will create a new group and fix its width and height, as well as pin it to the top.

Why stop here? You may use the Indigo.Design plugin for Sketch** to publish your work to the Indigo.Design Cloud and share it to stakeholders for early feedback, create and run a full-blown remote usability study, or simply show it with the world. If you want to go the whole nine yards, download our Visual Studio code plugin and generate an Angular app with Ignite UI for Angular.

*dribbble is an invite only design community allowing you to share your work with other creatives by creating shots for each piece of work you want to share

**The Indigo.Design plugin for Sketch let’s you easily publish and sync your designs with the Indigo.Design Cloud from Sketch and comes in the same archive as the UI Kit libraries