HOW TO BUILD A USER INTERFACE FROM START TO FINISH
Published: 2020-03-12 12:29:25

Today I am going to write about an interesting topic I have always wanted to write about that is a User Interface(UI). While designing UI you will have more fun because it's all about styling, colors.. which is really interesting. But before going deeper into how to design UI you can ask yourself what is User Interface?

<b>User Interface(UI)</b>:
-is the point of human-computer interaction and communication in a device. This can include display screens, keyboards, a mouse and the appearance of a desktop. 

-It is also the way through which a user interacts with an application or a website.

-It is a set of commands or menus through which a user communicates with a program.

Before starting designing UI it is good to think about users who will use it that will be a good starting point because UI focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions.

Everything based on knowing your users, including understanding their goals, skills, preferences, and tendencies. Once you know about your users you can start designing.

“Obsess over customers: when given the choice between obsessing over competitors or customers, always obsess over customers. Start with customers and work backward.” – <b>Jeff Bezos</b>

Here are the best practices for designing an interface:

.<b>Keep the interface simple </b>: the best interfaces are almost invisible to the user. They avoid unnecessary elements and are clear in the language they use on labels and in messaging.

.<b>Stay consistent</b>: Users need consistency. They need to know that once they learn to do something, they will be able to do it again. Language, layout, and design are just a few interface elements that need consistency. A consistent interface enables your users to have a better understanding of how things will work, increasing their efficiency.

“The more users’ expectations prove right, the more they will feel in control of the system and the more they will like it.” – <b>Jakob Nielson</b>

.<b>Be purposeful in page layout</b>: Consider the spatial relationships between items on the page and structure the page based on importance. Careful placement of items can help draw attention to the most important pieces of information and can aid scanning and readability.

.<b>Strategically use color and texture</b>: You can direct attention toward or redirect attention away from items using color, light, contrast, and texture to your advantage.

<b>Keep moving forward</b>: It is often said when developing interfaces that you need to fail fast, and iterate often. When creating a UI, you will make mistakes. Just keep moving forward, and remember to keep your UI out of the way.

These are the basics elements you need to know if you want to be the best UI designer:

<b>Input controls</b> 
allow users to input information into the system. If you need your users to tell you what country they are in, for example, you’ll use an input control to let them do so. these are a few examples of Input controls:

 .<b>Checkboxes</b>: Checkboxes allow the user to select one or more options from a set

.<b>Radio buttons</b>: Radio buttons are used to allow users to select one item at a time.

.<b>Buttons</b>: A button indicates an action upon touch and is typically labeled using text, an icon, or both

.<b>Dropdown lists</b>: Dropdown lists allow users to select one item at a time

.<b>Texts fields</b>: Text fields allow users to enter text. It can allow either a single line or multiple lines of text.

<b>Navigational components</b> 
help users move around a product or website. 

<b>Informational components</b> 
share information with users.

<b>Containers</b> 
hold related content together.

if you really want to be a User Interface pro please visit these website you will thank me later.
https://www.w3schools.com/html
https://www.w3schools.com/css
https://www.freecodecamp.org/news/html-and-css-course/