UCC1: New Course Transmittal FormDepartment Name and Number

Recommended SCNS Course Identi�cation

Transcript Title (please limit to 21 characters)

Pre�x Level Course Number Lab Code

Amount of Credit

Repeatable Credit

Contact Hour: Base or Headcount

Course Description (50 words or less)

Prerequisites Co-requisites

Degree Type (mark all that apply) Baccalaureate Graduate Other

Introductory Intermediate Advanced

Department Contact

College Contact

Name

Phone Email

Name

Phone Email

Rev. 10/10

Rationale and place in curriculum

Category of Instruction

E�ective Term and Year Rotating Topic yes no

S/U Only yes no

yes no If yes, total repeatable credit allowed

Variable Credit yes no If yes, minimum and maximum credits per semester

Professional

Full Course Title

Web Design Principles University of Florida, Online Masters in Web Design and Management

Course syllabus

COURSE Number: MMC 6936, sections 087G and 1F14 Credits: 04 Meeting time: Tuesday and Thursday, 8-10pm Eastern Standard Time Office Hours: Sunday 11-Noon EST, or by appointment

INSTRUCTOR Rebecca Rolfe rrolfe@ufl.edu 919.360.5077

WHAT YOU WILL LEARN By the end of this course you will be comfortable creating, coding and posting basic HTML and CSS files to the Internet. Equipped with a historical understanding of the web’s evolution and key design guidelines to ensure strong online presentation, you will have a foundational knowledge of website creation and be able apply it to the planning, design and development of your own website over the course of the semester.

EXPECTATIONS Lectures: Watch and listen to class lectures, and participate in live sessions. Regular attendance is integral to a fulfilling class experience. Blog postings: You are expected to write a blog post (100 word minimum) at least twice a week and comment on a classmate’s blog at least once a week. Blog post topics will be provided. Assignments: You will work through the process of wireframing, designing and developing a Web site. Late work will not be accepted.

Students requesting classroom accommodation must first register with the Dean of Students Office. The Dean of Students Office will provide documentation to the student who must then provide this documentation to the Instructor when requesting accommodation.

REQUIREMENTS You must be prepared to start a blog (if you don’t have one already) to fulfill class assignments. There is no cost associated with this. A useful site that walks you through the process can be found here: http://www.mahalo.com/how-to-set-up-a- blog-for-beginners/. We will review this process during the first week of class.

Recommended blog sites: Wordpress or Blogger These sites both provide technical support and make it easy to get started blogging.

2

You must be prepared to purchase a domain name to develop a web site for your final project. Domain names can cost around $10-15 for a year of ownership and site hosting can cost $8-15 a month. A useful site that walks you through the process can be found here: http://webdesign.about.com/od/beforeyoustartawebsite/p/build_website.htm. We will review this process during the first week of class.

Recommended site hosts: Bluehost or GoDaddy These sites both provide technical support and make it easy to publish your website files.

As this is an online course, you are required to have all the necessary equipment (compatible computer, webcam, mic) and acquaint yourself with the Adobe Connect technology so that you are able to participate in class as you attend live sessions. New Horizons can provide technical support if needed.

Not required, but may be helpful: Don’t Make Me Think, Steve Krug

USB key (at least 1GB) ** Work that is late or lost due to crashed hard drives will not be tolerated. Be sure to back up your files.

REQUIRED TEXTBOOKS All required texts can be accessed using the links provided in this syllabus.

STUDENTS WITH DISABILITIES Students requesting class accommodation must first register with the Dean of Students Office. The Dean of Students Office will provide documentation to the students, who must then provide this documentation to the Instructor when requesting accommodation. For more information about the Dean of Students Office, please visit: http://www.dso.ufl.edu/

3

GRADING Pending holidays, there are approximately 30 classes in the semester and fifteen weeks of classes, with two classes each week.

