top of page
banner.png

Course 2
Making an “Memory Stream” app

Create a working app prototype where users can create posts about things that are important to them. You will create functions that let users sign in, write and save posts, and view their saved items.

Unit 2 – Making it work

Lesson 3 – Adding images and customizing appearance

In this lesson you will learn how to add images and icons to your app.

You can help your app attract users by editing the look and feel so that it provides the sort of environment that you think your users will like. You can add images and icons to your screens, and there are lots of free resources on the internet to help you find these. Finding icons and fonts and free images

The websites https://www.pexels.com/ and https://www.freepik.com are a good resource for finding royalty-free images - this means that there isn’t a licence fee for using the images.

And https://www.bunchof.design/ is a good resource for finding free icons that you can use for buttons or general decoration in your app.

​

​You can add new icons to buttons, and use a large background image on the screen to make it look more interesting and help show the function of that screen. For example, an image of food as a background to the Restaurants screen.

To add an image, click the + button and select Image. Add the image to the top left of the screen. Click on the image and use the left menu to upload your image from your computer, or use an image URL address that you have found online.

App_C2_Unit2_L3_arrangeimage.jpg

You need to make sure the image is in the background, so click on the 3 dots at the top of the left menu, go to Arrange and click Send to Back.

You can now resize the image to cover the whole screen. Finally, you can set the opacity of the image to be around 25%, so that the other components are easier to see. To do this, click on the image, go down to styles at the bottom of the left menu, and change the opacity slider.

App_C2_Unit2_L3_imageopacity.jpg

You should aim to use images and icons that look similar so that the overall look and feel of your app feels consistent and easy to use.

all innovation logos with new ES.jpg

Innovation Hub

©2023 by Innovation Hub. Part of SIP at UAEU

bottom of page