The Importance of Good Design in Frontend UI

JAMHacks
3 min readMay 3, 2021

--

Written by Daniel Yu, JAMHacks V Organizer

With the coming of age in the new era of technology, everybody wants to experience the most convenient, efficient and, in general, best technology our world has to offer. Our society has become extremely lazy and wants everything online to be served on a platter right in front of them. As a result of our current generation’s short attention span, even the slightest inconvenience can result in the risk of a user exiting the tab.

Consider this: have you ever found yourself browsing through a website, either struggling to navigate through its pages or just wondering to yourself, “What on earth am I looking at?” Well, this is likely due to bad UI design.

What Is UI Design?

User interface design is the process of planning the graphical interface on which users interact with your application, website, etc… It includes planning the basic design elements that are required for someone to be able to properly navigate and interact with your site. The UI is essentially the connection between the user and the application, and it must be able to facilitate the passing of information in a two-way channel between the user and the application.

Common elements of UI design include the input controls, data display components, layout, and navigation. This Medium article is an example of a UI: it has a big navigation bar at the top with links to the rest of the site, a side panel for interacting with the author of the blog post, and a big column layout of the actual content of the blog in the middle. When you resize the browser, the contents of the site also adjust accordingly based on how much available space there is. When the blog is opened on a mobile device, we can also see major layout and functionality changes, with a hamburger-style navigation bar and app store installation options.

Why Is UI Design so Important?

Good UI Design is important because it facilitates clear communication to the target audience. It allows for a very transparent display of information, making the products that are being sold, as well as the message that is being conveyed, very clear and understandable. A good UI will help draw in visitor attention and maintain visitor retention rates by prioritizing the user through user-centric design.

UI design not only accounts for the “aesthetics” of a site, but also its efficiency and accessibility. This means that a site should be optimized for various different viewports and web browsers, such that all mediums should still result in a near identical user experience. Balance is key to a good UI design—emphasis must be placed on maximizing functionality, making clear what the intention of the site is, and not overloading the user with information.

Good UI Design Conventions

When a user visits a site, they already have an expectation for how the interface should work. Thus, when designing a UI, it is important to make sure that the UI is predictable, concise, and consistent. Here are a few general guidelines you can follow:

  1. Keep it plain and simple — use simple language and remove any unnecessary elements
  2. Consistency is key — use consistent elements within your application, as the more predictable a UI is, the easier it will be for a user to navigate through it
  3. Use typography with a purpose — utilize different fonts, sizes, and colours to carefully control the readability and flow of your site
  4. Use intuitive navigation — through the provision of visual cues and the usage of predictable modern navigation conventions, the way through which users should navigate the site should be made apparent and intuitive

Feel free to check out this article for more information regarding good UI design guidelines.

Conclusion

In this blog, we’ve discussed what UI design is, why UI design is important, and a few brief guidelines on how we can implement good UI design practices. Be sure to use this information wisely when building your UIs at JAMHacks V this year!

--

--

JAMHacks

Waterloo’s biggest high school hackathon, reimagined online! Come join 200+ hackers for 24 hours of innovation.