The creative part of UI design: Adding characters and style

This is an excerpt from Fundamental UI design, an InVision e-course by Jane Portman.

After long hours spent solving UX challenges and crafting wireframes, we finally arrive at the interesting part: the visual design itself.

“Our minds say that so long as the design works well, the work’s appearance does not necessarily matter. And yet, our hearts say otherwise. No matter how rational our thinking, we hear a voice whisper that beauty has an important role to play.”
—Frank Chimero, “The Shape of Design”

Outsiders often think that the fonts and colors are the core of a designer’s job, but it’s not like that. It’s like the top of the iceberg, the mere 20% of all hard thinking and planning.

However, this part is the most subjective, and it’s often challenging.

Eliminating the creative stress

“Aiming to send over the layouts by Monday.”

Friday night, and you’re sitting there, canvas half-empty, unable to come up with a design solution.

Ever been there?

A designer is expected to come up with some creative output. It’s a common misconception of entire design industry. That alone, combined with a tight deadline, can cause unnecessary stress and fear of rejection. These, in turn, block creativity, productivity, and intellect.

What can you do to cut this stress to a minimum?

First, use wireframes. They do a fantastic job of prepping the client as well as yourself. Wireframes funnel down the client’s vision into a collaborative mode. The client’s much more likely to sign off something they helped create.

Second, don’t wait to get started until you have a genius idea. Don’t fear a white canvas. Instead, start crafting your UI layout like you’d build a house. Draw up the basic elements to match the wireframes. Use basic fonts and pick appropriate icons that communicate the meaning well.

The smart visual solution will emerge from the basic elements. You’ll gradually figure out a way to make them shine.

Working on the style concepts

It’s always thrilling to present the look and feel of an app to a client. It’s almost like going on a first date with someone.

Over the years, my process boiled down to the following: I present 2 style concepts of an app to the client. Each includes layouts for a few key screens, framed as a tiny presentation.

I do the main design work on a single style concept. This takes the majority of time, as I’m solving the remaining UX challenges and adding visual flair. Then I take these first set of layouts and do something dramatic. Sometimes it’s swapping the color scheme from white to black, sometimes it’s completely changing the typeface or adding a prominent illustration.

Those 2 concepts should be somehow different in functionality or layout so that the client doesn’t perceive them as just a different color scheme. For example, if you’re using full-bleed photo background to present the first one, then you can strip everything off for the second concept for a minimalist, edgy look.

Related: These 5 major UI mistakes will kill your app

Make sure you enjoy this design exercise. Working on several layouts actually improves the functionality and the quality of each one. It also keeps your creative juices flowing between other mundane tasks.

With Airstory, the founders had 2 style concepts to choose from. In addition to the actual screens (2-3 per option), I put together 2 small presentations that went beyond actual UI and explained the creative direction behind it. The founders went with the first style option.

The second concept was also worth attention. It provided a lightweight look and featured a more interesting typeface (as opposed to the classic Proxima Nova). This concept was more romantic and opinionated. It was a possibility that one of the founders could go for it. Even if not selected, it provided nice contrast and highlighted the versatility of the first concept, making it more desirable.

Getting visual inspiration

Browsing sites like Dribbble is great for getting some fresh design inspiration.

I must admit this rarely feeds effective solutions in terms of usability. Each app usually solves a unique problem. But browsing through the trending work will give you a solid idea of what’s hot today. It’ll energize and motivate you to create outstanding work.

Never go blatantly copying the work of other designers. But it really helps to pick apart the designs and see what can be adopted in your own design, especially style-wise.

Style references and preferences

If you interviewed your client well, then you probably have enough style references to understand their taste. But you shouldn’t take this as a dogma!

You’re the professional in charge, and you can allow reasonable deviations from the task. Even if the client wished for a “white-ish” interface, it’s sometimes necessary to add dark contrasting elements for usability and visual interest.

