Introduction to UX/UI

Ok, so now that we know the basics of HTML and CSS, It’s time to cover one of the most important elements of web design in 2021; It’s time to talk about UX/UI Design. We’ll look at what UX design is and how it came to be. Then, we’ll look at some instances of excellent and poor user experience. By the end of this lesson, you’ll understand what UX design is and why it’s so essential. Ready? Let’s get started!

What is UX Design?

User experience, or “UX,” refers to the entire experience a user gets while engaging with a product or service. The experience may vary from pleasant to downright irritating depending on how the product or service is built!

UX is often spoken in connection to digital material such as websites and apps. However, UX isn’t confined to the digital realm. From the packaging of a toothbrush to the wheels of an orthopedic chair, everything that can be experienced can be designed. UX can be seen everywhere. That’s why it’s such an interesting field, and it also explains why you already know a lot more about UX than you think. Every time you curse a push door with a pull bar or close a frustrating website, you’re passing judgment on the quality of its UX design.

What does good and bad UX look like?

We’re now going to look at two cases of good vs. bad UX. We’ll start with a familiar physical object before moving on to a digital example.

Example

When evaluating a user experience, you may begin by comparing it to industry standards for “excellent UX.” A good user experience will be useful, useable, desired, findable, accessible, and believable. Keeping these characteristics in mind as you perform your research will serve you well as you continue your UX journey.

Consider how simple or difficult it is for you to utilize the website or app. Are you able to locate what you’re searching for? Is it simple for you to achieve your objectives? Remember, the important is whether the website or app meets the requirements of the user—that is, YOU! Make a few notes on each webpage and store them someplace safe for future reference.

Not sure where to begin? Consider chores or errands that you often do online, such as shopping or arranging a vacation. If you’re a frequent traveler who often buys flights online, for example, head to your preferred site. Make a list of things you enjoy and hate, as well as why.

What is UI Design?

In user-interface design, “UI” refers to the buttons people click on, the text they read, the pictures, sliders, text input forms, and all the rest of the elements the user interacts with. Screen layout, transitions, interface animations, and each and every micro-interaction are all included in this category of work. All visual elements, interactions, and animations must be created from the ground up.

This is the responsibility of UI designers. What the application will look like is entirely up to the creators. These people are responsible for choosing the color schemes and button forms, as well as line width and font size. UI designers develop the appearance and feel of an application’s user interface.

UI designers are also graphic designers. “They’re worried about the look of the place. It’s up to them to make sure the application’s interface is appealing, visually stimulating, and themed correctly to fit the purpose and/or personality of the app. All visual elements need to be unified, both aesthetically and purposefully.

Visual Design Fundamentals

Let’s discuss some of the…

Lines
Every letter, border, and division in a layout is composed of lines that form its overall structure. Understanding the uses of lines in establishing order and balance in a layout is an important part of learning web design.

Shapes
Squares, circles, and triangles are the three fundamental forms in visual design. Squares and rectangles work well for content blocks, circles for buttons, and triangles for icons that accompany an essential message or call to action. Shapes may also convey emotion, with squares representing power, circles representing harmony and comfort, and triangles representing stability.

Texture
Texture is a representation of anything in the actual world. We can tell if something is rough or smooth by its texture. Textures may be seen in many aspects of web design. Be conscious of the many textures that may make your designs more fascinating and give them a feeling of materiality, from paperlike backgrounds to the colorful wisps of a Gaussian blur.

Color
Color is one of the most important elements of design. Color theory should be studied in order to develop designs that are not straining the eyes. Understanding the color wheel, complementary colors, contrasting colors, and the emotions associated with various colors can help you become a better web designer.

Grids
Grids date back to the early days of graphic design. They are very useful for giving order to pictures, text, and other components in a web design. Learn how to use grids to organize your web layouts.

Typography
In summary, Typography design is the skill of organizing a message in a legible and aesthetically beautiful arrangement. It’s a fundamental feature of the design. Typography doesn’t expect the designer to develop their own letterforms, but to instead work with fonts that already exist. Choosing the right font, point size, kerning, and line spacing are all part of this process, and the designer must make all of these selections in order to come up with a style that fits the tone of the brand.

How they work together

So a UX designer chooses how the user interface functions while the UI designer decides how the user interface appears. When it comes to this project, the two design teams prefer to collaborate heavily. As the UX team is working on the flow of the app, how all of the buttons direct you through your activities, and how the interface effectively delivers up the information users require, the UI team is working on how all of these interface elements will look on screen.

Let’s imagine at some point in the design process, it’s determined that more buttons need to be added to a certain screen. This will modify how the buttons will need to be grouped and possibly necessitate changing their form or size. The UX team would decide how the buttons should be laid out, and the UI team would make changes to their designs to accommodate the new configuration.

Constant communication and cooperation between UI and UX designers assist to ensure that the final user interface looks as nice as it can while still performing effectively and intuitively.

In the next section, we will cover wireframes and how to use them in web design.

Introduction

Lesson One: Create a Blogs@Baruch site

Lesson Two: Introduction to HTML

Lesson Three: Introduction of CSS

Lesson Four: Introduction to UX/UI

Lesson Five: Wire-framing

Lesson Six: Typography