Class Schedule

Class 1

Introduction 
My background, your background, experience and goals 
Class Blog Site 
Syllabus 
Course Description and Objectives 
Class Project 
A Brief Internet and Web History 
Web Design Introduction 
Student Work Samples 
Good Design vs. Bad Design 
Setting up a blog using Blogger 

Assignment: 

1. Send me your email address and contact numbers to alasser@pratt.edu 
2. Create a blog at Blogger.com and send me your blog address. 
3. Pick a template for your blog and edit the styles. 
4. Show 3-5 links of good and bad web design. Share your thoughts on why you feel so. 
5. Include 3 different possibilities for your proposed project. If you choose to redesign a site, have a few to choose from. (Include links and screen shots to review) 

Class 2 

Present your work and assignment 
Web Design Process 
Web page Anatomy

• Sitemaps and Flowcharts 

Web Design

• Types of Sites 
• Trends 
• Responsive Web Design 
• UX - User Experience 
• UI - User Interface 

Assignment: 

1. Research your target audience. Who are they? Interview them, research their likes/dislikes. What are they called? Post photos, video clips and any other material about them on your blog. 
2. Research your competitors. Who are they? Can you leverage anything from their site? What will set your site apart from the competition? Include links and screen shots on your blog for discussion.
3. Create a sitemap for your site. 
4. Make a user flow chart on paper or computer. 
5. Bring in the current logo, if there is one, and discuss if, why and how you're going to change it. Do new sketches. If you need to create a new logo, bring in possible sketches or type treatments. 

Class 3

Review Assignments 
Logos and Branding

• Beginning the design process 
• Typography 
• Color 
• Style 

Setting up Photoshop for the Web

• Use a framework template 
• Web Design Workspace 
• Default Preferences 
• Creating a New File 
• Screen Resolution and size 
• Give it a name that is appropriate 
• Setting up groups for your site design 

Layout

• Sketching out Wireframes - first on paper 
• Grids 
• Layout and Composition 
• Creating wireframes 

Assignment:

1. Use Illustrator to work on logo.  
2. Sketch out wireframe possibilities. Have fun experimenting! 
3. Create two wireframe layouts. 
4. Collect content to begin to setup your pages, including logo, social media icons, imagery and possible type choices. 
5. Look at Google Fonts, experiment with type. 

Class 4

Review Assignments 
Basic Color Management for the Web

• Adobe vs sRGB 

Basic Layout

• Set up your site in Photoshop 
• Header 
• Logo 
• Navigation 
• Social media 
• Feature or imagery 
• Content areas with lorem ipsum, imagery 
• Footer 
• Other common elements 

Typography

• The basics, type anatomy, typefaces, serifs, san serifs spacing, alignment and color 
• Choosing the right fonts - legibility 
• Creating navigation 
• Headers, subheads and content 
• “HTML” text 
• Graphic image replacement 
• Font services 

Assignment: 

1. Begin on your homepage design incorporating your logo, navigation, color palette and imagery. 
2. Create a submenu page wireframe. 
3. Include submenus in your design. 
4. Bring your content for in class work. 

Class 5

Review Assignments 
Working with Color 

• Color Psychology and Association 
• Basic color theory 
• Color inspirations 
• Color resources 
• Hexidecimal numbers 

Layout a page in Photoshop 

• Setting up your groups for layer organization 
• Homepage and submenu pages and differences 
• What is their function 
• Different templates for variety 
• Navigation/hover states 
• Resolution and sizes 

Assignment: 

1. Create a second design direction for your site's homepage and submenu page. 
2. Add and show rollover states and link styling. 

Class 6

Review Assignments 
Mobile Design 

• Templates and sizing 
• Create 2 wireframe pages for mobile and tablet 

Assignment: 

1. Create another submenu page with a varied layout from the first. (You will have two submenu page templates.) One could be a contact page with a form. 
2. Create one content page of selected section. 

Class 7

Review Assignments 
Working with Imagery 

• Choosing/creating the right photos, icons, illustrations for your site 
• Image adjustments 
• Image Resources 
• Stock photography and licensing 
• Image treatment 
• Cropping images to fit 
• Adjustment masks 
• Clipping group type effect 
• Retouching 
• Creating Artwork 

Assignment: 

1. Finish 3 pages of your website's, homepage, submenu and content pages.
2. Create wireframes for your mobile display and tablet. 

Class 8

Review Assignments 
More on Mobile 

• Sizing 
• Logical Breakpoints 
• Mobile First 
• Resources 
• Edge Reflow 

Clean up your design files 

• What do your files look like? 
• How are they organized? 
• Make sure they are clean and clear to hand off. 

Assignment: 

1. Finish all pages for your site. 
2. Choose 2 pages from your site and adapt the design for both mobile and tablet: 2 for mobile and 2 for tablet. 

Class 9

Review Assignments 
Web tools in Photoshop 

• Save for web 
• File type choices 
• Resolution 
• Image optimization 
• Output Settings 

Setting up a click-through prototype on the Pratt hosting server 

• Save out jpgs of all your site pages 
• Create html pages with links 
• FTP to the server 
• Test 

Assignment: 

1. Save out jpgs of all pages of your site. 
2. Have files ready for viewing to check structure and organization. 
3. Make final touches to all pages of site. 
4. Prepare presentations for last class. Discuss the site problems and your solutions. 
5. Have all screens saved out as jpgs to turn in. Include a text file with your name and link to your blog. This needs to be done before you present. 

Class 10

The Pratt Server - hosting servers and domains 
Questions / Comments 

Final Presentation

1. Present your final website along with all your work from the semester. 
2. Have all your screens up on your blog. 
3. Hand in your work and the link to your blog and work pages.