Bitfountain iOS Design Foundations

Artboards

• Adding an artboard in Sketch is very easy. Use keyboard shortcut “A” or the drop down menu to choose from several artboard presets or add your own custom presets depending on your needs.
• Resize artboards by selecting the title in the top left-hand corner of the artboard OR by selecting the artboard in the layers list on the right-hand side of the Sketch window and resize using the breakpoints to drag and change dimensions. As with any object, resizing can also occur manually in the top-right hand corner of the Sketch Window.
• Artboards cannot be rotated and must be rectangular.

Layers List

• A list of all layers in the Sketch file are listed and nested on the left-hand toolbar.
• Reorder layers by dragging them within the ordered list.
• Rename Layers by double clicking on the layer in the list or right-clicking on the layer itself and selecting “Rename”

Customizing Top Toolbar

• If this is your first time using Sketch, you may have noticed that your toolbar here at the top does not have quite as many shortcuts as mine. As you develop your own workflow in Sketch, you will likely find that there are some items that you would like available for quick reference up at the top of the sketch window to prevent you from having to access those tools in the dropdown menus.
• To customize the toolbar, right-click in a blank gray area of the upper toolbar and choose “Customize Toolbar.” Drag-and-drop to rearrange and remove items in the toolbar according to your own liking. You can also revert back to the default toolbar at any time by dragging and dropping the default toolbar into place at the top of the window. This will replace whatever changes you have previously made.

Vectors

• Access the vector tool using keyboard shortcut “V” and use the pointer to draw the form you would like.
• Unlike Illustrator, Vector points can only spawn one vector line at a time (i.e. a single breakpoint cannot be home to more than one converging vector stroke). In this way, complex polygonal forms where vectors meet in several places are relatively challenging in Sketch.
• To close a vector path to create a solid, you generally have two options. Either click again on the point of origin from the last point drawn OR in the menu: Layer>Paths>Close Path.
• If you wish to reverse the order of the paths you have drawn to be able to extend your vector line from the opposite end: Layer>Paths>Reverse Order.
• Cut vector sections of any border using this handy tool. It is a little used feature that can actually help you out quite a bit. You’ll know when to use it...just don’t forget it’s there.

Bezier Curves

Sometimes you wish to manipulate your rounded vector lines and joints as. In this common circumstance you will be dealing with Bezier Curves. Please take the time to familiarize yourself with these four options:

