mw 4:30 – 5:45 college hall 205 web design jma 318 | 574

MW 4:30 – 5:45

College Hall 205

WEBDESIGN

JMA 318 | 574

Instructor

Dr. Bill Gibbs

Associate Professor in the JMA Department.

Ph.D. in Instructional Systems from The Pennsylvania

State University.

Office – 341 COLH

Office hours – Mon. and Wed. 11:00–1:30, Tues. and Thurs. 12:30-

1:30 and by appointment

Phone – 412-396-1310

E-mail – .gibbsw@duq edu

Purpose

• Introduction to Web Introduction to Web design design

• Overview of Web design Overview of Web design principles & practicesprinciples & practices

• Work with various Work with various software tools to software tools to design sites.design sites.

Web Design –Goals

Use key principles & current practices underlying effective and innovative web design.

Analyze audience needs to design and develop web sites.

Prototype web designs.

Web Design –Goals

Analyze web design characteristics – study other site designs.

Acquire skill in web technologies to create innovative designs.

Web Design –Goals

Apply precepts of: design, layout typography, [Web type] and color [more color sites]in web designs. Responsive design, mobile-first

Critically evaluate your own web designs.

Plan, design, develop, and implement Web sites.

Web Design - Textbook

Learning Web Design by Jennifer Robbins, 2012, 4th edition.ISBN: 978-1-449-31927-4.

Web Design - Textbook

Not required

Transcending CSS

Andy Clarke

Web Design - Textbook

Not required

HTML& CSS: Design and build websites, Jon Duckett, John Wiley and Sons, INC. 2011. ISBN: 978-1-118-00818

Web Design - Textbook

Other books - Not required

•Implementing Responsive Design, by Tim Kadlec, 2013, New Riders.

•Bulletproof Web Design, by Dan Cederholm, 2008, New Riders.

•Modular Web Design, Nathan Curtis, 2010, New Riders.

•Javascript and jQuery, by Zak Ruvalcaba & Mike Murach, 2012, Murach.

Assignments

1. Labs/homework - design exercises (7)2. Quizzes (2)3. Midterm Exam4. Final Exam | Client project5. Group design exercise (EX)6. Web Site – Final Course Project (EX)7. Graduate project

Assignments

•Labs/projects are due at the end of the day.

• Late assignments receive a 10% per class penalty up to a maximum of 30%. Cannot be accepted after 3 class periods.

We will look for examples of beautiful web design Aesthetically pleasing objects appear

more effective to the user because of their appeal.

… the user feels an affinity for an object that appeals to him/her, due to the formation of an emotional connection with the object.

Don Norman, Emotional Design

Aesthetics play powerful role in shaping how we come to know, feel, respond.

In Defense of Eye Candy by Stephen P. Anderson April 21, 2009 http://alistapart.com/article/indefenseofeyecandy

Aesthetics play powerful role in shaping how we come to know, feel, respond.

In Defense of Eye Candy by Stephen P. Anderson April 21, 2009 http://alistapart.com/article/indefenseofeyecandy

Aesthetics play powerful role in shaping how we come to know, feel, respond.

In Defense of Eye Candy by Stephen P. Anderson April 21, 2009 http://alistapart.com/article/indefenseofeyecandy

This suggest, I’m a box on a

page

This suggest I’m a button –

click me

This suggest, a house

This suggest click to go

home

Learn about design by

examining a other designs,

functionality … aesthetics

? ??

Groupings

GroupingsHow are these different

from above?Groupings

Icons seem arbitrary.

Utilities

Top priority items

Front page of The New York Times on Armistice Day, 11 November 1918.

Source: http://en.wikipedia.org/wiki/Newspaper

Source: http://en.wikipedia.org/wiki/Newspaper

Design aesthetic resembles newspaper.

Layout, type placement, groupings, typography, headings - impact how it is used/read.

Source: http://en.wikipedia.org/wiki/Newspaper

Many sites use dominate image or item to draw attention

46%

26%

21%

Many site use dominate image or item to draw attention

20132004

Many site use dominate image or item to draw attention

Blue boxes deemphasize size of image

20132004

Better view: Blue boxes deemphasize size image

Inside that folder you should create a folder for each course that requires a web site

Inside that folder you should create a folder for each course that requires a web site

Inside that folder you should create a folder for each course that requires

Inside that folder you should create a folder for each course that requires a web site

Inside that folder you should create a folder for each course that requires a web site

Inside that folder you should create a folder for each course that requires

Greater emphasis on large image

Inside that folder you should create a folder for each course that requires a web site

Inside that folder you should create a folder for each course that requires a web site

Inside that folder you should create a folder for each course that requires a web site

Inside that folder you should create a folder for each course

Greater emphasis on large image

SITE EXAMPLES | THEN AND NOW

Web Design Of The Year 2000www.topdesignmag.com/web-design-of-the-year-2000/

Web Design Of The Year 2000www.topdesignmag.com/web-design-of-the-year-2000/

Web Design Of The Year 2000www.topdesignmag.com/web-design-of-the-year-2000/

Best of Web Design in 2012webdesignledger.com/inspiration/best-of-web-design-in-2012

