DEV Community

Cover image for Introduction to UX/UI Design
Christine Garaudy
Christine Garaudy

Posted on

Introduction to UX/UI Design

Vocabulary

Creating with the experience of the end user in mind has been a core principle of design for as long as people have given any consideration at all to the attractiveness of the objects they make and use- UX (user experience) in design is not new. Most of us want to interact with beautiful things, and our lives are richer and more pleasant when we do.

What is fairly new, is the concept of an interface. UX and UI are sometimes used interchangeably, and they are extremely similar, but the latter specifically refers to the user experience of interacting with an interface. UI (user interface) marries technology and art, considering the design aspects of all the various ways users will interact with your application on their computers, smartphones, or tablets. With so many easily-accessible distractions available on the web, a user will quickly drop your application and move on to the next if yours is visually displeasing or unsatisfying in any way.

Psychology

Taking psychology into account and understanding some basic ideas about human behavior are also important considerations in UX/UI design- applications must work with people's basic needs, desires, and habits. Designers must strive to combine functionality with appealing aesthetics and satisfying interactions. We are all now used to engaging with apps in a few particular ways, and have been conditioned to find scrolling, clicking, and pinching gestures pleasurable. It must feel gratifying to use an application or we will quickly lose interest in it.

Try to identify and appeal to your target demographic where possible and relevant. If you're designing for a young brand geared toward hip twenty-somethings, your stylistic choices should no doubt be different than they would be for a sophisticated company marketing itself toward a more established and wealthy clientele.

Basic Design Principles

Color

We can achieve more personalized-feeling results by considering elements such as color: the former brand and their demographic might respond to bright, loud splashes of color whereas the latter may be more appropriately represented by a softer color palette and more restrained tastes. Sometimes we can say more with negative space, allowing simpler, uncrowded images to speak louder.

Balance

Size and scale are important things to consider. Larger elements carry more significance. Symmetry and balance (or their inversions) can communicate strongly to users- symmetry and consistent proportions are familiar and calming, while asymmetry and exaggeration can feel urgent, jarring, and stimulating. Alignment affects the way people will scan the page, guiding them in a certain direction visually. Consider your intentions.

Contrast

Along with balance, contrast can help establish a visual hierarchy. We can create dominance and emphasis by giving a focal point more weight. Making the elements surrounding this point lighter creates variance and visual interest. We can communicate what is most important on the page instantly using contrast to guide users organically toward the most important elements.

Typography

Font styles are abundant and can make or break the design of a page. You can choose fonts from different typeface families, but try to stick to just two (three at the very most), such as an exciting one for the title and a more classic, readable style for the body. Make sure the pairing works well together but that they are also different enough for the choice to look intentional. Many find typography to be a particularly challenging facet of web design. When in doubt, choose something traditional and easy to read and make more daring choices elsewhere.

Consistency

Staying true to a theme is important for usability and overall cohesiveness. Strive for unity by keeping colors and fonts consistent across the application. Predictability is important- you want users to immediately and intuitively understand how to use your features. Try to limit hidden information in drop-down menus- keep options simple and put information in plain sight, like on buttons if possible. One exception is basic website navigation that users have come to expect in the form of a triple-lined "hamburger" menu in the upper right or left corner. Keep text links obvious by making them all the same color.

Conclusion

Even for those not in charge of aesthetic choices, becoming familiar with basic principles of design can help any developer or programmer grow. There is always an end user of your application. Keeping their user experience in mind can help you create more useful, beautiful, and intuitive software.

Top comments (0)