Embed Size (px)
Citation preview
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
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/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
