4_Your_Own_Website

U1.W1: Your website

Learning Objectives

1. Wireframe a website
2. Apply your knowledge by personalizing your website
3. Illustrate your understanding of web design and user experience in your website
4. Describe and practice process of building a website

Purpose

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. 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.

Directions

We're going to make your [USERNAME].github.io website truly yours. This challenge is a chance for you to customize and make the site reflect you. You will work on the index.html page through this challenge.

1. Delve into Design

Delve into a few of the following resources. Try to look at at least one in each section. You don't need to go crazy if you don't have the time or interest. Get an overview then get creative and put it into practice. You can also read more later.

Overview

• Slides: Straight up Design
• Awesome List of links: Design resources for developers
• Read: Design is about solving problems
• Read: 6 Phases of the Web Design and Development Process
• Great List of tutorials: 10 tutorials for beginning web designers

Design Thinking

• Read: Design Thinking
• Read: Design Thinking: What is that?
• Read: Design Thinking Visually

User Experience

• Read: What is User Experience Design?
• Read: User Experience
• Read: User Experience Design

Food for thought

• Read: Design for performance

2. Wireframing

Learn

• Read: A Beginners Guide to Wireframing
• Read: Beyond Wireframing: Real Life UX Design Process

Apply

• Create a plan for your new web page. Add, commit, and push a file with the details to Github.
• Create a wireframe of your website. You can use pen and paper or a wireframing tool.
• Take a screenshot, photo, or save the file. Add, commit, and push the file to Github.

3. Code it up

Use the plan and wireframe as a guide to make the [USERNAME].github.io index.html reflect you and your current skills. Get creative. Have fun. But be conscious of time. This will be a work in progress.

###4. Reflection Go write your reflection and answer the questions!