Blog posts (two weekly) are awarded points according to levels of completion: 2.5 points: Completed task fully and on time 2 points: Blog did not fulfill word requirements or fully achieve assignment tasks 1 point: Blog post was posted late (no more than two days) 0 points: No blog post created, or was posted more than two days late

Additional grading parameters for the class projects will be provided throughout the course of the class.

Your work will be evaluated according to this distribution: Blog participation 75 points 15% Project 1 75 points 15% Project 2 100 points 20% Project 3 75 points 15% Final Project 175 points 35% Total 500 points 100%

And grades will be determined as follows: A A-

465 – 500 points 450 – 464 points

93 – 100% 90 – 92%

B+ B

435 – 449 points 415 – 434 points

87 – 89% 83 – 86%

B- C+

400 – 414 points 385 – 399 points

80 – 82% 77 – 79%

C: C-

365 – 384 points 350 – 364 points

73 – 76% 70 – 72%

D+ D:

335 – 349 points 300 – 334 points

67 – 69% 60 – 66%

D-: E:

275 – 299 points 0 – 274 points

55 – 59% 0 – 54%

GRADING POLICY General University policies regarding grading are found here: http://www.registrar.ufl.edu/catalog/policies/regulationgrades.html

4

PROJECTS What you learn in this class will be implemented in the brainstorming, wireframing, design and coding of a website. The site must be fully functional on multiple browsers (up to standards) and be focused on organizing and visually displaying a collection of items (articles, pictures, etc.) to create a portfolio-based website that can be shown to potential employers as a representation of your design skills. You are responsible for providing the content (text, images, etc.) that will be used on the site. All images and text must be attributed to the copyright owner.

To accomplish this, the following projects will be assigned throughout the duration of the course:

Project 1 Wireframing You will turn in two wireframes of the pages you intend to build, a main page and an interior one. There are no color or typography choices at this time, just boxes representing where content will go and brief text noting placement decisions. Use Adobe Illustrator or Photoshop to create your polished wireframes, but first you must start with pen or pencil and paper and submit your sketches when you turn in your project. JPG, PNG and PDF are acceptable file types, and files shouldn’t be more than 10mb each. A detailed rubric will be uploaded on the class online site and will be reviewed in class before the project is due.

Project 2 Site designs You will turn in the two screens you wireframed in fully fleshed-out design form. This is where color, alignment and typography are critical. Use Adobe Illustrator, Photoshop or a combination of tools to produce your designs. JPG, PNG and PDF are acceptable file types, and files shouldn’t be more than 10mb each. A detailed rubric will be uploaded on the class online site and will be reviewed in class before the project is due.

Project 3 Design pitches Selling your ideas with enthusiasm is a large part of design. In class you will have an opportunity to talk briefly (about 5 minutes) regarding your design choices. Your webcam and mic must be on and functioning during class (as they generally should be in every class.) Although your final site needs only to reflect your designs from Project 2, you must take the feedback provided from the instructor and make edits to your non-digital designs before pitching them.

Peer review The second portion of Project 3 requires you to thoughtfully critique another student’s work. This will be done live in class and is not something that will be rehearsed. In the event of an uneven number of students or the inability of some

5

students to be present in class, a standard website link will be provided for these students to critique.

A detailed rubric will be uploaded on the class online site and will be reviewed in class before the project is due.

Final Project Coded site Taking your final designs and using a coding program (Notepad ++, Adobe Dreamweaver, etc.) you will create a properly coded, live site that functions on multiple browsers. Your website should be able to stand on its own as a complete and finished project. The purpose is not necessarily quantity of content, but quality of layout and design and signs of usability tactics application. A detailed rubric will be uploaded on the class online site and will be reviewed in class before the project is due.

