MW 4:30 – 5:45 College Hall 205 WEB DESIGN 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 –  –

Purpose Introduction to Web designIntroduction to Web design Overview of Web design principles & practicesOverview of Web design principles & practices Work with various software tools to design sites.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 typographyWeb type  color [more color sites]in web designs. colormore color sites  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, 4 th edition. ISBN:

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 ISBN:

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 Exam 4. Final Exam | Client project 5. Group design exercise (EX)EX 6. Web Site – Final Course Project (EX)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, P. Andersonhttp://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, P. Andersonhttp://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, P. Andersonhttp://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 How 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.The New York Times Armistice Day Source:

Design aesthetic resembles newspaper. Layout, type placement, groupings, typography, headings - impact how it is used/read. Source:

Many sites use dominate image or item to draw attention 46% 26% 21%

Many site use dominate image or item to draw attention

Many site use dominate image or item to draw attention Blue boxes deemphasize size of image

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 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 Greater emphasis on large image

SITE EXAMPLES | THEN AND NOW

Web Design Of The Year

Web Design Of The Year

Web Design Of The Year

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

Trends  Increased use of Mobile devices  Single page navigation (EX1) (EX2) (EX3)(EX4)EX1EX2EX3EX4  Responsive Web Design RWD becoming norm (EX1) (EX2)(EX3)EX1EX2EX3  Large type | typography | simplicity, legibility and objectivity – Swiss design style influenceSwiss design style  Creative navigation (Ex1) (EX2) (50 Creative Nav Sites)Ex1EX250 Creative Nav Sites

Examine a variety of designs Zen Garden: CSS and Design :.net best uses of CSS we've seen this year

Web Design: Zen Garden | CSS

Examine a variety of designs | CSS CSS CSS3 features : (Fixed)CSS3 features : (Fixed) Veerle Pieters : (Fixed)Veerle Pieters : (Fixed) Responsive:

You’ll need You should have access to and a Web browser – outside of class. Flash drive (recommended) labeled with your name and contact information on them.

Class Web Site

ing ing assignments. Use your Duquesne account.

ing ing assignments/attachments. Must have your name address Title of assignment Label subject of

Applications MS Office: Word Visio

Applications Adobe Illustrator

Applications Adobe Photoshop

Applications Dreamweaver

Applications.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 part, up to 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: ).

FTP and Z Drives  Student URLS now match DORI login. My old site  would now be  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  Your private folder  It’s a subfolder of users folder   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://  Example: ftp://  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

Folder File PUB Folder Your Space User folder

Folder File PUB Folder Your Space All files for the Web must be in PUB User folder

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  Assuming your file name is default.htm, or index.htm in the jma318 folder the address would be:

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