GrC 339
Web Design + Production

Week 1 • Production Planning

⚠️ Disclaimer ⚠️

This presentation contains disclaimers!

⚠️ Disclaimer ⚠️

This presentation contains looped animations.

Please notify me if you may have issues with strobing animations or experience enlightenment.

⚠️ Disclaimer ⚠️

Disclaimers should be included if I followed UX best practices, right? 🙃

OK Zoomer

Getting Going with Zoom

Participation panel, raise your hand
Confirm your comprehension
Camera on if you want
Mic off as much as possible (I may mute you)

First website in 1998

Digital experience manager

VDP, workflow automation

Master of Digital Media

The Approach

Cons & Pros

You've got a new prof...

Course Learning Outcomes

To use advanced HTML and CSS to prototype and implement web sites.
To build responsive and responsible websites, according to the most current and best practices in the field.
To apply design principles to web development.
To research and compare different solutions in the field of web development.

Assessment

Item	Weight
Class Project	45%
Tutorials (5)	20%
Journal Entries (5)	20%
Quizzes (2)	10%
Participation	5%

Cash-money?

NO books to procure
Learn to Code CSS & HTML
Web Design Primer
Domain $5+
.com .net .info .co .us .io ...
Hosting ($0 to the depths of your wallet)

Grading

Process > Product

What's in an A?

Tactics to stay on top

Coding is a skill

Class Project

A full website from start to finish
Scope out an opportunity
Journey > Final Product
45% of your overall mark

Class Project

Deliverables

5% Wireframes
10% Mockup
5% Code: Navigation
5% Code: Page Layout
5% Code: Responsive Layout
5% Deployment
10% Final submission

Assignments

Journals

Bi-weekly (every 2 weeks)
Project and course progress
Challenges
Goals (project or personal)
Support needs
Sharing articles, findings, ideas
Feedback

4% x 5 = 20% of final grade

Tutorials

Self-curated
May provide a bank of options
Use weekly topics or go beyond
Opportunity to customize your learning
Sharing with your peers via Discussions
Review your experience

4% x 5 = 20% of final grade

Quizzes

2 @ 5% each
Accessibility and Responsive Layouts
No code to be written, just interpreted
Mostly multiple choice
Open book
Testing concepts
10-20 questions

Participation

This Week

Introduce yourself (discussion board)
Skills Survey
Install VS Code
Refresher on HTML + CSS
Learn about the production process

Iteration

Production Process

Branding considerations
Wireframe
Mockup
Prototype
Code
Content

Source

Branding

Activity

Breakout into groups
Search for branding guidelines

Observe what sections/guidance is provided
Make note of anything that might be missing
Does it provide sufficient instructions for web?

Set the Stage

Who are you creating for?
What do they do?
What is their userbase comprised of?

Planning the design

Adjectives

Helps direct your design
Speeds up decision making
Come up with ~3 adjectives for your app/company
Think of how each adjective is visually represented
What colours support your adjectives?

Example: calm, clear, supportive

Three
Words

Research

Remix
Reach

Calm / Clear / Supportive

Colour Palette

What brand(s) already represent your adjectives?

An Image search of each term:

Calm // Clear // Supportive

Wireframes

Wireframe Example

Source: Robert Smith

Getting Started

Choose one page or step
What content and features belong?
Limit the number of features per step
(split big steps into a few smaller ones)
- Chat screen
- Login form
- Create claim (many sub steps?)
- Payout
Choose 2-3 steps to wireframe