Project objective

Creating a landing page design using style's style guide.

Why?

I aimed to practice the process of following a company style guide accurately for creating consistent designs and products.

This case study shows my process in gathering information about Apple's style guide and creating a new design based on my learnings.

What was created?

In this project, a landing page website was designed based on a conceptual keyboard product. Alongside the landing page, a simplified style web style guide was created as a guide for designing the landing page.

My study of apple's style guide alongside dissection of Apple's iPhone 16 landing page resulted in this simplified style guide.

Typography

My research started with exploring Apple's official style guide found here: Apple Style Guide

Since we were designing a website, I started by looking at typography for mac os. I learned that Apple uses the font family San Fransisco (SF).

I also observed the rules of visual hierarchy using font weights and italics. Below is a screenshot of the typography section of the style guide that was studied.

Alongside this, I took note of Apple's iPhone 16 landing page to take note of typography hierarchy and titles. Based on my findings from Apple's website and style guide, I put together a hierarchy grid for typography.   

Screenshot from apple style guide

Shades of grey

The various shades of grey were looked at in both Apple's style guide and the iPhone 16 landing page. This observation helped with understanding how to add texture to information containers within the landing page.

Apple's IOS grey colours system showed the specific RBG shades of grey apple uses.

Screenshot from apple style guide

This case study is in progress