WHAT IS WEB DESIGN?

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.

WHAT IS WEB 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…

RESPONSIVE DESIGN

• Planning & organizing content

• User interface:

• Navigation• Content blocks• Images• Logo

• Design:

• Colours• Fonts• Spacing• Overall “feel”

• Interactivity:

• Video• Drop down menus• Pop up windows

WHAT DOES WEB DESIGN INCLUDE?

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

DO I NEED TO BE A “PROGRAMMER” TO DESIGN FOR THE WEB?

DESIGNSENSE

100%

THE DESIGN WORKFLOW

WEB DESIGN

• 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.

STEP 1: PLANNING

• 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

STEP 2: THE SITEMAP

• 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

STEP 3: WIREFRAME

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.

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.

STEP 5: CREATE THE HTML & CSS

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.

STEP 6: TEST, TEST, TEST

Using a Content Management System (CMS) allows site editing and maintenance to be

distributed among several staff who may not have any HTML background.

STEP 6: CMS INTEGRATION

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.

STEP 7: ANALYTICS