Color & Scale is an iOS app that utilize SCNKit in Xcode to demonstrate how color and scale can be use to create aesthetically pleasing hierarchical 
iPhone X Mockup Freebie 2.png
Role Developer, UX/UI Designer
Duration : 1 week - Autumn 2018
ToolsSketch, Adobe Illustrator, Xcode
Type : iOS mobile application development
Objective: Create an app which utilize SceneKit in Xcode  to create a visual composition that demonstrates your understanding of the concepts of color and scale. Only primitive object in SceneKit allowed. (SCNPlane, SCNBox, SCNSphere, SCNPyramid, SCNCone, SCNCylinder, SCNCapsule, SCNTube, and SCNTorus)

 / ideation 

What is color & scale?

Color: well... it's color. 

Scale: Scale refers to the size of an object (a whole) in relationship to another object (another whole).

Designers can pull your focus and  attention to a certain point by manipulating scale and color. Naturally, what's the biggest will grab your attention first as well as what's brightest. But sometimes, big and bright doesn't mean that they are beautiful and elegant, for this project I want to create an abstract composition of big, bright yet beautiful spheres to showcase the concept of color and scale. 


/ ui design



Color ?

I love pastel colors. If you have been visiting my page, maybe you got a hint already. To me, there's something beautiful about light shades of color that just go in harmony with others. I went on my trusted website and chose a color combination I like. 





> Due to the nature of this assignment, I'm only allowed to use existing primitive shapes in SCNKit. I went with Sphere because I think it's the smoothest and most soft out of all the available shapes. 

/ final design


/ development

As you can see, there are moving spheres. These are made using SCNSphere , part of the SCNKit in Xcode. I created 3 mothers nodes (SCNNode), each with 2 child nodes constantly rotating around the mother nodes.

The lighting of of SCNLight made the look of the sphere dull and unpleasant at thebeginning thus I changed it and it could have a flat design look. 

Scene & properties set up

Screen Shot 2019-02-13 at 15.55.36.png
Screen Shot 2019-02-13 at 15.55.41.png

Nodes (spheres) set up

Screen Shot 2019-02-13 at 15.55.52.png