Plus, try to address different style preferences with different style concepts. One can be more traditional, and the other can be pushing the envelope a bit. You never know how exactly the client feels about their new product until they see your work.

Related: Designers share the worst client feedback they’ve ever gotten

Conservative or playful?

Don’t take creativity as a chore. Your UI doesn’t need to make a dramatic statement. Before anything, your UI should be a convenient subtle shell people use daily.

But please don’t fear design experiments and bold decisions.

After you crafted the basic components of your interface, don’t be afraid to bring more personality into the look.

You can go playful by adding informal illustrations or occasional hand-written decorative fonts—just please use both sparingly. Or you can go edgy and minimal by picking an interesting high-contrast color scheme and cutting down on decorations.

Learn to be playful at times, while being conservative in serious situations. Disco by Copy Hackers featured plenty of illustration as part of their brand. But the widget itself remained neutral in design—it needed to be placed on various websites.

Keep experimenting with your style

With visual design, it’s easy to fall into the trap of using a few safe choices that have already worked for you multiple times.

This can be called your signature style. But you should be brave enough to deviate from your trusted techniques and experiment with new styles and visual choices.

“It’s not enough to rest on your artistic laurels or to simply do what’s been done before. That sort of laziness leads to stagnation and creative death. Question your art relentlessly.”
–Paul Jarvis, “The Good Creative”

Style checklist

No matter what style you go after, make sure you answer “yes” to the following questions:

• Does the style match the personality of the product owner?
• Does the style feel organic with the target audience?
• Do your choices cater for comfortable use of the app?

This quick sanity check will save you a lot of worries afterwards.

Building visual interest from scratch

You can’t really qualify good UI design as beautiful—there’s much more to it than just pure aesthetic beauty. What we consider beautiful in the software industry is essentially a combination of usability and visual interest.

As a designer, your task is to create a harmonic experience for the eyes, and to provide interesting material for them to peruse.

Even though most apps are purely utilitarian and not for entertainment, they don’t have to look boring.

Creating rules and breaking them

Visual interest doesn’t mean noise, complexity, or richness in detail. It has more to do with a clear structure that has certain deviations, which evoke human curiosity.

As designers, we’re telling a story with our UI. We want to make this story interesting.

First we create a harmonious structure based on balance and patterns, such as groups of similar elements.

Then we intentionally allow moderate deviations that draw the eye: some of them occur naturally through a variety of content, and some of them are intentional (like alternating backgrounds, headlines, etc.)

Pattern gives the eye a repetitive, balanced experience. It helps to organize the natural noise of content into a structure that’s comfortable to view.

Contrast creates dynamics. You can apply contrast in color, texture, size, or shape. You’ll likely use most of them.

Before anything, use actual information to craft nice visual structure—cards, tables, and feeds. Then you can add interest with traditional design elements:

• colors
• typography
• icons
• charts and graphs
• photography and illustration

Let’s walk through them with some tips and instructions.

Color scheme
Picking a color scheme might seem difficult. But really, you just need 2 interesting colors to create entire color scheme for an app. And it should be based on a nice contrast.

First, pick a base color—something that has actual color in it like a dark neutral blue or a muted purple. You’ll use this color as a background for remaining elements.

Hint: this color should be a nice contrasting background either for white or for black elements, so make sure it’s light enough or dark enough.

Second, pick a brighter contrasting color for your calls to action, like buttons or icons. It can be any bright shade like red, orange, green, or blue. It should stand well against your base color and preferably against white as well.

Then you’ll use various shades of white and black. White is a perfect background for large amounts of content, and black is great for readability.

Hint: dark shades of gray like 90% or 80% still look like black but are more comfortable to the eye and provide a more sophisticated look.

Don’t neglect traditional color coding. Red is the color for alerts and errors. Green indicates that something has been completed successfully.

With your base color scheme, you need to make sure that these positive or negative alerts don’t get lost in the visual noise. Of course you still can use red or green as your base colors—just keep this little fact in mind.

