To Do This Week:
Portfolio: Final Design
Notes:
Portfolio Project Deadlines
- Sites Completed for Peer Critique – 20%
- SEC 01: DUE Wednesday, Dec 4
- SEC 02: DUE Friday, Dec 6
- Sites Due for Grading – 80%
DUE Tuesday, Dec 10 (6pm)
The Portfolio Projects should be in a folder called “portfolio.”
* If you have no design ready for the critique, you will lose 20% on the final grade.
Rapid Web Dev Challenge
Objective:
Design a One-Page Website in Just 1 Hour!
Create a responsive, one-page website for a fictional company. The site should describe the product or service, highlight its main features, and use good design principles.
Use AI tools to assist with design, coding, and content. Keep your site under 1,000 words total.
In-class Steps (60 min!):
Step 1: Select a Fictional Company Name (2 minutes)
- GlowGrub
- ZapCycle
- DreamSpark
- CloudFarm
- Sproutly
Step 2: Brainstorm and Sketch (15 minutes)
- Discuss your company: What does it do? Who are its customers? What makes it unique?
- Sketch a layout: Hero banner, product description, features, call-to-action.
- Set priorities: Decide what visitors should notice first.
Step 3: Assign Roles and Create a Plan of Action (5 minutes)
- Roles:
- Designer(s): Layout and visuals, color scheme, CSS
- Coder(s): HTML, CSS, JavaScript
- Writer/Editor(s): Content creation and AI assistance
- Decide which AI tools to use for images, coding, or text.
Step 4: Production (30 minutes)
- Build the site using your sketches as a guide.
- Use AI tools for:
- Graphics (e.g., logos, product images)
- Code assistance for layout (responsive HTML page)
- Content (e.g., descriptions, taglines)
- Focus on clarity and visual hierarchy.
Step 5: Compile, Test, Validate, and Upload (10 minutes)
- Test responsiveness: Check different screen sizes.
- Validate your code using an online validator.
- Debug and polish as needed, but avoid over-perfection.
- Upload your final files and share the URL on Slack.
Portfolio Critique
Instructions:
- Use a single sheet of paper for each critique of a student project in your group of 3–4.
- Silently address the questions below for each student on the sheet of paper. These are notes, not essays!
- Groups gather around a computer and discuss/critique each project consecutively based on the notes/responses to questions.
- Then give your written critique notes to each of the students you evaluated.
- Take these critiques of your work as guidelines for a redesign – you do not have to follow all suggestions.
Critique Questions:
- What 2–3 words (or phrases) describe the overall impression of the site design?
- How does “difference” in certain design elements (layout, typography, color) focus attention? Is this difference effective? Is there difference that is confusing or distracting? Are boxes out of alignment?
- How effective is the typography? Does it help or hinder your comprehension of the content? Is there enough contrast?
- Does the site navigation help or hinder your experience of the content? Are the links, the navigation bar, buttons, galleries, and/or pop-up images clear and working properly?
- Is the color scheme effective or distracting? What suggestions do you have to improve the site’s color?
- Does the site present the content well? Is it accessible and effective in presenting the student’s digital work?
- Other Comments/Suggestions? Anything not working properly? Are images too big or out of proportion? Any spelling or grammar mistakes?
Course Evaluations
To Do This Week:
Portfolio: Final Design
Notes:
Sites Completed for Peer Critique – 20%
Sec 01 DUE: Dec 4 (Wed in the last week of classes)
Sec 02 DUE: Dec 6 (Friday in the last week of classes)
Sites Due for Grading – 80%
DUE Tuesday Dec 10 (6pm)
The Portfolio Projects should be in a folder called “portfolio”
* If you have no design ready for the critique, you will lose 20% on the final grade.
Rapid Web Dev Challenge
Objective:
Design a One-Page Website in Just 1 Hour!
Create a responsive, one-page website for a fictional company. The site should describe the product or service, highlight its main features, and use good design principles.
Use AI tools to assist with design, coding, and content. Keep your site under 1,000 words total.
In-class Steps (60 min!):
Select a Fictional Company Name! (2 minute)
- GlowGrub
- ZapCycle
- DreamSpark
- CloudFarm
- Sproutly
Brainstorm and Sketch (15 minutes)
- Discuss your company: What does it do? Who are its customers? What makes it unique? Take notes…
- Sketch a layout: Hero banner, product description, features, call-to-action.
- Set priorities: Decide what visitors should notice first.
Assign Roles and Create a Planof action (5 minutes)
- Roles:
- Designer(s): Layout and visuals, color scheme, CSS
- Coder(s): HTML, CSS, JavaScript
- Writer/Editor(s): Content creation and AI assistance
- Decide which AI tools to use for images, coding, or text.
Production (30 minutes)
- Build the site using your sketches as a guide.
- Use AI tools for:
- Graphics (e.g., logos, product images)
- Code assistance for layout (responsive HTML page)
- Content (e.g., descriptions, taglines)
- Focus on clarity and visual hierarchy.
Step 4: compile, Test, Validate, and Upload (10 minutes)
- Test responsiveness: Check different screen sizes.
- Validate your code using an online validator.
- Debug and polish as needed, but avoid over-perfection.
- Upload your final files and share the url on Slack.
Portfolio Critique
Portfolio List 01
Portfolio List 02
Instructions:
- Use a single sheet of paper for each critique of a student project in your group of 3-4.
- Silently address the questions below for each student on the sheet of paper. These are notes, not essays!
- Groups gather around a computer and discuss/critique each project consecutively based on the notes/responses to questions.
- Then give your written critique notes to each of the students you evaluated
- Take these critiques of your work as guidelines for a redesign – you do not have to follow all suggestions.
Questions:
- What 2-3 words (or phrases) describe the overall impression of the site design?
- How does “difference” in certain design elements (layout, typography, color) focus attention? Is this difference effective? Is there difference that is confusing or distracting? Are boxes out of alignment?
- How effective is the typography? Does it help or hinder your comprehension of the content? Is there enough contrast?
- Does the site navigation help or hinder your experience of the content? Are the links, the navigation bar, buttons, galleries and/or pop-up images clear and working properly?
- Is the color scheme effective or distracting? What suggestions do you have to improve the site’s color?
- Does the site present the content well? Is it accessible and effective in presenting the student’s digital work
- Other Comments/Suggestions? Anything not working properly? Are images too big or out of proportion? Any spelling or grammar mistakes?