OperationCode/front-end

# Guide To Contributing As A Designer

Firstly, thank you for considering contributing to our project! It's people like you that make Operation Code such a great community.

The team at Operation Code wants to reiterate that joining our Slack team is the ultimate way to set yourself up for success when contributing to our repository (repo). You can get an invite to our Slack channel by [requesting to join Operation Code](https://operationcode.org/join). Once in our Slack team, click the **+** icon next to **Channels** on the left sidebar, select **Browse channels**, and join **#oc-projects** and **#uxui**. Feel free to ask for help; everyone is a beginner at first :smile_cat:!

## About Operation Code's GitHub Repositories

<em>Note: GitHub is a platform that uses Git, a version control collaboration tool. Most GitHub guides reference things like forking, branching, and pull requests - You do **not** need to know any of these to do design work!</em> :tada::tada::tada:

#### The [OC Organization Page](https://github.com/OperationCode) Lists all of our Repositories (**Repository/Repo = Folder for a Project/Team**)

<img width="1027" alt="Screen Shot 2020-09-08 at 8 30 28 AM" src="https://user-images.githubusercontent.com/37910748/92496929-9fbfba00-f1ad-11ea-8da1-105f8e3e63ce.png">

<em>Note: UX Design will be done through the **front-end repo**, but it's a good idea to browse **START_HERE** to become familiar with the other teams.</em>

### 1. [Navigate to the front-end repo](https://github.com/OperationCode/front-end)

### 2. [Select the **Issues** tab at the top of the page](https://github.com/OperationCode/front-end/issues)

<img width="1035" alt="Screen Shot 2020-09-08 at 8 41 09 AM" src="https://user-images.githubusercontent.com/37910748/92498155-22954480-f1af-11ea-9b62-0d7cb465440f.png">

### 3. [Filter Issues by the Label: **Needs: Design/Mock(s)**](https://github.com/OperationCode/front-end/labels/Needs%3A%20Design%2FMock%28s%29)

<img width="533" alt="Screen Shot 2020-09-08 at 8 44 18 AM" src="https://user-images.githubusercontent.com/37910748/92498525-97687e80-f1af-11ea-9e7b-ad7579879252.png">

### 4. Click on an Issue to View

- Review the Issue's comments to understand the initial request and any history.
- **Leave a comment** to indicate your design contribution, and specifically state **"design"** since the front-end issue will have developers or engineers who also work on this ticket.
- Ask for help if you need help getting started or need to be pointed in the right direction!

### 5. Use your tool of choice (Adobe XD, Sketch, Figma, etc.) to create a design!

<br />**Our entire UI library is documented via [![Storybook](https://github.com/storybookjs/brand/blob/8d28584c89959d7075c237e9345955c895048977/badge/badge-storybook.svg)](http://storybook.operationcode.org)**
<br />You may wish to copy and paste screenshots of these symbols to better translate the designers tools to your ideas!

### 6. Attach your design to the Issue comment section and tag Cyn @datphotogurl for review on GiHub (@CynK on Slack)

### 7. A product manager or maintainer will respond and either approve the design or provide feedback.

## Other Ways to Contribute to UX/UI

- Review our [Website](https://operationcode.org/). Submit a [GitHub Issue](https://github.com/OperationCode/front-end/issues/new/choose) if you notice room for improvement (Bug Report) or have an idea (Feature Request)!

- Already have experience in the UX/UI field? We would love your support as an official mentor (sign up by typing **/mentor-volunteer** in any Slack channel) or unofficial mentor (help out newbies if they get stuck on a GitHub Issue).