4.2 Concept of UI/UX: Concept of Wireframe, Wireframe Design

 

4.2 Concept of UI/UX: Concept of Wireframe, Wireframe Design

 

Front-End

·       The front-end is the part of an application or website that users directly interact with.

·       It is often referred to as the "client side" of an application.

·        Examples: Webpages, forms, menus, and buttons that users click, The layout of a mobile app or a website.

 

Back-End

·       The back-end is the part of an application that operates behind the scenes like handling data processing, storage, and server-side logic.

·       It is often referred to as the "server side" of an application.

·       Examples: Retrieving data from a database when a user logs in, Storing user preferences or purchase history.

 

User Interface (UI)

·       UI is the visual part of an app or website that users interact with — including buttons, icons, colors, fonts, and layout.

·       UI focuses on how a product looks and feels visually — it's all about design and presentation.

·       E.g. In the Daraz or eSewa app, the home screen layout, colorful icons, and menu buttons are all part of the UI.

 

 

User Experience (UX)

·       User Experience (UX) is the overall feeling and flow a person has while using a product — it includes ease of use, speed, satisfaction, and usefulness.

·       UX focuses on how the product works and whether users can complete their tasks easily and happily.

·       E.g. If we can book a bus ticket in 2 clicks and feel confident while using the app, that’s good UX.

 

Advantages of UI (User Interface) Design:

·       Makes the app or website look attractive and professional.

·       Helps users easily see and understand what to do.

·       Organizes buttons, icons, and content clearly.

·       Supports brand identity through colors, fonts, and layout.

 

Advantages of UX (User Experience) Design:

1.     Makes the app or website easy to use and navigate.

2.     Helps users finish tasks quickly with less effort.

3.     Increases satisfaction and builds user trust.

4.     Saves time and money by fixing problems early.

 

Software used for UI/UX design

·       Figma: It is used for collaborative design where multiple people can work on the same project simultaneously.

·       Adobe XD: It is used for creating different interfaces, buttons, and layouts.

·       Balsamiq: It is a software used for creating wireframes.

 

Concept of wireframe

·       A wireframe is a basic sketch or layout of a screen that shows where things will be placed — without color or design.

·       The purpose of wireframe is to plan the structure and layout of an app before adding visual design or functionality.

·       We can use different software such as Sketch, Figma, and Balsamiq to design wireframes.

 

Concept of wireframe design

Wireframe design is the process of creating a simplified representation of a user interface (UI) or webpage.

 

Here are the key aspects of wireframe design:

·       Layout structure – Shows the basic arrangement of screen sections.

·       UI element placement – Displays where buttons, text, and images will be placed.

·       Content hierarchy – Organizes content from most to least important.

·       User flow – Shows how users move from one screen to another.

·       Navigation design – Adds menus or tabs to help users explore the app.

·       No visual styling – Uses only simple shapes without colors or fonts.

 

Benefits of wireframe

·       Easy to draw – Wireframes use a simple and clean layout with basic screen elements.

·       Easy to understand – They focus on only the essential parts, without colors or decorations.

·       Easy to modify – You can update wireframes without knowing any programming language.

·       No coding required – Wireframes can be created like simple sketches using drawing tools or paper.

 

How do UI, UX, and Wireframe work together?
Wireframe builds the layout → UX designs the experience → UI makes it visually attractive and interactive.

 

What’s the difference between UI and UX in one sentence?
UI is what you see, UX is how it works and feels.