WEBSITE J-436/536 SPRING TERM STEVEN ASBURY

Transcription

1 WEBSITE Design J-436/536 SPRING TERM STEVEN ASBURY Spring 2015 T-R, 6:00-7:20 p.m. Steven Asbury Office hours: 3:00 p.m. - 4:00 p.m. and 7:30-8:00 p.m. Tuesdays and Thursdays sasbury@uoregon.edu Website: website_design.html Textbooks (Optional) Web Design All-in-One For Dummies Sue Jenkins (Author) Available from Amazon.com HTML 5 for Dummies by Andy Harris Software/Labs The majority of the coursework will require you to create websites using Adobe Photoshop and Adobe Dreamweaver. It is very important that you take the time to learn Photoshop early in the course as class assignments will require you to use this software to create pages on deadline. Course Objectives By the end of this course, students should be able to do the following. We will cover these topics in class lectures, and you ll be applying them in your design projects. Additionally, your understanding of these objectives will be measured on in-class quizzes. Think critically, creatively and independently as a visual journalist. To understand fundamental design concepts and apply appropriate visual communication theories in the effective use and presentation of images and information. Understand the principles of good website design including the balance, proportion, rhythm, and emphasis. Take and give constructive feedback in a critique-based format similar to what students will experience throughout their careers. Understand basic HTML/CSS, be able to code a simple website, and be able to understand to make sense of basic source code when looking at a website. Understand website strategy and apply strategic goals to your design work. Understand best practices of accessibility in website design, including responsive design. What this class won t cover Unfortunately, I can t teach you everything in just ten weeks. As such, this course will be focused on the design side of websites and not programming. We ll cover some basic HTML the first few weeks to give you an understanding of how the web works, but if you re looking for Flash, Javascript or CSS layout techniques you should probably take a different course.

2 Disclaimer I This course will require significant amounts of time outside class working on design projects. Be prepared to spend weekends or evenings working in the computer labs. It s is an upperdivision course with an upper-division workload. Your responsibility The first two weeks of learning HTML are easy for some and very difficult for others. It is your responsibility as a student to let me know if we re moving too fast or too slow for you. If you aren t satisfied with any aspect of the class, please communicate this upfront. Sitting through class for 10 weeks without sharing your concerns, then leaving negative feedback is not in the best interest of your education, your peers in class or your instructor s goals of making this a positive experience for you. I m happy to customize the class to meet your goals, but I can t help you if you don t communicate. Philosophy Website design is about information and accessibility as much as decoration. You ll be asked to think of yourselves as visual journalists, not just decorators. Grading Grades will be based on the following formula: Participation/Discussion* 25% Design projects/in-class exercises 25% Quizzes 25% Final project ** 25% * Your participation grade is primarily based on three factors. First is your contribution to in-class critiques. Second is attendance. Third is participation through social media. We ll discuss this more during the first class. ** At the end of the term you will turn in a redesign of a website of your choice. Attendance Attendance is required. In the professional world, you re expected to show up for work no matter how much partying you did the night before. Makeup work will be allowed in the case of unavoidable circumstances, but I need to be told about this before the class is scheduled to meet, either in person or . Acceptable excuses include a religious holiday, family emergency, or a job interview that cannot be rescheduled. Missing classes without an valid excuse will lower your grade. Attendance is mandatory. Attendance will be taken daily. The instructor s gradebook is the official record. Come to class on time. Being late for class or leaving early will count as partial absence at the instructor s discretion. No missed classes without a doctor s note, proof of a job interview or verification of a family emergency or religious holiday. All other absences will be considered unexcused and may result in a one-letter-grade reduction for the course. Three tardies is considered equal to one class absence. Three unexcused absences results in failure of the course. No exceptions. If a student is absent, it is his/her responsibility to contact the instructor prior to the class and be up-to-date for the next class. Design projects Grading for design projects will be based on the following criteria. Typography. I expect to see professionallooking typography in all your projects. Accessibility. Is the design responsive? Have you considered the specific needs of your audience? Site organization. Can someone easily tell how to navigate your site? Page organization. Hierarchy. Is there a dominant element and a hierarchy of images and type? Visual communication. How well does the design communicate to the reader? Overall aesthetics. How does is look? Is there a hierarchy of images and headlines? Writing/grammar/spelling. Readers don t see the difference between errors committed by writers and those from page designers. All your graphics and headlines need to be grammatically correct. Please refer to the attached grading sheet for some (not every) grading criteria.

