To understand this equation let us first understand the differences between UI and UX. UI – User Interface is the point of interaction between the user and the application through which he avails the services offered. In case of web applications it is a browser window in which a website or web applications opens, offering various elements, controls and content, to make a convenient and productive interaction.

UX – User Experience is defined as the feelings, emotions or the sentiments the user exhibits while using a web application or a website. The User Experience can be like delighted, frustrated, and comfortable and so on. It is actually a qualitative suggestion of a user’s reaction to a specific service offered.

An interface where a number of elements like menu-lists, option buttons and other user friendly controls are arranged aesthetically to make interaction memorable and contented, is a UI. While working of this interface, user gets lost or feels helpless in moving ahead, page loading take lot of time making him frustrated, finding content irrelevant or out of place, a sense of pleasantness with a pleasing design, being rewarded for his input letting him feel encouraged are considered User Experiences.

Now we have familiarity with these terms, so let’s move ahead and figure out the chemistry that these two share:

Different Roles- The first step in understanding equation of these two is by exploring that what are their roles in web development. UI is associated to everything that improves presentation, look and feel of a website like design, icons, fonts, colors and all other elements of interactivity. Whereas UX is concerned with the techniques of learning and analyzing the perceptions and feelings, users feel about an application or website. The criteria for UX analysis is how user felt about design, services offered or effectiveness in executing desired activities.Equation Of UI and UX

Separate Experts- The second step is to identify the people of an organization who are responsible of UI and UX. As we till now understood a that UI is more in physical terms and UX is more concerned with psychological impact. So both of these, cannot be undertaken by one person.

UI is primary domain of web designers and UX is area of specialization of UX designers. The User Experience designers exhibit skills in user research, information structure, interaction design, feedback analysis etc. on the other hand the UI designers should have expertise in interface design, iconography, typography, color application etc.

If a website is very beautifully designed with an array of captivating images and alluring arrangement of elements, but if content is irrelevant or information to be filled by visitor is very lengthy and time consuming, it will put off users. Such awebsite may score well in User Interface but highly detailed form and a slow download of the website due to images will not be giving a good User Experience.

What is a UI/UX Designer?

Conclusion

A website with excellent UI but with little relevance or productivity of content will not be worth browsing. A website with a mediocre looking interface but containing highly useful data will still keep the visitors happy. Actually it all depends upon the users and their expectations. With all the discussion above we can say that a good UI will be helpful in a brilliant UX but there is no universal rule of thumb to equate UI with UX.

Typography is a very interesting and crucial filed in web design as it reflects your website’s tone and affects its visual impact. Every web designer must have basic knowledge of typography. In this article, I have described the basic concepts of web typography in simple language so that you can understand it easily.

What is Web Typography?

typography

 

Basically Web Typography means the art and process of organizing texts in webpage. In simple words, Web typography means the use of fonts on the website.

What Is The Purpose of Typography?

Because of the fact that typography is closely related with web design, a lot of individuals have a misconception that the aim of typography is to make a website beautiful.

However, the primary objective of typography is not anything related with beauty. Actually the aim of typography is increasing the readability. This doesn’t imply that it shouldn’t look beautiful, but this is only an additional bonus. The primary purpose of the typographer is to ensure that the type is easy to read. Typography involves every possible component that can impact the design of a website, such as typeface selection, color scheme, line length, point size, design integration and much more. Typographers or information designers are mainly concerned with readability of a webpage.

Why Typography Is Important for Web Design?

About ninety five percent of a general website is filled with content. And typography is the art of showing readable content in the web page. So it is really an important part of web design. Your selection of fonts and how you make it perform with your color schema, layout, grid or design theme will differentiate between a good, bad and great design. Your website visitors need to be capable of understanding what messages you are trying to display. If you make your text too small to read or cramp all of them together, your website will not get a second view and consequently the number of your website visitors will be dropped. Typography is crucial for website because it is used to convey a particular mood or feeling, or make visitors react in a particular way.

Basic Elements of Web Typography:

The key elements of web typography are the typefaces we use in our web pages. And there are a number of CSS font properties that we can utilize to change typefaces:

font-family : This property specifically describes the typeface that you wish to use. If you do not use this property, CSS will use the default font of your web browser.

font-size : This property is used to define the size of your webpage’s font. You can also define what kind of measurement to use.

font-weight: It is used to define boldness of the font.

font-style: Used to make your font italic.

font-variant : This specifies whether or not a text be shown in a small caps font.

Typography Spacing

After defining a particular typeface and font, you have to define the spacing around the letterforms or text. There’re a number of CSS properties that you can utilize to change the default spacing of your typography:

line-height: manage the leading of every line of text.

letter-spacing : This property adjusts the space between letters in a text.

word-spacing: manage the space between every word in a text.