# data[].attributes.attachment_link.readable_text
About The Author

Dmitry Fadeyev is the creator of Usaura, a micro usability testing service, and the founder of UsabilityPost, a blog about good design and user experience. ... More about Dmitry...

Last week, we presented 10 Useful Web Application Interface Techniques, the first part of our review of useful design trends in modern Web applications. Among other things, we highlighted embedded video blocks, specialized controls and context-sensitive navigation. We also encouraged designers to disable pressed buttons, use shadows around modal windows and link to the sign-up page from the log-in page. This post presents the second part of our review: 12 useful techniques for good user interface design in Web apps. We also discuss how to implement these techniques so that they are properly used. Please feel free to suggest further ideas, approaches and coding solutions in the comments below.

Last week, we presented 10 Useful Web Application Interface Techniques, the first part of our review of useful design trends in modern Web applications. Among other things, we highlighted embedded video blocks, specialized controls and context-sensitive navigation. We also encouraged designers to disable pressed buttons, use shadows around modal windows and link to the sign-up page from the log-in page.

This post presents the second part of our review: 12 useful techniques for good user interface design in Web apps. We also discuss how to implement these techniques so that they are properly used. Please feel free to suggest further ideas, approaches and coding solutions in the comments below.

You may also want to take a look at the following related articles:

1. Highlight important changes

One of the most significant elements of a good user interface is visibility of the system's status. Users must notice immediately what's going on behind the scenes and whether their actions have actually led to the expected results. To achieve a more sophisticated level of system visibility, Web applications these days use AJAX (of course), which allows users to update portions of a Web page at any time without having to refresh the whole page. AJAX brings the level of responsiveness and interactivity of Web apps much closer to desktop-grade applications.

Meet Smashing Book 6 with everything from design systems and accessible single-page apps to CSS Custom Properties, Grid, Service Workers, performance, AR/VR and responsive art direction. New frontiers in front-end and UX with Marcy Sutton, Harry Roberts, Laura Elizabeth and many others.

Table of Contents →

Yammer applies not one but three effects on all new messages in a feed: fade in, slide down and highlight.

However, this dynamic nature means that when you click on a button, the page doesn't refresh but something does happen. The majority of websites still don't use AJAX extensively, so some users may not be sure whether anything has happened at all or whether the button was properly clicked. To fix this, you need to provide some visual feedback for each of the user's interactions.

One great way to do this is with animation. The human eye can notice movement fairly well, especially if the rest of the page is static. Playing a highlight animation when users add items to their shopping carts, for instance, will attract their eyes to those items. They'll see that their action has worked. Animations can be implemented with JavaScript and are a nice way to provide visual feedback. Just be sure to not overdo it; adding too many animations could cause interface friction because the speed with which the user performs each action will be slowed down by the duration of the animation.

2. Enable keyboard shortcuts in your web application

As the advanced features of modern Web applications (such as dragging and dropping, modal windows, etc.) steadily gain on those of desktop apps, developers of these applications are trying to offer users more responsive and interactive user interfaces. One of the techniques used to achieve this is the integration of keyboard shortcuts or navigation. Just as with classic applications, this little feature can significantly improve the workflow of your users and make it easier for them to get their tasks done.

In fact, various Web applications already use shortcuts (for example, Google Spreadsheets, MobileMe, etc.), and even regular websites, such as Ffffound or Boston.com, allow visitors to use them for basic navigation. Ffffound enables users to use shortcuts to switch from the thumbnail view to list view and vice versa (using "v"), go back to the top ("h") and navigate to the previous ("k") and next ("j") image. Boston.com also uses "k" and "j" for the same functions.

It's worth mentioning that your shortcuts should be intuitive and self-explanatory. For instance, it wouldn't make sense to make the shortcut letters for "Previous" and "Next" navigation too far apart from each other on the keyboard; rather, pick ones that are close together. The reason is, if a user makes a mistake and jumps to a page she doesn't want to visit, she can immediately return to her page without looking at the keyboard. The "j/k" configuration is one option. It would actually make perfect sense to have some common conventions for keyboard shortcuts used throughout various websites, but we haven't been able to detect such conventions thus far.

How do you implement this? Essentially, you just have to use the onKeyPress-DOM event and manipulate the appearance of the document using the window.scrollTo function in JavaScript.

Ffffound.com uses an onMouseDown effect in its markup, which is not a good solution because it doesn't adhere to the main guideline of unobtrusive JavaScript coding: Thou shalt separate JavaScript functionality from CSS style sheet and (X)HTML markup.

<a id="float-navi-prev" href="javascript:void(0);" onmousedown="try { move_asset_auto(-1) ;} catch (e) { }" onclick="return false;">prev(<span class="shortcut">k</span>) </a>

Here it would make more sense to use a JavaScript library instead (like jQuery) and call the element via its identifier or class. That's (almost) what Boston.com does. All of the images in its gallery are labelled with the class bpImage in the markup, with the JavaScript pointers to them added to the array. The onKeyPress event triggers the scrolling window in the background, and the window's browser is manipulated using the window.scrollTo() function.

Here is the (X)HTML:

And the JavaScript:

function bpload(){ // put pointers to all images with the class "bpImage" in an array imgArr = getElementsByClassName(document.body,"bpImage") isLoaded = 1; } document.onkeypress = function(e) { if (!e) e = window.event; // Pick up what key was pressed key = e.keyCode ? e.keyCode : e.which; // 107 is the ASCII code for 'k' if(( key == 107 ) && ( isLoaded ) ) { // if there are images... if ( currImg > 0 ) { // decrease the counter for the current image currImg--; // offsetTop returns the vertical coordinate of the // upper-left corner of the image // (we are not sure why the script adds 174px. Any idea?) window.scrollTo(0,imgArr[currImg].offsetTop+174) } else { if (currImg==0) { currImg--; window.scrollTo(0,325) } else { if (currImg<0) { window.scrollTo(0,325) } } } } if ( ( key == 106 ) && ( isLoaded )) { // a similar code snippet for 'j' ... } } }

But you need to make sure that you clearly communicate that 1) keyboard shortcuts are available, and 2) they can be used to perform certain tasks more efficiently. If a user can easily manage his tasks with your application, he is less likely to switch to another application, if the feature set is more or less similar.

3. Upgrade options from the account page

