Advertisement
  1. Web Design
  2. Sketch
Webdesign

Designing an API-Driven Web App in Sketch

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Building a Mini, API-Driven Web App.
Planning a Basic API-Driven Web App
Building an API-Driven Web App With HTML and CSS
Final product image
What You'll Be Creating

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.

Screenshot of basic artboard in Sketch

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.

Screenshot of the header component 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.

Screenshot of the input component in Sketch

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).

Screenshot of the output component in Sketch

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:

Screenshot of the zero state in Sketch

For the loading state, we’ll stick a white overlay on the output area along with a loading indicator:

Screenshot of the loading state in Sketch

And for the error state, we’ll just show some error text:

Screenshot of the error state in Sketch

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.