Chapter 1

1.1 What is an App?

An app, short for application, is a program designed to help users complete specific tasks on a digital device such as a phone, tablet, or computer. Whether someone wants to chat with friends, listen to music, shop online, or learn something new, there’s likely an app built for that purpose. Apps have become an essential part of daily life and are used across all industries and age groups.

While all apps serve a purpose, they’re not all built the same way. Developers choose different approaches based on what the app needs to do, where it will be used, and who will use it. Generally, apps fall into one of three categories: native, web, or hybrid.

1.1.1 Native Apps

A native app is created for one specific platform, like Apple’s iOS or Google’s Android. Because it’s tailored to that system, it runs smoothly and can take full advantage of the device’s features, like its camera, microphone, or GPS.

For example, when you use an app like Instagram or Spotify, you’re likely using a native version built just for your phone’s system. These apps usually perform well and feel very responsive. However, they take more time and resources to develop since a separate version must be built for each platform.

While native apps offer great performance and offline access, they also require users to download and install them from an app store. Developers also have to maintain separate versions of the app and push out regular updates to keep everything running well.

1.1.2 Web Apps

Unlike native apps, web apps don’t live on your device—they live in your browser. They’re built using web languages like HTML, CSS, and JavaScript, and they can run on almost any device with an internet connection.

Think of tools like Google Docs or the web versions of Facebook and YouTube. You open them in your browser and use them without needing to install anything. This makes web apps easier and cheaper to build since one version can work across all devices. However, they rely on an internet connection and can’t access a device’s features as fully as native apps can.

Web apps update automatically, and you always see the latest version when you open them. Still, their speed and responsiveness can fall short compared to native apps, especially on slower networks or older devices.

1.1.3 Hybrid Apps

A hybrid app is a bit of both worlds. It’s built using web technologies but packaged in a way that allows it to be installed like a native app. This means you can download it from an app store, but behind the scenes, it works like a web app.

Apps like Twitter and Uber use hybrid technologies to deliver their services across platforms without rewriting the entire app for each one. Hybrid apps are a practical choice when you want something faster and less expensive to build than a native app, but still want it to live in app stores and access some device features.

While hybrids can save time and money, they sometimes lag behind native apps in performance. Their reliance on web code can make them slower or less smooth in certain situations, especially when the app is doing a lot of work in real time.

1.1.4 Why This Matters for Developers

For developers, deciding how to build an app is one of the most important early decisions. If the app needs to be fast and make full use of a phone’s features—like in gaming or video—it’s often best to go native. If the goal is to reach users quickly and work across all devices, a web app might be the better path. And if there’s a need to balance reach and performance without rebuilding everything twice, hybrid can be a smart compromise.

Understanding these differences helps developers choose the best strategy for their goals and their users.

---

1.2 The Role of UI/UX in App Development

No matter what kind of app is being built, design plays a huge role in how users interact with it. Two key parts of design are the user interface, or UI, and the user experience, or UX. These two elements work together to make sure an app is not just functional, but also enjoyable and easy to use.

1.2.1 What is UI?

User Interface refers to the visual side of an app—what you see on the screen and how things look. This includes the layout of buttons, the fonts used for text, the colors on each screen, and how you move from one part of the app to another.

When the UI is well-designed, users can quickly figure out what to do and where to tap. Apps like weather forecasts or music players often have great UI because they present information clearly and use icons and labels that are easy to recognize. If the UI is cluttered or confusing, users may get frustrated, miss important options, or tap the wrong buttons.

Good UI design helps people get things done without having to stop and think about how to do them.

1.2.2 What is UX?

User Experience focuses more on how an app works and how it feels to use it. It’s not about colors or fonts, but about whether tasks are easy to complete and whether the app responds in helpful ways. A great UX makes people feel like everything just works.

For example, a ride-sharing app that helps you book a trip in just a few taps—and keeps you informed every step of the way—has strong UX. On the other hand, if an app loads slowly, hides important information, or crashes when you’re in the middle of something, that’s a sign of poor UX.

Designers think about things like how many steps a task takes, whether the app gives feedback when you take an action, and how it handles errors. These choices can mean the difference between someone using the app every day—or deleting it after a few minutes.

1.2.3 Why UI and UX Are Both Essential

While they’re different, UI and UX are closely connected. A beautiful app with poor UX may still be frustrating to use. A very functional app that looks unappealing may not keep users engaged. A successful app needs both: clear visuals and a smooth, thoughtful experience.

Apps like TikTok show how these come together. Its interface is simple and clean, allowing users to jump into content right away. The experience feels smooth, and users get immediate feedback through likes, comments, and endless content suggestions. That’s good UI and UX working together.

1.2.4 Tailoring Design for Different Apps

The importance of design shifts slightly depending on the type of app. In social media apps, users expect fast interactions and content that loads instantly. In games, the interface should be immersive and responsive. For shopping apps, a clean, easy checkout process is essential. And in educational apps, students need a layout that’s not only easy to understand but also keeps them engaged.