If your application features several subscription plans, make sure to remove any interface friction for customers deciding to upgrade. Most users like to try the basic version of an application first to get a better sense of what it offers and how it works. If they are convinced the application meets their expectations, they will consider upgrading to a more advanced plan. It's the designer's task to make sure this transition is as simple and intuitive as possible.

In fact, a lot of Web applications put upgrade options right on the user's account page, making them easily accessible. This design choice has the simple advantage of providing users with an overview of available options and supported functionalities right away.

Note, though, the importance not only of featuring the available upgrade plans, but also of identifying the plan that the user is currently using and the features that are currently available to her. It is vital to provide users with precise information about what advantages they gain by upgrading their account. Take a look at our article Pricing Tables: Examples and Best Practices as well.

4. Advertise features of the application

Even though you've created a detailed marketing page, outlining your application's every feature, and crafted a thorough help section on your website, your users are unlikely to have read it all. They're probably not familiar with all the features of your product and would benefit from little tips inside the application itself.

Advertise new features in your application. These would usually go in the sidebar, out of the way of the main functions. If a user is nearing the maximum capacity of a certain feature for her chosen subscription plan, you should point this out and give her an option to quickly upgrade.

The Freckle time- tracking app tells you when you've run out of people on your current plan. The message also links to actions you can take if you need to upgrade.

5. Use color-coded lists

Some applications feature feeds that aggregate various types of content. For example, you may have a project management application that shows you all the latest messages, tasks and files on the home page. If these items all appear together in one list, it may be difficult to tell what's what. Many applications use color coding to help visually distinguish between different types of entries. A simple way to do this is to place a text label inside a colored box. This way, the list becomes easily scannable.

It's important not to use various colors for the same task or similar colors for completely different tasks. The color scheme should not be random but should implicitly indicate the function each item serves.

The Lighthouse issue-tracking app has color-coded labels on the right- hand side of each item on the overview page, which helps you quickly scan the list.

The Goplan dashboard uses similar color- coded labels to differentiate various items, like tasks, notes and files, so you can quickly find what you need.

6. Offer personalization options

Many applications provide custom workspaces for people and businesses. Personalization can help make your users feel more at home. This can be done by giving users options to customize the look and feel of the application interface. Let them select the color theme, the link colors, the background and so on. Even a small amount of customization will allow your users to make their pages their own.

Campaign Monitor lets you choose a color theme for your account and upload your business logo. This helps businesses infuse the colors of their brands into the Web apps they use.

Personalization is certainly one of the simplest and most effective methods of binding your customers to your service, but it's important to understand that the various personalization options should never come at the expense of the core application's functionality. The system should always be capable of performing its functions and thus meet users' expectations, despite how exactly users have personalized the application.

One useful approach to finding a compromise between a website's core functionality and the user interface is to introduce various levels of personalization, depending on whether the user is a novice or an advanced user. It is also a good idea to allow the user to revert his account to the default settings or restore the settings that he had saved in his previous session.

7. Display help messages that attract the eye

Every Web application is different and has its own way of doing things. If the function of a particular element isn't immediately apparent, you can provide short help messages to get people started. One important thing to note is that if you want to help people who aren't sure what they're doing yet, you need to attract their attention to this message. One way to attract attention is with color - putting a yellow "sticky" message in the sidebar, for example, is sure to stand out.

Alternatively, if you are looking for a subtler solution that doesn't require much space to display and isn't obtrusive for regular users of your application, you can consider displaying vibrant visual graphics (for example, small icons) next to the design element needing explanation. For instance, pointing users to new, updated or useful features of an application's search engine, as Wishlistr.com does, makes sense.

Classic: Wishlistr uses a light bulb to focus the user's attention on the available search functionality of its system.

8. Design feedback messages carefully

Pretty much every application has some form of feedback messages. These are little messages that pop out when there is an error or warning or perhaps when an action is completed successfully. Designing these messages correctly is important because you don't want to confuse or startle your users when there's nothing to worry about.

A good practice here is to do a couple of things. First, color code the different types of messages. Messages that notify users of successful actions are usually colored green. These employ the traffic-light analogy of green meaning "Go." Warning and error messages are colored yellow. Same traffic-light analogy here: yellow means slow down and wait. You can also distinguish between warning messages and error messages by coloring errors red and warnings yellow.

Mailchimp uses color effectively for its error messages.

The second thing to do is add a unique icon for each message type. Icons can convey meaning instantly, without the user having to read the message. For example, a tick icon can symbolize completion of a successful action. An exclamation mark in a triangle is a warning sign. People will instantly recognize that this message warns them about something and will pay attention.

GetSignOff allows you to close notifications by using the little button in the top- right corner of the message box.

Lastly, you should provide a way for users to close the notification if they are likely to remain on the page for a while.

Many Web applications have adopted the tabbed navigation approach for their main navigation menu. Tabbed navigation is a menu that looks like each item is a tab on a file folder, with the active tab connected to the body of the page. Tabbed navigation isn't just eye candy; it provides a usability benefit.

Freckle uses tabbed navigation in a sub- menu relating to the time input menu.

If you make the menu look like tabs on folders, almost everyone will be able to figure out what it is and how it works. This is because the visual metaphor is strong and clear. The current page or section also becomes easy to see. Knowing where they are puts users at ease because they gain a greater sense of control.

In some applications, you may want to display a bit of information or quick input form that doesn't really deserve a full page of its own. Some developers put that message or form in a modal window. Modal windows are little windows that pop up on top of the current page and that users need to interact with to proceed.

When editing things in the Squarespace website creation app, the background darkens to shift focus to the edit window.

To make this window stand out better, you can darken the content below it. The darker background will block out all the noise of the content behind the box and make the modal window the center of attention. This is very similar to using shadows around the window but is even more powerful in directing focus. The darker background also indicates that interaction with the content beneath is disabled and that the user should instead interact with the modal window.

11. Lightboxes and Slideshows

Some applications include a lot of images that users may want to browse. Displaying every image on its own page may not be the most efficient way to do it - both for your visitors and your server. Your visitors will need to navigate back and forth, and your server will incur extra hits that can be avoided.

SmugMug uses lightboxes to enlarge photos. (Photo by Kurt Preston.)

Enter lightboxes and slideshows. Lightboxes and slideshows are used to display photos without having to load a new page. For example, the lightbox method will enlarge an image and place it as a modal window above the rest of the page, allowing the user to focus on the image itself while the background is darkened. This means less noise interfering with the viewing experience.

