Unit 1: Intro
Unit Essential Questions
You should use the questions below to assess your own learning and understanding of course material. These questions are also a good method of organization if you’re taking notes.
Design & Accessibility
- What is good design?
- What are the basic principles of design?
- What should I keep in mind as I design and develop my site?
- Why is it important my sites are accessible to everyone?
Web Development Setup
- What is the process for designing and developing a site?
- What is a wireframe and why is it important?
- What’s the difference between a webpage and a website?
- What is a URL made up of?
- What is a domain name registrar?
- What is web hosting?
- What is domain privacy?
Unit Readings
Design Principles
- Read The Principles of Design and Their Importance and/or watch The Principles of Design
- Read: 27 Research-Backed Web Design Tips: How to Design a Website That Works
- Watch: 5 Website Design Hints. Web Design Tutorial For Beginners
Accessibility
- Read: UX and the Importance of Web Accessibility
- Watch: Introduction to Web Accessibility and W3C Standards
- Read: Supreme Court allows blind people to sue retailers if their websites are not accessible
Web Development Setup
Wireframes
- Read What is wireframing? and/or watch What is a Wireframe?
- Review: Sample wireframe
Domains
- Read Anatomy Of A URL and/or watch Parts of the URL
- Watch: What Is The Difference Between A Domain Name And A Website?
- Read What is domain privacy and do I really need it? and/or watch What is Domain Privacy? (ignore the sales pitch)
Hosting
- Read Web Hosting Explained for Beginners and/or watch What is Web Hosting? (ignore the sales pitch)
- Read: What’s the Difference Between Domain Name and Web Hosting (Explained)
Unit Lab
This assignment will have you begin to practice your design and wireframing skills while setting you up with a plan for the website you’ll be working on for the rest of the term! Make sure to refer to the unit readings for helpful reference material as well as additional resources.
Description
Choose something you’re passionate about and create a wireframe (can be hand-drawn or done on the computer) for an informational website about it. Your wireframed site should:
- Consist of at least 4 pages
- Include at least 1 link to an external site
- Include at least 1 email link
- Include at least 1 jump link
- Include at least 2 relevant images
Write a couple paragraphs describing the purpose of your site and justifying your design choices– make sure to cite any resources you referenced for making or justifying said choices. Additionally, come up with at least 3 domain name ideas for your site– make sure they make sense for your site’s topic.
Recorded Lecture
The lecture below provides additional information on prototpyes and wireframes which you may find particularly useful for completing your assignment. However, if you feel comfortable with the material already, you may choose to skip watching this lecture. A copy of the slides presented below is available here.
What to Submit
Submit a single document with your writeup, picture(s) or screenshot(s) of your wireframe, and your three domain ideas. Remember all submissions are done through Canvas.
Requirements
- Submission includes picture(s) of wireframe(s)
- Submission includes at least 3 domain ideas relevant to site
- Submission includes a description of site’s purpose
- Submission includes a a couple paragraphs describing and justifying design choices
- Submission includes citations/references as/where needed
- Wireframe consists of at least 4 webpages
- Wireframe includes at least 1 link to an external site
- Wireframe includes at least 1 email link
- Wireframe includes at least 1 jump link
- Wireframe includes at least 2 relevant images
Additional Resources
- Read Sketch, Wireframe, Mockup, and Prototype: Why, When and How
- Read Prototyping 101: The difference between low-fidelity and high-fidelity prototypes and when to use each
- Read How to Choose a Domain Name and/or watch 8 Rules for Choosing a Domain Name
- Some Example Interface Builders: