Course Overview

• Introductions
• Review Syllabus

Web Design

Web Design is Multidisciplinary

• User Experience Design
  • Content Development
  • Usability
  • Visual Design
• HTML, Javascript & Server-Side Coding

The Web Design Process

1. Identify the types of users you need to communicate with
2. Identify what each user type needs to be able to do
3. Organize your content semantically
4. Compose appropriate layouts for your content
5. Create visual hierarchies for your content with type
6. Apply design principles to emphasize relationships between elements
7. Create mood and enhance your visual hierarchies and element relationships using color
8. Breath life into your design with behavioral feedback
9. Test, rinse & repeat!

The Coding Process

1. Open up your favorite text editor
2. Craft your HTML, CSS, Javascript and/or server-side scripts
3. Validate your HTML & CSS using the W3C validators
4. Version control your work!
5. Upload it to your hosting server with your favorite FTP client

Hosting Your Projects

There are several options for hosting your web projects throughout the semester.

• Your TCNJ Web Account
• Github Pages
• A 3rd Party Hosting Provider

For your final project, I"d recommend you host on either your TCNJ web account or a 3rd party hosting provider like A Small Orange because they will support server-side scripting like PHP, whereas Github Pages doesnI"t (although there is a workaround for this limitation).

If you haven't done so already, let"s go ahead and set up your TCNJ web account following these instructions (for Windows Users, Mac users stand by and we"ll go through it together): http://helpdesk.pages.tcnj.edu/web-development/student-organization-web-development-faqs/

Version Control with Git, Github & Github Pages

• What's version control?
• Github for Education
• Get a Github Client for your Mac or Windows
• Hosting your projects on Github Pages

User Personas & User Stories

User Personas

• Review this post about writing user personas.
• Think about what kind of website you'd like to create over the semester, the different people you'd like to see it, and how you'd like them to use it.
• Create a text document on Google Drive and write a paragraph or two about each of these people. Be as specific as possible; include a picture, a description, and why they're using your website.

User Stories

• Using your user personas as a guide, try to organize your users into types.
• Make a list of these user types in a spreadsheet on Google Drive.
• Review this post about writing user stories.
• In your spreadsheet on Google Drive, make a second list, this time listing as many user stories as you can.
• When writing your user stories, just focus on “the Card” part, don't worry about “the Conversation” or “Confirmation” parts just yet.

An Example

Execise

Let's work through an example on Google Drive.

Assignment 1

Reading

• Chapters 1 & 2 in Design for Hackers

Design

User Personas

• Review this post about writing user personas.
• Think about what kind of website you'd like to create over the semester, the different people you'd like to see it, and how you'd like them to use it.
• Create a text document on Google Drive and write a paragraph or two about each of these people. Be as specific as possible; include a picture, a description, and why they're using your website.

User Stories

• Using your user personas as a guide, try to organize your users into types.
• Make a list of these user types in a spreadsheet on Google Drive.
• Review this post about writing user stories.
• In your spreadsheet on Google Drive, make a second list, this time listing as many user stories as you can.
• When writing your user stories, just focus on “the Card” part, don't worry about “the Conversation” or “Confirmation” parts just yet.

After you've created both the User Persona and the User Story documents, share them with me at thomesoni@gmail.com. Here's more info on sharing Google Drive documents.