12. Short sign-up forms

The sign-up form is potentially one of the biggest barriers between you and potential customers. The longer the form, the more effort your visitors will have to make before becoming members of your website or, perhaps, paying customers. To minimize the barrier, we've got to speed up the process. This means removing all optional elements from the form and leaving only the core essentials. The optional stuff can be filled in later.

User Interface Design Conclusion

Making your application beautiful may lead to a satisfying user experience, but it will not guarantee a usable product. For example, an ugly website like Craigslist performs its function fairly well. Its poor aesthetic did not stop it from becoming hugely successful. Similarly, the minimalist interface of the Google search engine manages to fully accomplish its objectives without getting in your way. The interface disappears, letting you focus on getting things done.

Steve Jobs once said, "design is not just what it looks like and feels like. Design is how it works." In fact, the usability and overall usefulness of a Web app is governed by how well it performs its functions and how easily those functions are accessed. Design with a goal in mind - a goal that the interface helps your users achieve. Not every technique will work in every situation or for every application. Only implement interface elements if they make sense in your particular context.

# data[].attributes.attachment_link.title
User Interface Design - 12 Useful Techniques

# data[].attributes.attachment_link.description
Last week, we presented [10 Useful Web Application Interface Techniques](https://www.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/), the first part of our review of useful design trends in modern Web applications. Among other things, we highlighted embedded video blocks, specialized controls and context-sensitive navigation. We also encouraged designers to disable pressed buttons, use shadows around modal windows and link to the sign-up page from the log-in page.

# data[].attributes.attachment_link.title
8 Characteristics Of Successful User Interfaces · The Usability Post

# data[].attributes.attachment_link.description
There is a lot of information out there about various interface design techniques and patterns you can use when crafting your user interfaces and websites, solutions to common problems and general usability recommendations. Following guidelines from experts will likely lead you towards creating a good user interface - but what exactly is a good interface?

# data[].attributes.attachment_link.readable_text
Hi, I'm Eric, course designer for the UI Design Course here at CareerFoundry, and long-term UI designer. In fact, I've spent the last 10 years learning and practicing User Interface Design, so I'd like to think I know a thing or two about the industry.

In this blog post I'm going to run you through everything you need to know when thinking about becoming a UI designer, including:

What is User Interface design? Definitions and the difference between UX and UI design

How I learned UI design: my story - how I became a UX designer

How you can learn UI design and UI guidelines: Links, resources and materials

Next steps: Getting experience and getting your first job

During the last decade I've had the opportunity to work with startups, talented entrepreneurs, designers and developers on numerous exciting applications and products. The variety of the work is something that really attracted me to the role and makes every day truly unique.

My experience ranges from designing mobile games to social networks to communication tools and I can honestly say it's been an amazing journey! In this post I want to share with you some of the most important things I've learned about launching a career in User Interface design so that when you decide this is the career for you, you're fully prepared to take that next step into a formalized education like the UI Design Course I have written for CareerFoundry.

So how do you become a UI designer? What do you need to know and where do you even begin? Let's get started!

What Is UI Design?

No doubt you've been hearing a lot about User Interface design - it's become a hot topic both on and off the tech scene, in startups, agencies and at large corporations alike. Maybe you're wondering what user interface design is or how UI design is different from UX (user experience) or visual design.

If you've found yourself asking these questions then you are certainly not alone. I asked myself the very same questions when I first set out to become a UI designer.

Although you are probably well aware that User Interface design is a hugely popular field that's growing rapidly, it can be hard, even impossible, to know where to start. What do you do when you get stuck? Without a solid definition, it's no surprise that it's so hard to get started!
Let's see if we can clear things up a bit!
Think back to the last app or website you used. UX design is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product.- Was it easy to navigate? - Did you ever feel lost or confused? - How did you know where to click to get to where you needed to go?

This is all part of the user experience, and it's the job of the UX designer to make this as good as it can be. Our UX Design Course covers this topic in even greater detail.

Jennifer Aldrich, UX and Content Strategist at InVision told us:

UX design is about having complete understanding of the user. UX designers will conduct intensive user research, craft user personas and conduct performance testing and usability testing to see which designs are most effective at getting a user to their end goal in the most delightful way possible. The UX designer wants the navigation of a site, the type of user interface or product feel completely intuitive so the user doesn't feel confused or frustrated while trying to accomplish their goal.

How did it make you feel? Think again to the last application you used. - Was there a logical hierarchy to the interface and typography? - Was the color scheme consistent? - Were there User Interface design patterns that you recognized from other interfaces?

These UI elements are all essential parts of the graphical user interface.

(For your reference, interaction design is when we create engaging web interfaces with logical behaviors and actions and responsive design [sometimes called Responsive Web Design] aims to build websites which provide an optimal viewing and interaction experience. This terminology often gets used when discussing UI design, so it's good to be clear on what each term actually means.)

Hannah Alvarez from User Testing defined the job of the UI designer as follows:

The purpose of any interface is to help the user accomplish their goals. As a UI designer, your job isn't just to create something beautiful; it's to understand the user's mindset, predict what they will expect, and then make the design as user-friendly as possible."

UI designers will spend a lot of time creating wireframes, building mood boards and actually designing interfaces using tools like Sketch or Photoshop. They also conduct user interface testing to ensure the product meets its specifications.

Jeff Gothelf, author of Lean UX, told us what makes a great UI designer.

The most important thing I've learned to become a great UI designer is build a deep understanding of the customer. By conducting and participating in continuous research activities you will learn what motivates your customer, what problems they're trying to solve and what solutions make the most sense. This may force you to abandon some ideas you might love but UI design is not strictly about aesthetics, it's about making your customer successful.

What Does A UI Designer Do?

If you want your website, desktop or mobile app to be able to compete in today's market, it's got to be simple, intuitive and fun. Even if you have a super useful app, it'll easily get lost in the sea of other ideas out there if it's considered ugly or hard to use.

Chris Mears from UXr gives the following advice:

A funky interface is nothing more than a vanity project if your users can't use it. User test regularly and don't be afraid to simplify for usability.

This is where your role as as UI designer comes in. You're responsible for the look and feel of an application. It's your job to ask:

Do the colors work well together?

How is typography used to convey meaning and hierarchy?

Is the app well-designed? How can I improve the UI design of the app? Would flat UI design (sometimes called flat design) work here?

And it's these questions you'll be responsible for answering.

As a UI designer you'll work very closely with UX designers, whose job typically consists of talking with customers to determine requirements, building user profiles and creating user stories to show how a user will work their way through your application.

From this point, it's up to you to build a clean and functional design based on the requirements they've gathered.

Luke Chambers from UXMastery told us:

UI designers have the responsibility of creating touchpoints that directly interface with users or customers. It is at the coalface of most online or app-driven businesses. Although there are clear differences between the two disciplines, let's not forget there are some overlapping qualities between UX and UI Design. Here are a few, taken from UsabilityGeek's article The Difference Between UX & UI Design.

Both UX & UI:

Have a primary objective of improving customer satisfaction

Focus on the user and his/her interaction with a product/service

Can be applied to any product

What Skills And Personality Traits Do You Need To Become A UI Designer?

Learning to be a UI designer is not easy. Trust me, I've been there! There are specific skills and traits that will make your journey into this career go more smoothly and I've listed a few of them for you below. Take a look and see if this describes you:
You have drive!
The most important thing to succeed as a UI designer is attitude. If you don't have a personal drive to learn and grow then you won't get very far!
You enjoy learning!
Being a UI designer means staying up to date on the latest design trends and changes in the industry. Things change fast! If you don't keep up it's easy to fall behind and become less relevant.
You're a team player!
UI designers often work as part of a team. This team could consist of other designers, programmers, marketers, salespeople, you name it! So it's important to be comfortable working with others and communicating with colleagues of all levels. If you find it difficult to take constructive criticism, you might find you have trouble in this field.
You care about people!
User Interface design is all about people. After all, they're the ones who will be using the interfaces you design! If you don't care about their needs and wants, you won't get very far in this industry.

As Steve Portigal, author of Interviewing Users, told me:

It's incredibly important to be able to talk to people who might use your product - not just to get their critique of your solution, but before you even consider a solution. That's when you can have the most open mind and learn about their current behavior and the motivations that drive that behavior.

You care about aesthetics!
Do you ever feel annoyed when text is so small it's hard to read? How about if an advertisement uses colors that clash? Or maybe you notice when interface elements aren't properly spaced out.

Industry Snapshot For UI Designers

UI designers are responsible for designing how a user interacts with a computer, in fact they're obsessed with human-computer interaction! Whether it's a dashboard computer in a car, a mobile app, a video game, a website or a virtual reality interface, UI designers are the ones that make these interactions possible. So it's no surprise that UI design is such a stable profession.

And with the average UI designer salary reaching $95,000 per year, when you're good at what you do it can also be a very lucrative profession!

This field isn't going anywhere soon. With the explosion of mobile apps, commoditization of hardware, interest in mobile UI design and a consistent need for innovative desktop apps, demand for UI designers is at an all time high.

The fact is, if companies are going to compete in today's market, whether they're large or small, they need intuitive, well-designed interfaces. This is great news because it means, as a UI designer, you'll be able to work at large, well-established companies like Apple, Tesla, Google and Amazon, or a small startup of 5 people. It's up to you!

Why I Became A UI designer

Ever since I was a kid, I was fascinated by computers. In my teenage years I became obsessed with learning how they worked.

To be honest, I never did well in math and science. I just didn't have the motivation to learn. But with computers, everything came so naturally because I was interested in them. Learning became fun!

I would stay up all night reverse engineering websites, browsing forums and hanging out in chat rooms. I devoted all of my free time to learning everything I could. Eventually I started to make my own graphics in Photoshop and code my own websites.

I finally decided I wanted to turn this hobby into a career, so I went to school to learn graphic design. After completing my studies, I started working for a multimedia company. Most of my time was spent designing graphics and coding websites.

This was all in a time before smart phones. But when the iPhone was released, everything changed for me.

I was blown away by the elegance of the interface and I knew that I wanted to design similar interfaces. I wanted to build interfaces that delighted people and made their lives easier. That's when I began my long journey to becoming a professional UI designer.

How And Where I Learned UI Design

When I set out to become a UI designer, I would spend hours sifting through out-of-date blog articles, reading forums and poking around in the software. For the longest time I just felt lost!

Difficult concepts can be hard to wrap your head around when you're teaching yourself. So I set out to find other designers I could learn from. I joined communities, started following designers on Twitter and developing relationships with them.

This allowed me to start learning from others by examining their work and bouncing my own designs off of them. Suddenly I was learning a lot faster and felt a lot less frustrated! This is when things started to become clearer to me.

You don't need to spend boatloads of money on a fancy degree to be taken seriously.

That's why I built this User Interface Design Course here at CareerFoundry. I've taken everything I've learned during the last ten years as a UI designer, and compiled it into a short but powerful course that will teach you everything you need to become a UI designer too. I'm living proof it's possible!

Landing My First Job As A UI Designer

I was already working at a multimedia agency when I started learning UI design, so I tried to incorporate my new skills into my daily work as much as possible. I learned a lot this way at first, but the work wasn't the most challenging and eventually became a bit stale.

A colleague of mine kept telling me about the great things that were being built by startups in Silicon Valley, which sounded really interesting to me. Eventually I realized that that's where I need to go if I really wanted to grow as a UI designer.

Now don't get me wrong, I'm a firm believer in working remotely. But back then it just wasn't as feasible. There weren't many employers jumping on the telecommuting bandwagon. Things are quite different nowadays and I really don't think that you have to be in Silicon Valley to build a great company.

After making the move to the Bay area, I spent a couple of weeks hunting for a job. My criteria was pretty simple. I wanted to...

Be part of a small team

Work with people I could learn from

Join a company that cared about good design and knows about good User Interface design principles

I was lucky enough to find a startup in downtown San Francisco that fit the bill and was willing to give me a chance.

From the first day I started it was like jumping out of a plane and having to assemble the parachute on the way down!

But it's in situations like that where you learn the most. Working at the startup gave me the opportunity to work in a fast-paced environment with other talented designers and developers. I was learning more than I ever had before.

Overcoming Career Challenges

Switching to a new career can be daunting. I know from experience! There are a ton of challenges that you'll face, but remember, there's nothing that can't be overcome.

No Work Experience

One of the biggest issues I've come across is how do you stand out when other guys or girls have so much more experience than you? You do it by...

Applying for positions that match your skill level. If this is your first real job as a UI designer, it's probably best to stick to entry level positions, even if you think you're the cat's meow.

Being persistent.

Having a great UI designer portfolio. You might not have work experience but there's nothing stopping you from designing great things.

Doing freelance work. Use sites like Upwork to get small freelance contracts. They may not pay well at first but the experience, both in terms of design and in terms of working to client specifications, makes it well worth it.

Working Remotely

When I started learning UI design, it just wasn't a hot field in my small Midwestern town. Telecommuting was an option but those jobs were hard to come by and most employers would run for the hills at the mention of a "remote position".

Luckily, things have changed in a big way! Remote work is now embraced by companies big and small. In fact, some companies are completely remote. This means that whether you're in a small town in Nebraska or a fishing village in Alaska..

When you set off on your journey to become a UI designer, there are several paths you can take, both online and off, free and paid. The level you're currently at, and your ambitions for the future will determine which of these will be the appropriate course for you to take, though many people find that a combination of different resources meet their learning requirements most effectively.

Self-Taught / Free

The internet has become an amazing resource for learning UI design online. And it's certainly possible to teach yourself a new skill without spending a dime. However, if you're looking to launch a career in User Interface design, you'll most likely find gaps in your knowledge if you stick with an unstructured, self-taught program of learning. As a starter though, it's a great way for getting a feel for the subject.

YouTube - With billions of videos and viewers, YouTube had grown into a legitimate content platform. Searching for "UI Design" on YouTube will give you hundreds of thousands of results to choose from. With so many videos, it can be tough to separate the high quality content from the low quality.

Blog Posts - Blog posts can be a great way to learn from others, especially if that blog is a targeted UI design blog. Like YouTube videos, there are a lot to choose from so finding the good ones can be challenging. I personally think that whether you're a seasoned UI designer or just starting out, it's important to always be reading content from other designers. It helps you stay on top of the best UI design techniques (as well as the most recent) and changes in the industry.

Tutorial Sites - Tutorial sites can be super helpful in teaching you how to accomplish specific results in your designs. One drawback, however, is that UI design software changes so rapidly that User Interface design tutorials can quickly go out of date. That's why I always recommend searching within the last year or two when looking for design tutorials or UI design tool tutorials.

Books - OK, not entirely free, but books can be an inexpensive way of learning a great deal of information. It might seem old-fashioned to read books these days, but there has been a great deal written and published on UI design, especially in recent years. It's also good to get a break from your computer screen from time to time.

Formal / Offline

There are a number of benefits to learning in a structured, offline environment. Having regular contact with other students, a learning routine and daily interaction with your teachers. Feedback from your teachers can also help keep you motivated, ambitious and focused throughout your studies. The downside to this type of learning is both the cost and the restrictions of your location, both of which you'll need to bear in mind when you're researching what's available in your local area.

However if you do prefer studying in an offline environment there are quite a few options out there that could work for you:

University - Attending a formal university means a more traditional education, which typically takes 2-4 years. While the courses are generally well structured and thorough, the cost is typically high, and getting higher every year. Unfortunately, this high cost coupled with the time investment make this option impractical for many aspiring UI designers.

Technical School - The biggest advantages to attending a technical school is speed and specialization. While universities often put emphasis on general education, technical schools put more emphasis on developing skills and preparing for your career. They can still be pretty expensive but are sometimes be cheaper than attending a traditional university.

General Assembly (GA) - GA is one of the new kids on the block in tech education. It began as just a coworking space in 2011. GA offers both online and on-campus courses for specialized skills like web development, user experience design and data science. While the program is very high quality, at $13,500 a course, this web development, UX and UI design school is still very cost prohibitive!

Formal / Mid-Prices / Online

If you're looking for high quality programs but are on a tight budget, online programs can be a great path to explore. Many of them allow you to learn at your own pace, but don't take years to complete. You'll also find that many offer one-on-one mentoring, peer-to-peer learning, or video content to keep you motivated and focused as you study.

Bloc - Bloc offers a variety of high-quality courses ranging from engineering to design to mobile development, focusing both on mentorship and portfolio development throughout the course. One thing I'm not a huge fan of is how they've combined both UI Design and UX Design into one course. Most modern teams tend to divide these roles into two, with one person focusing on the experience, and the other on the interface. By working this way, each role is clearly defined.

CareerFoundry - Similar to Bloc, we focus on mentorship and making sure you have a solid portfolio to show by the time you've finished the course. We know how much this helps when wedging your way into the job market. But our courses move a lot quicker. A dedicated full-time student can make his/her way through a course in as little as three months, though typically students take around six months to make the most of the course materials.

All of these paths have produced both successes and failures. It's up to you to decide which path is right for you. But you shouldn't make this decision lightly. Student loans can take years to pay off and cause tons of stress. On the other hand, cheaper courses might offer less in terms of quality. So think long and hard before you make your decision! Think about the following questions before signing up for a course:

Am I learning for a hobby, or to get a job?

Do I need someone on-hand to motivate and help me, or can I learn happily alone?

How much time am I willing to commit to this?

What is my budget for learning?

What skills do I want to have when I've finished studying?

How important are things like student community, and extracurricular activities to me?

Next Steps

So once you've finished studying UI design, what do you do next if you want to become a UI designer? How the heck do you get a job without any work experience?

Building A Great Portfolio

You can have all the credentials and references in the world, but if you can't show examples of great work, no one is going to want to talk to you about any potential job openings in UI design.

We realize this here at CareerFoundry, so we focus heavily on making sure you have a well-rounded portfolio when you've completed your course.

If you haven't had a chance to develop a portfolio, then it's time to get to work. Got an idea for an app or website? Design it! It doesn't matter if it's a real world project or not, it's all about showing potential employers that you've got design chops.

Getting Work Experience

If you need experience to be taken seriously by employers, how do you get an interview when you have no work experience? This is the question every new UI designer asks. The answer is actually really simple.

Head over to UpWork, Freelancer, PeoplePerHour, or Guru, build a portfolio and start bidding on UI design jobs. At this stage, it isn't about the money. It's about proving that you know your stuff. So take any jobs you can. The aim of this exercise is to get good work experience and positive references. Within just a month or two you might have enough under your belt to spark the interest of potential employers. Either way your confidence will certainly grow as you gain more experience in the work and dealing with clients.

You can even search for contract jobs on Craigslist. Head over to the Gigs >> Creative sections and see what's there! You just might find something that turns into a lucrative contract.

Building Your Network

This part is absolutely huge. Your personal network will be extremely useful when you're looking for your next gig.

I had an extremely modest network when I started my first job as a UI designer. Since then, my personal network has grown substantially and it's been crazy useful. If I was ever looking for a short term contact between jobs, or just looking for extra money, I've been able to call on my network to find work in as little as one week.

Seriously, I can't understate the power of a personal network.

Here's four quick tips on building your network:

1. When you start your first job, be friendly and get to know your coworkers. Follow them on Facebook, Twitter, etc. You never know when that relationship will come in handy!

2. Pimp your LinkedIn profile, fill out every detail of relevant experience and upload a well-shot photo of yourself.

3. Don't be afraid to approach experts in the field asking for advice. This could be the start of a very fruitful working relationship (for you both). Just be sure to always say thank you and to give something back.

4. Attend events in your area, get to know other professionals in the field, remember names and give out your business card. Meeting people face-to-face is your best networking tool and will always beat an online 'friend request'. Follow up these introductions in the following week.

Building Your Personal Brand

But what exactly is a personal brand? It's what others see when they Google your name. It's the color scheme you use on your Twitter and your website. It's an emotion that's evoked when someone sees your persona online.

Your personal brand starts with your social network. Make sure they are all as consistent as possible. Use similar color schemes and themes to evoke similar emotions across different networks. The same goes for a personal website. Keep a similar voice and visual feel as your other social assets.

For examples of designers who've built great brands, check out Kerem Suer, Julie Ann Horvath and Nicholas Felton.

Conclusion

I hope you've enjoyed this write-up on how you can learn to become a UI designer. I've shared with you everything I can. It's up to you to take the leap. As Morpheus said in The Matrix, "I can only show you the door, it's up to you to walk through it".

If you're serious about starting a new career as a UI designer, we've developed an amazing UI Design Course here at CareerFoundry that will teach you everything you need to know. From day one, you'll be matched with an experienced mentor who has real world experience. They'll be there to help you through any issues you run into and give you feedback on your work.

So... are you ready to begin your new career as a UI designer and begin your UI design training? Click here to get started! We also offer flexible course schedules. We understand how hectic it can be working on a new career while balancing life's obligations. At CareerFoundry, you're free to work through your course on a part-time or full-time schedule, it's up to you!

# data[].attributes.attachment_link.description
Hi, I'm Eric, course designer for the UI Design Course here at CareerFoundry, and long-term UI designer. In fact, I've spent the last 10 years learning and practicing User Interface Design, so I'd like to think I know a thing or two about the industry.

# data[].attributes.attachment_link.title
Inspired UI - Mobile Apps Design Patterns

# data[].attributes.attachment_link.description
A showcase of the best examples of beautifully designed mobile apps - iPhone, iPad, Android, UI Patterns

# data[].attributes.attachment_link.title
Getting started with Mobile Testing - MindMap

# data[].attributes.attachment_link.title
What if Linkedin was beautiful - Redesign concept

# data[].attributes.attachment_link.description
What if Linkedin was beautiful is a side project made for fun. This redesign concept has been created to practise my skills with no client restrictions. The main goal was to design an interface that I would like to use when I browse Linkedin website. Noth...

# data[].attributes.attachment_link.readable_text
Specialists generally assume that everything they know is obvious, and need to remind themselves that isn't the case for most of the population.

What specialists do have is a speed at which they make decisions in their work. This is reflective of the years of targeted work and experience, and not an assumed reality that everyone possess. There is a point when a specialist has to step back and view the bigger picture of life, otherwise they remain interested in only the thoughts of other specialist; in effect making art for other artists.

One of the more valuable things that can be taught are the assumptions used to make decisions; an explanation of the strict rule set designers use will help others learn to ride their bikes quicker.

So here are 16 tips on mobile app design. Let's go!

01. Everything exists on a grid

There's an invisible grid on every surface. You may not see it, but it's there to guide you.

02. Every element defines the spacing

The moment a dot, a word, a line is placed onto a canvas/monitor/screen, you have defined your margins and padding. Every stroke defines the space you have to work with.

With that, make sure to maintain consistent widths and heights with the margins and padding. Sixty pixels in one place and 20px in another had better have a good reason behind it (like one section is a child of the other). Otherwise, all should be the same.

03. Colour creates hierarchy

Colour value is used to denote purpose. Let's start with black and greyscale. If you make one button black, the next dark grey, and the third light grey, what you are in effect saying is this: "Button one is most important to the visitor, button 2 is less important, and button 3 is least important."

Try not make the button colours the same colour as the site or app, as it will fade away. Also, a good tip is to avoid creating "buy" or other call to actions buttons in a bright red - as that means stop in the US, and may actually prevent users from clicking it, often thinking it won't get them to their goal (see image).

This brings up the next point which is that colour associations are culturally based and should be considered when defining the market. For instance, I once worked on a team that had the main 'access' button as red which we later changed to green and increased clicks twofold.

Red can mean, "stop, don't do it, are you sure? warning!" being aware of this will help you get results closer aligned to your needs.

04. Colour is not about you liking it, it's about the brand

Brand is focused on the emotional relationship you consumers or customers have with your service or product. Colour helps define that relationship in subtle yet effective ways. You don't have to like your colours for them to be effective.

05. Pink is not a shade of red

Learn the meaning behind 'shade' and 'tint' as I will be all over you for misusing it in conversation.

Colour 101: Hue is the base colour, like red, blue, green, etc. If white is added to a colour, it is a tint of that colour, if black is added, it is a shade of that colour. Got it? Thus when describing the colour of something it may have a red hue and be a shade or a tint but not both at the same time. What about Canary you ask? That's a marketing colour name used to inconsistently refer to furniture or nail polish.

I use colours like 'Robins Blue,' 'Pumpkin Pie,' and 'Baby Vomit,' when speaking with clients because it humanizes colours and gives then an appropriate association - but when speaking technically - use the words shade and tint.

Oh, and what's Baby Vomit you ask? That's a colour I've been seeing creep up in logos as of late. I've always thought it couldn't get worse when a client insist on using Corporate Blue. Well, it sure can. The new villain is Baby Vomit.

A brand makes the client as much as the client makes the brand. A logo isn't going to make you a great business: but a poorly executed and thought out logo will reflect poorly on your business.

One of the things people say is that a logo is timeless. By default, design is trendy, therefore a logo cannot be timeless. Logos are stuck by the age they were created in. There's nothing wrong with that. CocaCola isn't timeless - it very much feels reminiscent of the 1920's - around the time it was designed. It's been updated to a clean vector since then, helping it feel appropriate to our sensibilities, but the essence is vintage - not modern.

07. The page title

Screen titles on websites are excellent ways to remind the user of where they are after they opened 35 tabs and don't recall the content.

In apps, they take up precious space, and real-estate here is more expensive than in Manhattan, so if you think your user won't forget which screen they're on, you can sometimes skip it, or have it disappear until refresh or scroll.

Alternatively, this space can be transformed into a search area when the user needs that function. (Although, titles do frame the screen well, and can give the design a polished look.)

08. Define elements, then repeat them

If one of the 'go' buttons is the colour purple, then all 'go' buttons should be the colour purple. If one screen has 20 px padding on all side, all screens should maintain this consistency.

This is what we mean by defining elements and repeating them. Each element should be defined, as should the colours inside the app.

09. Simple tricks can be used to separate text and create hierarchy

All caps, title case, indent, contrast, and underline: these are all stylistic choices. None are necessarily better than any other and you can use them in any place as long as you are consistent.

Design is focused on trends, and currently, the trend is to move toward a more flat design. Flat design does not mean it has no texture or shadows, nor does skeumorphic mean that every aspect should have a realistic texture. Generally you should be aware of what your audience will expect to see, as they will judge you for it. If your app looks outdated - users will note that.

"Skeuomorphism is a catch-all term for when objects retain ornamental elements of past, derivative iterations - elements that are no longer necessary to the current objects' functions." ( Austin Carr - design and technology writer for Fast Company)

11. Most apps are basically just lists

The majority of mobile apps (that is not a game) are basically a way to navigate lists. The job of the designer is to hide the fact that it is just a list and make it an interesting experience that is both rewarding and fun. This is why IA and proper hierarchy is so important - with the right foundation, the layout can be very varied yet convey the same information.

12. How to make a decision on a layout

Design libraries exist to help decide which layout is the best for a particular problem. Here are some good ones.

13. Actions requires feedback, and fast

Users have an expectation that their phones will respond quickly, and efficiently to all their interactions. This isn't always the case, and developers frequently tell me that certain interactions take a long time. So you may have to find a way to fake it.

Every interaction should have feedback. For instance, when a user action (swipe, tap, click) is responded to with an animation, this gives the user feedback that they have been heard and their process is being executed on.

Think about how it works in web design: when a user hovers over a button, it changes, and then again, on click, it changes. This should occur in mobile as well. If the user refreshes, there needs to be a moving symbol. If they hit something, it should slide, or glow, or bounce - anything to let that user know that it is working.

This also gives the system time to process the original interaction or call, making it appear like it was instant. In short, a lot of interaction design is smoke and mirrors.

14. Postpone sign up

Offer sign up on one page. Have the user signup once they 'like' or 'heart' an item; allow them to get engaged first. You'll have significant user dropoff from logins, and usually the sign up doesn't offer much value to the brand anyway.

15. When to use a fancy font

When designing comps, time can be better spent elsewhere. Most people quickly distinguish between serif, sans, decorative, or condensed but frequently think slab is serif, humanist is sans, and anything Jessica Hische is decorative. The most important considerations for selecting a font are:

Can I easily use it on mobile/web?

Is there a variety of weights?

Is it legible?

I subscribe to the belief that type design takes a lifetime to master, so if you pick a type from a good foundry, there shouldn't be much of an issue.

With your mobile apps, keep in mind that a good number of users cannot distinguish between Arial, Avenir, Roboto, or Helvetica. This means that as long as the typeface is clean and easy to read, your'e ok. The time to add in a more complexly flavored font is when you're focusing on brand, and less on usability. In this case, the new, atypical font will create a feeling of being somewhere, perhaps nostalgia, maybe even whimsy. Whether or not you do this is based on your decided priorities, but it isn't something to get hung up on.

16. Each system has visual guidelines

Android, Windows and iOS have design guidelines that cover different design styles and are rather detailed with specific information like widths between text. They're a great resource when you're not sure how to proceed.

This is a good round up of rules to get you started. Let me know your thoughts!

Words: Valerie Lisyansky
Valerie Lisyansky is partner at SWARM, a NYC-based boutique agency that creates apps for mobile, wearable and the second screen. Connect with her on Twitter. Like this? Read these!

# data[].attributes.attachment_link.title
16 killer design tips for creating mobile apps

# data[].attributes.attachment_link.description
Specialists generally assume that everything they know is obvious, and need to remind themselves that isn't the case for most of the population. What specialists do have is a speed at which they make decisions in their work. This is reflective of the years of targeted work and experience, and not an assumed reality that everyone possess.

# data[].attributes.attachment_link.readable_text
I know you want to get into mobile app design. At this point, with all the good news about apps and their success, everybody wants to design apps.

We have some good news and some bad news here, potentially all good news depending on your outlook. Good news: you finally have all the tools to create your own app!

Everyday, the technology and tools to create apps are becoming more easily accessible and more user friendly. Bad news: you are not the only one who knows this.

People all over the world are embarking on their first app making journeys. But no worries, there is more good news: everything you need to know to design the perfect app is right here.

The mobile app industry is bigger and better than ever. Every business, from sports franchises to grocery stores are looking to design a mobile app. And what client doesn't want their favorite team or their shopping list in right in their pocket?

With mobile app designing, you are in charge of the look and feel of the product, as well as the relationship between app and user. Knowing this, the possibilities are endless. However, with so much room for success, there is also a lot of room for error.

Lets take a look at the top things to keep in mind when designing apps, from research to working with developing teams.

First, research

Before we take a look at the research portion of creating an app, take a second to pat yourself on the back. Congratulations! You are about to embark on a journey that is very fun, a little difficult, and extremely rewarding.

The old proverb says, write what you know. This applies to app designing. If you are planning on becoming an app designer a good first step is to be an app user. As an app user, you will start to learn what you like and don't like in an app, like which fonts look the best and which layouts are easiest to use.

Mobile app design is different than designing websites or online applications, but you know that - by now you are an prolific app user and an obsessive smartphone owner, right?

You know that mobile apps are focused. They are specific. They are individual. They are insular. Remember this when you are designing your app.

Another thing to keep in mind is that mobile applications are new! And so are the platforms they are used on, smart phones. Keeping on top of the new innovations in the world of smart phones will put you ahead of the curve in the designing world, helping your app to be the newest, shiniest version of itself.

Also, reading about the official guidelines for design, the iOS Human Interface Guidelines or Android User Interface Guidelines, is not a bad idea.

Second, more research

Why are you doing this and how are you going to do it? These are two daunting, but absolutely necessary, questions you must ask yourself at the beginning of your app designing process.

Why are you doing this? What are you accomplishing by designing an app? Is it a marketing or branding move? It is to gain extra revenue channels? Is it simply a mobile version of your online presence or product? You have two goals.

First to design an app, second for the app to generate something, whether it be money, discussion, or convenience. If you have clearly in mind the latter goal during the designing process, the product will be more effective.

How are you going to make an app? Writing a list of tasks that must be completed in order to create your app is extremely helpful. Having an agenda and a plan to check off every item on your list is the most efficient way to go about creating your app.

Advertisement

Also, think about who is going to be using your app. If you are think about your app from your perspective as a designer and the audience's perspective as users, you will create an app with which both sides are happy.

Check out your competition

Seeing what you are up against is always smart, regardless of whether you are in a battle of the bands or a cooking competition. In the case of mobile apps, there are many different sites, forums, and threads for users to express opinions about apps.

Perusing these sites and comment sections for a few hours can give you a really good picture of what is on the market, as well as what the users wish was on the market. Knowing your user's preferences before you even begin to design the app is going to save you a lot of time editing later.

Of course the customer is always right, but don't take the internet's word for it! Watch and learn. Download a couple of apps, think about what they got right and what you would do differently.

Get mobile app design inspiration

As previously mentioned, you are entering into a huge, dynamic, and young field.

With thousands of apps being created every day, there is always something new. The popular phrase, "There's an app for that", didn't sprout up out of nowhere.

The amount of apps and things that they do is staggering. You want to be different but approachable. Be unique and usable.

Visual inspiration is very important part of this. It is also a way that you could leave your own mark on the entire industry. Think about the gestures that exist on mobile phones.

The techniques used to get stuff done on our phones is constantly evolving. Think about what doesn't exist yet. Your mantra should be, "What is the most natural way to get this done." Double tapping? Swiping? Typing?

Remember: inspire yourself but don't steal. You will learn a great deal and vastly improve your app by looking at what is already out there.

Now it's time to design the app

Finally!

Time to put all that research to use! Think about all the things you experienced using apps and all of the comments, concerns, and suggestions of the users that you have read.

Now, keeping this in mind, how do you want your app to look? To feel? To be used? Either by sketching or using Photoshop, start to design the app.

This part of the process can be difficult and time consuming. Remember: Time spent here is time saved later.

After you have a vision for your mobile app design, one that you have put on paper or on your hard drive, it is time to build the bones of your app. There are many prototyping applications you can use, just be sure to use one that is compatible with the interface you are designing for.

Making sure that the basic components of your app are functional is very important for obvious reasons.

Creating a strong core will ensure that your app is a pleasure to use, instead of a hassle. Different drafts or versions of your app will be necessary, so starting with the basics will make all of your versions usable, if not perfect.

Details matter

If the devil is in the details, so is the angel. A beautiful accent or a stylish font will help your app to stick out in a huge market. The little things matter; they can make or break an app.
Mobile app navigation
Navigating your app should be easy. If users can't find what they're looking for, they will not get the full app experience. Intuitive use should take precedent over style. Taking a page out of the books of google, bing, or other popular search engines is not a bad idea.

Experienced app designers all agree, navigation is not an element to be extremely creative with. Add personal flare to conventional searching systems, don't create a system that users will have to learn.
Mobile app typography
This is one of the most important aspects of designing an app. If your text is difficult to read or your font is hard to look at, your app will be impossible to use.

Spaces between lines and words are important to nail, especially with mobile apps where the space is limited. You want to make sure you are maximizing your space without cramping your text.

Experienced app designers all agree, you can make it possible for the client to choose the text but you still have to make the fonts look great.

It's all the more impressive if your clients get options when it comes to font. But regardless of whether you include font settings in your design, make it readable, make it stylish, and make it match.
Mobile app design color scheme
If you are anything like me, this is the fun part! Picking out the perfect colors to complement your design is fun and important. Too many colors can be distracting or confusing.

Trying out different schemes is the best way to test your color scheme.

You definitely want to make sure that your colors aren't clashing and that your text is visible over your background. Experienced app designers will tell you, less is more when it comes to colors.

Testing is vital

So your idea is stellar, your design is beautiful, the colors are perfectly coordinated and the text is the perfect font and size- now what? You want to make sure that your app is built for an actual person to use is what. Testing out your app on devices that the app will be used on is incredibly important to ensure that the user will receive maximum enjoyment and productivity from your design.

The details are important. Can you reach all the keypads with one hand? Good. But are you blocking important information with your other hand while you type?

And, just as importantly, will the app still look great on an older or inferior model than the device that you are using to test your prototype on. Making sure that all of your users can experience the full grandeur of your app is a key component in being successful.

Ending thoughts on mobile app design

Image source:
Soundify Music App UI Kit

Now that you know all the basics of designing mobile apps, go and make your masterpiece! The mobile app platform is a fantastic one to design in, with so many options and opportunities.

As a parting tip, working closely with the developer of your app is always a good idea. Otherwise, your mobile app design will impress only at a design level.

You want to make sure that your app is exactly how you envisioned it, in all its splendor and glory.

Working for months on an app just to have the developer flip your project on its head is never fun. So although this final part of the process may be tedious, it is the smartest way to achieve the perfect final product.

So, how do you design an app? Send me a tweet and I'll be happy to update the post and credit you for a good mobile app design insight.

If you liked this article about mobile app design, check out these articles as well:

# data[].attributes.attachment_link.title
Mobile App Design: The Basics Of How You Should Make It

# data[].attributes.attachment_link.description
I know you want to get into mobile app design. At this point, with all the good news about apps and their success, everybody wants to design apps. We have some good news and some bad news here, potentially all good news depending on your outlook.