Communication Technology 1055: Web Design 1
Prerequisite: Comm Tech 1005 - Visual Composition
1. research characteristics of an effective Web page
1.1 identify acceptable guidelines for creating Web pages, including:
1.1.1 elements and principles of design
1.1.2 layout
1.1.3 World Wide Web Consortium (W3C) standards
1.1.4 storage/folder structure
1.2 identify content-related features that contribute to effective Web site design and viewer satisfaction, including:
1.2.1 all required information is provided
1.2.2 content reflects the tastes and images of target audience
1.2.3 the purpose of Web site is clear
1.3 identify design-related features that contribute to effective Web site design and viewer satisfaction, including the following:
1.3.1 text style, size of headings and colour are consistent throughout
1.3.2 after home page, navigation links are positioned in standard location
1.3.3 overall impact and mood of Web site is positive and aligns with target audience’s interests and needs
1.3.4 organization of information is effective
1.3.5 navigation throughout Web site is efficient; e.g., links to top of page and home page, global bars, categories, search features, navigation trails and paths
1.3.6 basic principles of Web usability, readability and accessibility are addressed
1.4 evaluate a variety of Web pages for:
1.4.1 use of accepted guidelines and ease of use
1.4.2 key purpose and target audiences
1.4.3 effective layout, navigation and design elements
1.5 search, review, select and bookmark Web sites that offer support to Web page developers
2. design and create a Web page
2.1 identify the purpose, audience and audience needs for a Web page
2.2 identify Web page content that is relevant to the purpose and appropriate for the target audience
2.3 demonstrate knowledge of flowcharts, storyboards and wireframes to create Web pages and a site map (site index) that maintain the planned Web page hierarchy
2.4 demonstrate general knowledge of best practices for designing a Web page, such as maintaining consistency, separating content from design, using standard fonts, Web-safe colours, and using visual hierarchy
2.5 create a Web page by:
2.5.1 creating an organizational structure for files and folders; e.g., image folder, css folder
2.5.2 creating a new Web page using appropriate naming conventions and original content
2.5.3 adding text to a Web page
2.5.4 inserting images and applying alternative text
2.5.5 linking Web content, using hyperlinks, e-mail links and named anchors
2.5.6 adhering to Web page usability, readability and accessibility standards
2.6 ensure that the Web page design works equally well on various operating systems and/or browser versions/configurations
2.7 add header content to make a Web page visible to search engines
2.8 publish site files to a local or remote server and update them when necessary
3. identify copyright restrictions and permissions and put them into practice
4. present the Web page to an audience
4.1 make Web page development decisions based on analysis and interpretation of design specifications
4.2 consider multiple assessments; e.g., after initial creation, revisions, final version
4.3 add the Web page to a portfolio
5. evaluate, maintain and enhance the Web page to improve features and functions
5.1 identify techniques for basic usability tests
5.2 identify methods for collecting site feedback
5.3 evaluate the impact and navigation of the Web page
5.4 identify potential layout improvements
5.5 enhance a newly created or existing Web page by updating data, editing content, adding/modifying features
5.6 explain reasons for the changes
5.7 manage assets, links and files for a site
5.8 publish site files to a local or remote server and update
1.1 identify acceptable guidelines for creating Web pages, including:
1.1.1 elements and principles of design
1.1.2 layout
1.1.3 World Wide Web Consortium (W3C) standards
1.1.4 storage/folder structure
1.2 identify content-related features that contribute to effective Web site design and viewer satisfaction, including:
1.2.1 all required information is provided
1.2.2 content reflects the tastes and images of target audience
1.2.3 the purpose of Web site is clear
1.3 identify design-related features that contribute to effective Web site design and viewer satisfaction, including the following:
1.3.1 text style, size of headings and colour are consistent throughout
1.3.2 after home page, navigation links are positioned in standard location
1.3.3 overall impact and mood of Web site is positive and aligns with target audience’s interests and needs
1.3.4 organization of information is effective
1.3.5 navigation throughout Web site is efficient; e.g., links to top of page and home page, global bars, categories, search features, navigation trails and paths
1.3.6 basic principles of Web usability, readability and accessibility are addressed
1.4 evaluate a variety of Web pages for:
1.4.1 use of accepted guidelines and ease of use
1.4.2 key purpose and target audiences
1.4.3 effective layout, navigation and design elements
1.5 search, review, select and bookmark Web sites that offer support to Web page developers
2. design and create a Web page
2.1 identify the purpose, audience and audience needs for a Web page
2.2 identify Web page content that is relevant to the purpose and appropriate for the target audience
2.3 demonstrate knowledge of flowcharts, storyboards and wireframes to create Web pages and a site map (site index) that maintain the planned Web page hierarchy
2.4 demonstrate general knowledge of best practices for designing a Web page, such as maintaining consistency, separating content from design, using standard fonts, Web-safe colours, and using visual hierarchy
2.5 create a Web page by:
2.5.1 creating an organizational structure for files and folders; e.g., image folder, css folder
2.5.2 creating a new Web page using appropriate naming conventions and original content
2.5.3 adding text to a Web page
2.5.4 inserting images and applying alternative text
2.5.5 linking Web content, using hyperlinks, e-mail links and named anchors
2.5.6 adhering to Web page usability, readability and accessibility standards
2.6 ensure that the Web page design works equally well on various operating systems and/or browser versions/configurations
2.7 add header content to make a Web page visible to search engines
2.8 publish site files to a local or remote server and update them when necessary
3. identify copyright restrictions and permissions and put them into practice
4. present the Web page to an audience
4.1 make Web page development decisions based on analysis and interpretation of design specifications
4.2 consider multiple assessments; e.g., after initial creation, revisions, final version
4.3 add the Web page to a portfolio
5. evaluate, maintain and enhance the Web page to improve features and functions
5.1 identify techniques for basic usability tests
5.2 identify methods for collecting site feedback
5.3 evaluate the impact and navigation of the Web page
5.4 identify potential layout improvements
5.5 enhance a newly created or existing Web page by updating data, editing content, adding/modifying features
5.6 explain reasons for the changes
5.7 manage assets, links and files for a site
5.8 publish site files to a local or remote server and update
High School Assessment Rubric:
Intro: How are web pages built and, what is the web consortium?
https://www.w3.org/
To start, I want you to simply go to this website and take a tool around. When you are ready, I will ask you the question orally, What is the web consortium?
Also! Important website and asset: https://www.w3schools.com/html/default.asp
That website is made by the web consortium and has a ton of tools to be able to code your website.
To start, I want you to simply go to this website and take a tool around. When you are ready, I will ask you the question orally, What is the web consortium?
Also! Important website and asset: https://www.w3schools.com/html/default.asp
That website is made by the web consortium and has a ton of tools to be able to code your website.
Website Flow Video:
This video will give you the framework about what you should be expecting to do throughout our 3 years in the course. We are hoping to start with level 1 this year, level 2 in 2nd and 3rd year and most likely level 3 if you continue on in your web development journey past high school.
https://www.youtube.com/watch?v=j1pa36PK14E&ab_channel=FluxAcademy
https://www.youtube.com/watch?v=j1pa36PK14E&ab_channel=FluxAcademy
Assignment 1: Research and choose a Host and Domain for you Portfolio
What are we building on? Weebly? Wixx? Squarespace? Wordpress? Ambitious: Html using Dreamweaver hosted locally?
Choose your host, make an account, choose a template and begin making your website.
Choose your host, make an account, choose a template and begin making your website.
Assignment 2: Begin Crafting Your Basic Page and File Structure
Its time to make the basic structure or file tree. Your portfolio website should have these basic pages to start using a navigation menu (see how mine is laid out):
1. Home Page: This page illustrates what your website is aiming to achieve. It is the basic landing page that will give the viewer everything they need to know about what they can see and do here.
2. Vector Graphics (Illustrator)
3. Raster Graphics (Photoshop
4. 2D Animation (Animate)
5. 3D Animation (Blender / Maya / 3DS Max)
6. Computer Aided Design (Fusion 360)
1. Home Page: This page illustrates what your website is aiming to achieve. It is the basic landing page that will give the viewer everything they need to know about what they can see and do here.
2. Vector Graphics (Illustrator)
3. Raster Graphics (Photoshop
4. 2D Animation (Animate)
5. 3D Animation (Blender / Maya / 3DS Max)
6. Computer Aided Design (Fusion 360)
Assignment 3: Make It Beautiful
Here is where you start to design banners (in illustrator) to customize your website to your liking. Also, start playing with backgrounds and all other customization options.
Assignment 4: Begin Posting Your Design Work
Start posting all the work you have been doing in this course to your website. I should see at least 3 pages filled with raster, vector graphics 3d models or animations.
Remember the Elements are Principles of Design in the building of you website. This will be the primary assessment criteria.
I.E. (in other words) I expect 5 fully fleshed out pages with original banners and work. This is a great assignment to show all of your work in this course in a full portfolio.
To hand in your website, please post a url to a notepad document in your website design folder.