User Interface Design: What It Means and How It Looks

UPI Study › Courses › System Analysis and Design › Free lessons › Lesson 5.2 Free with a free account

User Interface Design: What It Means and How It Looks

System Analysis and Design · Chapter 5: Interface Design and Systems ArchitectureSection 5.2 · lesson 35 of 697 min · free with a free account

← Rules and Guidelines for Human-Centered Interface DesignNext lesson: Building Effective Graphical User Interfaces (GUIs) →

Earn 3 college credits for System Analysis and DesignRecommended for credit by NCCRS · Computer Science 390 · self-paced · one payment, lifetime access
Enroll in System Analysis and Design · $250 →Download the syllabus (PDF)

In this lesson

UI vs. UX, 5 interface types, visual design elements, wireframes and mockups.

  • Define UI design, and how it differs from UX design
  • Identify 5 common interface types, with an example of each
  • Explain how layout, hierarchy, typography, and color work together
  • Distinguish a wireframe from a mockup, and when to use each

Transcript

Everything said in the video, section by section (925 words). Read along, or search it.

Interface Design and Systems Architecture

User Interface Design

Every system a user interacts with directly needs an interface. And how that interface looks and behaves shapes whether people can actually use the system successfully. This section gives you the vocabulary you need before working with a design team. What U I design is, and how it differs from U X design. Five common interface types, four visual design elements, and the difference between a wireframe and a mockup.

What UI Design Is

The Surface People See and Touch

User interface design, or U I design, is the practice of designing the screens, controls, and visual elements a person uses to interact with a system. That means buttons, menus, forms, icons, and the layout that arranges them. It focuses on how the system looks, and how its controls behave. The goal is that people can find what they need, and complete a task without confusion. Every screen a user struggles with is a small failure of U I design.

Often Confused

UI vs. UX

U I design is often confused with U X, or user experience design. But the two cover different scopes. U X design is the broader discipline. It is concerned with a person's entire experience and satisfaction using a system. That includes things a screen alone cannot fix, such as how easy the system is to learn, or how well it fits into someone's actual workflow. U I design is one part of achieving good U X. It is the visual and interactive layer the person actually sees and touches. A U I question sounds like, is this button easy to find and tap? A U X question sounds like, can a new user complete their goal without frustration? A useful shorthand. U X asks whether the system solves the right problem, in a way people can succeed with. U I asks whether the screen in front of them makes that success easy.

Figure 1

5 Interface Types

Systems accept input from people through several distinct interface types. These five are listed roughly in the order they became widespread. A command-line interface. The user types text commands, and reads text output. Think of a developer running Git commands in a terminal. A graphical interface, or G U I. The user works with windows, icons, menus, and a pointer, as in a desktop spreadsheet application. A touch interface. The user interacts directly with the screen, through taps, swipes, and gestures, as in a smartphone banking app. A voice interface. The user speaks commands, and receives spoken or on-screen responses, like a smart speaker setting a timer. And a conversational interface. The user carries on a natural-language dialogue, often with an A I assistant, like a customer support chat widget. Most large systems today combine more than one of these.

Figure 2

4 Visual Design Elements

Four visual elements work together on nearly every screen. Layout is the arrangement of elements on the screen. It establishes where a user looks first, second, and last. Hierarchy is the relative size, weight, and placement that signal which elements matter most. Typography is the choice of font, size, and weight, used to distinguish headings, body text, and labels. And color is the palette used to group related elements, signal state, and draw attention to key actions. No single element does the job alone. Together, they guide the user's attention, and make an interface easy to read at a glance.

Figure 3

Wireframe vs. Mockup

Before a screen is built, it is usually represented in one of two ways. On the left is a wireframe. It is a low-fidelity sketch, focused purely on layout and structure. Where elements sit, not how they look. Every element is a gray placeholder. A logo, a headline, a button, and a grid of product boxes. On the right is a mockup of the same screen. It is a high-fidelity representation, with real colors, fonts, and content. Here, an app called MyApp, announcing a summer sale of up to forty percent off select styles, with a shop now button. It shows what the finished screen will actually look like. Same structure, very different levels of detail.

Choosing a Representation

When to Use Each

So when would an analyst use each? A wireframe confirms that the layout and structure work, before anyone invests in visual design. It is very fast to produce, and easy to sketch and revise. It typically appears early, right after requirements are validated. A mockup confirms the finished visual design, before anyone invests in code. It is slower to produce. Each visual change takes more effort. It typically appears later, once the layout is settled. The logic is the same one you have seen throughout this course. Settle the cheap decisions while changes are cheap. Then invest in the expensive ones.

Key Terms

The Vocabulary of This Section

Let's lock in the key terms. U I design is designing the screens, controls, and visual elements a person uses. U X design covers their entire experience and satisfaction. A command-line interface uses typed text commands and text output. A conversational interface is a natural-language dialogue, often with an A I assistant. Layout is the arrangement of elements. Visual hierarchy signals which of them matter most. And a wireframe is a low-fidelity layout sketch, while a mockup is a high-fidelity visual representation.

Key Takeaways

What to Carry Forward

To pull this together. U I design covers the visual and interactive surface of a system. U X design covers the person's entire experience. Systems commonly combine several interface types. Command-line, graphical, touch, voice, and conversational. Layout, hierarchy, typography, and color work together to guide a user's attention across a screen. A wireframe is a fast, low-fidelity layout sketch. A mockup is a slower, high-fidelity visual representation. And wireframes come early, right after requirements are validated, with mockups following once the layout is settled.

About System Analysis and Design at UPI Study

System Analysis and Design (Computer Science 390) is a self-paced online course of 69 video lessons in 9 chapters, from the analyst's role and requirements to UML modeling, interface and database design, testing, maintenance and project management. It carries a NCCRS credit recommendation for 3 semester credits.

