Chapter 31: Night Owl App

We'll master some intermediate UX/UI principles and design an app that intelligently makes use of our screen real estate and target demographic.


What you will learn

  • How to find great colors schemes for your app
  • Screen Real Estate
  • Exporting Assets
  • More UX/UI principles

The app we're going to design in this chapter is called Night Owl. If you can remember back from Chapter 2 of this section, we need to answer a few questions first!

  1. What is the main goal of the application?

    Night Owl allows users to chat with other people in their area that can't sleep. You will only be able to log on from 11:00PM - 5:00AM.

  2. If your application was a person, describe them in 3 words.

    Sleek, Mysterious and Inviting.

  3. Who is going to be using your application?

    People ages 18-35 who cannot sleep.

Great! Now that we have these answered. Let's go ahead and start designing.

Designing Night Owl

Open up Sketch and go to File -> New From Template -> iOS UI Design. You'll notice we have some symbols and templates we can work with. For now, let's click the + to add a new page, and title it Login.

Now let's Insert -> Artboard and select iPhone 7. We can rename our artboard Login Screen. Go ahead and Insert -> Shape -> Rectangle and have it cover the whole artboard. Be sure to remove the borders. (Figure 4.7.1)

Figure 4.7.1 4.7.1 - Rectangle.png

This will serve as the background for our login screen. Let's rename it to Night BG. Let's also find a cool mysterious dark blue color. We want to give the feeling of night time and mystery. If you're having trouble finding a deep blue night HEX, I'll be using: #223543.

Once you have found your deep blue, click the Linear Gradient icon to give it a night sky feel (Figure 4.7.2). It's almost as if the moon is giving off light to our night sky. Feel free to adjust the second color as necessary. (Figure 4.7.3)

Figure 4.7.2

4.7.2 - Fill Gradient.png

Figure 4.7.3 4.7.3 - Night Sky BG.png

We're going to make the moon a part of our title logo. Go ahead and search the web for a crescent moon image. Once you have your image, set the Fill to white, and let's also add a shadow. We want to give an illuminating effect for our moon, so let's change the black color of the shadow to white. Have the X and Y values both be 0. We don't want an offset for our illumination! (Figure 4.7.4)

Figure 4.7.4

4.7.4 - Moonlit.png

We can also crank up the blur of our shadow to roughly 25. This should give us a nice glowing effect for our moon. (Figure 4.7.5)

Figure 4.7.5 4.7.5 - Moon.png

This is looking great! Now let's Insert -> Text and type NIGHT WL in all caps. (Yes I left out the "O" intentionally :)). Find a font you like that matches our apps personality, and leave a space for the "O." I'll be using Avenir Next Ultra Light. Let's make the size around 30, and center it horizontally. We'll also bring it up towards the top. (Figure 4.7.6)

Figure 4.7.6 4.7.6 - NightWL.png

We're going to use the moon as the "O" in "Night Owl" to give the title a little flair. Feel free to resize and alter the position and glow until you like the way it looks. (Figure 4.7.7)

Figure 4.7.7 4.7.7 - NightOwl.png

This is looking pretty sweet! Let's add some stars to top off our background. Insert -> Shape -> Oval and make a small perfect circle. Remove the border and make the fill white. Go ahead and apply the same "glowing" technique you did on your moon and adjust the opacity of the white glow to your liking. Now that you have one completed star, you can copy & paste it to scatter them around the artboard to your taste. Feel free to resize them to add some variety to your night sky. When you are done, let's group all the stars in a folder to keep things tidy. (Figure 4.7.8)

Figure 4.7.8 4.7.8 - Stars.png

Now let's create our login button. Insert -> Shape -> Rounded Rectangle and place it right on bottom. You can remove the borders, adjust the corners to your liking, and center it horizontally in the artboard. Go ahead and make the fill pure white. Let's then Insert -> Text and type Login. Then, use the same base color as our night background color. (Figure 4.7.9)

Figure 4.7.9 4.7.9 - Login.png

Lastly, find a picture of an cartoon owl, and place it right in the center of your screen to fill up the blank space a bit. Feel free to use the principles in this section to create an owl if you'd like as well. The final login screen should look something like Figure 4.7.10.

Figure 4.7.10 4.7.10.png

Creating the Home Page

Create another page and title it Home. This is where we'll design our home screen.

Go ahead and Insert -> Artboard -> iPhone 7 and copy your Night BG from the Login screen. We can also bring over our "Night Owl" title (including the moon) and place it at the top.

We're going to want to make it a little smaller because it's more of a navigation title, rather than a login screen. At the top, click Scale, and bring it down just a notch (maybe 95% of the 100%). (Figure 4.7.11)

