User interface

Now we're getting somewhere! We understand what we're building and how users will use it, but how will it actually look? Customers buy with their eyes, so we go over our branding, user interface and aesthetics process in this chapter.

People call it many different things, such as the “UI” “Visual Design”, “Graphic Design” “Aesthetics” but it’s ultimately “How it visually looks” and we need to make it look appealing to our customer.

“Good Design” is a bit like “Good Art”. Everyone has an opinion, and many take really hard stances on what’s good and not. However, most of the things we work on appeal to a large audience, or to an audience in a niche that someone understand very well. Yes, everyone has their own preference, but we will try to play to the average and keep everyone happy. This is one of few times where we act like politicians 🙂

Here’s what we mean, both expensive things to sit on, but what would you pick? Even for those that pick the weird chair on the left, you do have to admit that it will not be comfortable to sit in, and most people would rather just stand.

Like almost everything in this playbook, there’s way too much that goes into section to truly cover it properly, but here are some things (in no particular order) we always consider that should go into an app design:

Imagery

Big Beautiful Images have taken over the web over the past few years for good reason. Consumers to buy with their eyes, and the human brain can recognize and interpret images 1000’s of times faster than text. Crappy stock photos are so 2004, and custom branded photos are and will be the future.

Size

The size of elements on the screen can make a big difference in the end result. Small and thin menus might create the illusion that the product is more ‘sleek’, where big and bold might be more sporty or childish.

Texture

There was a HUGE debate about what was proper web / app design when iOS 7.0 came out 3 years ago. The debate was over “Flat” vs. “Skeuomorphism” design in apps. Skeuomorphism is trying to create a design that mimics real life in art. For instance, in the ‘game center’ on Iphones, there was a green ‘felt’ looking background like a billiards table. This was replaced with sharp, bright, and ‘flat’ design that in hindsight, looks so much better than what was the norm for the first 5 years.

Spacing

Spacing is a something that’s been talked about indirectly quite heavily the past few years with everyone saying “Clean” and “Simple” as how they want their apps designed. This is also a direct reflection of Apple’s design standards.

Navigation

Yes, this is more of a UX issue, but how the navigation is designed is also important. For larger or enterprise apps, the user might spend a decent amount of time navigating from page to page, so how this is highlighted to the user is very important.

Call to Action

Similar to the Navigation, this isn’t necessarily a ‘Design Standard” or something of classic design, but we are building apps, not picasso’s 😉 Every landing page and most consumer apps have various call to actions that direct the user on what path they should be taking to complete an ‘action’. It’s usually built around either a purchase, engagement, or something that will grow the app.

Platform

Designing for the platform might be the most important thing on this list, because most of the other things are subjective to the user. Each platform we build for: web, iOS, Android, Mobile Web, etc, all have their own preferred methods of UI / UX, and in order for the app to look good and perform correctly for our users, we need to know what platform it’ll be built on. For example, android users get very annoyed when they notice that there are iPhone elements in their android app. It ultimately makes the app much ‘cheaper’ than the designer ever intended.

Buttons

Buttons are a critical part of digital design and go hand in hand with call to actions. Buttons make it much easier for users to access different features of apps, because ‘links’ are typically too small for a mouse or a finger. We typically offset the color of buttons to make them more prevalent if they are a call to action.

Colors

Color are obviously important to web design and have a lot of psychological and theory behind it. Here’s a great article about it. We’re shocked how much of the web is ‘blue’ but we’re starting to see more colors get some traction. “Yellow and Green” are two colors that come to mind!

Typography

Last but not least, is Typography (font for you non design folk). Typography is the one thing that most people new to design tend to overlook, but it can truly make a world of difference to the end result of an app or website. Unless there’s a specific reason, almost every app can (and should) use two fonts; one for the headliners or navigational things, and one for the paragraph text.

How we do it

By this time, we’ve met the client a few times and they’ve told us what type of ‘style’ they like, through either conversations or examples of their favorite apps. Unless the app it’s a B2B app or for outlier cases, our screen is the “Login screen.” We find that most logins should look the same, so we use it as our ‘base’.

For most apps, we make 1-3 versions UI Login versions and will let the client share it with friends and family for feedback. This step usually doesn’t take more than a day and is typically a quick ‘Yes!”,“No!”, or “Take this from this, and then it’s a Yes!”

We then begin design of the CORE. An easy to understand example would be a photo taking and picture sharing mobile app.

We would start with the camera page (filters + anything special)

Photo confirmation

Pageshare screen

Photo feed

We then design the supplementary pages of the core. This could be things like old photos, deleting photo page, the menu, and any other pages to complete the 80% of the functionality

After this, we really kick the UI / UX into high gear! We’ve already done our UX and the UI standards have been accepted. We start improving the core (don’t forget Core = most important pages) and then move onto the prototyping stage.

Therefore, the goal of this phase is to make sure that we’re on the same design path the client would like, without wasting time and $ on building and branding the entire app and making changes later.