Every lesson transcript is free on pages like this one, and the videos are free with a free UPI Study account. Enrolling adds a practice quiz after each lesson, the graded work and final exam that earn the credit, lifetime access, and an official transcript on completion. UPI Study has helped over 130,000 students with college credits. ACE and NCCRS have over 2,100 cooperating colleges that will consider accepting credits; the final decision is with the universities.

Enroll now → Course details Download the syllabus All Computer Science courses Every course with PRO →

Compare: Software Engineering vs Systems Analysis

Why take it here

Why students take System Analysis and Design with UPI Study

From business problem to working systemSystem Analysis and Design teaches how analysts study a business need and turn it into a system design: requirements, UML and data-flow models, interface and database design, implementation and project management. It is a core course in information systems and IT degrees.
Credit at a fraction of the priceThe same 3 credits can cost $750 or more at a US college. Here it is one payment, self-paced, with lifetime access.
Finish your degree soonerTransfer credits reduce the courses you still owe, so you can graduate earlier or lighten a heavy semester.
Strengthen an applicationA completed college-level course on an official transcript shows admissions and scholarship committees you can do the work.
Study on your own scheduleNo start dates, no deadlines. Watch the lessons, practice, and take the final when you are ready.
130,000+students helped with college creditsACE and NCCRS have over 2,100 cooperating colleges that will consider accepting credits; the final decision is with the universities.

Where the credit goes

Universities that work with NCCRS

System Analysis and Design carries a NCCRS credit recommendation. These universities work with NCCRS; some are UPI Study's signed partners. ACE and NCCRS have over 2,100 cooperating colleges that will consider accepting credits; the final decision is with the universities.

Thomas Edison State UniversityThomas Edison State UniversitySigned partnerUniversity of the PeopleUniversity of the PeopleSigned partnerCharter Oak State CollegeCharter Oak State CollegeSigned partnerStrayer UniversityStrayer UniversitySigned partnerColumbia Southern UniversityColumbia Southern UniversitySigned partnerIndiana TechIndiana TechSigned partnerPenn StatePenn StateWorks with NCCRSSouthern New Hampshire UniversitySouthern New Hampshire UniversityWorks with NCCRSSUNYSUNYWorks with NCCRS +many more cooperating universitiesFind my college →

Find my college → Not listed? Ask Athena in the corner of this page, or book a 15-minute call.

FAQ

Questions students ask us

About User Interface Design: What It Means and How It Looks

What is the difference between UI design and UX design?
UI design covers the screens, controls, and visual elements a person uses to interact with a system, while UX design covers the person's entire experience and satisfaction with it. UX includes things a screen alone cannot fix, such as how easy the system is to learn or how well it fits a workflow. A UI question is whether a button is easy to find; a UX question is whether a new user can reach their goal without frustration.
What are the five common types of user interfaces?
Five common interface types are command-line, graphical, touch, voice, and conversational. A command-line interface uses typed commands and text output, like Git in a terminal. A graphical interface uses windows, icons, menus, and a pointer. A touch interface uses taps and swipes, as in a phone banking app. A voice interface uses spoken commands, and a conversational interface is a natural-language dialogue, often with an AI assistant.
How do layout, hierarchy, typography, and color work together in UI design?
Layout, hierarchy, typography, and color work together to guide a user's attention and make a screen easy to read at a glance. Layout arranges elements and sets where the eye goes first. Hierarchy uses relative size, weight, and placement to signal what matters most. Typography uses font, size, and weight to separate headings, body text, and labels. Color groups related elements, signals state, and highlights key actions.
What is the difference between a wireframe and a mockup?
A wireframe is a low-fidelity sketch focused on layout and structure, using gray placeholders, while a mockup is a high-fidelity representation with real colors, fonts, and content. A wireframe is fast to make and revise and usually appears right after requirements are validated, confirming the layout works. A mockup takes more effort, comes once the layout is settled, and confirms the finished visual design before coding begins.

About the System Analysis and Design course

How many college credits is System Analysis and Design?
System Analysis and Design (Computer Science 390) carries a NCCRS credit recommendation for 3 semester credits. ACE and NCCRS have over 2,100 cooperating colleges that will consider accepting credits; the final decision is with the universities.
How much does System Analysis and Design cost and what is included?
$250, paid once, with lifetime access: all 69 video lessons, a practice quiz after each, the graded work and final exam, and an official transcript when you finish. Students who want several courses choose UPI Study PRO instead.
Which universities accept UPI Study credits?
UPI Study has signed partner agreements with universities such as Thomas Edison State University, University of the People and Charter Oak State College, and works with universities such as Penn State, SNHU and SUNY. ACE and NCCRS have over 2,100 cooperating colleges that will consider accepting credits; the final decision is with the universities. Use "Find my college" on this page to check yours.
How long does System Analysis and Design take?
It is self-paced with no deadlines. The 69 lessons total about 9 hours of video; most students add reading and practice time and finish in a few weeks to a few months, on their own schedule.
How are the exams done?
Quizzes and assignments are online in the course. The final exam is taken online with proctoring; a person on the UPI Study team checks assignments, usually within two days.
How do my credits reach my college?
When the course shows 100% complete, request the official transcript from your dashboard. It is sent to the college you name, and you can send it to more than one. Check your college first with "Find my college" on this page, or ask Athena.

Ready for the full course? Earn 3 credits in System Analysis and Design.

69 video lessons, a quiz after each one, and the graded work that earns the credit. Recommended for credit by NCCRS.

Enroll in System Analysis and Design →Download the syllabusEvery course with PRO →
System Analysis and Design
3 credits · NCCRSEnroll →