Scaling works well when you want to keep all your elements proportionate. If you had grouped your text and moon together, and Shift + dragged the group inwards, the text would not scale appropriately to the moon. Don't forget to align it horizontally in the artboard when you're done!

Figure 4.7.11 4.7.11 - Scale.png

Great! Now we're going to create a little space for a user to write a status. Perhaps a reason why they can't sleep! Let's Insert -> Shape -> Rounded Rectangle and place it right below our title. Make the fill white, and remove the borders. (Figure 4.7.12)

Figure 4.7.12 4.7.12 - Status White.png

The white is probably a little harsh on the eye's (being that a user will use this app at night). Let's decrease the opacity to 25%. This is just enough for the user to know it's a text field without being obnoxious. We can then Insert -> Text and type a placeholder text as a prompt to write a status. Be sure to decrease your placeholder text opacity to around 60% to denote it is in fact placeholder text. (Figure 4.7.13)

Tip: Placeholder text is a great way to prompt action without cluttering up the UI. If it weren't for the placeholder text, we'd have to put a call to action somewhere outside of the text field, which could get messy and confusing. Take advantage of placeholder text as a prompt for action anywhere you can. They are very useful on forms, status updates, and chat / messaging systems.

Figure 4.7.13 4.7.13 - Status.png

So what happens when a user posts a status? We can place the text right below the status bar. To demonstrate this, let's Insert -> Text and say "No Recent Posts." This will let people viewing our mockup know where their status would be posted. Let's also align it horizontally in the artboard. (Figure 4.7.14)

Figure 4.7.14 4.7.14 - No Recent.png

Lastly, we'll add a "Trending Topics" table view that users can browse through and chat with other night owls. Let's create a "Trending" header for our table view. Insert -> Shape -> Rectangle and snap it to the left and right edges. We'll make this around 50 pts tall. Let's also remove the borders and make the fill a solid black color, and decrease the opacity to around 40%. You'll see that our Night BG color will begin to bleed through giving it a nice complimentary shade to our theme. Finally, let's Insert -> Text and type Trending inside of our header box. (Figure 4.7.15)

Figure 4.7.15 4.7.15 - Trending Bar.png

Now let's find a cool trending icon to put beside our text. Once you've found one, make the fill white and scale it down so it fits nicely right beside the "Trending" text. Group these two items together and align it vertically and horizontally in the header box. You know the drill! ;) (Figure 4.7.16)

Figure 4.7.16 4.7.16 - Trending with Icon.png

Let's create our table view cells. This will be topics a user can click on. All we'll need to do is Insert -> Text and type any topic you'd like. Go ahead and Insert -> Shape -> Line to act as a table view cell separator. To match our theme, make the line white in color, and decrease the opacity to 50% to soften it. We'll also decrease the thickness to .5 to further match a table view cell separator. (Figure 4.7.17)

Figure 4.7.17 4.7.17 - Item 1.png

Now let's group these two items, and duplicate them down the artboard to simulate a table view. Then rename each item to simulate a variety of topics. By the end of it, you're Home screen should look something like (Figure 4.7.18)

Figure 4.7.18 4.7.18 - NightOwlHome.png

Screen Real Estate

Before we move on, I want to emphasize a few things we accomplished here (aside from a beautiful home screen!).

First, we began to create a color scheme for our app without even realizing it! Notice how we didn't need to add any more colors other than the Night BG, and yet we have such a dynamic, great looking screen? We accomplished this through lowering the opacity of white and black elements over our original color. This created depth from our original color, and allowed us to do two things:

  1. Speak to our users without words - Instead of saying "This is a textfield!" we were able to convey that beautifully with a semi - transparent rounded rectangle. We told the user where to go with our color choice. This goes for the table view header as well.

  2. Separate elements with more than just lines - Barring the table view separators, we were able to properly denote sections in our app through our color scheme.

Always look for ways to speak without directional text. Different colors and semi transparent black and white items do this wonderfully.

Second, we made great use of the screen real estate. As product designers, we must be very dialed into how elements will be displayed on various devices, and how much space we have to get our user to fully and properly digest our app.

Notice how the main elements take up most, if not all of the screen real estate. We are only showcasing two actions: Posting a status and viewing trending topics to talk about. There are obviously a multitude of features we can throw on this screen, but the more that happens the harder it becomes to digest.

Also notice we still have room at the upper left and right corners for items like an "Inbox" and a "Hamburger Menu", etc. These secondary items can be placed at the top, bottom, and in the corners of our screen. And the main actions that will loop our users into our journey cycle should be front and center. Users these days need to be hooked, intrigued, and understand your app all within 1-2 seconds.

If more time is needed to understand where or how to start their journey through your app, you might lose a conversion. That's how quickly things can change. That's why the details matter.

