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 by giving it a 16px radius. Further down in the same panel on the right hand side, 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 an "H4 Headline" in "Active Style" from the bottom of the insert menu, where the text styles from the Indigo-Styling library are available. The text should say "Parrot BEBOP" and it should be positioned in the top left area of the background. Below it we will insert an "H5 Headline" in "Active Style", change its text to "FPV Power", and make sure that the left borders of these two text layers align.

After fixing both width and height and pinning to the top and left both text layers, we will create a group for them - "Left Column". The resizing properties of this group should be just like for its children i.e. fixed width and height and pinned to the top and left. Now, let's add in the top right an "ExtraLarge" icon from the Icon category in the Indigo-Components library and configure its icon glyph to be a downward arrow with red, error color. An icon must have its width and height fixed, so that is what we will do, and we will additionally pin it top and left. Another text layer is necessary to display the discount amount, so this time we will use the "H1 Headline" in "Active Style", but change its color to red and the content to "42%". This text layer needs to be fixed both left and right and pinned top and right. We will create a new group "Right Column" for the last two layers, which should appear sibling to the other group and the background.

Having set the resizing of "Right Column" to fixed width and height and pinned it to the top and right, we will select both groups we have so far and create another one - "Content". Within this new group we will add all the rest of the elements as same level layers as the two groups.

Next, we have to layout the middle section with the drone image, "BUY NOW" button and "HOT DEALS" heading.

For the image all we need to do is drag and drop a photo of a drone on the Sketch canvas, size it accordingly and fix the width and height, as well as pin to the top. With the image having equal space on the left and right in relation to the "Content" group and neither being pinned left, nor right, this centered positioning will be accounted for in the generated Angular code. The same resizing rules will be applied to the button and the heading once inserted, so let's do that now.

First, we will insert a "Raised" button from the collection of "Buttons" under Indigo-Components. We will change its text to "BUY NOW" and the color of the background to error, the same red we used for the icon before. Second, is the insertion of another text style, an "H2 Headline" in "Active Style", but change the color to red just as we did for the discount value.

Last, but not least, comes the bottom section, for which we will need to insert two "H5 Headline" in "Active 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 width and height, as well as pinned right. The final thing to do for this design is to select these two layers, create a new group from them and fix its width and height, as well as pinned it to the top.

Finally, the design for a Cyber Monday Offer in Sketch is ready and in case you have followed the steps outlined in this blog, then congratulations, you made it! You have successfully create an Indigo.Design project yourself!

Get Started with Indigo.Design!

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.

Use our Essential Plan for free or upgrade to Indigo.Design Professional starting at $39/mo. Want Code Generation? Get Indigo.Design Enterprise for $99/month!

• Sign up for free
• View plans & pricing

*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