FNB App Academy Lesson 5

This lesson marks the end of the Beginner Phase of the FNB App Academy 2025. If you’ve made it this far, congratulations — you’ve laid the groundwork in HTML, CSS, app strategy, and now, user-focused design.

In Lesson 5, Masi Katrada, Head of Technology at IT Varsity, took students on a deep dive into UX (User Experience) and UI (User Interface) principles. The goal wasn’t to teach you how to make things pretty. It was to teach you how to make apps that people actually want to use.

🧠 What Is UX and Why It Matters

UX is not just about how your app looks — it’s about how it feels to use it. Does it guide users naturally? Is it frustrating or smooth? Does it make people feel in control?

Masi described UX as the emotional journey a user has while interacting with your product. A great app anticipates what users want and structures that experience to feel enjoyable and rewarding.

UX deals with:

• How easy it is to use your app
• How intuitive your layouts and interactions are
• How satisfied the user feels after using it

🖥️ What Is UI?

While UX is the overall experience, UI (User Interface) is the specific interface a user sees and interacts with:

• Buttons
• Text fields
• Menus
• Layout structure
• Visual styles

A well-designed UI is clear, consistent, and functional. It’s the bridge between your app’s power and the user’s ability to access it.

📐 The Foundation: Layouts, Grids & Spacing

Before designing color schemes or buttons, you first need to plan how your page is structured.

Grids

• The grid system is a framework of rows and columns
• It creates structure and predictability
• Responsive apps rely on solid grid planning to adapt to screens

White Space

• Breathing room between elements improves focus and flow
• Avoid cramming elements together
• Use margins and padding to separate text, images, and components

Alignment

• Everything should line up with intention
• Misaligned items make an app look sloppy
• Use your grid system to guide consistent alignment throughout the app

Hierarchy

• Arrange content in order of importance
• Use scale (size) and contrast (color, weight, style) to show what matters most
• Don’t make everything big — guide the user’s attention step by step

Consistency

• Reuse layouts, styles, font sizes, colors, and button styles across all pages
• Create a design system or style guide to enforce this

🧱 Building Blocks: Components and Elements

Apps are built from two types of pieces:

Elements

• The smallest parts of a UI: buttons, paragraphs, icons, images
• Each element must follow spacing, contrast, and font rules

Components

• Groups of elements that form reusable blocks
• Examples: navigation bars, cards, modals, banners
• Consistent components = faster design and easier updates

Design tip: Treat buttons as components. Define their look, behavior, and spacing once — then reuse them across your app.

🔤 Typography

Most apps are made up of text — so type matters.

• Stick to 1–2 fonts maximum (e.g. one for headings, one for paragraphs)
• Use font weight and size to create contrast
• Prioritise readability over style
• Apply spacing rules to typography: use line spacing, letter spacing, and paragraph spacing correctly

🎯 Using Color Effectively

Color is powerful, but it’s easy to misuse.

Tips from the lesson:

• Use the color wheel to build harmonious palettes
• Don’t use too many colors — keep it simple and consistent
• Ensure strong contrast between text and background
• Define your brand’s color system and apply it consistently

🖼️ Icons and Imagery

Visuals must:

• Be styled consistently across the app
• Align with your layout and spacing
• Use the same style set (e.g. Font Awesome icons only)
• Be optimised in size and format

As a designer, you’re responsible for managing how visuals appear and guiding your team or clients to provide assets that match your visual system.

🧭 Menus and Navigation

A good menu is:

• Clear and readable
• Simple — avoid too many nested submenus
• Consistent across all pages
• Responsive to mobile (think: hamburger menu)

Poor navigation can completely break the user experience. Always test your menus early in your design process.

🧲 Proximity and Grouping

Proximity means placing related items close together. It helps:

• Group similar elements
• Create clean visual relationships
• Reinforce layout structure and logical flow

Cluttered apps often break proximity rules by scattering content with no order. Keep similar items together — but leave room between unrelated ones.

🧪 Wireframes, Mockups, and Prototypes

Before you start coding:

• Sketch a wireframe (pen and paper is enough)
• Create a mockup (a styled visual plan using Canva or Figma)
• Build a prototype (a clickable preview to test layout and flow)

These help you get feedback early — before you waste time designing screens that don’t work.

📖 Create a Style Guide

A style guide is a living document that defines:

• Fonts and font sizes
• Color codes
• Component styles
• Spacing rules
• Branding visuals

It helps teams stay on the same page — and helps you stay consistent even if you’re working alone.

🔁 User Flow, Clarity & Feedback

Great apps guide users without needing instructions. That’s where user flow, clarity, and feedback come in.

• User flow: The sequence users move through your app
• Clarity: No instructions needed — icons, buttons, and visuals should guide the user naturally
• Feedback: Sounds, animations, button states — anything that confirms the user’s action

Bonus concept: Microinteractions — subtle feedback cues that make your app feel alive.

♿ Usability, Accessibility & Affordance

• Usability: Your app should be easy to use from the moment it opens
• Accessibility: Support users with different abilities (screen readers, keyboard navigation, etc.)
• Affordance: Visual cues that show how something works (e.g. buttons that look clickable)

📱 Responsive Design – Mobile First

Your users are on mobile — so your designs must adapt. Think beyond shrinking layouts. Touch targets, spacing, and gesture usability all matter.

• Use grid systems that scale
• Test how designs feel on phones and tablets
• Design for thumbs, not cursors

✅ Final Takeaways

• UX = how your app feels
• UI = what your users see and click
• A strong layout is more important than fancy visuals
• Always design with clarity, hierarchy, and consistency
• Start every project with wireframes, mockups, and style guides

This was the most theoretical session of the beginner phase, but it’s also one of the most important. These principles shape how users will experience every app you build going forward.