POLICY ON LATE WORK Blogs posted more than two days after deadline will not count towards your participation grade. Projects turned in late will not be accepted except for extreme circumstances (i.e. family emergencies.) If you anticipate not making a project deadline, please speak with the instructor. Every day a project is late, you will lose 15 points from your project’s total score. Requirements for class attendance and make-up exams, assignments, and other work are consistent with university policies that can be found at: https://catalog.ufl.edu/ugrad/current/regulations/info/attendance.aspx.

6

Schedule Each hour block (1 & 2) description refers to what the instructor will be covering in a lecture format. Readings and assignments refer to what the students must be working on or complete by the next class period. All classes require participation by those present, but will be recorded for those unable to attend.

WEEK ONE (THEORY)

Class One – Tuesday, Jan. 10 1 Introduction: Course requirements and overview. Discuss the process of setting up a blog. 2 Design basics: What makes a well-designed site? Why websites often look similar, good practices and common mistakes for new designers. Discuss how to subscribe to RSS feeds to follow web design sites.

What you will learn tonight:

- History of blogs and how to create one - What counts as ‘good design’ - RSS feed compilation

Read before the next class: What is web design, A List Apart Visual decision making, A List Apart Current web design trends, Six Revisions Best practices, Smashing Magazine

Blog before next class: Start a blog if you do not already have one. Make an introductory post answering the below questions and email the instructor the published blog post link when complete:

1) What product, object or thing comes to mind when thinking of the words “good design?” How does that product, object, or thing embody the design ideal?

2) Why is it important for you to become successful at web design? What is your history in the field and where do you hope to go with it?

3) What sites do you visit most frequently for news and inspiration? Class Two – Thursday, Jan. 12 1 Online design evolution (part 1): Discuss the origins of the web and its intended purpose. Look at early site design and notable code enhancements that changed how designers approach the online platform. 2 Online design evolution (part 2): Recent developments in web design, looking at the boom in platforms, browser differences, Flash/HTML5 war and what may

7

be the next wave of web design potential. Discuss how to purchase a domain name.

What you will learn tonight:

- Who invented the Internet - How site design was born - Latest developments in web design - How to purchase a domain name

Read before the next class: Learn to write, A List Apart Taking the guesswork out of design, A List Apart Testing content, A List Apart Testing usability, Smashing Magazine

Blog before next class: Find a webpage that has Wayback machine images from at least 2002 and trace its evolution, noting what changed over the years and why the design is stronger because of it. Include links to the site pages as you refer to them.

WEEK TWO (THEORY)

Class One – Tuesday, Jan. 17 1 Content strategy: Considering the audience, the problem we are trying to solve and what assets are available or still needed. 2 User experience: Understanding behaviors, making actions clear and properly mapping flows.

What you will learn tonight:

- How to write for the web - Why usability matters - Methods for site testing

Read before the next class:

Sketching, UX Magazine Wireframing, UX Magazine Sketching in code, A List Apart Pushing the grid, A List Apart

Blog before next class: Deconstructing a site, Smashing Magazine Choose a website and deconstruct it. (See above article for reference.) Post a picture of that site, a link to it, and list 10-20 observations about the site.

8

Class Two – Thursday, Jan. 19 1 Sketching: The importance of sketching/wireframes in design and the process of seeking feedback with back-of-the-napkin sketches. Assign Project 1. 2 Site framework: Understanding tables, grids, alignment, proper file classification, and setting the page up for future expansion. Discuss uploading content to the web through FTP.

What you will learn tonight:

- The first thing to do when starting a web design - When to move from prototype to code - How to structure a site to last

Read before the next class: Reading online, A List Apart Best practices, Smashing Magazine Guide to saving images for the web, Six Revisions Green site design, Smashing Magazine

Blog before next class: Post a first-draft sketch of your wireframe and discuss the content organization goals you are trying to meet.

Assignments: Project 1: Wireframing a site

WEEK THREE (THEORY)

Class One – Tuesday, Jan. 24 1 Text. Discuss text treatments online, the limitations of HTML and the core approved typefaces. 2 Images. Discuss image treatments online, how to save images for web, file sizes, extension requirements and the differences between them.

