1. Introduction to
Web Design

2. Goals and Objectives
This course will provide you with an
online Web Design instruction that
will help you to create a functioning
and visually appealing website.

3. Goals and Objectives
You will be able to build a website on
a topic of their choosing that includes
multiple pages containing text,
images, links, and embedded media.

4. Timeline
• Week 1 – Introduction to Web Design
• Week 2 – Basic Components
• Week 3 – Structure Components
• Week 4 – Multimedia Components
• Week 5 – Social Components

5. Expectations
All students are expected to have a
computer and a reliable connection
to the Internet.

6. Expectations
• Students are expected to view module
content each week.
• Students are to spend 3 hours each
week on their websites.

7. Expectations
By the end of the course, you are
expected to have a functioning and
visually appealing website.

8. Tools of the
Course
Week 1: Introduction to the Course

9. Canvas Course Website
Course Management System (CMS)
• Our class will be delivered via
Instructure Canvas.

10. Collaboration Tools
Email: You can email your instructors,
Mr. Halemano, Mrs. Ahuna, and Mr.
Alexander at webdesign@canvas.net

11. Collaboration Tools
Canvas discussion forum
• When submitting a response for grading, be sure
to reply to the original post (OP).

12. Collaboration Tools
When commenting on class members’ posts, be
sure to reply to their message.

14. Web Tools
During this course, you will be expected
to use web based tools.
• Weebly will be used to demonstrate your
understanding of the class concepts and to
build your website.
• Other web based tools including Google
searches and color calculators will be used
to assist you in finding content for your
website.

15. Purpose
What is the purpose of having a website?
• Informational- A repository of
information
ex. Wikipedia.
• eCommerce- A place to buy and sell
goods or services ex. Amazon.
• Social- A place to build an online
community
ex. Facebook.

16. Purpose
For more information on website
purposes, click on
http://www.xislegraphix.com/website-
types.html

17. Target Audience
Who are you trying to appeal to?
• Specific genders

18. Target Audience
Who are you trying to appeal to?
• Specific age groups

19. Target Audience
Who are you trying to appeal to?
• People with specific interests

20. Target Audience
Who are you trying to appeal to?
• Everyone

21. Content Included
Text: Writing thoughts and ideas to convey
meaning to your audience.

22. Content Included
• Images: Pictures, including .jpg, .png, .gif, .bmp,
and more.
• Click on
http://en.wikipedia.org/wiki/Image_file_formats to
explore more formats.

23. Content Included
• Videos: Moving visual images, with or without
sound including .mov, .avi, .mpg, and more.
• Click
onhttp://en.wikipedia.org/wiki/List_of_file_formats
for more information.

24. Content Included
Digital Content: Content that exists digitally and is
housed on your website. Although the term refers to
ANY type of content (videos etc.) we use the term to
refer to text (word, .pdf etc.) and audio files on your
site.

25. Content Included
• Flash and other online content: These files
include flash movies, games, slideshows,
and other online content.
• Click
onhttp://tv.adobe.com/watch/creativity-in-
education/educator-spotlight-the-
importance-of-creativity-in-learning/ for a
great example of flash videos in a website.

27. Theme
A website theme is a general design layout
that relates to the purpose of the website.

28. Color Scheme
• A color scheme is a combination of colors
that complement each other. Color
schemes can be used to enhance the
overall aesthetics of your website.
• Click
onhttps://kuler.adobe.com/create/color-
wheel/ to play with a color wheel and find
your color scheme.

29. Domain Name
Domain names are a way for people to
find your website on the Internet. These
names translate to an IP address
associated with your website.
• Example: 74.125.224.72 =
www.google.com

30. Graphics
Graphics are a way to add visual
appeal and information to your website.
They also help to create a visual
structure for information and links on the
page and can communicate or explain
ideas visually.
Definition from
http://www.washington.edu/accessit/webdesign/student/unit4/module1/Guidelines_for
_web_graphics.htm

31. Graphics
An aspect ratio is the ratio between the
height and width of a picture.
• Most computer screens are a 16:10 or
16:9 ratio. These ratios may be shown as
1.6:1 and 1.77:1. This is commonly known
as widescreen.
• Some older screens are 4:3 or 1.33:1
ratio.

32. Graphics
It is important to match the image
ratio to the display ratio to get the
most out of the device.
• Example: Remember the old
letterbox movie format? That was
an example of trying to fit a 16:9
image into a 4:3 screen.

33. Paragraphing
It is important to remember the basics of
writing. Paragraphs are an important
component of writing as it helps to
ensure readability and comprehension
of the written material presented on the
screen.

