Lesson video

Hi everyone, my name is Mrs. Welsh.

Today we'll be learning about how to design a mobile app.

Don't worry if this is new to you, I'll be guiding you through each step.

So let's get started.

Welcome to today's lesson from the unit Mobile App Development.

This lesson is called Introduction to App Design.

By the end of today's lesson, you will be able to modify a simple app screen using visual tools to add and arrange interface elements.

So let's get started.

Let's just take a look at the keywords we're gonna be using during today's lesson.

User interface, or UI: the visual part of an app that the user sees and interacts with.

Design mode: the area where you drag and drop elements to create the layout of your app.

Element: a specific part of a user interface.

Property: a setting that changes how an element looks or behaves.

During the lesson today, we're going to be looking at how to describe what an app and a user interface are, create a simple user interface, and finally, use the properties to modify the user interface.

Well, first of all, we're going to look at how to describe what an app and a user interface are.

An application or an app is a type of software that helps you complete a task on a device like a phone, tablet, or a computer.

Apps are designed to solve problems and make life easier.

People use apps every day for many different reasons.

Some common uses include: messaging apps to chat with friends and family; games for fun and entertainment; learning apps to help you study; shopping apps to buy things online; fitness apps to track your exercise or health.

Have a think about all the different apps you've probably used today.

Do any of them fit into these categories? Let's have a look at a question.

What is the main purpose of an app? To make your phone colorful? To show off lots of pictures? To help people do a task? Pause the video now if you need to read back through the question and decide upon your answer.

Let's take a look.

What did you get? If you said C, to help people do a task, you would be correct.

An app is made to help users with a task like playing, learning or messaging.

So if you selected C as your answer, that is correct and well done.

So let's move on.

The way the information within an app is shown to the user is called the user interface.

This is the part of the app that lets the user interact with it.

It can include things like: buttons, input boxes, images, menus, and these are all known as elements.

The user interface is not only about how the app looks, it is also about how the app works for the person using it.

The appearance of an app is important, but a user interface which is easy and comfortable to use will make the app much more accessible.

Have a think about all the different apps you use are the ones that you find easier to use than others.

And this might be because of how the app has been designed and what the screens look like.

A good user interface will have the following characteristics: a clear layout, simple to use, and organized.

Let's have a look at another question.

True or false? A user interface is only about how the app looks.

If you need to pause the video now so you can think about the answer, do so.

What do we think? Is this true or false? If you said false, you would be correct.

The user interface is about both how the app looks and how users interact with it.

So if you said false, well done and let's move on.

Let's have a look at Task A.

You need to use the word bank to fill in the missing words in the sentence.

And we've got four sentences about user interfaces and app design.

The word bank is at the bottom and you can see the words we need to use are : app, user, buttons, easy, and looks, and we've got four sentences.

So A: An blank is a program designed to help people do something on a device like a phone or tablet.

B: A good app is blank to understand and use.

C: The user interface is not just about how the app blank, but also how the blank interacts with it.

And D: People use the user interface to give input by tapping on blank or swiping the screen.

So again, if you need to pause the video now to go back over the questions and fill in the missing words, do so now.

Let's take a look at the answers.

A: An app is a program designed to help people do something on a device like a phone or tablet.

B: A good app is easy to understand and use.

C: The user interface is not just about how the app looks, but also how the user interacts with it.

And D: People use the user interface to give input by tapping on buttons or swiping the screen.

If you got all those words filled-in correctly, excellent job, and let's move on.

Now we're going to take a look at some app designs and we're going to review the app screen and answer the following questions.

So let's take a look at the screen on the right of the slide.

What is the purpose of app A? What is it used for, and who might use it? And then for B, list two user interface elements that you can see in app A.

If you need to pause the screen now to go and answer those questions, do so.

Let's take a look at what we've got.

If you said A, that app A is a weather app.

It is used to check the current weather conditions such as temperature, weather type, for example sunny, and humidity.

And it might be used for people who are planning their day or deciding what to wear, like students, parents or commuters might use it.

If you've got something like that, excellent job.

Yes, it is a weather app.

It's quite obvious because of the layout and it gives some key information about the current weather.

And for B, the elements on the user interface are labels used to display the text like "London" and "Sunny" and the temperature and so on.

And it also has got a weather icon image and this would be another part of the user interface.

So if you've got all of that regarding the app you were shown earlier, excellent job.

You're getting a really good understanding about app design.

So moving on.

For part three, you are going to review the app screen and answer the following questions.

So A: What makes the interface in app B easy to use? And for B: List three user interface elements that you can see in app B.

And for question four: Why is it important for apps to have clear and simple user interfaces? If you need to pause the video now so you can go and read through the questions and create your answers, do so now.