Don't ever think you're over thinking it, because chances are you're doing the exact opposite.

Creating the Chat Screen

Lastly, we're going to design a chat screen between another user. Let's go ahead and click + and create a new page called Chat. We'll also Insert -> Artboard -> iPhone 7, and title it Chat Screen. Then, copy & paste our Night BG from any of the previous screens and paste it on our Chat Screen.

Then, Insert -> Symbol -> Keyboard -> Dark -> Lower (Figure 4.7.19). Go ahead and place the keyboard symbol at the bottom of the Chat Screen.

Figure 4.7.19 4.7.19 - Symbol.png

Symbols are elements you can create to reuse throughout your project. The beauty of symbols is that once you change the root symbol, all instances of that symbol change, so you don't have to go back and alter each one. Similar to coding, we don't want to repeat ourselves, and any chance to optimize work flow is encouraged. Can you guess any of our elements we've repeated so far? If you guessed our Night BG you're correct! Feel free to click our Night BG and click Create Symbol in the upper left (Figure 4.7.20). Now every time we change our Night BG, all of our screens will change!

Figure 4.7.20

4.7.20 - Create Symbol.png

Let's create our navigation bar items. We won't have a separate rectangle, but go ahead and Insert -> Text and type a topic of choice. Align it horizontally on our screen, and find/add a "back" button. Make sure you make the fill white! (Figure 4.7.21)

Figure 4.7.21 4.7.21 - Nav.png

Now, create the field where the user would type. Insert -> Shape -> Rectangle and place it right above the keyboard symbol at 50 pts high. Remove the border and make the fill white. If you guessed that we should probably decrease the opacity, you're correct! I would bring the opacity down to around 40%, and create a placeholder text in the same way we did for the status on our Home Screen. Don't forget to align it vertically in the rectangle. (Figure 4.7.22)

Figure 4.7.22 4.7.22 - Text Field.png

Next, find a "send" (i.e. airplane) button that is enclosed in either a circle or square to simulate a button. If you'd like, you can also find a send icon, and group it with a circle in Sketch. We'll use this as our "send" button for our chat. We'll keep the icon inside white, and fill the surrounding color.

Head over to www.paletton.com or www.color.adobe.com. These are extremely helpful tools when creating color palettes. We can input a HEX, and the tool will show complimentary colors in different schemes. It's a great starting place to explore colors that compliment your theme. I often start with a HEX provided, and adjust accordingly.

Let's take our base Night BG HEX (#223543) and add it into Paletton. We'll then go to the upper left corner and click Adjacent Colors (Figure 4.7.23)

Figure 4.7.23 4.7.23 - Paletton.png

You'll notice right off the bat we have a variety of colors to work with. I'm going to grab one of the green HEXs by clicking the box. Find a green color you like and copy it to your clipboard. (Figure 4.7.24)

Figure 4.7.24 4.7.24 - Green.png

Now paste it into the Fill of your "send" button. It turns out this green works really well right out the gate! If yours doesn't look quite right, feel free to use this HEX as a starting point, or go back to Paletton and choose a different color all together. These tools work great for unleashing your creativity and giving you some options to work with. Once you have your "send" button, be sure to align it vertically in your text box and group them together to keep things tidy. (Figure 4.7.25)

Figure 4.7.25 4.7.25 - Send.png

Lastly, we're going to want to create a mock conversation. Let's Insert -> Shape -> Oval and create a perfect circle around 33pts x 33pts. We can remove the border as well. This will act as a user picture within the chat.

Next Insert -> Text for the name, date, and the message individually. We'll make the text for the date a little smaller, the message text a standard size, and the name a little bigger as well as bolded or semi bolded. We want to emphasize the different elements within the cell, and this is a perfect way to do so.

We'll now add a thin separator line and style it similar to our home screen table view separators. Once you have all these elements configured, let's group them together! (Figure 4.7.26)

Tip: When creating table view cell separators, it often helps to have the left side align to the furthest left element, and scale to the end of the screen on the right. For example, our line separator is essentially left aligned with our image circle.

Figure 4.7.26 4.7.26 - Message.png

Now you can copy & paste this cell, and change it's elements accordingly to simulate real interactions! Feel free to fill in our placeholder/user images with actual faces!

Final Screens.png

Wrapping up

Be sure to keep your apps main functionality on the forefront of the screen. You have 1-2 seconds to grab the users attention and convey exactly what they're supposed to do. It's also great to use semi-transparent black and white shapes to break up elements of your screen, as well as placeholder text to suggest direction and instruction.

Exercise

The top of the Home screen has room for more functionality (ie. an Inbox or a Menu). Use your creativity and design more features that enhances the goal of the app, while keeping in mind the target demographic and use case scenarios.