What you will learn tonight:

- The available web typefaces - Options to import fancy type - How to prepare images for web use

Read before the next class: Color theory, Six Revisions Photoshop color profiles, Usability Post Perfect portfolio web sites, Smashing Magazine

Blog before next class: Useful type tools, Smashing Magazine

9

Consider what typefaces you may wish to use on your site. Think about the intention of the site and what that requires of the fonts. Discuss your type strategy, using the above link as a reference if needed.

Assignments: Project 1: Wireframing a site (due 11pm EST Wednesday, Jan. 25). Consult rubric for details.

Class Two – Thursday, Jan. 26 1 Color: Discuss color treatments online, history of color online and how to refer to color in code. 2 Presentation of site wireframes (Project 1) Remember to post your files to the drop box at 11pm EST the night before class. The instructor will pull them up into the classroom sharing screen and you will be called on to discuss your design choices and plans for your site. Ensure your webcam and mic are working before class begins.

What you will learn tonight:

- Why colors appear different across monitors - Formal naming codes for color - How to pitch concepts

Read before the next class: How to boost your creativity, Just Creative Design Why use DOCTYPE declarations, HTML.co.uk (ignore ghastly logo) Why use DOCTYPE declarations, Webdesign About.com

Blog before next class: Create a color palette, Smashing Magazine Decide on 3-5 colors you intend to use on your site, keeping in mind your type choices and the purpose of the design. Post these colors and discuss your decision. Use the above link as a reference if needed.

WEEK FOUR (CODE)

Class One – Tuesday, Jan. 31 1&2 Introduction to coding and coding classes. Available text editors and how to use them, plus the beginnings of HTML and CSS basics.

What you will learn tonight:

- Notepad ++, Mac friendly editors - DOCTYPES, xhtml basics - Basic concepts of HTML and CSS

10

Read before the next class: Five types of effective headers in web design, Six Revisions 35 creative and effective website headers, Design Tutorials

Blog before next class: Select a text editor and analyze its interface. (Meta design thinking!) Why is this an optimal product to write code? How does the layout and tools facilitate understanding of what you are building? What do you wish this editor had to enable you to do more with your work?

Class Two – Thursday, Feb. 2 1&2 Discuss core HTML text tags and attribute, plus deprecated tags. Discuss how to code for ADA (disabled audience) compatibility.

What you will learn tonight:

- Headings, paragraphs - Font, strong tags - Lists and list structure

Read before the next class: What is an accessible website?, GAWDS

Blog before next class: In the assigned reading, Jim Byrne says that websites must be accessible to computers first, and humans second. What does he mean by this? Do you agree? How would website function if the reverse were true?

WEEK FIVE (CODE)

Class One – Tuesday, Feb. 7 1&2 Loading imagery within html and linking pages and images. Discuss table- based layout as a form of page structure for web development.

What you will learn tonight:

- ADA attributes for images - Table tags and attributes - Anchors

Read before the next class: Ten things every beginning developer should know, Freelance Folder Should web designers know HTML and CSS?, Six Revisions

Blog before next class: As you’re getting into code, think about why it’s important to understand code, even if you don’t want to be a web developer. Are there any possible rationales

11

for not learning HTML or CSS and still being a web designer? Is it impossible to lead projects not knowing code?

Class Two – Thursday, Feb. 9 1&2 Introduction to CSS (Cascading Style Sheets), as the preferred alternative to table-based layout online. Discuss tag, class and pseudo class selectors.

What you will learn tonight:

- CSS rules - Global vs. internal style sheets - Format tags - Application of classes

Read before the next class: From table hacks to CSS layout: A web designer’s journey, A List Apart

Blog before next class: Tonight’s reading is an article written in 2001. In what ways is it dated? In what ways is it still relevant? Does the fact that it is at all relevant today indicate that it the web evolution is a slow, cumbersome process or that some rules are verifiable and worth attending to in every web development project?