34. Fonts
• Font size is important as it can reduce
eye strain when reading content on
your website.
• A general rule of thumb is to go no
smaller than size16 font.

35. Fonts
• Font style or typeface is important as it
assists with the legibility of the words on
your website.
• Common wisdom points to using only
sans-serif fonts on websites as it is easier
to read.
• Experiment, experiment, experiment!

36. Fonts
• This is 12 pt. sans-serif font.
• This is 12 pt. serif font.
• This is 16 pt. sans-serif font.
• This is 16 pt. serif font.
• This is 20 pt. sans-serif font.
• This is 20 pt. serif font.
• This is 24 pt. sans-serif font.
• This is 24 pt. serif font.
What’s easier for you to read?

37. Image Searching
Google Advanced Image Search allows
you to search images by:
• Size: Small, medium, large, or custom
sizes
• Color: Any, black and white,
transparent or full color
http://www.google.com/advanced_image_search

38. Image Searching
Google Advanced Image Search allows you
to search by:
• Type: Face, photo, clipart, line
drawings or animated
• Time: Define searches by the pictures
post date
• Usage rights: Not filtered, reuse with or
without modification, noncommercial
uses.
http://www.google.com/advanced_image_search

39. Color
A color scheme is a combination of
colors that complement each other.
Color schemes can be used to
enhance the overall aesthetics of
your website.

40. Color Rules
Analogous: Colors adjacent on the color
wheel.

41. Color Rules
Monochromatic: Colors of the same base
hue.

42. Color Rules
Triad: Three equally spaced colors on the
color wheel.

43. Color Rules
Complementary: Colors that create strong
contrast and reinforce each other.

44. Color Rules
Compound: Colors on the opposite ends of
the color wheel.

45. Color Rules
Shades: Different shades of a color.

47. Structure Tools
Web Designers utilize structure tools
that include additional pages,
divider lines, columns, search boxes,
and navigation buttons.

48. Additional Pages
Additional pages allows you to
organize content on topic specific
pages that makes browsing more
intuitive and relevant.

49. Columns and Divider
Lines
Columns are vertical
“containers” for your
website content.
Divider lines allow you to separate
content within a specific column using
a horizontal line.
Depending on
the site, up to
three columns
are common.

50. Search Boxes and
Navigation Buttons
Search boxes allow your users to search
for relevant information in one place.
Navigation buttons are clickable objects
designed to take your user to a
predetermined section of your website.

52. Multimedia Components
Multimedia components add visual
interest to web pages by adding
components such as informational
videos, interactive media, and
various digital documents.

53. Informational Videos
• Informational videos relating to the
website’s topic can be added where
appropriate to help website viewers learn
or experience concepts in a visual way.
• Videos can either be linked to a different
webpage housing a video, or
embedded in a webpage for viewing
within that webpage.

54. Informational Videos
Website with embedded
video.
Website with linked
video.

55. Interactive Media
• Interactive media refers to digital items
which respond to users’ actions.
Interactive media is a valuable addition
to your website as it adds two way
component that provides instant
gratification to your website users.
• Examples include games, calculators and
other online tools.

56. Interactive Media
Here’s some examples of interactive
media in websites.
• Online color calculator-
Kuler.adobe.com
• Projector calculation software-
http://www.projectorcentral.com/projecti
on-calculator-pro.cfm
• Online Game-
http://www.miniclip.com/games/bloons-
td-5/en/#t-ss-S

57. Digital Documents
• Digital documents are an efficient and
green way to distribute documents and
literature to website users.
• These documents can be in many different
formats including .docx, .pdf, and in .odf,
but the de facto standard is .pdf as it is
displayed identically across devices and is
platform agnostic.

58. Digital Documents
• Like instructional videos, digital documents
can be linked or embedded.
• Linked documents allow users to download
the file and read it locally on their computer.
• Embedded documents allow users to read
the document directly within the website.

59. Digital Documents
Example of an
embedded
document.
Example of
a linked
document.

61. Using Social Media
• Social media allows for interaction among
website users to create, share or exchange
information.
• Social network icons makes sharing and
collaborating fast and easy.
• Many icons are already made and ready to
use.

62. RSVP Tool
• Adding an RSVP icon is a great way to
invite website users to a face-to-face
or virtual event.
• The results from the RSVP tool can help
you plan a successful event by
knowing who intends to attend, might
attend or won’t attend an event.

63. Surveys
• Surveys are a great
way to assess
thoughts and
opinions of your
website users.
• These surveys can be
anonymous or
named.
• Surveys can help to
guide your website
to be more relevant
and useful to your
users.