This document discusses web design and the process of designing for the web. It defines web design as the visual front end development, including elements like fonts, menus, images and interactivity. It emphasizes the importance of responsive design to display content appropriately across different devices. The key steps in the web design process are outlined, beginning with planning, creating a sitemap and wireframe, designing mockups, developing HTML and CSS, testing, integrating content management systems, and analyzing site usage with analytics.

1. WEB DESIGN
WHAT IS
WEB
DESIGN?

2. WHAT IS WEB DESIGN?
• For the purpose of this course
we will refer to web design as
the visual part of web design.
• This is called “Front End Web
Development”
• Part you can see and interact
with
• Front end web development
includes:
• Fonts
• Menus
• Buttons
• Images and rotating
sliders
• Search boxes
• Etc.

3. RESPONSIVE DESIGN
• We now need to consider
designing for all devices:
• mobile phones
• tablets
• printers,
• RSS readers
• Great way to accomplish
this is with responsive
design
• The same content is
presented in different
ways depending on
the screen size
Try it yourself – great
responsive site is…

4. WHAT DOES WEB DESIGN
INCLUDE?
• Planning & organizing content
• User interface:
• Navigation
• Content blocks
• Images
• Logo
• Design:
• Colours
• Fonts
• Spacing
• Overall “feel”
• Interactivity:
• Video
• Drop down menus
• Pop up windows

5. DO I NEED TO BE A “PROGRAMMER”
TO DESIGN FOR THE WEB?
Good news! The answer is
no!
• Most front end development
requires minimal scripting
and little to no programming
at all so don’t sweat it!
• Very few designers can do
everything
• Many designers specialize in
a part of the process
DESIGN
SENSE
100%

6. WEB DESIGN
THE
DESIGN
WORKFLOW

7. STEP 1: PLANNING
• What is the purpose and goal of the site?
• Who the site is intended for (the target audience)?
• What content will be included?
• What else is the competition doing?
• What are the newest trends and technology.

8. STEP 2: THE SITEMAP
• The site-map is the foundation of the site – serves as the roadmap
• How content will be organized
• How visitors will navigate and experience the site

9. STEP 3: WIREFRAME
• Based on the site map
• Very basic design that shows how the various pages will be laid out
• Includes: navigation areas, images, text and content, search and the logo

10. STEP 4: DESIGN MOCKUP
The next step is to add visual elements to the rough layout – colours, images and other
design elements such as keylines, colour blocks, backgrounds, etc.

11. STEP 5: CREATE THE HTML & CSS
The next step is to add visual elements to the rough layout – colours, images and other
design elements such as keylines, colour blocks, backgrounds, etc.

12. STEP 6: TEST, TEST, TEST
Include older browsers as well as mobile and table environments if responsive design is
a consideration. Think like a user and try all possible features on the site.

13. STEP 6: CMS INTEGRATION
Using a Content Management System (CMS) allows site editing and maintenance to be
distributed among several staff who may not have any HTML background.

14. STEP 7: ANALYTICS
Including site analytics allows the number of page visits – as well as lots of other
information – to be tracked over time. Google Analytics is popular because it’s free, easy
to set up and provides a great deal of data.