Assignments: Project 2: Designing layout of your site The instructor will email you by this date with feedback on your wireframes and remind you of the Project 2 requirements (see page 3) so that you may begin working on creating your final site design.

WEEK SIX (CODE)

Class One – Tuesday, Feb. 14 1&2 Abstracted coding: How to create HTML image maps and iframes (pages within pages) and when these are used. Discuss of embed and meta tags.

What you will learn tonight:

- Linking targeted parts of images - History of frames, use of iframes - Embedding content, code - Preliminary SEO

Read before the next class: When and when not to use iframes, TabJuice From table hell to div hell, Smashing Magazine

Blog before next class:

12

Creative web design interfaces, Flash Criminals Take a look through some of the site interfaces in the above link. What is the benefit from creatively displaying your site through layouts such as these? What are the inherent risks? How do you balance both factors?

Assignments: Project 2: Designing layout of your site

Class Two – Thursday, Feb. 16 1&2 Expanding on styling: HTML div and span tags, CSS formatting and an introduction to CSS layout.

What you will learn tonight:

- Table layouts vs. CSS layouts - HTML id attribute - CSS id selectors

Read before the next class: CSS positioning 101, A List Apart

Blog before next class: Imagine a web without CSS. (It wasn’t too long ago...) Sure things weren’t terrifically pretty, but they were still functional. Would you argue that CSS isn’t completely necessary for web design? In comparing sites before and after CSS implementation (think back to the Yahoo example at the beginning of the semeter), what did they benefit?

Assignments: Project 2: Designing layout of your site (due 11pm EST, Wednesday Feb. 22). Consult rubric for details.

WEEK SEVEN (CODE)

Class One – Tuesday, Feb. 21 1&2 Discuss CSS box model, CSS float and clear properties to provide proper page structure and spacing of elements.

What you will learn tonight:

- CSS margin, padding, width properties - Positioning elements with float, clear - Grouping selectors - Parent-child relationship of elements

Read before the next class: Useful coding workflow tools, Smashing Magazine

13

Blog before next class: Tabs generator Check out the above tabs generator. Sites like this, and the tools reading, almost make it possible to never learn code. Are tools a boon to web design (by appealing to novices and easing development) or do they permeate online space with poorly generated patterns and cookie cutter set-ups?

Assignments: Submit designs to instructor before 11pm EST. (Project 2) As stated on the rubric (see page 3) you will need to post final files to drop box, keeping in mind file upload restrictions.

Class Two – Thursday, Feb. 23 1&2 Understanding the somewhat complicated CSS position properties and how they affect layout depending on their use. Plus a look at the application of third dimensional space in HTML.

What you will learn tonight:

- CSS relative, absolute, fixed properties - CSS left and top properties - CSS z index

Read before the next class: How to design the perfect web form, WebDesign Tuts Designing web registration forms for kids, A List Apart

Blog before next class: How important is a sense of depth in web design? Can a site be well-designed without the use of the illusion of three dimensional space? At what point is it useful and at what point does it become distracting?

WEEK EIGHT (CODE)

Class One – Tuesday, Feb. 28 1&2 Setting up forms (email postings, comments, applications, etc.) online. A look at form coding in both HTML and with CSS formatting.

What you will learn tonight:

- Form tag, including actions methods - Form element tags and attributes - Server side form processors - 3rd party form sites

Read before the next class: Horizontal menu trends and best practices, Smashing Magazine

14

Blog before next class: Part of the beauty of the web compared to print is that there is, in theory, endless space online. But the average browser height is only about 600 pixels, and that’s very little real estate to make an impression. Is it wiser to go large on a header or have a smaller navigation to allow for original content to sit ‘above the fold?’

Class Two – Thursday, March 1 1&2 Menus and navigation: how to format site menus using CSS.

