DEV Community

Cover image for An Overview of UI | UX
Dylan Oh
Dylan Oh

Posted on

An Overview of UI | UX

We are going to discuss a little bit about the differences between UI and UX in this article.

UI, which stands for User Interface, acts as a bridge between users and the visual content on the screens. The screens could range from desktops, laptops, tablets to our mobile phones. UI is more towards tangible and visible design. For example the buttons, scroll bar and even the colour palettes used by the website are also parts of UI.

Image description
Image from Technology vector created by freepik - www.freepik.com

UI decides the aesthetic and feel for the website. Either you want your app to be more playful (e.g. A travelling information website), or to be more serious (e.g. Scientific research), UI plays an important role. UI design has also evolved and improved over time as it has to be responsive to different screen sizes. An example would be we are not going to show a huge side bar when the website is displayed on a phone's browser, instead we could hide it with a togglable hamburger menu. In this case, UI designers have to draft out different wireframes and figure out how do they look the best with all the elements on the screen. They will normally create sample pattern library, mood boards and static interface to determine the design of an app.

Image description

Image description

 
 

UX refers to User Experience design, including research, testing, planning etc. UX design cares about how users feel when accessing and navigating through the app. The workflow of UX design (from ideation to the creation of prototype) will be covered in the future articles. This is an example of simple wireframes and the navigation routes for an app:

Image description

UX design also involves getting users' feedback (in the early stages of designing phase), and make improvements to the flow. For example, when user clicks on an icon, he or she found out that some important information on the interface is blocked by the popped up modal window. In this case, the layout can be adjusted to optimize the overall experience of our app.

Do follow me for more future articles on web design, programming and self-improvement 😊

Discussion (0)