Web Design #10 - User Experience (UX)

HJ's Coding Journey·2021년 9월 27일
1

[Learn] HTML/CSS

목록 보기
19/29

Difference Between UI and UX?

UI and UX are familiar terms that people have heard often in various settings. But, what exactly do they mean? User Interface (UI) is the visual presentation of a product, or rather, how the overall product looks and feels like. User Experience (UX) is the overall experience the user has while interacting with the product.

UI is graphical interface that makes the overall product look and feel beautiful and aesthetic. On the other hand, UX is the experience that makes the interface useful and functional. Overall, UX design cannot exist without UI design and vice versa!

To better understand the two terms, we could take the anology of various kinds of bottles. All the different shapes of bottle serve the same purpose regardless of their different shapes. Additionally, all of them have their own unique design that looks aesthetic to the eye. However, depending on the setting they are used, some bottle may be more useful than others.

UX Rules

  • Don't design complicated layouts. Use patterns that users know. You do not always have to make something unique. It is okay to apply existing designs.

  • Make sure to give more attention to your most prominent element.

  • Use colored text and underlined text only for links.

  • Animations should have a purpose and be fast. Be careful not to spend too much time.

  • In forms, align labels and fields in a single vertical line to make the form easier to read.

  • Offer users good feedback for all actions: form errors, form success, etc.

  • Place action buttons where they will create an effect.

  • Use a descriptive, keyword-focused headline on your main page. Don't be vague or fancy! Make sure the headline looks strong.

  • Only include relevant information efficiently. Make the content 100% clear.

  • Use simple words! Avoid technical jargon and "smart-sounding" words.

  • Break up long text with sub-headings, images, block-quotes, bullet points, etc.

profile
Improving Everyday

2개의 댓글

comment-user-thumbnail
2022년 3월 25일

Thanks for the constructive article, buddy. I agree that high-quality website design is one of the important factors in the development of the project. And for good visual content, you need to use only the best and proven services, such as Master Bundles where I usually buy the most modern graphics and fonts. This gives uniqueness to my site, which has a positive effect on its promotion.

답글 달기
comment-user-thumbnail
2024년 5월 30일

Thanks for sharing it. I can use it to develop my project geometry dash online.

답글 달기