# UI Design - The Basics

If you are just getting started on your journey to learn front-end development, you have most likely thought about freelancing as a way to get some experience and build a side hustle. If you've read my earlier post on how to learn front-end development, [read it here](https://devdish.devwig.com/how-to-learn-front-end-web-development), then you have definitely at least considered it. The biggest problem new developers face when getting into freelancing is that you suddenly need to be more than just a front-end developer. 

As a freelancer, you need to be able to get the back-end of the site up and running as well as design the entire thing. For simple, static websites there are plenty of tools out there that help with the back-end side of things that make things really easy, but designing the UI can get a bit tricky especially when throwing the needs of a client into the mix. So, let's take a look at some basics to keep in mind when designing the UI for your sites and applications.

### Keep it Simple Stupid (KISS)
This is actually a general rule that applies to way more than just front-end development. As developers and engineers, we can sometimes get so focused on using the newest technologies or including all of the coolest animations that we lose sight of things like site performance, usability, and client/user needs.

It's important to have fun when you are practicing your skills and learning new things, you just don't want to get lost in it. Use only what you need, and always remember who you are designing for. Every element you use in your design should have a practical purpose.

This will not only save you some headache with trying to think of all the cool things, but it will also save time and money allowing you to deliver a completed, functional product to your client on time and under budget.

This also applies to the users' experience. The 3-Click Rule states that if a user cannot find what they want in three clicks, they will likely become frustrated and leave the site. So, always make sure you are implementing the minimum number of steps to get desired results. Also, group tasks together in a practical manner, and do not hide sub-tasks in places where no one will be able to find them.

Another key is making sure information and workflows are organized in a logical and self-contained manner allowing the user to navigate the application much easier. Using overlays like modal windows is a great way to condense data and reduce the footprint while helping to make sure your workflows are organized and self-contained. 

### Predict and Preempt
Going hand-in-hand with keeping it simple is being able to predict users' actions. Keeping everything simple and having a solid understanding of the user and their needs makes this process easier, but the ultimate goal here is to provide the user with whatever information and/or tools they need as soon as they need them. 

Developers and designers can also preempt a user's behavior by using the design to steer the user in a specific direction. This of course makes it even easier to predict a user's behavior and make sure they have everything they need. There is, however, a fine line between preempting a user's behavior and taking the control away from the user.

### Keep the User in the Driver Seat
When using an application or visiting a website, the user should always feel as if they have total control, even if they actually do not. The user interface should not force users into any actions or complete any actions for them. Instead, the UI should fade into the background to be almost an afterthought for the user. 

On the other hand, the UI should always be there when the user needs it. An example of this is allowing a user to make selections on a form, alerting or notifying the user that a selection is incorrect or may cause future errors, and allowing the user to change their selections or undo an action altogether.

This allows the user the freedom of doing what they want, and explains to the user why the decisions or selections they have made may need to be changed or undone. 

### Consistency is Key
Maintaining consistency is paramount in design. Not only does this keep any learning curve to a minimum, but it also keeps unnecessary work to a minimum for design and development. When there is consistency between each element on a page and each page within the website, those elements and styles can be reused making the design and development process even more efficient. This consistency also makes the entire site more structured and cohesive which makes the overall impression professional and easy to recognize.

In order to achieve this consistency, it's a good idea to create a brand style guide and/or design system during the design phase. This will also help tremendously in maintaining consistency well after the initial release as well. There are plenty of resources out there for creating style guides and design systems, so I won't go in to much detail here. The important note here is that both of them are incredibly beneficial when it comes to design because of the consistency they provide.

### Provide Clear Signposts
Navigating applications should never be confusing or overwhelming. Users must be able to find what they need, when they need it. After all, if a user cannot find something in your application, they cannot use it. Then, that functionality was essentially added for no reason.

### Give Relevant Feedback
Overly complex or unexplained functionality will eventually result in the user leaving the application in frustration. For example, if a user is entering login information incorrectly and there is no error notification, they may assume that the site is simply not working correctly.In order to prevent this confusion or intimidation, you must provide clear messages to the user.

### Prioritize Functions
Even with all the unnecessary elements gone, there will be some functions that are more important and crucial to the user's experience than others. When designing, make sure to prioritize the more essential functions to provide users with a clear functional hierarchy. For example, if a user visits your site but needs to sign-in in order to access some of the content, that sign-in/register functionality should be prioritized over everything else. 

Then, once a user is signed in, the prioritization of functions changes. Signing in or registering is no longer even on the list, so what's next? If the user is having to try to find the answer to this question on their own, they may leave the site entirely. Be careful not to go too far with this though. It's easy to prioritize the next function so much that you may be taking the user out of the driver seat by prompting them too much and not allowing them different options.

### Design for Accessibility
When designing anything, it's important to remember that not all users will interact with applications the same way you do. I have written another post all about accessibility which you can read 

*[here](Link)*

, so I will avoid going into very much detail here. The key concept here is just to be cognizant of people with disabilities that may be accessing your application. It's unrealistic to account for every possibility, but you want to try and make it accessible to as many as possible.

Also, by accounting for accessibility in the design phase, development of the application becomes even easier. It is technically a legal obligation to provide accessibility to your site for all persons, so it will be a factor at some point regardless. The earlier it's added into the plan for the application, the easier it will be to implement all of the necessary elements, attributes, and styles.

### Wrap-Up
The biggest key takeaway to remember when designing an application or website is to try and allow your user to use your application without really having to think. An application that can be used without much thought will have the least barriers for new users, and will allow returning users to build muscle memory faster.