Basics of User Interface Design

User interface designers develop the appearance of a product or website, focusing primarily on its look and feel. Depending on whether they’re working with a user experience designer and front-end developers, they may also be responsible for usability and implementation.

A product’s interface gives users their first impressions, which go a long way toward setting their longer-term expectations. For example, a design with a dated, 90s-style aesthetic may imply that a company’s behind the times while a smooth, contemporary design has the opposite effect. Such impressions can be critical to a product’s ultimate success—or failure.

Creating an effective design requires knowledge of users as well as design trends and principles. Understanding what websites the target users frequent can provide designers with insights into how they expect a UI to look and function.

The Process

If user experience designers are involved in a project, UI designers will work closely with them in all stages of the design process though they focus on different aspects of it. Simply put, UI designers focus on how the interface is presented, while UX designers focus on how it will work.

The process begins with the UX team, which determines how users should navigate a product’s or website’s interface. The team may create mockups or wireframes that detail how the interface should work and define the graphical elements it will require and where they should be placed. It’s then the responsibility of the UI team to design the branding and visuals.

The UI team’s primary deliverable is the final mockup, which integrates its visual approach into the wireframe. The mockup and its accompanying documentation are given to front-end developers for implementation. After the design has been built, it’s up to the UI and UX teams to perform testing and make any necessary adjustments.

Required Skills

UI designers should be proficient in design software such as Adobe Photoshop and Illustrator. Also required is experience with prototyping tools such as Blasamiq, Axure and Fireworks.

In terms of programming skills, an understanding of basic Web technologies–such as HTML, CSS and JavaScript–is a must. Knowledge of front-end libraries and frameworks like jQuery, AngularJS and Bootstrap can be helpful, as well. Nowadays, with many products being designed mobile-first, an understanding of responsive design is required.

In addition, it’s important to understand the challenges the development team faces as it works to implement the UI. That can help the entire team resolve issues early in the process.