What you will learn tonight:

- Formatting lists as nav bar - Flexibility of CSS navigation

Read before the next class: Apps vs. the web, A List Apart

Blog before next class: Are menus arguably the most important factor in web design? How important is labeling in creating a clear page hierarchy? How about identifying the menu as links but in a way that doesn’t distract from the rest of the content? When would you make a case for vertical navigation over horizontal navigation?

SPRING BREAK No class Tuesday, March 6 or Thursday, March 8.

WEEK NINE (CODE)

Class One – Tuesday, March 13 1&2 Advance layout: fluid layouts vs. fixed, and when to use them. Plus CSS media types for content that is not strictly text-based.

What you will learn tonight:

- Online measurement units - CSS for media (i.e. aural) - Importing styles

Read before the next class: How QR codes can grow your business, Social Media Examiner A case against QR codes, Authentic Communications

Blog before next class:

15

You are charged with building a new site. What questions do you need to ask to determine whether or not to make it mobile-friendly? How do you know whether you’d build a custom app or make the page scalable or have separate mobile and non-mobile CSS style sheets?

Assignments: Project 3: Pitching design Final project: Building the site The instructor will email you constructive feedback and your grade for your project designs by this class date, along with the rubric for the final project and design pitch assignments (see page 3.)

Class Two – Thursday, March 15 1&2 Computer screens are getting increasingly smaller: a review of basic techniques and practices when coding for smartphones and mobile devices.

What you will learn tonight:

- Common layouts and properties for smartphones - QR codes for site linking

Read before the next class: Improve the SEO of your site, Six Revisions

Blog before next class: As with any new device or technology, the introduction of the QR code to the West has generated a lot of poor applications of the reader. Do you see this as a customary phase with the advent of changing digital technology or feel the community could be better educated as to how to implement things like this?

Assignments: Project 3: Pitching design Final project: Building the site

WEEK TEN (CODE)

Class One – Tuesday, March 20 1&2 Make your site top the list in Google searches: SEO (Search Engine Optimization) common practices and how to code for SEO

What you will learn tonight:

- Meta tags - Use of headings - White hat vs. black hat

Read before the next class:

16

The HTML5 Logo, Smashing Magazine Check out a few sites and their source code on HTML5 Gallery

Blog before next class: The next biggest thing in web development incurred some controversy in how it was branded. (See HTML5 Logo in the reading, above.) Logos can severely derail brand campaigns, as history has proven. Was the original HTML5 branding accurate in being all encompassing? Why are people so possessive of something as malleable and ubiquitous as HTML?

Assignments: Project 3: Pitching design Final project: Building the site

Class Two – Thursday, March 22 1&2 The newly minted HTML5: an introduction to the latest (and next biggest) scripting approach and its associated tags.

What you will learn tonight:

- Difference between XHTML and HTML5 - New tags - Browser support - Media tags

Read before the next class: 70 expert ideas for CSS coding, Smashing Magazine CSS3 vs CSS: A speed benchmark, Smashing Magazine

Blog before next class: Say your site never shows up on one of those ‘Best Designed’ lists. Can it be considered successful? Say it doesn’t show up in the top ten of page results for Google searches. Can it be considered successful? How do you determine what makes a site ‘good?’

Assignments: Project 3: Pitching design Final project: Building the site

WEEK ELEVEN (CODE)

Class One – Tuesday, March 27 1&2 The newly minted CSS3: an introduction to the latest (and next biggest) styling approach and its associated properties.

What you will learn tonight:

17

- CSS2 vs CSS3 - Browser support

Read before the next class: Art of storytelling (Part 1), Smashing Magazine Art of storytelling (Part 2), Smashing Magazine

Blog before next class: HTML5 and CSS3 both officially launched very recently. Are you at an advantage for learning these refurbished approaches or at a disadvantage for learning them during a time of transition? Do you feel there is little point in continuing to learn XHTML and CSS2 knowing that their superior alternatives will be the baseline standard by the time you complete this program?

