UI / UX Design

UI vs UX

User interface refers to the aesthetic design of the visual elements of your application. The colors, sizes, typography we are choosing. Complementing UI design is UX design, user experience, which is the design process that focuses on the usability of a product, with the goal of making the product intuitive and easy to use for the user.

Design Process

The design process is an iterative process which entails making mocks for different “user stories”. Everything is thought through from the perspective of the user, working through different flows that the user could enter.

Usually, a designer will receive a product spec of what the product should look like, and then make mocks for all user stories that the spec outlines. The designer’s goal is to make UI that the user enjoys looking at and a UX that makes the product easily understood and interacted with. In a professional environment, there are teams of designers that work closely with product stakeholders to design user flows that meet the needs of the product in a tasteful way. There will be consistent back and forth with significant iterations of the designs, with the end of the process resulting in an engineer implementing the specced out product.

This process will obviously vary depending on the context of your project, but generally speaking will follow these steps:

1. Define the user story: spec out what the product needs to have for the user.
2. First draft of design mocks: create wireframes and general mocks for the defined user story.
3. Iterate: work with stakeholders on UI / UX to make the designs as robust and elegant as possible.
4. Hand off to engineer: go code the thing.

It is worth noting, that some frontend developers will be responsible for this process on their own, while in other settings, there will be designated designers. If you consider yourself creative, and have an interest in tech, design may be a cool career path to explore.

Implementing Design

As a frontend developer, you can implement your designs in one of two ways. Import a UI library or build out components with vanilla CSS.

UI Libraries

UI libraries are very useful and come out of the box with many useful features. They can be easily installed as NPM packages and can provide you with a variety of UI components like Buttons, Layouts, Forms, etc. It’s worth pointing out that you can override components from UI libraries with your own styling, but your UI design will usually be tightly coupled to that of the library you choose.

There are many different options for UI libraries, but these are some of the top ones that I have had recommended to me. Each has its own advantages and its own syntax, but I would suggest using the library with components most similar to the sites you liked.

1. Material UI: https://material-ui.com/components/buttons/
2. React Bootstrap: https://react-bootstrap.github.io/components/alerts
3. Ant Design: https://ant.design/docs/spec/introduce
4. Chakra: https://chakra-ui.com/docs/features/gradient

Take a look at each of these different sites and choose the one that you like the best.

Vanilla CSS

There are a couple of advantages and also things to watch out for when using vanilla CSS.

Your components will be more customizable. You will be building them from scratch and can make them look and feel however you want. Teams often implement a variety of UI components in the development process of a web application, which essentially become a custom UI library as the project progresses. They can then even go as far as publishing a package and documentation to share it with the rest of the community.

Package size is something to be wary of when adding UI libraries. They are usually fairly heavy packages, which can lead to worse performance for your application.

In my opinion, it is best to have a bit of both, totally depending on what you want to build. I believe that UI libraries can be very useful for the UI components such as Buttons or Inputs, however, I think positioning and layout can be done more effectively just using CSS, once you get the hang of it. That’s just my own take though. This is a constant topic of conversation among web developers.