The Bitfountain iOS Design Foundations is an immersive course teaching the basics of iOS Design using Bohemian Coding's Sketch as the primary tool.
After Completing Sketch Basics and Sketch Reference you will know everything you need to know to start creating beautiful designs in Sketch.
Customizing Top Toolbar
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:
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.
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.”
Adjust border thickness, color, and position as well as other options including stroke in the right toolbar of the sketch window.
Manipulate layered shapes using these four VERY useful tools.
Duplicate any object and automatically arrange it in grid-formation using the “Make grid” tool.
Skew a layer symmetrically using this tool
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.
Flip object across a vertical or horizontal axis.
Core Design Elements / Opening Notes for Noodle App:
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.
App Overview (4 main screens):
BEFORE YOU BEGIN:
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:
General Ideas to keep in mind
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.
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.
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.
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.
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.
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.
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.
(Base Color (Hue) + %White)
(Base Color (Hue) + %Black)
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.
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).
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 include red, orange, and yellow as well as derivatives of these colors.
Cool colors include Blue, green, and purple as well as their derivatives.
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.
Neutral color such as black, white, or gray. Achromatic colors do not have a hue.
A color with a hue (most colors)
Additive vs 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.
We really only need to focus on the Additive model because that is what is used when it comes to digital design.
iOS Human Interface Guidelines
Tab bar Translucency
aka. Keep it Simple.
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:
Choosing a Color Palette
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:
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.
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?
The Characteristics of Font
Letter Spacing Scale
All other combinations are adjusted according to the same rule. Creating the same amount of perceived volume between characters.
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.
Body Text Terminology
There are four major terms to talk about the arrangement of body type: Flush Left, Flush Right, Centered, and Justified.
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
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:
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.
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 .
Menu items are probably fine how they are originally set while body text should probably be made larger to accommodate user preferences.
Finally, here are some things to keep in mind according to the Apple Design standards:
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.
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.
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?
What makes a strong icon?
Texture / Skeuomorphism
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.
John was the lead iOS developer at Fast Society and Cameo until he started Bitfountain in 2012. The apps that John has contributed to have appeared in TechCrunch, Mashable and the New York Times. At Bitfountain, John oversees all projects from a technical and strategic perspective. At Bitfountain, John has taught over 120,000 students how to code online.
Khari is a graphic artist and designer from Boston, MA. After completing his degree in Sociology at Wesleyan University he moved his life to Paris where he continues to live. A degree candidate for the MFA Design and Technology at Parsons The New School, Khari maintains a firm connection with both tactile and digital media, constantly experimenting and pushing the limits of UI/UX design.