![]() Using a mix of solid white and slightly faded elements will give your widgets more context and make them more glanceable. Once you’re happy with all your widgets, turn them into Symbols. Next, add a Background Blur of around 10 to the layer, and set the white fill’s blend mode to Overlay.įor now, these elements will just look slightly gray on your darker Artboard background, but when you test them on a real wallpaper or mockup, it should show its true colors. This will help the colors in your wallpaper show through the layer very subtly. Make some elements semi-transparentįor these elements, first make them solid white, then reduce that layer’s opacity to around 30–40%. Make sure all the design elements you create are white for now - this way, you can use Tints later to test different colors on a Lock Screen mockup. You’ll still want these colors to adjust with the rest of your widgets as you test them with different backgrounds. But it’s also worth considering secondary information or background elements that don’t need to be so prominent. Text and icons should be solid white for best legibility. ![]() For the Small Widget, focus on a circular design - this will best match Apple’s own small widget style. Make sure that all the elements of your widget are white (#FFFFFF) - this will make it easier to adjust colors later. In our case, we’re creating some widgets for a reading tracking app, which shows how much you’ve read of your current title, how long you’ve spent reading each month, and more.īefore you get started with your designs, you should also download Apple’s official iOS fonts - we’ll be using SF Pro Rounded in this tutorial. Think about what useful information your widgets could show - things like steps walked or upcoming appointments - and create some options for simple designs based on that. Now that you’re all set up, it’s time to start considering your users. Give your widget’s Artboards darker backgrounds so that you can see the white elements you add to them later. It’s also a good idea to give each of these Artboards a darker background color, as it’ll allow you to test your semi-transparent design elements more effectively. Finally, for the larger rectangular widget, go for a 160圆0 Artboard and name it Large Widget. You’ll also need one at 60圆0 - name that one Small Widget. Create a 137x27 Artboard and name it Text Widget. Create an Artboard for each widget sizeįirst, you need to create three Artboards - one for each of the three widget types. ![]() Want to follow along? You can get started with Sketch for free - then duplicate the document from this tutorial into your Workspace and test it out for yourself!ġ.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |