<commit_before>[Week 1 Home](../)

# U1.W1: Wireframing

## Learning Competencies
- Explain wireframing
- Identify the benefits of wireframing
- Wireframe a website


## Summary

Regardless of whether design is interesting to you or not, web design
matters to end users of the website and business management.  It's
important to know about so you can work more effectively with other
teams in the organization.  One of the first steps in creating a web page
is often to wireframe it. This process should also help you learn to separate different parts of a site (design vs. content, html vs. css, user interface vs. user experience) and learn the process of developing websites.

You will be building your own, personal website in phase 0. In this challenge, you will build a wireframe of how you want your site to look.

While this sounds like it's only a personal challenge, you can pair on building a wireframe, and both use the same wireframe for your respective sites.

## Releases

## Release 0: Intro to Design Thinking

While designers may be "creative" or "artistic", they are also, like
software engineers, problem solvers. They just solve problems visually
instead of with code. For some of you, this may come really naturally;
for others it may not. Either is OK.


**Design Thinking**
- Read: [Design Thinking: What is that?](http://www.fastcompany.com/919258/design-thinking-what)
- Read: [Design Thinking Visually](http://visual.ly/what-design-thinking)

## Release 1: Intro to Wireframing

- Read: [A Beginners Guide to Wireframing](http://webdesign.tutsplus.com/tutorials/a-beginners-guide-to-wireframing--webdesign-7399)
- Read: [Beyond Wireframing: Real Life UX Design Process](http://uxdesign.smashingmagazine.com/2012/08/29/beyond-wireframing-real-life-ux-design-process/)

## Release 2: Wireframe a Blog Template
You'll be writing two blog articles each week in Phase 0, and you'll need to have a blog template to copy and paste so you can write your blogs each week.

Wireframe a blog template. You'll be building the template using HTML and CSS for your solo challenge this week. Templates should have space for (at least) a title, date, and text, but you may want to add images or other content as well.

Check out a few blogs to see what information you would want to include in each post if you need some ideas.

You can choose to use a [wireframing tool](http://mashable.com/2010/07/15/wireframing-tools/) or draw it on paper and take a picture of it. Make sure to save an image of your wireframe. Make sure to name it "wireframe-blog-template." (it can be saved as png, jpg, etc.)

## Release 3: Wireframe the index of your site
Now, consider how you want the index of your webpage to look. The index is the first page a person will land when they go to [USERNAME].github.io, so you'll want it to look nice.

You should have a header,footer, and navigation bar on your site.

You will be using this site to promote yourself when you finish Dev Bootcamp, so make sure it has a spot for the following:

  - Links to your social networks (Twitter, facebook, linked-in, quora, github etc. Basically anything from Socrates except for Tumblr, unless you have a tumblr blog you want to add)
  - Your picture
  - Your contact information
  - Link to your blog assignments (You will have technical and cultural blog assignments each week in Phase 0)
  - About me
  - Your projects
  - Anything else you want to include

## Release 4: Add your wireframes to your reflection.

Now that you have your wireframes designed, you'll want to display them in your [my_reflection.md](my_reflection.md) file.

Use the command line for each step below:
  1. Navigate to the week-1/imgs directory
  2. Move your "wireframe-blog-template" and "wireframe-index" images to the imgs directory.
  3. Using markdown, display your images inline in your [my_reflection.md](my_reflection.md) file associated with this challenge.

## Release 5: Reflection
On your local `phase-0-unit-1` repo, edit the [my_reflection.md](my_reflection.md) file associated with this challenge. Commit your changes and save them to GitHub.

## Additional Resources:
- Read: [Design Thinking](http://en.wikipedia.org/wiki/Design_thinking)
<commit_msg>added note about index in week 2<commit_after>[Week 1 Home](../)

# U1.W1: Wireframing

## Learning Competencies
- Explain wireframing
- Identify the benefits of wireframing
- Wireframe a website


## Summary

Regardless of whether design is interesting to you or not, web design
matters to end users of the website and business management.  It's
important to know about so you can work more effectively with other
teams in the organization.  One of the first steps in creating a web page
is often to wireframe it. This process should also help you learn to separate different parts of a site (design vs. content, html vs. css, user interface vs. user experience) and learn the process of developing websites.

You will be building your own, personal website in phase 0. In this challenge, you will build a wireframe of how you want your site to look.

While this sounds like it's only a personal challenge, you can pair on building a wireframe, and both use the same wireframe for your respective sites.

## Releases

## Release 0: Intro to Design Thinking

While designers may be "creative" or "artistic", they are also, like
software engineers, problem solvers. They just solve problems visually
instead of with code. For some of you, this may come really naturally;
for others it may not. Either is OK.


**Design Thinking**
- Read: [Design Thinking: What is that?](http://www.fastcompany.com/919258/design-thinking-what)
- Read: [Design Thinking Visually](http://visual.ly/what-design-thinking)

## Release 1: Intro to Wireframing

- Read: [A Beginners Guide to Wireframing](http://webdesign.tutsplus.com/tutorials/a-beginners-guide-to-wireframing--webdesign-7399)
- Read: [Beyond Wireframing: Real Life UX Design Process](http://uxdesign.smashingmagazine.com/2012/08/29/beyond-wireframing-real-life-ux-design-process/)

## Release 2: Wireframe a Blog Template
You'll be writing two blog articles each week in Phase 0, and you'll need to have a blog template to copy and paste so you can write your blogs each week.

Wireframe a blog template. You'll be building the template using HTML and CSS for your solo challenge this week. Templates should have space for (at least) a title, date, and text, but you may want to add images or other content as well.

Check out a few blogs to see what information you would want to include in each post if you need some ideas.

You can choose to use a [wireframing tool](http://mashable.com/2010/07/15/wireframing-tools/) or draw it on paper and take a picture of it. Make sure to save an image of your wireframe. Make sure to name it "wireframe-blog-template." (it can be saved as png, jpg, etc.)

## Release 3: Wireframe the index of your site
Now, consider how you want the index of your webpage to look. The index is the first page a person will land when they go to [USERNAME].github.io, so you'll want it to look nice.

You should have a header,footer, and navigation bar on your site.

You will be using this site to promote yourself when you finish Dev Bootcamp, so make sure it has a spot for the following:

  - Links to your social networks (Twitter, facebook, linked-in, quora, github etc. Basically anything from Socrates except for Tumblr, unless you have a tumblr blog you want to add)
  - Your picture
  - Your contact information
  - Link to your blog assignments (You will have technical and cultural blog assignments each week in Phase 0)
  - About me
  - Your projects
  - Anything else you want to include
  - 
**PLEASE NOTE:** You will not actually be coding up your index in week 1, we leave that for next week, so don't worry about making it any time this week. 

## Release 4: Add your wireframes to your reflection.

Now that you have your wireframes designed, you'll want to display them in your [my_reflection.md](my_reflection.md) file.

Use the command line for each step below:
  1. Navigate to the week-1/imgs directory
  2. Move your "wireframe-blog-template" and "wireframe-index" images to the imgs directory.
  3. Using markdown, display your images inline in your [my_reflection.md](my_reflection.md) file associated with this challenge.

## Release 5: Reflection
On your local `phase-0-unit-1` repo, edit the [my_reflection.md](my_reflection.md) file associated with this challenge. Commit your changes and save them to GitHub.

## Additional Resources:
- Read: [Design Thinking](http://en.wikipedia.org/wiki/Design_thinking)

{'fraction_non_alphanumeric': 0.0671685002895194, 'fraction_numerical': 0.010422698320787493, 'mean_word_length': 4.146603098927295, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5084973', 'n_tokens_mistral': 2435, 'n_tokens_neox': 2294, 'n_words': 1258}