• Straight: sharp point (Keyboard Shortcut: “1”)
• Mirrored: either side of the breakpoint reacts identically (Keyboard Shortcut: “2”
• Disconnected: either side of the breakpoint react completely independently (Keyboard Shortcut: “3”)
• Asymmetric: Somewhat difficult to describe but changes to the line react together but not identically.

Shapes

Sketch has a few default shapes available from which it is possible to build a plethora of other shapes and forms: Rectangle, Oval, Rounded Rectangle, Star, Polygon, and Triangle.

Group/Ungroup Layers:

• Option 1: Select desired layers, then Command+G.
• Option 2: Select desired layers, then right-click>Group Selection.

Edit the bezier curves/breakpoints if any selected object using the toolbar button. Alternatively: double click on the object until you see these parameters appear.

Move layer Forward/Backward

Move layers forward or backward in the document by using these toolbar shortcuts or “Command + Option + up/down arrow keys.”

Borders

Adjust border thickness, color, and position as well as other options including stroke in the right toolbar of the sketch window.

Fills

• Flat Color: Fill shape with a solid hexadecimal color
• Linear Gradient: Fill shape with a linear gradient. Choose as many colors as you wish. Adjust opacity, and change the angle and position of the gradient within the shape.
• Radial Gradient: Fill shape with a radial gradient. Choose as many colors as you wish. Adjust opacity, and change the position and scale of the radius using the provided tools
• Pattern Fill: Use one of the sketch pattern presets or upload your own image for use as a fill
• Noise fill: I pretty much never use this feature but it can be useful if you want to add texture to your fills.

Union/Subtract/Intersect/Difference

Manipulate layered shapes using these four VERY useful tools.

• First, select at least two shapes and then choose one of the four options. The icons are very clear about how the shapes should react each time but I suggest trying each of them out.
• Use the “edit” tool to change how the combined layers are positioned, as well as each individual shape.
• All original shapes have been preserved so you can undo these four actions at any time.
• Note: Styling inherited from bottom-most layer.

Text

• Keyboard shortcut “T”
• Draw your text entry area and type.
• Text parameters are found on the right-hand toolbar toward the center of the Sketch window
• Choose from existing or add new text styles using the dropdown menu just above the font adjustment area.
• Converting Text to vector outlines: Right-click>Convert to Outlines

Adding Images

• Option 1: Drag and drop into Sketch from anywhere (Internet, Finder, Desktop)
• Option 2: Insert>Image
• Option 3: Fill any shape with an image fill (Click on the color fill from the right-hand toolbar>select “Pattern fill”>Choose Image...

Symbols

• The iOS UI symbols are included in the “iOS UI Design” template that comes with Sketch.
• Add a new symbol with the toolbar button.

Make Grid

Duplicate any object and automatically arrange it in grid-formation using the “Make grid” tool.

Transform

Skew a layer symmetrically using this tool

Rotate Layer

• Option 1: Manually enter the number of degrees you would like to rotate the item. Positive numbers move the shape counter clockwise and negative numbers rotate the shape clockwise.
• Option 2: Holding command, hover over one of the four corner breakpoints>hold>rotate.
• Option 3: Choose the “Rotate” tool from the top toolbar.
• Option 4: Select Layer>Command+Shift+R>Rotate layer by clicking and dragging a corner.
• Option 5: Layer>Transform>Rotate Layer>Rotate layer by clicking and dragging a corner.

Rotate Copies

Rotate copies around a center point with this tool. The selected copy counts as a layer so to achieve 10 copies enter “9.” Then adjust the radius and angle of the objects. This cannot be undone so if you’ve made a mistake then you will need to start over. However, each shape can still be edited one at a time.

Mask

• Use a mask to nest any series of layers within the confines of the uppermost layer.
• Prevent layers from being included in the mask by right clicking the desired layer in the left-side toolbar and selecting “Ignore Underlying Mask.”

Flip Tool

Flip object across a vertical or horizontal axis.

Sketch Mirror

• Preview your designs on your device using this feature. You must have the Sketch Mirror app installed on your phone.
• Connect device to your computer or to the same wifi network. Once the indicator appears, select the device you wish to pair from the dropdown menu and freely navigate your artboards on the actual device. Changes made on the computer appear in real time on the device.

Exporting

• Select an individual layer or group of layers and on the right-hand toolbar select “Make Exportable”
• Choose parameters for export.
• Confirm export and choose location for saving.

Core Design Elements / Opening Notes for Noodle App:

• Tab bar (3 main pages, no need for a hamburger menu on this one. New/Featured Recipes, My Favorite recipes (will not design this page), Search Recipes. Tab bar will only include 3 items.

Nav bar - the nav bar isn’t that important for this app but we will use it to go back mainly - no features like editing the recipe etc.

• List - results page and a “textual list” for the ingredients.
• Paragraph - overview of the recipe
• Buttons - choose a single button style and roll with it
• Icon - don’t make it complicated. simple and timeless.
• Launch - just put your logo in the center of the screen and move on
• Login Form - this is the only form that we are going to design in this course. Simple. We require only a username and a password.

Design Choices:

• Typography - Choose ONE font. roll with it.
• Color - we will use just one single accent color along with white to make this app
• Form - This is a very text/image heavy app. No need for many icons. but we will design four simple icons for the tab bar
• Consistency
• WHITE SPACE

App Overview (4 main screens):

• Search Page - things shall be sorted according to some basic categories. Design should allow for expansion but remain simple. Search bar at the top.
• Results Page - List of items: Name, Thumbnail, Tags according to the categories above along with each search result.
• Recipe Feed - full bleed images. stacked. White Title. Heart button to favorite.
• Recipe Highlight Page - Full Size Image at the top, Description just below, Ingredients list below that.

BEFORE YOU BEGIN:

• Start with Sketch Basics: This course assumes a basic working knowledge of Bohemian Coding’s Sketch

Useful Online Design Resources:

Cheat Sheets/Keyboard Shortcuts attached in the resources

What is UI?

Simply Put, UI is designing the product, and UX is designing the experience. The two go hand-in-hand, but UI alone does not place as much thought into the way the user is going to interact with the product. You can think of UX as interaction design. Please refer to the articles below. I believe each and every one of you would benefit from reading them. Let’s put it this way:

• DON’T THINK YOU KNOW? - benefit from reading
• THINK YOU KNOW? - make sure that you know

General Ideas to keep in mind

• K-I-S-S (Keep it simple, stupid)
• Nothing excessive - do not show the user anything that they do not need to see in order to complete a particular action within your application.

Icon design

• Choosing a simple design for your logo. Easily Identifiable and usually something you can simply draw. Obviously your app has a name. It can be a great idea to make your logo one of the letters in the name of your app. Vine for example simply uses the unique “V” from their logo and makes it the app icon/logo. Notice that the curvature of the “V” mimics the growth pattern of a vine. This is good. Otherwise you can choose a more abstract form but remember Keep it simple.
• up+right = positive direction
• Two-tone is usually the way to go. There are exceptions, like Instagram, but please be aware that their app icon is more complicated but they ALSO have a highly reduced version that is still recognizable.

Font Choice

Avenir Next - It is one of the pre-installed fonts for Xcode so that makes things easy for the developer and it is a very simple, sans-serif font that lends itself well to the overall look and feel of the app.

• Status bar - Pick one color. as best I know, you are only allowed to use one of the two status bars for your app and you must use this color throughout the app.
• You may use Black OR white - whichever one coordinates best with your app and you are not allowed to change so choose wisely. This restriction will force you to keep a certain level of consistency in your app.
• Login design - I suggest something like that of Instagram. We will be mocking ours up to look like that. In general, if you want to make your app look great, PLEASE reference other successful apps and build off of them.
• Designing entry fields - if you are confused about the sizing of an entry field text, you can grab a screenshot from your phone or google image and import it into sketch and type over it in order to find the approximate/exact font size used for the field. Replicate this scheme in your own app
• Facebook login option - makes it easy for users to begin using your app without the need to remember any new login credentials.
• Log in & Sign in options - you could create them on the same page by using an “already have an account” link or you can create a tabbed view like the one we are going to create here.
• Naming Conventions - Keep it consistent. Start early. Maye symbols for items that will be repeated throughout the document/in general. Remember to right click+detach from symbol if you are modifying one of the original symbols but do not wish for this change to be universal and impact all instances of the symbol.

Feed design

We are going to be using large images not because they are easiest to flip though, (we have a search section for that) but because we want the user to feel hungry when they are flipping through the app and we can’t crowd them with too many recipes at once. no more than two per screen height.

Tab bar highlight state

In this case we are going to be using a colored bar underneath the icons on the tab bar. This will allow for a nice UX interaction/animation where the colored bar slides from one icon to the next and adds a little bit of fun and uniqueness to the application. This is an example of how a little extra design thinking can remain both simple and elegant at the same time. A highlight scheme, after all, is a necessary component to any tab bar.

Search Design

There are a lot of search bar design options out there but we are just going to go with one of the default iOS elements so that you can get accustomed to using those.

Introduction to Color

Hello and welcome to the iOS Color Module here at Bitfountain. This course is intended to help you better understand the fundamentals of color theory and the importance of color choices in UI/UX design. First, I will cover the key elements of color and color related vocabulary. Next, I will cover the iOS Human Interface Guidelines with regard to color. The third part will focus on different things to consider when making color decisions and choosing an effective color palette for your application. Finally, you will have the opportunity to experiment and refine what you’ve learned with a series of hands-on exercises pushing you to make some color choices of your own. By the end of this module you should feel more comfortable choosing a color palette for your iOS application, talking about color, and making color choices in general. So let’s get started.

Section II: Color Vocabulary

Blue is blue is blue, right? No. Of course not. There is a wide range of colors that we identify as being blue. That said, there are 3 primary component parts that help us define a color: Hue, Saturation, and brightness.

Hue:

The noun hue means both a color and a shade of a color. Green is a hue, and turquoise is a hue of both green and blue. Hue is dictated by a color’s position on the color wheel and represents the base color itself without the addition of white or black. A rainbow shows the melting of one hue into another from red to violet.

Saturation:

A representation of how saturated (or rich) a color is. Low saturation results in less overall color, eventually becoming a shade of grey when the color is fully desaturated.

Brightness:

How bright a color is. Generally referred to in percentages 0-100%. Any color at 0% brightness is black. The same hue and saturation at 100% brightness will be the full color.

Primary Colors:

When we talk about color theory, we generally begin by talking about the Primary Colors (Red, Yellow, and Blue). The reason that these three colors are called primary colors is because when mixed in various amounts they have the ability to produce any hue on the color wheel. Once we add black and white to the equation, an exponentially larger array of hues (both tints and shades) are possible.

Tints:

(Base Color (Hue) + %White)

Shades:

(Base Color (Hue) + %Black)

Secondary Colors:

Created when you mix two adjacent primary colors together. (Green, orange, and purple). Green is a mixture of yellow and blue, Orange is a mixture of yellow and red, and purple is a mixture of blue and red.

Tertiary Colors:

The result of mixing a primary color with one adjacent secondary colors. (Blue-green, yellow-green, yellow-orange, red-orange, red-purple, and blue-purple).

Complementary Colors:

First and foremost, complementary color pairs are found opposite each other on the color wheel. Complementary colors are pairs of colors which, when placed next to each other, create the strongest contrast for those particular two colors. You can think of complementary colors as colored equivalents of black and white because, again, they are opposites and create maximum contrast when paired. The relationship of two complementary colors is such that when placed next to one another, they cause each other to “pop” or appear especially vibrant. Because of this notable contrast, sometimes viewing complementary colors directly next to each other without a buffer zone of white can be straining to the eye. If you plan on putting these colors directly next to one another, i.e. purple and yellow, I suggest either adding a buffer zone of white between the colors OR adjusting one or both of the hues of your complementary colors to slightly reduce contrast.

Value: Value refers to how light or dark a color is. This is sometimes referred to as “brightness.”

Warm colors

Warm colors include red, orange, and yellow as well as derivatives of these colors.

Cool colors

Cool colors include Blue, green, and purple as well as their derivatives.

Neutral colors

Colors like grey and brown are duller colors that can’t be described as either warm or cool. These are considered neutral colors.

Context changes our interpretation of color:

Some of you may have seen this example before but take a look at these two images. Both of these circles are the exact same color although the circle appears lighter on the darker background than on the lighter background.

Achromatic Color:

Neutral color such as black, white, or gray. Achromatic colors do not have a hue.

Chromatic Color:

A color with a hue (most colors)

Additive vs Subtractive color:

• Additive color is anything that emits light. (i.e. Your computer screen or a projector). Everything else - physical surfaces (which actually reflect light) use subtractive color.

With additive color, white is the combination of colour, while black is the absence of color.

So we spoke about the primary colors being red, yellow, and blue. This primary color model only applies to subtractive color - which we’ll get to. When using additive color, Red, Green, and Blue (RGB) are the primary colors, and this is the basis for all color you see on screen.

• Now on to Subtractive color. Physical materials in what we refer to as the real world use subtractive color. Subtractive color works on the basis of reflected light rather than emitted light. An object's’ color in the physical “subtractive color world” is based on how it’s reflects different wavelengths of light. It is this detected light that determines its apparent color to the human eye. Subtractive color, like additive, has three primary colors Cyan, Magenta, and Yellow (CMY).
• The subtractive color model has one final component, K which stands for “Key.” Key is black. You’ve probably heard of CMYK before. Without the Key as a compensating color, the closest to black we would be able to create in print is a muddy brown.
• With subtractive color, the absence of color is white and the combination of all color (aka the darkest and most saturated color) is black. Remember, this is unlike additive color where the absence of color is black and the combination of all color is white. Unlike digital pigments, printed pigments do not fully absorb light; they reflect it.

We really only need to focus on the Additive model because that is what is used when it comes to digital design.

• You have probably noticed that when manipulating color in Sketch you have not only a *Hexadecimal* system but also values for RGB and A. We already know that R, G, and B stand for Red Green and Blue. Each of these values maxes out at 255 and A stands for *Alpha*. Alpha is like *opacity*. You will see that when changing the alpha value (which maxes out at 100), the color’s opacity will change at the same time.

iOS Human Interface Guidelines

• Since we’re talking about iOS and color it’s important to walk through Apple’s color tips and suggestions. If you would like to read the section on Color and Typography in the iOS Human Interface Guidelines instead you can feel free to do so and skip this video
• In iOS as with most successful user interfaces, color is used to enhance communication. Color in iOS helps to indicate interactivity and provide visual continuity. In other words, color is used to suggest when visual elements are tappable and by using the same limited color palette across all iOS applications Apple is able to create a unified color story.
• The built-in iOS applications use these same 8 colors which look great individually but also in combination with one another. It is also notable that all colors can be used against both light and dark backgrounds which is definitely something to keep in mind when considering colors.
• Like I said, It is important to make sure that all the colors work well together. Notice that all of the Apple colors are pretty saturated (as in they’re not pastels - diluting the colors’ vibrancy by adding white into the mix).
• If you are going to use vibrant hues throughout your app or design, stick to that. If you are going to use pastels, stick to that. You should choose a family of coordinating colors that can be used throughout the app.
• Contrast is very important as well. For example, if there is not enough contrast between the navigation bar background and the nav bar button titles, the buttons will be difficult for the users to see. To make sure that you don’t make this mistake, Apple suggests that you test your app on a device in different lighting conditions, including indoors on a sunny day. I would take that advice one step further and suggest that you view the design on the actual device(s) it is intended for. Not only will this provide the most accurate viewing experience, but since your design depends not only on color choice but also on the relationship between the elements on screen, I am an advocate of using Sketch Mirror or another method of viewing your designs on the actual screen for which they are intended.
• Apple goes further to suggest a more scientific (objective) approach to testing the contrast of your color relationships. The approach involves “determining the ratio between the luminance values of the foreground and background colors.”
• To get this ratio you should use an online contrast ratio calculator. Simply enter your foreground and background hex values in the provided fields and confirm to calculate the “Luminosity Contrast Ratio.”
• You should aim for a ratio of 4:5:1 or higher for optimal legibility.

Tab bar Translucency

• You should take bar translucency and app content into account when you use a custom bar tint. If you want the color of your bar to match your brand's color scheme, make sure that you experiment with various colors and scenarios because, of course, the content that will pass behind the translucent bar will affect the color. This can be difficult or even impossible to control if your app includes a variety of photos or images with varying color palettes. This tip is particularly important when you have a static background color or pattern. You will need to adjust the color of the bar so that when the background color and the bar color mix together, you have the color you want. If you don’t want to deal with this issue, simply make your bar is solid (not opaque).
• Because you never know who your audience is going to be, make sure you take color blindness into account. Most color blind people have issues distinguishing between red and green. Test your app to make sure that there are no places where you use JUST red and green to distinguish between states or values. If your red/green color choices are paired with icons or text you won’t have this issue (obviously you shouldn’t place a red icon on a green background or vice versa either).
• In general, it’s a good idea to use more than one way of indicating an element’s interactivity.

Key Colors

• A key color is there to give users a strong visual indicator of interactivity, especially in apps that don’t use an abundance of other colors. *In Contacts, for example, blue marks the interactive elements and gives the app a unified and recognizable visual theme.*
• You should consider choosing a “key color” to indicate interactivity and state. key colors in the built-in apps include yellow in Notes and red in Calendar.
• If you define a key color to indicate interactivity and state, it is important to make sure that the other colors in your app do not compete with the that key color. Imagine that your key color is blue but your unread messages are also blue….your should consider changing your way of displaying unread messages. Bolder text would be a good solution that would not conflict with the key color.
• That brings us to the next point. You should avoid using the same color in both interactive and *noninteractive* elements. This might go without saying but since color is one of the ways in which a UI element indicates interactivity, if interactive and noninteractive elements have the same color, it is much more difficult for users to know where to tap.
• Color serves as a great communication tool but not always in the way that you intended. Everyone sees and experiences color differently and there are differences between the way two cultures might assign meaning to the same color. To the extent possible, we want to make sure that our color choices send the appropriate message.
• “In most cases, don’t let color distract the user.” Do not use color just to use color. Unless color is essential to the purpose of your app, it’s generally a good idea to use color only as a subtle enhancement.

aka. Keep it Simple.

Color Choices

Color associations:

There is a lot of research done on color symbolism and color psychology. For example, the idea that in western cultures, dark blue symbolizes dependability and safety, or that yellow evokes feelings of caution since this is the color of many warning signs for drivers and pedestrians. These are all fun and interesting ideas to think about but they are certainly not universal. The idea that yellow means caution is immediately debunked when we look at applications like Snapchat which makes heavy use of the color yellow among other colors with a similar value.

Some other Color Associations:

• Green: Freshness, youth, “go”
• Red: Excitement, energy, love, and violence
• Yellow: Caution (warning signs for drivers and pedestrians), but it can also suggest joy, happiness, dishonesty.
• Pink: Love, and tenderness
• Lavender: femininity, grace, and elegance
• Dark Purple: Opulence, richness, and royalty. I have also heard dark purple being associated with death/mourning.
• Please refer to the following articles for some good information on color symbolism and color psychology but do not, as i said, treat these ideas as absolute. These rules can be broken. If you would like to read more about this topic, feel free to check out the attached links.
• Color Symbolism

• Color Psychology

Choosing a Color Palette

• Again, when choosing a color palette for your application please be aware that all of these color “rules” can easily be broken and often are. Far more important than the colors you choose are the values, tints, and shades of the colors you choose.
• Colors of a similar value generally correspond well together. This is precisely what apple has done. Each of their eight colors with the exception of gray (which we have already identified as a neutral color) have very similar values even though they are all different hues. Also, Notice they did not use a mix of pastels and saturated colors. All of the chosen colors have a similar value. You might also say that all of the colors are equally bright and saturated. If you are going to go with pastels and tints you should probably stick to pastels and tints. Likewise, if you want to use brighter and more saturated colors, you should do that.
• In order to create a nice amount of contrast you might also consider using a single color in different tints and shades. This method will also result in a palette that appears very uniform.
• I still strongly suggest that you use a “key color”, white, and perhaps a one other color for adequate contrast as I discussed in the UI Foundations Course. Also, this is precisely what apple has done. They have gone with largely white interface plus one key color in each of their built-in applications.
• Whatever choice you make, be sure to include adequate white space so as not to overload the screen with too much color and so that your text remains easy to read. Remember that text is optimally legible in black and white.
• Having a good amount of whitespace and neutral colors is especially important for both text heavy and image heavy applications since the content will likely be user-manipulated and you cannot predict how those images will correspond with your interfaces palette. So just keep in mind that white is the best choice for this sort of variable content to ensure clarity in the widest variety of contexts.
• If you are having trouble coming up with a good color theme/palette I first suggest you limit your palette. Color like many things is best used in moderation. Try keeping your primary colors to *three or less* (knowing that if necessary you could choose a slightly different shade of those colors when necessary. You will be pleased at how liberating it is to be limited.
• You might also choose an inspiration image, import it into sketch, and use the color picker tool to decide on a few colors that you really enjoy together. (Note: you should avoid using an inspiration image with an extremely wide variety of colors.)
• Finally, there are many websites that offer great tools for creating a color palette. Previously I have suggested Paletton but since then I have decided that Adobe Color CC is maybe a better choice. The possibilities are endless and you’ll wind up with a fantastic color palette each and every time. The interface is very simple and intuitive so I suggest you try this among other previously mentioned methods when approaching the exercises to come.

Exercises

Please take this opportunity to experiment with color and come up with as many iterations of each of the provided screens as you would like. All of the screens I made for you are intentionally grayscale with no inspiration colors so that you can take an untainted stab at coloring each of them.

This is pretty much a digital interface coloring book. You do not need to worry about creating UI elements, just coloring them appropriately.

I have included 8 different items for you to color however you decide and I will be providing individualized feedback for your submissions on all of them. Since there are endless possibilities for each of the screens, don’t feel like you cannot try multiple variations of the same screen but make sure that you try your hand at all of them.

In the Sketch file you will find the following:

1. An abstract circle-based logo (intended to get you thinking about pure color and form without functionality).
2. A screen from an imagined fitness app
3. An abstract screen showing a series of circular status bars corresponding to three different miscellaneous values. You can feel free to come up with an actual theme for this one.
4. A simple calendar app screen with three events and some self-explanatory icons. In designing this one do whatever you need to do to make sure that it’s clear that “Event 2” is currently in progress. Oh and feel free to change the text to make your screen more realistic.
5. An app screen featuring submitted quotes in a scrollable feed style structure. Again, feel free to further define the theme here by changing the text.
6. Another app screen of miscellaneous stats
7. A login screen for a fictional app called “Cubicle”
8. A generic feed screen with an emphasis on both images and text.

None of these files have symbols and the symbols that were grabbed from the Sketch “Elements” page have been detached from the master symbol so do not worry about messing anything up on other screens.

Have fun!

End

Introduction

Hello everyone and welcome to the Typography Module here at bitfountain. The purpose of this course is to get you familiar with the different characteristics of typography, the ways of classifying typography, reviewing of the iOS Human Interface Guidelines with regard to typography, and to give you an opportunity to experiment with type through hands-on exercises where you’ll be asked to make typographical choices of your own. I will, of course, give feedback to anything you submit in response to the exercises and respond to any questions you might have along the way. Some of what will be discussed may not apply directly to your design but I think it’s important to have a base and also to understand certain terminologies when talking about type.

Let’s begin by discussing the term Typography. What is typography?

• Typography is the application of design principles to type.
• Before, type was set manually but now we have lots of electronic tools to make this process a lot easier and a lot more straightforward.
• Typography is choosing and using type.
• Typography is designing with type and not the designing of type.

Initial Terminology

• The first term we need to define is Type Faces (also known as “fonts”)
• There are thousands of typefaces in existence and more are being made all the time...even right now. You are probably already familiar with several typefaces. For example: Helvetica, Times New Roman, Baskerville, Cooper, Garamond, and the list goes on.
• Next we have Classifications. Classifications are slightly different than typefaces. They are the groups and categories within which different typefaces are classed. We have Serif, Sans Serif, Script, and Text Letters. Those are the most common.
• You can identify a serif font by the stems that are located at the ends of several of the strokes (as with the ‘S’, the ‘i’, the ‘r’ or the ‘f’ here). These additional stems or strokes are known as serifs.
• A Sans Serif font really is the same as a serif font but without these stems (or serifs). Sans is a word that comes from the French language and means ‘without’ so it makes sense that a Sans Serif font is simply a font without serifs. Sans serif fonts are generally more modern and clean looking than serif fonts. Many of you have probably noticed that the Google logo recently transitioned from a Serif to a Sans Serif font.
• Script fonts are designed to simulate handwriting. With a script font, there is very little contrast between thick and thin strokes. The letters connect, flow, and are usually inclined (at an angle).
• Text Letters resemble the hand drawn letters of scribes. Letter forms are generally very similar to those of calligraphy.

The Characteristics of Font

• Type is labeled according to its visual characteristics. For example: Ultralight, Thin, Light Regular, Medium, and Bold. Those same weights are also available in italicised versions. We also have “condensed” type which is even more bold than “bold” and the letter spacing is smaller. Condensed Black is one step bolder than Condensed Bold.
• The font that you see here is Helvetica Neue. It was the default font for iOS 8 but has now been replaced by San Francisco in iOS 9. Both of these fonts are great choices for your app so when in doubt you can always go with one of them.
• When speaking about shape we are referring to the name of the typeface. This is often derived from the name of it’s designer (Baskerville - John Baskerville), the function it was designed to fulfill (Comic Sans - “It is a casual, non-connecting script inspired by comic book lettering, intended for use in informal documents and educational materials” - Wikipedia), or an obvious characteristic (Hairball).
• Size is a font’s vertical measure in points
• Weight (light, medium, bold, etc.) is the visual width of the strokes
• When we talk about width we are referring to a font’s horizontal measure (condensed, normal, expanded, etc.)
• Slope can either be vertical or italic. This refers to the angle of the axis of each letter.
• When measuring type we look at the Verical Point. The larger the point number, the taller the type. here you can see a 9, 10, 11, 12, 14, 18, 24, and 30 type size.
• The term readability refers to the ease of reading. Readability involves the design of the total visual identity of a given project. I spoke about contrast ratio in the Color Module. The color contrast between of the typeface and the background color contributes to readability as well.
• When we use the term legibility, we’re talking about type design. Legibility is the speed at which a type character can be identified and, thus, read. A highly legible typeface can be read quickly. A less legible typeface takes more time to get through. A script font is, for example, much less legible than a Sans Serif font.
• Strokes: There are four major types of strokes when we talk about lettering. We’ve got vertical strokes, as with the ‘l’, horizontal strokes that we see in the ‘z’, inclined strokes which compose the letter ‘v’, and cursive strokes which are found in an ‘s’.
• Now that we have covered this initial terminology, I will move on and talk about letter spacing in the next video.

Letter Spacing Scale

• Next it’s important to talk about letter spacing scale because this is something we can affect in Sketch.\
• Letter spacing scale refers to the amount of space between individual letters and punctuation characters. Letter spacing should be both consistent and reasonable. Letter spacing was once a manual job but fonts these days have standardized letter spacing so I suggest keeping those for any body text situations. You might choose to make spacing tighter or looser when it comes to titles to achieve a more unique effect.
• Be careful when spacing letters. If your characters are too far apart your text will be difficult to read. If you place letters too close together they will be cramped and also difficult to read. Do not make this mistake. Like i said before, when dealing with text-heavy areas it’s best to just go with the default spacing; it’s already been optimised.
• The letter spacing scale is all about the perceived visual volume between adjacent letters. **Letter spacing is also known as tracking**. The goal of spacing is for all letters to have the same volume of white space between them. It does not have to do with each letter being an equal distance from the one before it.

For example:

• Vertical/Vertical Strokes: Begin with a small volume - letters in these pairings are separated more than the other combinations to allow for adequate white space between the two vertical strokes.
• Cursive/Cursive Strokes: Begin with a medium volume - space is adjusted accordingly.
  
• Inclined/Inclined Strokes: begin with a large volume - it is important to minimize space between characters here so that the letters do not seem awkwardly distanced.

All other combinations are adjusted according to the same rule. Creating the same amount of perceived volume between characters.

• Now let’s talk about base. You may not have noticed this but certain letters are slightly larger than others. For example, cursive letters are designed a bit taller than straight-stroke characters so that they will “look” exactly the same height. Cursive letters must also be placed slightly below the baseline in order to appear ON the line.

For example, if you look here we’ve got a ‘k’ and an ‘s’. These also happen to be my initials but that’s not the point. The ‘s’ as you can see is slightly taller than the bulk of the letter ‘k’ and it dips below the line. I didn’t alter this font in any way. I just typed ‘ks’ and this is what it looks like.

• You might notice something else about type. That’s called hanging. Did you know that curved letters, inclined letters, and some horizontal letter strokes will be extended BEYOND the set margin so that they will appear to be ON the margin? Have a look at this example: in “Let’s try oranges” you can see that the horizontal stroke of the ‘t’ and the cursive stroke of the ‘o’ extend beyond the margin while the ‘l’ rests directly on the margin. This is something to consider when designing headline type but not so much when designing body type.
• Now let’s talk about kerning. Kerning is the process of selectively reducing the space between certain characters while leaving the rest of the settings the same. Certain combinations like ‘Ye’, ‘Te’, or ‘AW’ once required relatively extreme space adjustments when manually setting the type to avoid inconsistent volumes between the letters. It is important that the illusion of volume between each letter as well as the spacing between each word as well as the line spacing (that is, the spacing between each line) remains consistent. Inconsistencies make things difficult to read so the goal is uniformity. Sometimes that means adjusting things ever so slightly to trick the eye. You’ll notice that the top row here is not kerned - the letter spacing is normal. In the bottom row, you can see the way these letter combinations are normally presented - Kerned. Notice that the ‘o’ and the ‘t’, the ‘y’ and the ‘e’, and the ‘A’ and the ‘W’ are more closely connected in the bottom row. Each letter should flirt with the letter next to it. You can adjust the kern in Sketch but by default, letters are already kerned.
• When we talk about ligature we are referring to two or more letters that are joined in a single glyph. A glyph is a combination of two letters. We’ve got a lot of ligatures in script fonts - in fact, almost every letter is ligatured to the next one.
• You can also see what this looks like with sans serif fonts. Here, I wrote the word ‘fiji’ joining the ‘i’ and the ‘j’ together. The ‘i’ and the ‘j’ are a ligature.
• In Sketch you can create ligatures in the type menu but i really do find that the ligature feature doesn’t really do much in sketch. So to create the word ‘fiji’ like this I had to manually affect the lines:
• (First, I converted the text to outlines).
• Then, I manually manipulated the letter ‘j’ so that it matched up with the bottom of the letter ‘i')*
• Now let’s talk about word spacing. It’s pretty obvious that different words begin and end with different letters. Proper word spacing makes each of the gaps between words appear exactly the same. Too much or too little word spacing can make the text difficult to read.
• Word spacing should vary with typeface, type size, and type arrangement.
• Word spacing should be consistent.
• Tight letter spacing requires tight word spacing and vise versa.
• When talking about spacing, both word spacing and letter spacing, we use the following terms: Loose, Normal, Tight, and Very Tight.

Body Text Terminology

• Line Spacing: Line spacing might also be called leading and it describes the vertical space between lines of type. Line spacing is measured in points and the closest line spacing is called minus leading. You can see here we’ve got ‘set solid’ which is the default. ‘1 point spacing’ which adds a point. ‘2 point spacing’ which adds two points. as you can imagine, ‘3 point spacing’ adds three points and so on and so forth. Adding more points between each line creates more space between each line. Once you’ve selected text in Sketch, on the right-hand toolbar, you’ll notice that you can affect the spacing.
• Then we’ve got headline type and body type: Headline type is always larger than body type.
• Headline type is also referred to as ‘display type’. It is used for non-text solutions. - - Headline type is, indeed, text but it is not body text. When I speak of text solutions I am referring to body text. Headline text is used in headlines, signatures, subheadings, logos, etc.
• Body type is also known as text type. It’s the small text that carries the bulk of the information in books, apps, etc.
• If you’d like to learn more about the sizing of different fonts for web and mobile please take a look at the Typecast Article.
• For some great choices for mobile fonts, both free and downloadable, please have a look at the Best Free Fonts for Mobile App Designs (attached)

There are four major terms to talk about the arrangement of body type: Flush Left, Flush Right, Centered, and Justified.

• Flush left has a ragged right side. That is, the text does not end on an even line on the right margin. It is the best for natural word flow and it is preferred by most graphic designers. It is formatted in the same way that a typewriter prints.
• Flush right has a ragged left side. Beware of flush right because it has a very weak left margin return for the eye when reading. That is, the speed at which the eye can find to the beginning of the line on the left margin of the text. It is suitable for short information and it has excellent word spacing by default. In western cultures, we read from left to right so it is important that you do not place too much emphasis on the right side of the page. Let the right side be where the eye trails off and then returns to a consistent and predictable starting point on the left margin.
• With justified text we have a flush left and right margin. This style is often used for books and magazines but it’s not very good when margin width is narrow because of unavoidable visual holes in the word spacing.
• Centered text is symmetrical. It is very formal and often used in poetry. Both left and right margins are ragged. There is good word spacing and there is no problem reading it. Unless you’re centering a heading or subheading, you probably won’t use centered text in your app.

Now that we have covered the essential typography terminology, I will move on and cover the iOS Human Interface Guidelines with regard to Typographical choices.

iOS Human Interface Guidelines

• In this video I will cover some of Apple’s tips regarding typography use in your iOS applications. Most of this information is available in the Human Interface guidelines which I am sure most of you are very well aware of. On occasion I will add my own two cents but you can find the bulk of this information in the iOS developer library so if you would prefer to read this info than be presented to, you can feel free to check out the iOS Human Interface Guidelines and skip this video. Just make sure you get this information somewhere. It would be silly to ignore.
• This should go without saying but Typography is a very important component of most if not all applications. "Great typography enables clear communication” - iOS Human Interface Guidelines.

I mentioned this once before, but while the Apple apps used to use Helvetica Neue for all of their native apps, with the iOS 9 Update, they introduced the San Francisco font family. This new font improves upon the last and provides a “beautiful, consistent, typographic voice and reading experience across all platforms.” San Francisco also works hand in hand with Dynamic Type to provide:

• A range of font sizes that that automatically provide superlative legibility and a great reading experience at all user settings, including accessibility settings.
• San Francisco automatically adjusts to letter spacing (also known as tracking) and line height (also known as leading) for every font size.
• This new font has the ability to specify different text styles for semantically distinct blocks of text such as Body, Footnote, or Headline.
• Finally, San Francisco responds appropriately to changes the user makes to text-size settings (including accessibility text sizes).

To emphasize some of your text or to create visual relationships among parts of your content, Apple suggests relying on the semantically defined styles supported by Dynamic Text such as heading and body. You might also choose to specify font weights such as thin or semibold.

If you use Dynamic Type styles it will be easy to communicate meaning in your content. However, if you would like more control over your design, you can set a particular weight for a particular type of text.

Font Weight

• It might be a good idea to increase the weight of some text to help users understand your content hierarchy or to draw their attention to a particular word or phrase.
• You might also want to create visual cohesion among multiple, nearby labels of different sizes by increasing the weight of small type and decreasing the weight of large type.
• Also, Apple wants you to know that font weight significantly impacts the overall style and voice of your content. Choosing a particular font weight can help you achieve a particular design goal. It’s true: Thin fonts generally appear sleeker and more modern. SO do ultra bold fonts or ultra thin fonts used at large sizes for titles. Combine the two and you’ve got a star combo.

To learn more about combining fonts, have a look at the 10 Golden Rules You Should Live By When Combining Fonts: Tips From a Designer .

• You should prioritize content when responding to text size changes because not all content is equally important to users. When users choose a larger text size, they want to make the content they care about easier to read; they don’t always want every word on the screen to be larger. That said, you do not need to make all fonts respond to Dynamic Type.

Menu items are probably fine how they are originally set while body text should probably be made larger to accommodate user preferences.

• For example, when users choose a large accessibility text size, the Mail app will display the subject and body of the message in the larger size but leaves the less important text—such as the date and the recipient—in a smaller size.

Finally, here are some things to keep in mind according to the Apple Design standards:

• To make sure that text is legible at all sizes, text should never be smaller than 11 points, even when the user chooses the extra-small text size. For comparison, the body style uses a font size of 17 points at the large size, which is the default text-size setting.

In general, font size and leading values differ by one point per text-size setting. Exceptions to this are the two caption styles, which use the same font size, leading, and tracking at the extra-small, small, and medium settings.

• At the smallest three text sizes, tracking values are relatively large; at the largest three text sizes, tracking values are relatively tight.
• The headline and body styles use the same font size. To distinguish it from the body style, the headline style uses a heavier weight.
• Text in a navigation bar always uses 17 points, which is the same as the body text style at the large setting.
• Text always uses either regular or medium weight; it doesn’t use light or bold, because light and bold weights don’t read well at small sizes.
• Final Apple Tip: In general, use a single font throughout your app. Mixing several different fonts can make your app seem fragmented and sloppy. Instead, use one font and just a few styles and sizes.

So that’s about it. If you’ve got any more specific question feel free to ask them in the comments and stay tuned for the exercises to come. They’ll give you a hands-on opportunity to experiment with typography for yourself.

Typography Exercises

Please take the time to make typographical changes to the screens included in the attached Sketch file. You can change anything you want including colors, proportions, and text. I have included little comments beneath each of the screens to give you an idea of what I am looking for.

What is this section about?

In the following lessons, I am going to walk you through some pointers on designing a great icon for your app, and showing you how to design popular icons for apps like Apple Music, Pinterest, Instagram, and an app you may not have heard of called Infuse 3. (Although I really like the icon, I have never actually used the Infuse 3 App).

By the end of this section, I hope that you will have gained some valuable insight on what it takes to create a compelling and worthy icon for your application as well as some design techniques in Sketch that will help make that possible.

Why is it important to have a good app icon?

• People will make assumptions about your app based off of the icon alone. A carefully designed icon suggests a carefully designed and enjoyable app will be behind it. If the app icon is poorly designed, what does that suggest about the User Interface and overall User Experience of the underlying app?
• A good app icon will help users to remember what your app is and does so you don't want your app icon to look too similar to those of existing apps.
• An eye catching app icon will also act as free person to person advertising for your application. I have been in several situations where I glance over at a friends phone screen and notice an icon that I have not seen before. Naturally, I ask what the app is and this very often leads to a detailed description of the app is and how it can help me in my daily life. By now I have likely gotten a preview of the app and seen a brief demonstration of some core features. None of this would have been possible if I was not first drawn in by the icon on the home screen.

What makes a strong icon?

• A strong icon is not complicated. You can get away with (and should aim to have) a single centralized form and not too many colors or things happening.
• Do not think of your icon like painter’s canvas. You do not need things like a ground plane and perspective. Focus instead on making a clear indicator for your app; something that would work well as a sticker or decal.
• The only exception to this rule are game icons. Generally game icons are more like paintings and attempt to provide a realistic closeup of the game character in a simple scene (subway surfers, candy crush, sonic dash)
• Even so, I believe you should aim for the simpler alternatives (clash of clans, angry birds).
• A strong icon is easily recognizable at a distance and at a glance.
• A strong icon uses a central form that will still be recognizable even outside of the icon frame.
• A strong icon should also be recognizable in black and white.
• A strong icon is not made up of many different shapes although there are exceptions. Google maps, for example, employs the classic google color palette in a color blocking scheme to illustrate a map and map marker for their icon.

Color

• Adequate contrast
• Try to create your icon in two colors. Three (maybe). I urge you to keep it simple from the beginning because that is really all you need for a beautiful icon. Like I said, an icon is not a tiny painting...it is an indicator.
• Carefully select the color of your icon and your app. They should be related. If you do not use any trace of yellow in your app, should the icon be yellow? No. The icon is as much a part of the experience as the interface and it should be treated as such.
• There are many icons with several colors but it is very difficult to pull off so if you are planning on using multiple colors I suggest you at least stick to colors within the same family. (i.e. blues, reds, oranges)
• If you would like to use some sort of rainbow spectrum in your icon, you can treat the rainbow colors or gradient as a single color. As long as there is organization, the rainbow’s colors are interpreted as a single, unified array of colors as opposed to two or three distinct colors so feel free to treat them as such. Using a gradient of multiple colors can also be a great fill for a centralized shape in your icon. Now, if you use more than about three colors in your gradient, you will miss out on some color recognition opportunities in your branding scheme. However, you can and should still have a distinct font or form as your logo. My statement about using just two colors still applies with rainbows. It’s a bold choice so keep your other colors limited to blacks and whites and if you’d like to place a logo atop your rainbow color scheme, make sure it’s in the white family.

Clarity

• It is important to make sure that your icon can scale down really well. Just because it looks great in the app store, does not mean that it will be a successful addition to the home screen or the settings page of the iphone.
• ASSUMPTION: complicated app icon = complicated app and unapproachable app. Nobody wants that.
• Avoid using a photo. It looks terrible and will not scale well.
• Icons that include photos or bent back corners, etc tend to include ads and look cheap on the inside.
• Also a photo is a weak addition to brand identity. That means that the coherence and recognizability of your app is going to be weakened by the fact that you have a photo in the icon. Yeah, just don’t.

Texture / Skeuomorphism

• I URGE you to forget about skeuomorphism. It is not timeless. Skeuomorphism is a concept employed in the original iphone aesthetics. The goal was to utilise design cues from the real physical world and apply them to the digital space. Textures like wood, metal, leather, and paper were mimicked on the digital interface. Originally employed to make us feel more comfortable with the new touch screen technology, skeuomorphism is now pretty outdated and has been replaced by flat design which is decidedly a more modern, minimalist approach to digital interfaces and design.
• If you want to create an app icon that will not need to be updated and that will forever be a quality icon until we no longer use icons...make it flat. Make it simple. 2 or 3 colors max and use a strong centralized form.

Text

• If you want to use text, no more than one letter. Really. If you’re using a lot of text or are even tempted to use a lot of text in your icon it probably means that your brand identity is weak. VERY weak. It is critical that your experience be recognizable with much less.
• Make the icon a detachable but integrated element in your logo. Each should be able to hold their own. Distinct typography helps with this.
• Using the *Convert to Outlines* tool in Sketch, you can customize any font to create custom lettering. The possibilites are endless.

Spinrilla Challenge

Like I have said many times, I suggest you keep your icon simple. Even certain icons that are visually complex, can actually pass as being simple because their repetitive patterns are quickly processed and digested.

Some icons do not use geometric repetition and are just plain complicated. Spinrilla, for example, is a pretty great app with a decent-but-not-great icon: I think their gorilla could be made much simpler, don’t you think?

Even the most complicated subject matter can and should be based on simple shape compositions and this one is just not that simple. The skype icon might look complex but is really just three unified circles.

I challenge you to recreate the Spinrilla icon and simplify it significantly. In other words, how can you communicate a purple gorilla with sunglasses and a cigar in it’s mouth as minimally and elegantly as possible. Try to keep all of the key elements that you see in the image and try not to use borders.