Let's take a look.

What have we got? So for question 3a: The interface in app B is easy to use because it has large, clear buttons, bold text labels, and simple icons.

The layout is clean and organized so users can find what they need quickly.

And for B, we've got play and pause button, song title and artist label, and there's an album artwork or images.

So if you've got that information about the app B, which was a music type app, you've done really well.

And for question four: Why is it important for apps to have clear and simple user interfaces? It is important because users need to understand how to use an app without confusion.

A clear and simple interface helps people find information quickly, prevents mistakes, and makes the app more enjoyable to use.

So if you have written something similar, that's about the app needing to be clear and simple to use, you've done a really good job and you're definitely understanding how apps are developed and particularly user interfaces.

So let's move on.

Now we're going to be looking at how to create a simple user interface.

The user interface, or UI, is made up of elements that people see and touch when they use the app.

When developing a screen for an app, we need to consider what elements to add.

A good UI is not just about how it looks, but about how each element works to help the user.

When developers create apps, they need to think about the user requirements, and these might be things such as who is using the app? So the target audience.

What will they need to do? What information should be shown? What should they be able to press, type or select? Knowing the answers to these questions will help the developer make decisions about what elements to include.

When elements are added to a user interface, the developer must think about where to place them.

If the layout is messy or confusing, users won't enjoy your app.

And a clear layout will group similar items together, make the navigation clear and use space carefully so it is not too overcrowded.

Again, think about the apps you use all the time.

Do they follow these rules? Okay, more than likely any apps that you will be utilizing have thought very carefully about the layout, making it easy to use without having to learn too many new things.

Let's take a look at a question.

What is a user interface element? A: a file stored in the app's memory? B: a part of the code that runs in the background? C: a visual part of the app screen that users interact with? D: a password that gives users access to the app? If you need to pause the video now to read back through the question and select your answer, do so now.

Okay, and what did we get? If you got C, a visual part of the app screen that users interact with, you would be correct.

So excellent understanding of what a user interface element is.

And let's move on.

Most apps are built using a visual tool.

This allows developers to drag and drop user interface elements onto the screen, move them around and organize the layout to suit the needs of the user.

When adding elements to the user interface, the order, spacing and size need to be considered.

We are gonna be using App Lab.

This is a free tool where you can build apps using code or block-based programming.

App Lab lets you create user interfaces by dragging and dropping elements onto the screen.

So let's take a look at it.

When you open up App Lab, the screen has three main parts.

It has the code view, the design mode, and the screen preview.

We can change the view from design mode to code mode.

This would be the screen layout on the left hand side.

So anytime you add an element, you will drag and drop it onto the screen layout.

So you are literally building the screen as you go along.

And to preview it, you'll click the run button and this will allow you to test your app or your screen.

In the middle we have a toolbox of elements and again, we can see we've got all the main things that we would want to build an app such as buttons, text input labels, images and so on.

And then we've also got the properties menu for the elements.

So each element will have its own set of properties, which you'll be able to edit.

When creating a user interface, you need to identify the elements to be included.

To develop a user interface in App Lab, it needs to be set to design mode, and then you can drag and drop the elements from the toolbox onto the screen.

So let's have a look at how we create a user interface.

So on the screen now we've got an example of a very simple user interface that uses a selection of elements.

We have got a label for the title of the app or the screen.

We have got an image, we have got another label for the input box, we have got a text box for the user input, and we have got a button.

So these are all different things that you can add to your user interface in App Lab.

So let's have a look at a question.

True or false? You can only arrange user interface elements in a line across the top of the screen.

True or false? If you need to pause the video now to read through the question and decide on your answer, do so.

Okay, what do we reckon? True or false? If you said false, you would be correct.

And why? You can arrange user interface elements anywhere on the screen.

So again, because it's drag and drop, you can position them wherever you need them for your app user interface.

Okay, so if you've got false, excellent job.

And let's move on.

So for Task B, first part, you are going to create a welcome screen for a learning app that collects the user's name and lets them press a button to start.

Your screen must include a label with the title text, a text input box, and a button to start.

You need to arrange the elements so the screen has a clear layout.

If you need to pause the video now to read back through the task and complete the work, do so.

Okay, let's have a look at what we could have designed.

So if we take a look, we have got our screen set up.

We've got a label right at the top for the title.

We have got a text box for the user input and we have got a button.

So for this one, all we needed to do was add the elements to the user interface, we didn't need to do anything more with them.

For part two, I would like you to match the user interface elements to what they are used for.

So we've got button, text box, image, and label, and we've got a set of definitions.

We need to draw a line from the user interface element to their description.

