Tutorial

Build an App From Start to Finish:
COSMOS

Learn by doing with our C4-powered app-building tutorial. Let us walk you through the process of how we built a nice little iOS app called COSMOS.

Note: If you want to jump straight into writing code, head to Chapter 4 – Infinite Scrollview.

Intro

Getting Started

Get up and running quickly with the COSMOS Xcode project files.


Chapter 1

Prelude to Design

An overview explaining why & how we chose to create COSMOS in the first place.


Chapter 2

Designing the COSMOS

Where to start? Defining the visual concept and deciding the functionality.


Chapter 3

Plan it!

Get your goggles on as we start diving into the code with C4.


Chapter 4

Infinite Scrollview

Implementing the idea of an infinite scrollview that loops around rather than stopping at the end.


Chapter 5

Infinite Scrollview: Build It

Time to code – get that infinite scrollview looping.


Chapter 6

Astrological Sign Provider

How to go about wrangling all the data for the 12 astrological signs.


Chapter 7

Astrological Sign Provider: Build It

We've wrangled all that data, now let's do something with it.


Chapter 8

Stars

Start bringing the COSMOS to life with some nice visual work.


Chapter 8.1

Testing Layers

This chapter will walk you through how I originally tested the background and is optional.


Chapter 9

Stars Background

To convey the enormity of space, and give the app a really nice feel, we stacked 8 parallax layers with randomization and subtle animation.


Chapter 10

Sign Lines

Time to stargaze – we're going to build some constellations.


Chapter 11

Small Stars

Bring those constellations to life with stars. We're starting small.


Chapter 12

Big Stars

We've got the small constellation stars, let's keep going with the big ones.


Chapter 13

Assembling the Stars

Small stars, meet big stars. Time to unite them all.


Chapter 14

Radial Menu

Building the heart of the app - a radial menu with embedded animation that reacts to different gestures.


Chapter 15

Menu Rings

Time for the ring lines, the backbone of our COSMOS radial menu.


Chapter 16

Animating the Menu Rings

Time to bring the radial menu to life with embedded animation.


Chapter 17

Menu Icons

Time to flesh out the radial menu with some animated icons.


Chapter 18

Menu Selector

Give the radial menu interaction and responsiveness with some programming wizardry.


Chapter 19

Menu Shadow

Give a little visual pop to the radial menu with a simple shadow.


Chapter 20

The Menu: Pull It Together

We've got all the components, let's get this beast put together now.


Chapter 21

Info Panel

A straightforward info panel with push controllers, popups and external links.


Chapter 22

Pulling It Together

Time to weave all the components into a unified app.


Chapter 23

Submitting to App Store

Our last task is to get COSMOS on the App Store. Seriously.