How to design eye-catching widget backgrounds
In this first installment of our widget tutorial, learn how to use blends, blurs, Tints and colors to make your backgrounds pop.
Widgets are a great way to keep your brand, product or service in the mind of your customers. In fact, they can even provide a more streamlined user experience than an app itself. And we have good news. Creating a widget with Sketch is easy!
In this series, we’ll be teaching you how to create an eye-catching widget for an astronomy app. For that, we’ll be designing a starry night sky. Here’s a quick look at what you’ll be making:
Widgets allow mobile users to get information from an app without opening it.
Through this tutorial, you’ll learn how to create backgrounds, use Symbols to populate your widgets, and use Smart Layout to ensure your content resizes automatically to fit the different versions of your responsive widget.
Ready? Let’s get to it!
It all starts with a background
Every widget needs a background, so we’re going to be designing a night sky backdrop to fit our astronomy theme. First, create a rectangular Artboard and give it a navy blue background.
Use the A shortcut to create an Artboard and the O shortcut to create an oval.
Now, it’s time to bring in the stars. Create a 2x2 oval and give it a light gray fill. Then, go to the Shadows section in the Inspector — right under Fills — and add a couple of white shadows to give our stars a little glow. You can always add more by clicking on the + sign in the top-right corner of the section.
We’ve made the star a little bigger than it needs to be so you can see the changes properly.
Our star is already looking pretty good! But let’s take it a step further. Let’s add an inner white shadow and set the spread to 0.25 to help give it a luminous appearance. Don’t worry if you can’t see it. It’ll come to life in a future step! Now, click on the blend mode icon 
and select “Plus Lighter” to soften the shadow.
The change will be subtle, but it’ll make a difference soon.
Working with color
Now, here’s a handy trick for working with color in Sketch. Right-click on the star we’ve been working on and choose Group Selection. You’ll notice that the options on the Inspector will have changed. You can now add color to your star by finding the Tint section in the Inspector. Tints are great for when you have elements with different opacities as the tint will color everything in the group, including any fills, borders, shadows, etc. — all in one step.
Here, we recommend using pale colors such as Periwinkle (#CCCCFF) to keep the appearance of a star. Once you’ve added a Tint, you’ll be able to see how the Plus Lighter inner shadow adds a bright edge to your star.
Plus Lighter and Plus Darker are great blending options when working with highlights and shadows, so feel free to play around with them in your design projects!
With your finished star, you can now start populating your sky. Duplicate the group as many times as you want and arrange your stars across the Artboard. Make sure to vary colors and sizes to give it a more dynamic feel.
Once you’re done scattering your stars, let’s add one final touch: a North star. To create this shinier star, choose your favorite and double its size. Now, form an X over the oval by adding two thin, diagonal lines that stretch beyond the oval. To give it a glow, group the lines together and give them a white radial gradient.
The gradient should be opaque in the center and nearly transparent towards the edges. Last but not least, add a Plus Lighter blend mode. Ta-da! Now you have a nice, flared star.
What’s next?
Our background is ready to go! In our next post, we’ll learn how to work in the rest of the widget’s elements such as text and buttons. You’ll also learn about Symbols, a handy Sketch tool for working with repeating elements you want to update in one go. See you then.