Assignments: Project 3: Pitching design Final project: Building the site

Class Two – Thursday, March 29 1&2 Managing CSS templates, a final review of code covered, supplemented with examples. There will be time for Q&A for general code questions along with specific codes questions as they relate to your final project.

What you will learn tonight:

- Where to find CSS templates - Coding practices & putting the pieces together

Read before the next class: Minimalist web design, Smashing Magazine Reductionism in web design, Six Revisions

Blog before next class: Now that you’re up to speed on the code, it’s time to shift gears back into theory. How does consideration of web design relate to storytelling? Is it true that the most successful sites are ones that tell a story? Would you say a site as sparse (yet successful) as Google.com still accomplishes this?

Assignments: Project 3: Pitching design Final project: Building the site

WEEK TWELVE (THEORY)

Class One – Tuesday, April 3

18

1 Round 1 Design: After brainstorming, researching and wireframing, design begins. Thinking about how to best tell a story based on available assets, and how to approach an empty page and structure navigation. 2 Minimalism: Less is more in design. Is it possible to convey a message without images or words? The value of whitespace and minimalistic web design.

What you will learn tonight:

- Where to start when finalizing design - The biggest trend in web design - How to eliminate elements to great effect

Read before the next class: Giving better design feedback, Mule Design Sources for community input, Gavin Elliott

Blog before the next class: Minimalized consumer products, Flowing Data Find any site and think about how to minimalize the design. What would you take away or move around to allow the core goal of the site to stand out? Make a very rough mockup of your vision (take a screen grab of the original and move the elements around in Photoshop or draw a sketch and scan it) and include it with your post.

Assignments: Project 3: Pitching design (due 11pm EST, Wednesday, April 4). Refer to the rubric for more details. Final project: Building the site

Class Two – Thursday, April 5 1&2 Design presentations (Project 3) Final design images are due to dropbox by 11pm EST the night before class. During class, students will individually present their design concepts from Project 2 (it is suggested you take into consideration earlier feedback provided by the instructor, even if the final site will not utilize the updated designs.) The instructor will broadcast the images, but webcams and mics must be functioning. After presenting, another student will be called upon to offer constructive feedback on the designs according to the project specifications. See page 3 for more specific project details.

What you will learn tonight:

- How to present prepared concepts Read before the next class: Prepare your design for coding, Web Design Tuts Code a clean and professional web design, Six Revisions Writing an interface styleguide, A List Apart Designing styleguides, Smashing Magazine

19

Blog before the next class: Discuss the feedback you received on your design; whether you think it was helpful or not relevant. This is the space for you to evaluate how effective the site was with a fresh user.

Assignments: Final project: Building the site

WEEK THIRTEEN (THEORY)

Class One – Tuesday, April 10 1 Design Round 2: The next step after designing? Redesigning. Taking the feedback and adjusting designs, and how to take finalized designs and prepare them for coding. 2 Development Shortcuts: Don’t build sites from scratch. Grids, styleguides, toolboxes, pattern and code libraries all exist to help you focus on more important development details.

What you will learn tonight:

- Why there’s never one best design - How to cut files for web development - Methods for streamlining site building

Read before the next class: Part I: Content is not free, Incisive.nu Part II: Paying for it, Incisive.nu Designing for ads, Blog Design Blog Harsh truths about corporate websites, Smashing Magazine

Blog before the next class: Carousel, Yahoo Design Pattern Library Your boss wants you to add a photo carousel to your final project site. (See link above for reference.) How would you add this if you could? If it were impossible within the current design, what would you say to your boss?

Assignments: Final project: Building the site

Class Two – Thursday, April 12 1 Advertisements: A review of standardized sizes, best-practice placements, future trends and ways to integrate the necessary evil into online design. 2 Identity: Building sites around a brand, making the logo pop, coordinating design elements (i.e. favicons) for a cohesive site that underscores the brand.

