Download Web Design

WEB
DESIGN
MW 4:30 – 5:45
College Hall 205
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 – [email protected]
Purpose
• Introduction to 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.
7.
Labs/homework - design exercises (7)
Quizzes (2)
Midterm Exam
Final Exam | Client project
Group design exercise (EX)
Web Site – Final Course Project (EX)
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.
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
?
?
?
Groupings
Groupings
How are these different from
above?
Icons seem arbitrary.
Groupings
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
21%
46%
26%
Many site use dominate image or item to
draw attention
2004
2013
Many site use dominate 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
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 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
•
•
•
•
•
•
•
•
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
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/
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.
You should have access
to e-mail and a Web
browser – outside of
class.
Class Web Site
http://www.jma.duq.edu/classes/gibbs/JMA318/
E-mailing
E-mailing assignments.
Use your
Duquesne
([email protected])
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
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.
USER FOLDER
The PUB folder
www.jma.duq.edu
Your Space
User folder
Folder
PUB
Folder
File
File
Folder
File
File
www.jma.duq.edu
Your Space
User folder
All files for
the
Folder Web must
be in PUB
PUB
Folder
File
File
Folder
File
File
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