/ios-ui-design

Primary LanguageSwift

iOS UI Design

The goal of this class will be to focus on building UI elements. Along the way we will take a look at the built in UI elements to get a better understanding of how they work.

The end product of the class will be a library of UI elements that will customize the existing UI elements, and build new UI elements from scratch.

Class projects will include the creation of a Make School set of UI elements. Students will all contribute to the library using Github. The goal for each student is to provide at least on new and unique UI element to the library. Students will also create their own customized UI elements that can be used in their own projects.

Goals

  • Architect and arrange elements with CGPoint, CGRect, UIColor, frame, bounds, center etc.
  • Build flexible UI controls using Subclasses while exploring initializers.
  • Modify and architect UI elements that are flexible using: @IBDesignable and @IBInspectable

Progress

Progress in the class at your own pace. Be sure to look at each lesson. The material looks new or you feel it would be good to review, then follow the lesson from beginning to end.

If you feel you understand the material in a lesson skip to the Challenges. Use the challenges as a check for understanding. You can be sure that you understand the material if you can complete the challenges.

You can also look at the challenges as interview questions you might be asked.

When you feel you understand the material from one lesson move on to the next.

If you see an opportunity to create an interesting or useful class that can be contributed to the Make School UI Library feel free to stop and develop that further.

Outline

A choose your own adventure class covering UIKit components and more.

  • Intro
  • Frame, Bounds, and Center
    • Closer look at
      • CGFloat, CGPoint, CGSize, CGRect, UIColor
      • frame, bounds, center
  • Layers
    • A closer look at CALayer
      • CAGradientLayer, CATextLayer
  • Animation
    • Making things move with UIKit
  • Circle Math
    • Review basic trigonometry.
    • Mapping and animating things on the screen in circles.
  • UIBezierPath
    • Creating paths and drawing with code.
    • Animating paths.
  • Micro Interaction Project
    • Challenge yourself with a project of your own design.
    • Use this challenge to explore your own interests and apply the ideas covered so far.
  • UI Control Project
    • Making reusable controls and contributing open source.