1. MW 4:30 – 5:45 College Hall 205 WEB DESIGN JMA 318 | 574

2. 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.edugibbsw@duq.edu

3. 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.

4. 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.

5. Web Design –Goals  Analyze web design characteristics – study other site designs.  Acquire skill in web technologies to create innovative designs.

6. 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.

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

8. Web Design - Textbook Not required Transcending CSS Andy Clarke

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

10. 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.

11. 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

12. 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.

13. 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

14. 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/indefenseofeyecandyStephen P. Andersonhttp://alistapart.com/article/indefenseofeyecandy

15. 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/indefenseofeyecandyStephen P. Andersonhttp://alistapart.com/article/indefenseofeyecandy

16. 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/indefenseofeyecandyStephen 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

17. Learn about design by examining a other designs, functionality … aesthetics

19. ? ? ?

21. Groupings How are these different from above? Groupings Icons seem arbitrary.

23. Utilities Top priority items

24. Front page of The New York Times on Armistice Day, 11 November 1918.The New York Times Armistice Day Source: http://en.wikipedia.org/wiki/Newspaper

27. Design aesthetic resembles newspaper. Layout, type placement, groupings, typography, headings - impact how it is used/read. Source: http://en.wikipedia.org/wiki/Newspaper

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

29. Many site use dominate image or item to draw attention 20132004

30. Many site use dominate image or item to draw attention Blue boxes deemphasize size of image 2013 2004

31. Better view: Blue boxes deemphasize size image

32. 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

33. 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

34. SITE EXAMPLES | THEN AND NOW

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

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

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

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

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

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

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

43. Web Design: Responsive

49. 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

50. 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

51. Web Design: Zen Garden | CSS

55. Examine a variety of designs | CSS CSS CSS3 features : http://tapbots.com/ (Fixed)CSS3 features : http://tapbots.com/ (Fixed) Veerle Pieters : http://veerle.duoh.com/design (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/

56. 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.

57. Class Web Site http://www.jma.duq.edu/classes/gibbs/JMA318/

58. E-mailing E-mailing assignments. Use your Duquesne (smith@duq.edu)smith@duq.edu account.

59. E-mailing E-mailing assignments/attachments. Must have your name E-mail address Title of assignment Label subject of e-mail

60. Applications MS Office: Word Visio

61. Applications Adobe Illustrator

62. Applications Adobe Photoshop

63. Applications Dreamweaver

64. Applications.CSS Web development

65. Overview: topics  Logging on  Our servers  Using FTP  User folder and class folders

66. 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

67. 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/ ).https://apps.duq.edu/webapps/multipass/

68. 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.

69. 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.

70. 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…

71. How do I access the server?  Access from either CH345 and CH205  Start >> Computer (Z: Drive)  \\jma1\users\username

72. 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/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

73. 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.

74. The PUB folder USER FOLDER

75. www.jma.duq.edu Folder File PUB Folder Your Space User folder

76. Folder File PUB Folder Your Space All files for the Web must be in PUB User folder www.jma.duq.edu

77. 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

78. The PUB folder You might create subfolders, for each course. Double-click on pub Right-click on any unused white area

79. The PUB folder  Create new folder  Name it your course name

80. 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

81. For next time  Room 205 access  Biographical sheet

83. User Name and Password  8 characters or more  1 UPPERCASE character  1 number  1 Special character ($, &) – no spaces  (e.g., Duquesne$07)

84. How do I access the server? (from dorm or home) You will be prompted for your username and password – jma/username