What you will learn tonight:

20

- Which ad sizes are ideal - What design element matters most to companies - How to think creatively with all the ‘extras’

Read before the next class: Color contrast, A List Apart Usability for older web users, Webcredible The rise of conversation media, UX Booth How to build the perfect web community, WDL

Blog before the next class: Official online ad guidelines, IAB How would you integrate ads into your site? Use the above link as reference to list where certain sizes may go. Would it have been easier to design with ads in mind during wireframing?

Assignments: Final project: Building the site

WEEK FOURTEEN (THEORY)

Class One – Tuesday, April 17 1 Designing for all users: Thinking about the vision-impaired, the deaf and the elderly when working on sites and strategies for balancing these needs. 2 Participation: The forefront of the web lies in the people. Looking at social media, commenting, citizen journalism and how to generate active site users.

What you will learn tonight:

- How to design for the disabled - How to involve users in content creation - Why participation is critical for websites

Read before the next class: How to measure the effectiveness of web designs, Six Revisions Situational design for the web, Six Revisions Put your content in my pocket, A List Apart

Blog before the next class: Portfolio site, Mark Ecko We talked about this in the beginning of the semester. Time to revisit. Is it cool or unusable? Discuss whether this navigation serves the site purpose or could double as a user torture mechanism.

Assignments: Final project: Building the site

21

Class Two – Thursday, April 19 1 Pushing design: Successful methods of integrating interactivity and Flash, and how to do so with the user in mind while considering good vs. great design. SEO strategies and vocabulary choices. 2 Designing for the mobile web, considering the iPad and alternative online platforms.

What you will learn tonight:

- How to make a site No. 1 on Google search - What captures user attention most - Methods of design that translate across mobile technologies

Read before the next class: Getting started with HTML emails, NetsPlus Design professionalism, Smashing Magazine Clients from hell, designers from hell, Revert to Saved

Blog before the next class: How would you go about creating a mobile version of your site? What would be the reasons for doing that? If you’re switching to touch-screen tablets, buttons require a height and width of at least 40pixels. Would your site be functional on such a device?

Assignments: Final project: Building the site

WEEK FIFTEEN (THEORY)

Class One – Tuesday, April 24 1 Email blasts: Discuss how to approach html emails sent through listservs, what makes them different from general websites and what design rules keep. 2 Freelancing: how to enter the market, determining rates and fees, invoices, dealing with clients and explaining what you offer.

What you will learn tonight:

- How to design for archaic email programs - What makes a designer stand out to employers - Why you should never ‘educate’ your client

Read before the next class: An open letter to student designers, Greener Days The details that matter, A List Apart

Blog before the next class:

22

Read through a couple pages on Clients from Hell. Find one where you think perhaps the designer may have been in the wrong as well, or comment on a general trend in the posts.

Assignments: Final project: Building the site (due next class)

Class Two – Thursday, April 26 Website presentations (Final Project) Much like past presentations, you are required to submit your final live website files on dropbox and provide a live link by 11pm the night before class. During class you will call up your site and share it with the class, presenting for 5-8 minutes (time is dependent on total students enrolled in the course), and discussing your site and design choices according to the rubric. (See page 3 for more specific details.) The order will be alphabetical, and the time limit will be enforced. After each presentation students may contribute thoughts and questions and we’ll wrap up the semester.

Blog before Sunday, April 29, 11pm EST: Reflect on your semester, answering the below questions (some of these may sound familiar…):

1) What product, object or thing comes to mind when thinking of the words “good design?” How does that product, object, or thing embody the design ideal?

2) Why is it important for you to become successful at web design? What is your history in the field and where do you hope to go with it?

3) What’s the main thing you learned this semester? (It doesn’t have to be class-related. Sometimes we learn most outside of a classroom.) What’s one thing you still wish to learn?