211 views
 owned this note
[ADG] Project One Roster === This document outlines the phases of project one and contains the roster of participating members. # Roster :rotating_light: **Progress should be left-to-right. Do not move onto the right until you have completed the task to the left, with the exception of purchasing a domain name or optimization.** |Symbol|Meaning| |------|-------| |:cat:|DONE| |:scream_cat:|IN PROGRESS| Developer Name|Content|Wireframe|Domain|Assets|Mockup|Dev|Optimize|Deploy ---|---|---|---|---|---|--|--|--| Joel C| :scream_cat:| Marcus C| Mary C| George E| Chris K|:cat:|:cat:||:scream_cat: James K| Maryellen|:scream_cat: Irma M| Kevin O| :cat: |:cat:|:cat:|:cat:|:cat:| :cat: | :scream_cat: | :cat:| Lou P | :cat: |:cat:|:cat:|:cat:|:cat:| :cat: | :scream_cat: | :cat:| Ayo P| | |:cat:| Luis R| Matthew S|:cat:|:cat:| Sara S|:cat:|:cat:|:cat:|:cat:| # Project Steps ## 1. Content Content creation. This is the phase at which you will decide what your site should be about. This is the first step not because we want to get it out of the way, but because it is the most important. Form follows function. - [Use Google Docs to write content](https://docs.google.com) - [Alternatively, use HackMD](http://hackmd.io) ## 2. Wireframe Once we know *what* we want to say, we now have to brainstorm the structure of its presentation. How should we prioritize the information? How do we group it? Consider these things by creating a wireframe. ## 3. Purchase a domain Affordable domains can be purchased from [Namecheap](https://namecheap.com), which is the registrar Kevin uses. However, there are many great alternatives. Use whatever you're comfortable with, as long as you do the research. ## 4. Gather Assets Get a list of all the colors you plan to use. Do you want to use photos? Or fonts that you have locally on your computer (and not using Google Webfonts)? Gather them all in one place and have them ready-to-go. Prepare image files by compressing them and shrinking them down if they're huge. - [Stock Photos @ Unsplash](https://unsplash.com/) - [Icons @ FontAwesome](http://fontawesome.io/) - [Fonts @ Google Webfonts](https://fonts.google.com/) ## 5. Hi-Fidelity Mock-Up (optional, recommended) Synthesize your wireframes, your content, and your assets into a mock-up that mirrors your final website closely. You may want to create several versions for mobile, tablet, and desktop. ## 6. Development Use HTMl/CSS/JS to turn your mockups into reality. Feel free to use a grid framework. Try not to rely too much on a framework for styling. ## 7. Optimize Check load times. Look for bugs, inconsistencies. Make the website responsive. Add ARIA-support for accessibility. Scour your code to see where it can be optimized. ## 8. Deploy Deploy the website live. Hook it up to your domain name, purchased back in Step 3. Make it live. ## 9. Done :fire: :tada: