Now that we’ve accounted for all the elements of our little app, including its different states, we can confidently begin creating visual mockups for each element and its corresponding state. If you are at any point curious about the details of the design (colors, font-size, etc) as we build this, check out the original Sketch file on GitHub.
Let’s start with an artboard in Sketch and give it a light gray background.
The Header
As this is just a demo, we’re not going to spend a large amount of time creating an entire brand for our app. Instead we’ll just stylize the name of our app using a font from Google Fonts. In this case, I went with Pacifico. If you install the font on your computer, you can see how it looks in Sketch.
The Input
Now we need a text input along with a submit button. This is where the user can enter a link to the app whose high resolution icon artwork they want to download. Following our wireframes, we’ll put this below the header and make it full width, so it works from desktop down to mobile.
The Output
Now let’s add the main content area where we will display the icon artwork returned by the iTunes API. We’ll use the full-size Twitter App icon for demo purposes (which you can download here).
Note: iOS app icons are not masked by default. The icon artwork (as seen in the twitter example) is square. iOS applies the rounded corners at the operating system level, so for our app we’ll have to create a mask for the iOS icons. The mask isn’t just a simple border radius, it’s more of a “squircle”. Rather than create it myself, I used the Sketch icon template created by Thibaut Ninove.
The Component States
Now we’ll create a few mockups to help us understand what the component states will look like. We’ll use the main output area to indicate these different states.
For the zero state (the intial page load) we’ll throw in a little icon placeholder along with some instructional text about how to use the app:
For the loading state, we’ll stick a white overlay on the output area along with a loading indicator:
And for the error state, we’ll just show some error text:
Until Next Time!
That’s it! We have some nice visual mockups of our different app components and now we’re ready to start implementing with HTML, CSS, and JavaScript!
