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'll 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 parts 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 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.

We're, first of all, 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 colourful, 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 you 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 organised.

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 programme 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 programme 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, the 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 3, 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 4, 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 3, A, 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 organised, so users can find what they need quickly.

And for B, we've got Play and Pause button, song title, an 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 4, why is it important for apps to have clear and simple user interfaces? It's 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 utilising 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 the 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, 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 organise 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 have 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 need to do was add the elements to the user interface.

We didn't need to do anything more with them.

For Part 2, 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.

You 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, 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 let's 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 labelling 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.

Colour, text colour, background colour and borders can all be edited.

So you can select your own colour 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 colour.

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 colour of the text, the button background colour, 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 colour ones, you can see the little colour 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 colour.

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 and dropping the elements around, you will see the x and y values change in the Properties panel.

So if you've 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 Magic 8 ball 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, Magic 8 ball, to font size 30.

Two, make sure the title label is in the centre of the screen.

Three, change the image width and height to 150 pixels.

Four, change the button colour to the colour code that has been given.

And five, change the screen background colour to the colour 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 colour has been updated.

The button colour 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 colours.

You may also have gone updated the image or changed the button colour 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 colours, looking at the height and the width and so on, then you've done a really good job on this task and well done.

So for summary for 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'll join me next time.