This Ryvalry app prototype created for Eric Shamlin features a rich red color, which looks even more prominent in contrast with white.

Typography
Contrast is your best friend when it comes to typography.

A large line of bold text accompanied by a smaller line of additional info is a classic contrast that works in all situations. Use it in your information cards—all of them have a title line. Even a plain wall of text has a headline and a subhead.

Very large numerals are your lifesavers when you don’t have any other visuals for your dashboard.

Related: Typography tips for a more comfortable read

Small type is another magic tool. People usually read post-scripts and small notes with much better attention than the main body of text. Appropriate comments set in a smaller font with a subtly lighter font color will make any person naturally curious.

Icons
Icons are a unique type of illustration that are used in UI for many purposes. They add tons of visual interest. They denote the most common actions instead of words and help you save precious screen space.

They also help create visual interest when there’s none—without adding noise.

You can use icons in a few basic ways:

• Inline: their size should be the same as the font size
• Large: they can precede an entire paragraph or a content block
• Oversized: set in a subtle color like pale gray and accompanied by a small text note, they fill in blank slates well

Custom icons are fantastic, but there’s nothing bad about using stock icons.

Photography and illustration
Photography and illustration are primarily used on sales pages and in brand presentation, but they can make way into the actual interface as well.

You can use small blocks of illustration to accompany notes or bits of information on a dashboard. You can use full-bleed muted photography for blank slates or profile backgrounds.

Pay special attention to complex vector illustrations. You can pull them apart and sprinkle separate elements across your UI and sales pages.

Stock resources are a flaky thing. Finding good content is like digging soil for rare pellets of gold. You need plenty of time and really good taste. But it’s absolutely worth the effort because:

• You still save time, as compared to custom illustration or photography
• Stock resources are available for a fraction of a price
• You see the result instantly without any trouble or risk
• You can experiment with a few options at once, even with watermarked previews

However, custom photography and illustration will make your project totally unique and memorable. You just need to weigh the cons and pros.

Profile pictures are your free design bonus: You don’t need any effort to acquire them. However, keep in mind that they can be terribly inconsistent, not pretty, or downright missing. So put in a few extra minutes to design a pretty placeholder.

In this Disco prototype by Copy Hackers, we added playful illustrative elements right into the interface. Have a look at the clouds and the balloon that decorate the app dashboard.

Charts and graphs
Charts and diagrams are great for dashboards and profile pages. They take simple numeral data and generate visually rich, informative insights.

There are plenty of libraries out there, but they often look quite spartan. As a designer, you can customize the defaults for a posh, sophisticated look.

Some tips:

• Keep the colors and fonts consistent with your app
• Donut charts look prettier than pie charts
• Try removing the grid and making the trend line thicker for a pretty trend view
• Charts usually have weird shapes: place them on light rectangle backgrounds to keep overall page structure consistent
• Charts are typically empty during the first app experience, so consider replacing them with blank slate placeholders

The final word of caution
Don’t be an overachiever in the battle for visual interest. Too much stuff results in visual noise, and we don’t want that to happen.

So be wise, and aim for clarity and user comfort first.

Living in the era of flat design

“Being ruthless in our design decisions and allowing only the most important and most relevant items to be kept means we will ultimately end up with a better, more usable product in the end.”
–Shawn Blanc, “Delight is in the Details”

We’re all extremely lucky to live in the era of flat, minimal design.

The audience (and the clients) have matured enough. They’re ready to use and to enjoy minimal interfaces not just because it’s trendy, but because they’ve used enough of them already.

It’s amazing!

Designers have always had a passion for minimal layouts that are purely graphical. But it’s been an uphill battle to try and sign them off with clients.

Sure, senior designers had the power and respect to produce minimal layouts. But “ordinary” designers were often asked for something more decorative.

If I presented one of today’s trending flat interfaces to a client 5 years ago, I’d sure have a lot of trouble getting it signed off. So we used plenty of gloss, gradients, textures, and other things that have become obsolete today.

