(AIS) Using Color and Font to Enhance Design Lesson

Using Color and Font to Enhance Design

A good user interface should be user friendly, efficient and aesthetically appealing. Color, fonts and graphics help create the overall effectiveness of your app.    

Color

R C B color schema

The colors you use in your app set the tone for what people feel when they interact with and use your app.

Research colors and color schemes to learn more about which ones to choose for your app. The websites listed in the sidebar are a good place to start.

make color -> make a lit 255 0 0

We know in App Inventor you can create your own colors by using the make color block. It stores a list of three input values that correlate to the rgb value of the color. The RGB model is an additive color model in which red, green and blue lights are added together in various ways to reproduce a broad array of colors. Color values range from 0 to 255.  

You can use the Internet to help you find colors and color schemes that work well together to design exceptionally beautiful user interfaces. There are several websites listed in the sidebar for researching different color schemes. Check out other apps as well to see how they use color.  

shades of color UI: Pick a blend to load ... #9E8E00 HTML RGB 158/142/0 HTML #EBD300 RGB 235/211/0 RGB 32/77/107 HTML #204D6B RGB #69A7D1 HTML 105/167/209 HTML #9E9E9E RGB 158/158/158 HTML #6161 RGB 97/97/97

Using Images for Components

A button component in App Inventor can store an image.

Examples of button images:

check button, minus button, dots button, play button

Fonts

UI Font: Properties instructionsLabel BackgroundColor White FontBold Fontitalic FontSize14 Font Typeface default. HTMLFormatThere are limited fonts in App Inventor. However, Labels can contain a limited subset of HTML tags as well as text to add text enhancements. You activate this feature by checking the HTMLFormat checkbox in the designer property feature.

The code below shows the Label1 text set to text that contains html code to make type big, small and change the font color.

Hi there <br> can this be <big><b>big and bold</b> or <small>small</small>or <font color="red">red</font>?

example of the previous tag: Hi there can this be big and bold or small or red?

Screen1 (screenshot) Italicize text bold text underline text use hex # to change color change font typeface Create small text Create big text Use color word "Aqua" Text for Button1The image shows the text displayed for different labels created using html for italics, bold, underline, hex # for color, typeface, and other html tags for big and small text.  

 

 

 

 

 

The chart below list html tags to create different text effects.

Attribute, Beginning Tag, Text to change, Ending Tag color Change the color of words <font color="Aqua"> *There are over 140 color words to choose from If the color word does not work use the Hex Code. <font color="#FF6347"> </font> big Defines big text <big> Will change the font to big for the text between the tags </big> small Defines small text <small> Will change the font to small for text between the tags </small> face Change the font <font face="Century Gothic"> <font face="Times New Roman"> Will change the font for text between the tags </font> br line break <br> Will create a line break after the tag No ending tag b bold <b> Will bold the text between the tags </b> u underline <u> Will underline the text between the tags </u> i italicize <i> It will change the color of the text between the tags Will italicize the text between the tag </i>

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION