WEB
DESIGN
MWF 2:00 – 2:50
College Hall 345
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., Wed. and Fri. 10:30–12:00 and 1:00-2:00 and by
appointment

Phone – 412-396-1310

E-mail – gibbsw@duq.edu
Purpose
• Examine Web design
• Overview of Web
design principles &
practices
• Work with various
software tools to
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.
2.
3.
4.
5.
6.
Labs/homework - design exercises (7)
Quizzes
Midterm Exam/project (EX) (Doc EX) (EX)
Final Course Project (EX) (EX)
Final Exam
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
Fifty Ugliest Cars of the Past 50 Years
http://images.businessweek.com/ss/09/10/1028_50_ugliest_cars_of_past_50_years/7.htm
Aesthetically pleasing objects
appear more effective to the
user because of their appeal.
100 Most Beautiful Cars of All Time
http://www.edmunds.com/car-reviews/features/100-most-beautiful-cars-ever-made.html
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.
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
In Defense of Eye Candy by Stephen P. Anderson April 21, 2009 http://alistapart.com/article/indefenseofeyecandy
Why are these here?
?
Can I see
categories?
?
?
Groupings
Groupings
How are these different from
above?
Icons seem arbitrary.
Groupings
Utilities
Top priority items
Six different type treatments
Six different colors
Multiple shapes/areas.
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
What’s here.
Source: http://en.wikipedia.org/wiki/Newspaper
Many sites use a dominant image or item to
draw attention
21%
46%
26%
Many sites use dominant image or item to
draw attention
2004
2013
Many site use dominant image or item to
draw attention
2004
Blue boxes deemphasize size of image
2013
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 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
Greater emphasis on large image
Greater emphasis on large image.
Context, size, shape of surrounding
objects impact emphasis.
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
SITE EXAMPLES | THEN
AND NOW
Web Design Of The Year 2000
www.topdesignmag.com/web-design-of-the-year-2000/
Web Design Of The Year 2000
www.topdesignmag.com/web-design-of-the-year-2000/
Web Design Of The Year 2000
www.topdesignmag.com/web-design-of-the-year-2000/
Best of Web Design in 2012
webdesignledger.com/inspiration/best-of-web-design-in-2012
Best of Web Design in 2012
webdesignledger.com/inspiration/best-of-web-design-in-2012
Best of Web Design in 2012
webdesignledger.com/inspiration/best-of-web-design-in-2012
Best of Web Design in 2013
webdesignledger.com/inspiration/best-of-web-design-in-2013
Best of Web Design in 2013
webdesignledger.com/inspiration/best-of-web-design-in-2013
Differences
• 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
Dropping Side Bar (EX)
Simplified content and Color scheme (EX)
Single page navigation (EX1)(EX2)(EX3)
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
CSS and Design: .net best uses of CSS we've
seen this year
http://www.netmagazine.com/features/top-20-css-sites-2012
Zen Garden: http://www.csszengarden.com/
http://www.thebestdesigns.com/
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 | CSS
CSS
• 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
• Flash drive
(recommended) labeled
with your name and
contact information on
them.
• Text Editor, image
editor.
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
Axure
Applications
Web development
<html></html>
.CSS
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 site
www.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.