3 IMPORTANT! Design projects must be ed as a jpeg by MIDNIGHT the evening before class. Please bring a thumb drive or hard drive version of your site to class. Deadlines In the real world of journalism, a missed deadline by a designer can cost company thousands of dollars in overtime, lost customers and marketing downtime. Computer crashes, power outages, missing artwork, and late stories happen in businesses across the country, but designers are still expected to always make deadline. Except in rare extraordinary circumstances, late work will not be accepted. Please note that you need to allocate time for technical problems, closed computer labs, computer problems, printing problems and other contingencies. Late work will NOT be accepted. Your work needs to be completed before class begins. s that are being finished after class has started will be considered late and will not be accepted. Final project At the end of the term you will turn in a redesign of a website. Your redesign needs to address both design issues, like typography, AND content and organization. Good redesigns consider what might be enhanced, reduced, eliminated, or added aesthetically, as well as the overall identity of the website. A redesign can be done with an eye toward making the website appeal to a younger or older audience, it may be intended to make the website seem more serious, or more approachable. You will start this project with a website that you believe is in need of improvement or updating. For this reason, it is recommended that you do not choose a major website. Once you have chosen a website that needs a redesign, you ll need to put together a written proposal explaining your choice, why the website is not working, and how it might be improved and updated. Your proposal should include visual examples of areas for improvement and a list of goals for the redesign. The proposal is due Tuesday, April 22nd, at the beginning of class. Your final project is due at the beginning of class on the last day of regularly scheduled class. It should include a CD with the following. At least five web page designs saved as layered PSD files AND jpeg proofs. Separate jpeg proofs showing how each page will reformat for desktop and handheld devices. Printout proofs (8.5 x 11) of each page. A written report explaining the redesign with examples of the before and afters in PDF format printable as 8.5 x 11. Extra Credit: You may earn up to 5 percentage points extra credit on the final project by coding your site using HTML. If you choose this option, please post the site online and me a link. Group critiques I believe in group critiques for two reasons. First, it s how it works in the real world. Second, I believe that everyone s work gets better with collaboration. Important As with any critique-based class, there will be some students who consistently produce better work than others. I don t believe that anyone s work is perfect and will do my part to offer constructive criticism to everyone. However, it is likely that one or two students might have more experience and, therefore, draw less criticism. Please don t take this personally. I get as much enjoyment as an instructor helping a student with little experience improve as helping someone who has a lot of experience refine their skills. Both types of students can earn an A in this course. Costs/Fees For most projects, I ll give you photos to use. I ll also offer handouts throughout the term to help you save on textbook fees. However, on some assignments, such as your final project you might need to purchase stock photography. Students are also encouraged to explore free stock photo sites and take their own photos for their final project.

4 Diversity It is the policy of the University of Oregon to support and value diversity. We re committed to the following. Respecting the dignity and essential worth of all individuals. Promoting a culture of respect throughout the University community. Respecting the privacy, property, and freedom of others. Rejecting bigotry, discrimination, violence, or intimidation of any kind. Practicing personal and academic integrity and expect it from others. Promoting the diversity of opinions, ideas and backgrounds which is the lifeblood of the university. Special Needs If there is any student in this class who has special needs because of a disability of any kind, please see me to discuss it. Academic dishonesty You re expected to do your own designing in this class. Copying designs from other publications will result in an F in this course. Important passages in the Student Conduct Code are in the Schedule of Classes. On the other hand, I encourage you to solicit feedback on your designs from the instructor, other designers and your peers in class. Design should be a collaborative process.

5 WEBSITE Design J 436/536 SPRING TERM STEVEN ASBURY Week TUESDAY THURSDAY March 31 Introductions Review of Syllabus Basic HTML What you need for a website Creating a basic HTML page File naming HTML syntax Tags (<head>,<title>,<body>,<h1>,<p>, images, links) Root folders HTML Build a basic HTML page for your favorite local restaurant Attend Ron Reason s presentation, Design and Disruption, 4 p.m., 141 Allen Website Presentaitons Domain Names and Hosting Where to buy Cascading Style Sheets Study for HTML quiz. April 7 HTML Quiz Tags, syntax, CSS History of Website Design Early 1990s - The first websites Mid-1990s - Design with tables Javascript Late 1990s - Flash Mobile Design Flat Design Website Design Tips Designing in Photoshop File setup. Curtains and the fold. Introduction to Layers File Photoshop tools. Wireframing in black and white Using layers to add color I Redesign your restaurant website in Photoshop Study for Website History quiz April 14 Website Presentations Website History Quiz Web Typography Web-safe fonts Web fonts Loading-time considerations Legibility considerations Design I Retail website syllabus IS subject to change WITHOUT PRIOR NOTICE

6 April 21 Website typography quiz Designing for all devices Responsive design File setup Google s update Photoshop tips Save for Web File formats (jpeg vs. gif) Design II Arts website April 28 Bring an example of a well-designed news website to class on Thursday. Design III News website May 5 Bring an example of a well-designed banner ad to class on Thursday. Online Advertising Design IV Online advertising May 12 May 19 Bring an example of a well-designed arts website to class on Thursday. Bring examples of a well-designed social media pages for three businesses to class on Thursday. Design V Arts website Search Engine Optimization How Google works Online advertising Page rank SEO blogs Social Media Design May 26 Search Engine Optimization Quiz Freelancing tips In-class workshop for final project. June 2 In-class workshop for final project. Final projects due.

7 J-436 WeBSITE DESIGN GRADING FORM Site strategy and organization 5 points Exceptional. Responsive site with excellent strategy and organization. 4 points Great. Responsive site with strong strategy and organization. 3 points Good. Some elements could use improvement. 2 points Fair. Weaknesses in your approach. 1 point Poor. Accessibility and responsive design 5 points Excellent. Design has a responsive component with exceptional attention to audience. 4 points Great. Design has a responsive component with strong attention to audience. 3 points Good. 2 points Fair. Not enough consideration of audience and/or platforms. 1 point Poor attention to accessibility and/or no responsive component. Aesthetics and hierarchy 5 points Your instructor is impressed. Excellent work. 4 points Great work. 3 points Good by college standards. Not quite ready for the professional world. 2 points Some weaknesses in design throughout. 1 point Poor. Writing/Grammar/Spelling 5 points Designer has gone to extra efforts in presenting content. Excellent writing with no errors. 4 points You re thinking like a journalist and not just as a decorator. Good writing with no or few errors. 3 points Average writing. One or two minor errors 0 points Poor writing with errors throughout or one large error. Did you actually proof this? Overall demonstration of effort and attention to detail. 5 points Work that goes above and beyond. 4 points Good effort. 3 points Minor problems in some areas. 2 points Work not quite up to par. 1 point Not your best effort. TOTAL POINTS Did the project meet deadline? Subtract 5 points if late. Subtract 5 points for each additional day late. 23=A, 20=B, 18=C, 15=D Comments