Blog

Refining Your UI Design Skills

ui design
functional animation
Creative

In an increasingly competitive digital landscape, it's no secret that the significance of a great user interface has shown its beautiful face and, lucky for us, is here to stay. We've asked Brandon Hagstrom, one of our Visual Designers, to collect and lay out a list of ways he (and our creative team) make UI design more effective. For some of you, a lot of this may be redundant, but reaffirming. For others, maybe there’s something new and fresh in here to think about.

 

Expand your toolset.

Broaden your horizons. In my recent experiences, there are too many wonderful platforms and tools specifically created for digital design out there. Here are two to consider.

 

Sketch

This vector-based design platform has single handedly changed our creative department (both UX and UI). It has increased workflow tenfold and has expanded the way we designers think. By allowing you to scale up and down seamlessly without losing quality, you no longer have to worry about the shackles of Photoshop pixelation (among many other reasons) when designing for the web, resulting in rendering that is much closer to a pixel-perfect web design experience. Incredible efficiencies through Sketch's Symbols, Text Styles and Shared Styles are just a few important features to utilize. In our opinion, it’s the most intuitive platform for designing digital-based projects. The future is now. The future is Sketch!

 

Invision

General offerings include Prototyping, Boards (mood boards) and their newest facet, Inspect. Inspect has quickly become the stand-alone resource we utilize to hand our designs off to development for construction. On top of it all, it has a smart, clean and modern design with a user-friendly commenting system for collecting feedback from our internal teams as well as clients. Working side-by-side with Sketch (through Craft by Invision) uploading designs, creating dynamic prototypes and user flows has given us the ability to more effectively present projects to our clients with more detail than ever before.

 

Keep in mind, anything new (technology especially) doesn’t come without it’s challenges, but Invision and Sketch’s customer support teams are second-to-none.

 

However, don’t break-up with Adobe just yet; we still use the entire Suite for image production, illustration and print layout. But at a very accessible fee, Sketch and Invision are a must-have in any designer's toolbox from here on out.

 

Seek and welcome feedback and collaboration

Many of us have sat through painstaking hours of peer critiques in school. But those were with other artists, other designers and mostly, other like-minded individuals.

 

In the professional world, I have found being receptive to your non-designer peers and clients will only make you a better designer and frankly, a more humble human being. After all, that’s mostly who you are designing for. Some of my greatest feedback has come from people that have no clue what the project is about, what a ‘header’ or ‘carousel’ is and what’s it’s supposed to do.

 

Collaboration, collaboration, collaboration. Working with others has been without a doubt the most significant piece to my professional growth. Specifically, as a web designer, the relationship with the development team is 'numero uno.' Crafting, refining and ultimately, delivering a better looking/functioning product, rests heavily on collaboration with the project team, other fellow designers and breaking down the barrier between design and development.

 

At the end of the day, some work better alone, others work much better in groups and sometimes it depends on the day. Find your comfort zone, but if you need a fresh look at something, don’t be afraid to share your ideas and be open to feedback.

 

When appropriate, consider functional animation in your design.

Animation can be as big of a cue for action as good UX. You’ll want to know your prime users and define how they will be interacting with the UI. A few types of animation to consider would be for visual feedback, easing state changes in the navigation or a graphical element, system status transitions or by simplifying the onboarding of a new or unknown feature to a user. Have fun with this growing path of design and always consider the user goal while matching the animation appropriately with expectation.

 

Prototyping and Testing.

Nothing is more reaffirming to your work than actually having people test it. Does it make sense? Is it visually communicating the proper pieces of information at the right time? Does it look on-brand? User-testing will get you closer to solving these questions and more.

 

Have a sandbox or personal archive of inspiration.

Unless you’re one of the “lucky ones”, working on design projects every day isn’t always as glamorous as you assumed it would be the day you declared your Graphic Design major or fell in love with a certain magazine layout or a particular UI on a site or app.

 

So, what should you do?

 

Find a side project, experiment with a new idea in your free time (Wait, free time? What is that?!), or my favorite, build a library of design inspiration for you to utilize and reference later.

 

As I stated previously, Invision stands as a fantastic resource for creating mood boards, for both you and your clients. And try not to take the easy route and snag full-site layouts from Pinterest or Dribbble. (Full disclosure, I've done this in the past!) Instead, look for more detailed elements like finding and capturing your favorite search bar, mobile menu, button styles, article layout, product carousel, interactions, animations, product details page, product listing page, sidebar filtering, etc.

 

Think of it as ‘designer-cising.’ Doing this in an open block of time at the beginning or end of your day will eliminate the constant need to cram for ideas and decrease the risk for your work to run stale on a project-to-project basis.

 

Always know WHY.

One of the pillars in our process at Irish Titan is constantly answering 'Why?" The same should be said with your design. It's much easier to create meaningful and memorable work when you have a concept and reasoning behind it, and can speak to it.

 

How many times has this happened to you? You’ve spent too many hours contemplating an element in your work, the full design and hell, your career, only to come to the conclusion that what you’re frustrated about most is the lack of concept and direction you may have given yourself. So, once you get that squared away, the design stands a better chance of happening on its own. Don't get me wrong, sometimes that happens in five minutes while other times it could take five days. (SHHH! Don't tell my Project Managers that.) As a good friend once said about creativity and the time it takes for the 'idea’, "How long is a piece of string?"

 