If you need to pause the video now to read through the task and complete it, do so now.

Let's take a look at the answers.

So if we look at the first one, button, it goes down to the bottom definition, which it starts an action, for example, play or submit.

Text box goes to the third one down which says lets users type in answers.

Image shows a picture or a symbol, and then the final one, label explains what something does.

So if you've managed to match all the user interface elements to their correct definition, good job, you are getting a really good understanding of the different user interface elements and what they do.

So moving on to the third part of the lesson, which is using the properties to modify the user interface.

When we click on an element in App Lab's design mode, a panel appears to the right and this is called the Properties panel.

It allows you to give the element an ID or a name, which is useful when coding interactivity.

It also lets you change how an element looks.

Good apps are easy to read and easy to use.

The Properties panel helps the developer to: edit each element so it fits the user needs, makes the layout clearer, and improves visual appeal.

For example, a bigger font for the title makes it stand out more.

A bright button is easier to spot and click.

And clear labeling of buttons makes it easier to understand what they do.

And if we have a look at an example on the screen, we can see the title is in a nice bold font.

We've got a clear image also to help sort of give an idea about what the app is about.

And the button is bold on the screen and has a clear label about what would happen when we press that button.

The properties that can be edited are: the text, so what the button or label says; the font and font size, so how the text looks and how big it is; color, text color, background color and borders can all be edited.

So you can select your own color themes; images, images can be added or you can also change the picture; position and size, so where things appear on screen and also their height and their width.

And the ID, a unique name for each element.

Let's have a look at a question.

Which of these does not belong? A: set font size? B: change text color? Or C: add a screen transition animation? If you need to pause the video now to read back through the question, do so.

Which one did you decide on? Which of these does not belong? If you said C, add a screen transition animation, you would be correct and well done.

This is something you would need to code.

It is not a feature of the Properties panel.

So if you've got that one correct, well done.

And let's move on.

When we're using the Properties panel for a label, there are a whole list of things that we are able to alter.

So let's take a look at the example on the screen.

We have got: the ability to remove an element from the screen.

So if we've drag and dropped something in by mistake, we can press the delete button and therefore we can get rid of it.

We can also duplicate an element and add it to the screen.

So maybe we need more than one text label, but we would like to keep all the edits we have done.

We can duplicate that item.

Let's have a look at using the properties.

We have an ID for the element.

So this is giving it a unique name, so changing it from the default.

We have text which will display to the screen.

So we can see here that our button is called "Let's go!" and we can see that text label on the design of the screen so we can see it on the preview.

We have also got the properties that change the color of the text, the button background color, the font family, the font size, and the text alignment.

All of these, when you click into, you are able to edit them.

For the color ones, you can see the little color swatch to the right hand side.

So if we click on this example, if we clicked on the white or the green squares, we would be able to select a different color.

With the font family, font size and text alignment, we would click into the box and it will give us a little dropdown list to allow us to change those.

Let's have a look at another question.

True or false? The Properties panel lets you change a button's position on screen.

True or false? If you need to pause the video to decide upon your answer, do so now.

So what do we think? Is this true or false? If you said true, you would be correct and well done.

And why? You can adjust the X and Y values to move elements around the screen.

So they are also in the properties, and by dragging and dropping the elements around, you will see the X and Y values change in the Properties panel.

So if you got that right, excellent job.

And let's move on.

For Task C, you're going to open the oak.

link/8-ball and you're going to improve the start screen so it looks clearer, more attractive and easy to use.

You'll be editing elements and using the Properties panel to make the changes.

One: Change the main title label to font size 30.

Two: Make sure the title label is in the center of the screen.

Three: Change the image width and height.

Four: Change the button color to the color code that has been given.

And five: Change the screen background color to the color code that has been given.

If you need to pause the video to read back through the task and complete the changes, do so now.

Let's take a look at what the screen updates should look like.

We have got the text size now set to 30.

The background color has been updated, the bottom color has also been updated, and the height and width of the image are now 150.

Did you manage to do all of that? You may have gone beyond the task and edited it further.

You may have selected different colors.

You may also have gone and updated the image or changed the button color to different ones.

But as long as you have gone through the properties and you have been able to update all the different elements in terms of being able to use text size, background colors, looking at the heights and the width and so on, then you've done a really good job on this task, and well done.

So for a summary of today's lesson: A user interface, or a UI, is part of the app users see and interact with.

It must be clear, easy to use and helpful.

Design mode and the Properties panel allow elements on an app screen to be modified.

A good user interface is not just about how it looks, it should provide clear instructions and make the app enjoyable to use.

So thank you for joining me today for our first look at mobile app development.

I hope you found this lesson interesting and I hope you will join me next time.