DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 967,911 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for An Overview of UI | UX
Dylan Oh
Dylan Oh

Posted on • Updated 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 ๐Ÿ˜Š

Follow me on Medium

Top comments (0)

๐ŸŒš Life is too short to browse without dark mode