Best of Web Design in 2012webdesignledger.com/inspiration/best-of-web-design-in-2012

Best of Web Design in 2012webdesignledger.com/inspiration/best-of-web-design-in-2012

• Images• Imagery/realism• Typography• Dimension, scale • Color• Texture• Central dominance • Text density

Web Design: Responsive

Web Design: Responsive

Web Design: Responsive

Web Design: Responsive

Web Design: Responsive

Web Design: Responsive

Trends

Increased use of Mobile devices

Single page navigation (EX1) (EX2) (EX3)(EX4)

Responsive Web Design RWD becoming norm (EX1) (EX2)(EX3)

Large type | typography | simplicity, legibility and objectivity – Swiss design style influence

Creative navigation (Ex1) (EX2) (50 Creative Nav Sites)

Examine a variety of designs

http://www.netmagazine.com/features/top-20-css-sites-2012

Zen Garden: http://www.csszengarden.com/

CSS and Design: .net best uses of CSS we've seen this year

Web Design: Zen Garden | CSS

Web Design: Zen Garden | CSS

Web Design: Zen Garden | CSS

Web Design: Zen Garden | CSS

Examine a variety of designs | CSSCSS

•CSS3 features: http://tapbots.com/ (Fixed)

•Veerle Pieters: http://veerle.duoh.com/design (Fixed)

Responsive:

•http://www.stuffandnonsense.co.uk/design

•http://www.netmagazine.com/features/top-25-responsive-design-tools

•http://www.awwwards.com/websites/responsive-design/

You’ll need

You should have access to e-mail and a Web browser – outside of class.

Flash drive (recommended) labeled with your name and contact information on them.

Class Web Site

http://www.jma.duq.edu/classes/gibbs/JMA318/

E-mailing

E-mailing assignments.

Use your

Duquesne

(smith@duq.edu)

account.

E-mailing

E-mailing assignments/attachments.

• Must have your name

• E-mail address

• Title of assignment

• Label subject of e-mail

Applications

MS Office:

• Word

• Visio

Applications

Adobe Illustrator

Applications

Adobe Photoshop

Applications

Dreamweaver

Applications

<html></html>

.CSS

Web development

Overview: topics

Logging on Our servers Using FTP User folder and class folders

User Name and Password

To connect to our servers from within either of our two labs (205 or 345): Ctrl-Alt-Delete Username: Dori username PW: Dori password

User Name and Password

Labs (205, 345) - login with your DORI username and password (i.e. the email part, up to the @ symbol).

If you don't know your password, need to go to the computer help desk in the union.

OR simply go to the "forgot your password" screen on DORI from any logged-in computer. (Here's the link: https://apps.duq.edu/webapps/multipass/ ).

FTP and Z Drives

Student URLS now match DORI login. My old sitewww.jma.duq.edu/users/gibbs/pub/whatever, 

would now be  www.jma.duq.edu/users/gibbsw/pub/whatever

Students will use Dori login with no prefix. Logins DO NOT need the jma\ prefix.

FTP and Z Drives

Z drives for students who were registered as of 8/20 have been created.

Later registrants may not have a z drive.

If you do not have a Z drive, write down your name and Dori ID so it can be created.

FTP address is your DORI name, not simply your last name.

Server

www.jma.duq.edu Your private folder It’s a subfolder of users folder

www.jma.duq.edu/users/DoriUsername

Save files (drag and drop files) while in either lab (CH205, CH345)

You can also FTP to there from home…

How do I access the server?

Access from either CH345 and CH205

Start >> Computer (Z: Drive)

\\jma1\users\username

How do I access the server?

From dorm or home

ftp://www.jma.duq.edu/users/YourDoriUsername

Example: ftp://www.jma.duq.edu/users/gibbsw/

You will be prompted for your user name and password

Use the same name and password you used to login to Dori

How do I access the server?(from dorm or home)

• Folders and files display• Transfer (put) files from your computer, • Download (get) files to your computer.

The PUB folder

USER FOLDER

www.jma.duq.edu

Folder

File

File

FileFile

PUB Folder

Folder

Your Space

User folder

Folder

File

File

FileFile

PUB Folder

Folder

Your Space

All files for the

Web must be in PUB

All files for the

Web must be in PUB

User folder

www.jma.duq.edu

User Folder

Your folder on server has a child folder named pub

Inside that folder you should create a folder for each course that requires a web site

In this course, create a sub folder named JMA318 or JMA574

The PUB folder

•You might create subfolders, for each course.

Double-click on pub

Right-click on any unused white area

The PUB folder

Create new folder

Name it your course name

Web URL

The URL to your website(s) depend on how you structured your home folder

Using earlier example

http://www.jma.duq.edu/users/gibbsw/pub/JMA318/FileName.htm

Assuming your file name is default.htm, or index.htm in the jma318 folder the address would be:

http://www.jma.duq.edu/users/gibbsw/pub/JMA318/index.htm

For next time

Room 205 access Biographical sheet

User Name and Password

8 characters or more 1 UPPERCASE character 1 number 1 Special character ($, &) – no spaces

(e.g., Duquesne$07)

How do I access the server? (from dorm or home)

You will be prompted for your username and password – jma/username