The reasons behind flat design
Flat design is not a purely aesthetic trend. We’re already a few decades into using graphical UIs, from desktop computers to tablets and phones.

Initially the idea of a familiar physical object helped us to interact with software. Such UI terms as desktop, window, wallpaper, notebook (and even menu) are good reminders of this.

Today, the paradigm of human-computer interaction has baked well enough into our minds. We can finally get rid of these older skeuomorphic concepts. They’re not necessary anymore.

A typical user is familiar with common UI layouts and navigation patterns. A modern user can scroll and swipe easily, without any complex page-turn animations or whatever else we used to impress and guide them along.

Flat designs are also much faster to craft—no need to spend extra time on textures and decorations. Plus, they’re much faster to build for the same reason.

But why does it look so good?
By definition of flat design, we should strip off anything that’s not functional. However, that doesn’t mean there’s no decoration at all. Actually, things get quite intricate at times. It’s just another style of decor.

Here’s how you can add interest to any flat UI:

• Color contrast
• Typographic contrast (large vs small, bold vs light)
• Patterns (especially subtle ones—use them as textures)
• Typical “flat” illustrations and icons
• Smart interactions and animations: they’re easier to implement with basic geometric shapes which are prevalent in flat design

Surprisingly, one of your biggest helpers in flat design is good ol’ drop shadow—it’s a great way to give a feeling of depth. Use these extra layers to create meaningful visual hierarchy: your cards or menu bars can be placed on top of the main workspace.

Implementation troubles
When it’s time to code up your design into a live app, minimalism has a lot of benefits. Faster deployment and an overall clean structure are a couple of benefits. But it also breeds its own implications.

Did you know that trim is used in construction work to hide imperfections? Now imagine the minimal layout being a room stripped of all decorative trimmings. To look good, it has to be built with extreme precision and accuracy.

Flat layouts are based on the harmony of colors, typography, and whitespace. All of this can be ruined easily with a careless CSS setting. Not by the evil intention, of course—but the output may be still unflattering.

How do you deal with this? As usual, it’s great to run a design checkup after deploying the UI. Use your own design eye to see what went wrong and help the developer fix these problems.

Your flat design checklist
When the interface is stripped down to bare necessities, typical UX problems can become even more obvious. Moreover, you risk stripping off too much, which makes action elements unrecognizable. That’s a huge usability risk.

Here’s your go-to checklist:

• Make clickable elements stand out. Use bright colors for call-to-action elements, and stick to traditional button shapes to define clickable areas.
• In the absence of borders and textures, use plenty of white space to isolate elements and define a clear visual structure.
• Don’t rely on subtle details to convey meaning: Make sure your typography and color contrast is dramatic enough.

Stick to the classic rules
Design history shows that design trends often run from one extreme to the other. A few years ago we observed a transition from decorative and skeuomorphic design towards flat.

It doesn’t take much wit to predict that the flat trend won’t stay forever. No matter how flat you go with your layouts, make sure to follow the classic rules of design. This is your entry ticket to a new era whenever the style pendulum swings.

The power of UI presentation

Your UI work might be amazing, but it’s worth nothing if you don’t sell it right. By selling it, I mean signing it off with a client or showing it off in your portfolio to lure followers and future clients.

To do that, you need to show it off. We’ve talked usability first, beauty second, but people still love eye candy. Pretty presentation is like a cherry on top of your UI design skills.

My use of the phrases “making things pretty” and “eye candy” doesn’t mean I’m devaluing the deeply intellectual essence of UI design. It’s just another way to conquer the heart of your audience. It’s not a reason you should be neglecting these little presentation tricks.

It does take additional effort, for sure. But the return on such time investment is enormous.

Showcase the brand
You’re not a brand designer. But any software product represents its own brand.

Visually, it’s a logo, a color scheme, a set of stylistic elements, specific typography, photography, and illustration. Intangibly, it’s the mood, the spirit, and core values of your product.

