Transcript Web Design
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 – [email protected] 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 ([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 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.