Designers must keep the app’s audience and purpose in mind, making choices that match the expectations of those who will use it most.

1.2.5 Exploring UI/UX Through Activities

To better understand how apps are shaped by design, students can look closely at apps they already use. By reflecting on what makes a favorite app easy to use—or what makes a frustrating app hard to enjoy—they’ll begin to see how UI and UX affect real experiences. Sketching improved versions of apps with poor design is a great way to apply what they’ve learned and think like designers.

---

1.3 Figma and FigJam: Tools for App Design

Creating an app takes more than just an idea. Designers and developers need tools to help plan, sketch, and prototype their ideas—and that’s where Figma and FigJam come in.

1.3.1 Figma: A Tool for Designing Apps

Figma is an online tool used to design what an app will look like. Designers use it to create digital screens that show what users will see and how they will move from one screen to the next. One of Figma’s best features is that it allows people to work together in real time, even if they’re in different locations.

In Figma, students can design a login screen, arrange buttons, add images, and link screens together to create a clickable version of the app—called a prototype. These prototypes help show how the app would actually work, without needing to write code.

1.3.2 FigJam: A Space for Brainstorming and Planning

While Figma focuses on visual design, FigJam is all about planning. It’s an online whiteboard where teams can sketch out ideas, make flowcharts, and jot down notes. During the early stages of app creation, FigJam is where ideas come to life.

Students might use FigJam to brainstorm app features, organize their thoughts using sticky notes, or map out how a user moves from one part of the app to another. It’s a flexible space for creativity and collaboration before final designs are made.

1.3.3 When and How to Use These Tools

Most projects start in FigJam. After brainstorming and sketching rough layouts, students move into Figma to polish their designs and create realistic prototypes. Together, these tools help turn a vague idea into a fully developed plan.

By practicing with both, students learn to think through a problem, explore solutions visually, and test how real users might interact with their app.

---

1.4 The App Development Process

Building an app doesn’t happen all at once. It moves through clear stages, each one helping refine the idea and prepare it for real users. Jumping into coding too soon can lead to confusion and wasted effort. That’s why developers follow a thoughtful process that includes ideation, wireframing, prototyping, and development.

1.4.1 Starting with Ideation

The first step is to define the app’s purpose. Who will use it? What problem will it solve? What makes it useful? In this stage, students explore ideas, ask questions, and imagine how their app could make life easier or more fun.

FigJam is especially helpful during this phase, as students can map out their ideas and collaborate on the app’s core features.

1.4.2 Moving to Wireframing

Once the app’s idea is clear, students sketch what it might look like. These rough sketches—called wireframes—show where buttons, text, and images will go on each screen. Wireframes aren’t about color or style; they’re about structure.

By wireframing in FigJam, students can try out different layouts and make changes before moving into the full design stage.

1.4.3 Building a Prototype

Next, students take their wireframes and build an interactive version in Figma. The prototype lets users click buttons and move through the app, simulating the real experience. This helps uncover any confusing parts or missing features.

1.4.4 Turning Designs into a Working App

In the final stage, developers begin writing code to build the real app. They use tools and programming languages to bring the design to life. At this point, the visual design from Figma becomes the blueprint for development.

Vocabulary Review

Term	Definition
App	A software program designed to perform specific functions on a device, such as a smartphone, tablet, or computer.
Native App	An app built specifically for a particular operating system (iOS or Android) that runs directly on a device.
Web App	An app that runs in a web browser and does not require downloading from an app store.
Hybrid App	An app that combines features of both native and web apps, using web technologies but running within a native shell.
User Interface (UI)	The visual design of an app, including buttons, colors, text, and layout that users interact with.
User Experience (UX)	The overall experience of a user when interacting with an app, focusing on ease of use and functionality.
Wireframing	The process of creating a simple visual blueprint for an app’s structure before adding design details.
Prototyping	The creation of an interactive model of an app to test its functionality before full development.
Figma	A web-based UI/UX design tool used for creating high-fidelity app prototypes and layouts.
FigJam	A digital whiteboarding tool for brainstorming, planning, and creating low-fidelity wireframes.
Navigation	The way users move between different screens and features within an app.
Responsive Design	A design approach that ensures an app or website adapts to different screen sizes and devices.
Interactive Elements	Components like buttons, sliders, and menus that allow users to interact with an app.
Accessibility	Designing an app to be usable by people of all abilities, including those with disabilities.
Feedback	Visual or audio responses given to users after an action (e.g., button clicks, error messages).
Usability	How easy and efficient it is for users to navigate and interact with an app.
Navigation Bar	A menu that allows users to move between different sections or screens of an app.
UI Components	Elements like buttons, icons, text fields, and images that make up an app’s interface.
Layout	The arrangement of elements on an app screen, including spacing and alignment.
App Development Process	The steps involved in creating an app, including ideation, wireframing, prototyping, and coding.