Unit02 Planning a Website
Overview
This semester you will be creating two small websites. The first will be built week-by-week throughout the semester and the second will be your final project. You will be responsible to provide the content for both sites so pick a topic with which you are familiar. For example, if you are interested in cars it might be about antique cars. If you are interested in fashion, it may be a site advertising a fashion show. If you are an avid skier, you may make a site about a fictional ski resort. You get the idea.
In this unit you will be creating a plan for the site you will build. You will identify the audience, write two goals the site should accomplish, build a simple wire frame, assemble a site map, and select a color scheme.
This assignment will be created in a word processor and submitted as a PDF through Canvas.
Vocabulary
- Usability
- It measure of how easy a website is for visitors to find what they are looking for on various screen sizes.
- Readability
- Readability is a measure of how easy a piece of text is to read. Readability can be effected by the font you use, line length, size of words and length of sentences.
- Wire frame
- Wire frames are simple black and white drawings that outline the specific size and placement of web page elements, site features, content, and navigation for your website. They are devoid of color, font choices, logos or any real design elements that take away from purely focusing on a site's structure.
- Site Map
- A sitemap is a graphical representation showing the relationships between pages in your site.
- Color Scheme
- A color scheme is a selection of colors used for a web site. Color schemes are used to create style and appeal for different audiences.
Tools
- WIREFRAME: Try using wire frame cc for this assignment
- WIREFRAME: Another free wire frame tool is the Pencil Project
- WIREFRAME: You can also use MockFlow (free account) to build the wireframes for this unit.
- SITEMAP: You can even use the drawing tools in PowerPoint to build a wireframe.
- SITEMAP: You can use Adobe Photoshop for this assignment using layers as shown in the demo video.
- SITEMAP: Try WriteMaps for creating site maps
- SITEMAP: You can even use the drawing tools in PowerPoint to complete a sitemap.
- FONTS: Look on Google Fonts and choose from the thousads avaliable.
- COLOR SCHEME: Visit Adobe Kuler to locate a color scheme
- Check the contrast of your color using this contrast checker tool.
Objectives
At the end of this module, you should be able to...
- List the steps in the site development process.
- Choose a topic for a site your will build this semester.
- Develop a site goal.
- Describe a target audience.
- Create wire frames for small and large screens.
- Develop a site map.
- Choose a color scheme.
- Select a font family.
Tasks
- Read "The Site Development Team" by Lynch & Horton
- Read "The Site Development Process" by Lynch & Horton
- Read "General Advice About Running Web Projects" by Lynch & Horton
- Read "Organizing your Information" by Lynch & Horton
- Read "Site Structure" by Lynch & Horton
- Read "Interface Design" by Lynch & Horton
Watch
- Instructional Videos page in each Canvas module
- Watch 1600_2a-Planning a Website
- Watch 1600_2b-The Proposal
- Watch 1600_2c-Build a Wire frame in wireframecc
- Watch 1600_2d-Build a Wire frame in Photoshop (Download the Desktop and Phone wireframe template referenced in the video)
- Watch 1600_2e-Installing VS Code with Live Server extension
Assignment Example
View an example of this assignment
Assignment Checklist
Unit02 Planning a Website (10 pts)
Design a 5-10 page web site. PLEASE choose something you are really interested in (kites, skateboards, music, hiking, cooking, actors, TV series, tools, etc.) You will be writing your own text for this site so you should have a good understanding of the topic.
You will complete this assignment using a word processor and graphics application. DO NOT WRITE ANY CODE.
Please view the example assignment prior to starting.
Site Goals
Please include a measurable goal for your site. What do you want your site to accomplish and how will you know if it succeeds?
- Clearly stated measurable goal
Priamry Audience
Clearly define the groups or individuals that your site will serve.
- Primary audience statement
Desktop Wireframe Elements
You may construct your desktop wireframe in one of several software programs. You will use text and boxes to represent each section listed below.
- Wireframe includes location of the company title and logo
- Wireframe includes placement of navigational items
- Wireframe includes placement of content
- Wireframe includes placement of images/multimedia objects
- Wireframe includes footer information
Small Screen Elements
You may construct your small screen wireframe in one of several software programs. You will use text and boxes to represent each section listed below.
- Wireframe includes location of the company title and logo
- Wireframe includes placement of navigational items
- Wireframe includes placement of content
- Wireframe includes placement of images/multimedia objects
- Wireframe includes footer information
Site Map
Decide the layout of your site and create a site map showing the relationships between each content area.
- Site map detailed as per the example
Color Scheme
You should create or use a professional color scheme that matches the message of your product. Please find one and include a screen capture of the colors as part of your plan.
- Color Scheme Included
- Hex Values listed
Grade
In order to receive a grade for this assignment you must earn 90% of the points listed above.
- Pass
- Fail