Skip to content

Latest commit

 

History

History
80 lines (50 loc) · 4.48 KB

README.md

File metadata and controls

80 lines (50 loc) · 4.48 KB
Raw

Main cover

How To Use

You can download the latest version here. Once downloaded, you're free to use all the Sketch files for UI design work. You're just not allowed to re-package it and claim it as your own— we're all sharing this, plus all designs are from Apple.

Here's what's included in the repo:

  • UI.sketch — This contains most of the new UI elements of iOS 10, such as the new Spotlight Widgets and Status Bars.
  • Apps — This folder contains the templates for the newly-updated apps in iOS 10, namely Maps, Music, Messages, Health and Home.
  • System — This folder contains the new iOS system screens, such as the redesigned lockscreen, Spotlight and Control Centre.

You can use the included Sketch files to figure out the overall look and feel of iOS 10, as well as copy the metrics for UI elements. This UI kit is best paired with the iOS Human Interface Guidelines by Apple.

Make it better

We want designers and developers to share these design files, and contribute to this repo as the iOS 10 beta changes over time. This is the goal of this UI kit.

Contributing

If you want to work on something and submit it, simply:

  1. Check the issues to see if someone else is already working on what you intend to change
  2. If not, create a new Issue and assign yourself to it— so no-ones working on the same thing at once
  3. Submit a pull request referencing the issue.
Familiar with Git

If you're familiar with Git, clone the repo and feel free to tweak the files included. If you end up adding new features, screens, UI elements— or change things as the iOS 10 beta improves over time— submit a pull request and we'll merge it back for everyone to share!

Not familiar with git? Don't worry!

There is only a few steps to contribute to the iOS 10 UI Kit!

  1. Download the kit and do your change. In order to now have merge conflicts (a git thing), once you are done with all the tweaking, go to step 2!
  2. Now we are going to have to do some git, but don't worry, we've prepared a couple of images to make it easier!
  3. Do a fork to this repository to your own one! That is as easy as tapping the button in the top right corner.
  1. Clone then the URL of the repository that was created to your desktop, that's as easy as copying the URL of the GitHub page in the terminal, like so:
  1. There are some steps in the image now, but it's pretty straight forward:
  • The cd goes to the folder you tell it to go, if you cloned the repository in the Desktop, just do cd UI, or the name of the folder at that time.
  • Now, in here you implement your design changes from before, copying and pasting, etc.
  • The next step is to create your branch, this is for us to be able to see it! :) You do so by git branch name-branch.
  • You checkout to that branch, commit the changes and push to us.

That's it in the terminal! You can close it until next time!

  1. Go to the GitHub repository in your account now (the one that was created after the fork) and search for the button Branches and tap it.
  1. Now you'll see your branch, just create a Pull Request with it.

You'll get asked for a title and a description, if you fill that in and tap Create Pull Request, you are done! :P

Adding images makes it easier to review! :)

There are tons of courses to learn Git! Here is one for instance.

You can also share this repo with your friends. The more people that know about this, the more people will contribute to it! Share it on Twitter, Facebook, or, if you're into taboo, share it on LinkedIn.