![]() Now it’s time to try out some widget designs ready for launch. ![]() That’s it! You just learned how to create widgets for the iOS 16 Lock Screen - and test them with different color customizations. You can now test out different hues to see how your widgets will look on different backgrounds, or for different situations.īy adding a Tint to the group and adjusting the hue, you can test out how your widgets will look in different situations and on different backgrounds. Then select the whole group and add a Tint in the Inspector. Select all of your widgets and your clock layer, Control-click and choose Group Selection from the context menu. When you add your clock and widgets to the mockup Lock Screen they’ll be all white - but we can change that using Tints. Everything will appear in white, but your semi-transparent elements should be a little more faded, and take on some of the hues that sit behind them.īut what about those color changes we talked about? Add a wallpaper background, then begin adding your UI Symbols to populate your screen.įinally, add your widgets and your clock to the screen. Create an Artboard using Sketch’s built-in iPhone 13 Pro Max template. Test your designs on a Lock Screen mockup To properly test your widgets, you need to mock up a Lock Screen - thankfully you can grab most of these elements from Apple’s own UI kit. Type in your chosen time, set the font to SF Pro Rounded in Bold, turn the text white (#FFFFFF) and set the size to 107. So let’s create one! First, make an Artboard that’s around 210x130, and add a text box to it. Don’t worry - these elements won’t need to change with the rest of your UI when you adjust colors. It’s nearly time to see how these look on a Lock Screen - but first, we need a few more elements to build the rest of the Lock Screen’s UI! You have two options here. You can duplicate our demo document and grab all the Home screen elements you need from there, or you can download Apple’s iOS UI kit and build your own Home screen. 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 |