A simple sequence of screens conveys the functional side of things, but you can give additional treatment to show off the branding that surrounds it.

This is an exercise in creative direction. You’re going a step further to show the client how the product will be displayed and marketed later.

You can present your screens against a contrast background, featuring the logo at a larger scale. You can add related photography or illustration that’s not included in the UI but might easily be used within a sales page.

It’s a great practice to design both the sales page and the product UI at the same time. If the timeframe is too tight, you can put together 1 or 2 purely presentational layouts that look like a hero section of a web page. It’s less work than a whole page, yet results in a similar effect.

It’s going to be a thoughtful still-life composition that features your screens and gives plenty of branding information beyond.

Use appropriate placeholder content
Thoughtful sample content often goes unnoticed. But the opposite can easily be a sign of an amateur designer. Have you ever seen a bulleted list of 5 identical lines, or an address book with 10 entries of the same exact person? Then you know what we’re talking about.

Design is a very subjective matter, while sample content is one of the few things that the client can actually rationalize. Rest assured they’ll read all your placeholder text—and they might even ask questions about it.

It doesn’t take any longer than 20 minutes to diversify the content entries. Think of some random names and source a few suitable images. If you’re redesigning an existing app, just scout one of the pages and pull recent entries from there.

It helps to have a tiny library of stock portraits of people to use across all your projects. I also tend to have a few imaginary names that I love to use instead of John Doe in my projects. It might sound silly at first, but it saves a few minutes of thinking and adds a personal touch to your workflow.

This screenshot from the Egghead.io web interface features some nice sample content. There’s a good, natural variety of content entries. You should also account for image placeholders when users don’t have a profile pic.

Select the right screens
When showing a set of screens, curate a small number of them that really depict key functionality. Usually 3-5 screens do the trick.

At the same time, make sure the screens you select represent the look and feel of the app, include all the basic elements, and give an idea of the most typical user workflow.

Use device images
Device images are the gold mine of UI presentation.

If you worked in logo creation and branding, then you know how important it is to select appropriate physical objects for the showcase.

In UI design, it’s a no-brainer. Just place your layouts into a device mockup, and things instantly get magical. You get context, visual interest, and style direction all in one.

There’s a plethora of free device mockups available online. Some are photo-realistic 3D renderings or illustrations, and some are plain vector outlines.

If you have a flat UI, it might seem natural to showcase it on a flat device image. For the best result, however, try the opposite: Show flat layouts on a photorealistic device.

Add interesting details
Go further and add more interesting elements for 100% eye candy. Things to try:

• Decompose your UI into separate layers and showcase them at an angle
• Add zoom circles to highlight the most interesting parts of the interface
• Use arrows and call-outs with informative comments
• Use hands and fingers to add visual interest and pinpoint key controls

These elements won’t just make things pretty, but they’ll also help get your point across.

These presentation screens are from the Nova flash photo-taking app. They feature some interesting add-ons: zoom areas and call-outs, supplied with meaningful comments.

Supply value-based comments

Explain your design decisions, design problems, and design process. This will help eliminate a lot of questions further on, build collaborative spirit, and it’ll give better value to your work.

If you suggest a fresh alternative, explain why the older version didn’t work. Tell what else you tried on the way to this solution.

You can sometimes mirror the exact words of your client in your comments. This will unconsciously demonstrate that the result of your work complies with their requirements.

Never justify your decisions for purely aesthetic reasons. Remember, your product doesn’t exist in isolation—it’s functioning due to purely economical reasons.

Therefore, build your comments on the ultimate benefits for the client and for the customers. “Black will resonate well with the audience of hair stylists” is always better than “black looks more dramatic.”

Always remember that your client pays large amounts of money for your UI/UX expertise. The whopping 80% goes for your intellect, and just 20% for your artistic talent. When showing the results of your work, make sure you demonstrate a great return on your client’s investment.