Be patient, but know "why" when “it” happens.

 

Find, study and utilize UI best practices.

When considering and implementing best practices in your design, there’ll be a lot relying on the UX framework, and so many of these recommendations to watch for will cross the lines of both UX and UI.

 

Know your audience.

It sounds simple, right? But knowing who you are designing for will drastically change the way things are designed.

 

For example, an older audience might require a larger body copy, so we use 18px–20px with a taller line-height for better readability, or higher contrasting colors for actionable steps in a user flow. Conversely, if we’re building a fashion trends blog for millennials, we might be more comfortable with 14–16px for body copy and building a more subtle approach to actionable steps because of the higher technical proficiency of this generation.

 

Font-sizes, colors, images, interactions, content architecture, user flows are all just a few unique things to consider from user group to user group as well as brand to brand.

 

Make it simple and consistent.

Using established design patterns will reduce confusion and increase intuitive ease of use. However, avoid patterns that do not align with your target audience. Keep this in mind for your text styles, colors and miscellaneous design elements, too.

 

Keep your content simple.

Avoid giving too many options all at once. Presenting content in smaller, more manageable pieces will allow for a cleaner UI and a more accessible interface.

 

One example would be having only one call-to-action per page. This gives the user a clear indication of what the primary action is for the page. Another would be to simplify your forms. Only ask for the absolutely necessary info to keep a user interested. This will avoid the overwhelming feeling of a daunting amount of required fields.

 
Focus on solutions, not visuals.

It may be pretty, but does it also meet the goals and expectations of the user?

 

Design for responsiveness.

It should come as no surprise that more people browse on their mobile devices than on desktops these days. Your design should be just as exciting on mobile and tablet as it is on desktop. Of course, there are limitations to this at times, but technology has grown substantially in recent years to the point where almost anything is possible on mobile.

 

Use a grid.

Your development team will love you for it (it also may be required by now) and it should give you easier direction as to how your design will look and function.

 

Build a clear visual hierarchy.

This doesn’t always mean make things BIG. Creative use of white space and color will help cue focal points that visually communicate what it is you want the user to do at that moment. And whatever it is you are doing, build general consistency to it.

 

Make text columns and font-sizes the appropriate width and size.

Reading columns that are too wide may cause reading fatigue. And conversely, too short of a column results in any lack any consistent flow. Common best practice is to make sure your columns stay at 45-75 characters long for font sizes 14px-16px in size. Of course, this will vary depending on your font-size.

 

Always consider your user.

A User Experience philosophy carried over to User Interface design. I am hoping to make one of our UX designers, Peter, proud with this next section here.

 

Learn to become advocates for your users. Understand their needs and dislikes. It’s more than just color, layout and fonts these days. Paying delicate attention to personas provided in your discovery work will pay dividends collaborating with your UXer and ultimately how and what you design. Consider blurring the lines between User Experience and User Interface! Doing this will save you time and you’ll be much happier with the work you produce.

 

I bring this next point up because it’s easy to do (and I occasionally still do it) in the initial stages of design. I’m talking about the idea of “over-designing.” Via Google, over-designing is “designing of a product to be more robust or complicated than is necessary for its application.” You may think something looks like your next award-winning design, but when you take a step back and put it through the ringer of peer reviews, prototyping and user-testing, if it doesn’t functionally fulfill the needs of the user, it could be yet another pretty piece of eye candy that serves little purpose and your data won’t lie when it fails.

 

Don’t let my point be misconstrued; do strive to build the most beautiful UI system you can, but be smart about it and make sure to nail usability and best practices with your UX and Strategy teams first.

 

Books, Google and Instagram.

Find and follow your favorite agencies and designers. Identify trends, but only take what you need. Use these examples to inform your work. I know, I know, what I'm about to say is very clichéd, but the saying is too true, "Good artists borrow, great artists steal."

 

Spend a healthy amount of time examining good design, know what good design actually looks and feels like and as I said earlier, learn to know why you like or dislike it.

 

Always be exploring, learning and asking questions. It's OK to be inquisitive.

The best advice I have ever been given as a designer was to do just that. This also doesn't mean you have to be on your computer working and reading design books 24 hours a day, 365 days a year.

 

The spark of creativity comes in many forms and often times, it comes from getting offline. Really seeing the world; people watching on a walk around the city, a good conversation with a friend, exercise(!), going to see a show, playing your favorite video game, record or musical instrument, mowing the lawn, having a weekend in the woods, or enjoying an Old-Fashioned at your favorite spot.

 

Whatever suits your fancy, keep an open mind and let the world around you constantly be inspiring and motivating your next great UI design.