top of page
搜尋

Your Beginner’s Guide to UI/UX design


The term “UI/UX design” is often bundled with web and app design. But what exactly does the term mean? What is UI/UX design about? Read on to find out!


What’s the difference between UI & UX Design?

This may sound surprising, but UI/UX actually refers to two separate, yet closely interlinked fields of design.

User Experience (UX)

UX design is all about user experience—how easy and comfortable it is to use a product. Let’s take app design for example. UX designers have to ensure that key interface elements can be navigated and accessed with minimal effort from the user. They plan how an interface operates and adheres to user app habits.



Photo Credit: Firmbee@Pixabay


User Interface (UI)

UI design, on the other hand, is about making the user interface pretty. UI designers are graphic designers whose goal is to make user interface elements eye-catching and clear for the user. To do so, they consider things like button shapes, color schemes, typography, image layout etc.



Photo Credit: Pixabay


UX and UI designers work closely together to create a product that is both easily usable and stylish to use. UX designers would propose a design strategy for how the interface works, then UI designers would adapt their designs accordingly and present interface elements clearly and attractively to enhance user experience. How exactly does this work? Let’s have a look at the workflow of UI/UX designers.


UX/UI Workflow


1.Research

This stage is mainly brainstorming and research. UX designers look for inspiration, or problems users face that they wish to solve. Information is gathered regarding main user groups, user habits, pain points etc. for this purpose.


2.Ideation & Design Strategy

Here, brainstormed ideas are gradually narrowed down and worked into a design strategy. When working with a product owner, UX designers have to consider what the product should achieve: how many user problems should it cover? Priority of issues to tackle? Business impact?


3.UX design

Solutions are thought up for the underlined problems that the product wishes to address. During this process, UX designers have to consider all possible scenarios that users might face and carefully refine solutions until those incorporated into the design strategy enable the product to be feasible and easy to use for the average user.


4.UI design

UI designers work with UX designers to produce an aesthetically pleasing design that also highlights key elements in the design strategy of the product. The product interface should be ideally easy to use & deliver a pleasurable user experience.


5.Prototypes and Testing

Lastly, product prototypes are tested repeatedly and modified based on feedback. Testing includes carrying out usability tests so that designers can receive first-hand evaluation from users. Designers will prototype and test by using different UX/UI design software, such as FigmaAdobe XDPenpot, etc.

Further reading:


Famous examples of UI/UX Design

Now that you have a basic understanding of what UI/UX design is, you’re probably curious about some examples of good UI/UX design. Actually, these aren’t difficult to look for—you’ve probably used and enjoyed most of these sites/apps because of how comfortable it is to use them.

  • Instagram – visual hierarchy prioritizes content to encourage endless scrolling

  • Pinterest – waterfall effect allows smooth browsing of images

  • Spotify – consistent behavior of app shortens learning curve to use it

  • Airbnb – informative, minimalist design

  • Uber – design caters to two completely different user groups effectively

  • Dropbox – responsive colors for each webpage to engage interest


Photo Credit: Brett Jordan@pexels


Want to know more about UI/UX Design?

Have a look at our posts about UI/UX and other graphic design topics on Facebook and Instagram. If you want to try out UI/UX yourself, we also offer a fun introductory course to help you grasp the basics of UI/UX. Feel free to have a chat with us if you have any questions!


17 次查看0 則留言

Comments


KEP_06.jpg

我們專有的網上學習平台,並與免費的創意和生產工具無縫協作,為 DECT 教育即時提供作業和學習材料管理、遠端協作、分析等功能,滿足不同使用者的學術及管理需求。

OS_02.jpg

培訓專業教師計劃是維持數譜生態系統的基石。這是一個可擴展的專業發展模式,當中全面的 DECT 內容和學習管理系統可分別為教師提供相關支持。

smiling-young-asian-teacher-making-selfie-with-her-2022-03-30-14-59-24-utc.jpg

學生展才計劃為學生提供在全球數字經濟中不可或缺的知識、技能和工具, 有助學生掌握在未來世界中出類拔萃的生存技能,脫穎而出。

OS_03.jpg

Krystal OTP 包含所有辦公室軟件,有效提升日常工作效率和減輕營運成本,為當今多元化 的業務營運需求提供了完善解決方案。 

hand-with-tattoo-point-on-the-cyber-table-2022-12-15-23-00-27-utc.jpg

一項綜合計劃,旨在為個人 和公⺠提供必要的數字能力和軟技能,以便在數字經濟中生存。為了在數字時代保持競爭力和繁榮,各國需要為其公⺠提供必要的知識、技能和工具。

DECT_02_OPEN_01.jpg
DECT_06_CP_ERB_B_03.jpeg
DECT_01_AI_02_01.jpg
DECT_03_SC_014_01.jpg
DECT_07_CP_ERB_G_04.jpeg
DECT_05_OTP_05_01.jpeg
DECT_01_OPEN_02.jpg
DECT_06_CP_ERB_C_04.jpeg
DECT_03_AI_06_01.png
DECT_03_SC_016_01.jpg
DECT_07_OLE_17_01.jpeg
DECT_05_OPEN_03.jpg
DECT_01_AI_01_04.jpg
DECT_06_OPEN_02.jpeg
DECT_01_AI_07_01.jpg
DECT_03_OPEN_02.jpeg
DECT_07_OPEN_01.jpg
DECT_05_OTP_05_01.jpeg
DECT_07_I_02_01.png
DECT_06_CS_02_02.jpg
DECT_01_AI_05_02.png
DECT_03_CP_ERB_He_05.jpg
DECT_07_CS_01_04.png
DECT_09_open_01.png
bottom of page