Class Schedule

Class 1

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

Lecture Topics

  • About Me
  • History of the Web
  • Behind the Scenes
  • Web Design Overview
  • Create A Blog

Assignment 1:

  1. Send me your email address and contact numbers to alasser@pratt.edu or alasser.pratt@gmail.com
  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. Post links and screen shots of sites on your blog. Share your thoughts on why you feel so.
  5. Have 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 on your blog.


Class 2

Present Assignment 1
Process: Start to Finish
Web Design
  - Types of Sites
  - Trends: responsive, parallax, etc.
Web page Anatomy
  - Sitemaps vs User Flows
Sketch App

Lecture Topics

  • The Design Process
  • Web Trends & Design Styles
  • Branding
  • Sitemaps & Flow Charts


Assignment 2:

  1. Research your target audience and competitors. Who are they? Can you leverage anything from their site? What will set your site apart from your competition? Include links and screen shots on your blog for discussion.
  2. Using pen and paper and/or computer, create a sitemap of the existing site (if there is one) as well as a sitemap for your project site. Post them to your class blog.
  3. Bring in the current logo/branding, 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.
  4. Watch the remaining Sketch App tutorials and begin to play and familiarize yourself with Sketch App.

Class 3

Present Assignment 2
Setting up Photoshop for the web
  - Workspace
  - Preferences
  - Creating a new file
  - Screen resolution and size
  - Layers: give it a name that is appropriate
  - Groups
Grids
Wireframes
  - Process

Lecture Topics

  • Preparing Your Photoshop Files
  • Grid Systems & Wireframes

Assignment 3:

  1. Use Illustrator to finalize logo/branding.
  2. Using pen and paper, sketch out multiple layouts for your site. I'd like to see at least 2 versions of: a homepage, a landing page, and a detail page. This phase is to be done by hand, and you should be able to move through these sketches fairly quickly. The point is to build off of your initial idea/sketch while looking at your competitors and other sites for inspiration. Keep in mind, at this point we're not thinking about aesthetics so don't worry about imagery, color, type, etc. just focus on the layout.
  3. Start to think about the type of content you'll need in order to begin setting up your pages (e.g. logo, social media, icons, imagery, text and fonts).

Class 4

Present Assignment 3
Basic Layout
  - Header
  - Logo
  - Navigation
  - Social media
  - Feature or imagery
  - Content areas with lorem ipsum, imagery
  - Footer
  - Other common elements
Layout a page in Photoshop
  - Setting up your groups for layer organization
  - Homepage and submenu pages and differences
  - Different templates for variety
  - Resolution and sizes

Lecture Topics

  • Gathering Content for your Website
  • Common Elements

Assignment 4:

  1. Begin to digitalize your sketches by creating wireframes in the application of your choice, I'd recommend Photoshop or Sketch App to make the visual design transition quicker. If you have time before the next class, keep designing!! Gather content and move on to number 2...
  2. If you've already completed your digitalized wireframes, begin designing your site in Photoshop/Sketch App. If you used Photoshop to create your wireframes, duplicate and rename that file and begin incorporating your content. If you used Sketch App you can duplicate your page, rename it, and begin incorporating your content. 
    1. Begin to design your homepage and at least one additional page of your site. If you complete this keep designing additional pages.
  3. Bring your content for in class work.
  4. Look at Google Fonts and start to play with some different fonts.

Class 5

Present Assignment 4
Working with color
  - Color Psychology and Association
  - Basic color theory
  - Color inspirations
  - Color resources
  - Hexadecimal numbers
Working with type
  - 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
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

Lecture Topics

  • Psychology of Web Design
    • Part 1: Content & Space
    • Part 2: Color
    • Part 3: Typography

Assignment 5:

  1. Based on what you learned from todays lecture, how would you change your current designs? Create an alternate design direction for your site's homepage and landing page.
  2. Keep working through the other pages of your site. 

Class 6

Present Assignment 5
Design Elements
  - Links, Buttons, Forms


Lecture Topics

  • Web Design Elements, continued

Assignment 6:

  1. Wireframes should be 100% complete so work on getting all content in place. Don't worry about imagery, just indicate with boxes where your images will go - if you want to include images please convert them to black/white. 
  2. Branding/logo design should also be completed.
  3. If you've finished the above start developing a style guide that displays your typography, color palette, and button and link styles. 


Class 7

Present Assignment 6
Understanding the basics of CSS

Lecture Topics

  • Basic CSS & HTML

Assignment 7:

  1. Complete your style guide, if you haven't already. This should include: buttons, links, and your text styles for your tags: <p/> <h1/><h2/><h3/>.

Class 8

Present Assignment 7
Understanding responsive web design
  - Breakpoints
  - Gestures: mouse vs touch

Lecture Topics

  • Responsive Design


Assignment 8:

  1. Begin visual designs. Start by duplicating your wireframe file and renaming it (I like to go with this format 'Project/Client-Visual Design_v1'). Then start adding all the elements from your style guide to that file. 
  2. As you move through the comps, keep in mind that your style guide will most likely change. As we discussed in class, don't make any edits to the style guide until your visual design comps are completed as elements will continue to change throughout the visual design process. 
  3. Bring all files, fonts, images, etc. to class so we can have an in-class working session.



Class 9

Present Assignment 8

In-class Working Session

  • Bring all files, fonts, images, etc. to class so we can have a an in-class working session. I'll be available to work with each of you individually for any specific questions you may have related to your project. 

Assignment 9:

  1. Continue designing your homepage, landing page and content/detail page(s).


Class 10


Present Assignment 9
Mobile/Tablet best practices

Lecture Topics

  • Mobile & Tablet Design Basics

Assignment 10:

  1. Continue designing your homepage, landing page and content/detail page(s).
  2. If you've finished your desktop version, begin adapting those screens for mobile. I'd recommend duplicating your desktop version so you have a starting point and then begin converting those screens to fit the width of a mobile device - 375 x 667 pixels. Keep in mind that all text elements will remain the same size. For the most part, the only elements that will change in size are your images. 


Class 11

Present Assignment 10
I <3 UX
  - What is it?
  - Who does it?
  - Why it's important

Lecture Topics

  • The Basics of User Experience Design
  • Activity!!

Assignment 11:

  1. Finish all pages for the desktop version of your site.
  2. Keep working through your mobile screens. Depending on how complex your site is, and our time constraints, focus on one screen at a time and add additional as time permits. 

Class 12

Present Assignment 11
Web tools in Photoshop
  - Save for web
  - File type choices
  - Resolution
  - Image optimization
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
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
Working with developers

Lecture Topics

  • Preparing Your Photoshop files for Development
  • Designer & Developers: Working Together

Assignment 12:

  1. Make final touches to all pages of your desktop/mobile site and save out png/jpgs of all pages of your site. 
  2. Create a presentation that includes everything we've worked on in class: 
    1. Initial research 
    2. Sketches
    3. Sitemap
    4. Wireframes
    5. Visual design (desktop and mobile)
    6. Style guide
  3. Email me your pdf (file name should include your name) presentation, blog link, and consent to me showcasing your work on my class blog BEFORE YOU PRESENT ON THE LAST CLASS.


Class 13

Final Presentations
Questions, Comments, Feedback
Thank You!

Final Presentation

  1. Present your final website along with all your work from the semester. Be prepared to talk about the site problems and your solutions.


Subscribe to: Posts (Atom)