- Schedule Interview Challenge
- Critique of Menu Boards on Big Screen
- How-tos on remaining theme requirements
- Child Theme complete for Content Management Project (Due Friday, May 4 at 4pm)
- Final Presentation (8-10 minutes) of Menu Boards on Big Screen (Wednesday, May 9 at 8am)
- Installation Instructions, Portfolio Documentation, and Final Reflection (emphasize what you have learned and how you have grown as a designer and front-end developer through this project) for Content Management Project (Due Wednesday, May 9 at 11:59pm)
- Final revisions: Menu Board, Print to Screen, one other web project/assignment/challenge (Due Wednesday, May 9 at 11:59pm)
- User Testing
- Accessibility Testing
- Portfolio Documentation
- Website Exhibition Poster (printed in 34 or Tyler, 1 per group)
- Group Components: Website and Copyright Documentation (Due Friday, May 4 at 4pm)
- Group Components: Final Presentation (8-10 minutes) and Website Exhibition Poster (Due Wednesday, May 9 at 8am)
- Individual Components: Process Book, Portfolio Documentation, Survey (Due Wednesday, May 9 at
- Critique: be sure to document feedback in your process book, as well as what changes you have made in response to that feedback.
- Develop a User Test script. Include a 5 second test and identify 2-3 specific tasks a user would try to complete on the site.
- Implement template files provided by Marissa.
- Work on CSS for components brought in with custom fields.
- Be prepared to show revised menu boards on the big screen for critique.
- Work on CSS for WordPress Theme.
CHALLENGE: Choose a topic on design that you feel like you now have good insight to that you didn’t when you started designing for screens. Write a 500 word blog post that shares that insight with new or less-experienced designers. Imagine you are writing on a platform like medium. Include images. Bonus points if you actually publish it on Medium.
- Critique challenges from last week.
- Thinking about the editor role in WordPress: Create a user who has editor privileges.
- Custom fields: Make sure users are entering the correct content.
- Custom templates: Pull custom fields in to custom templates.
- Strategies for modular design and development.
- Working with templates.
- Navigation exercise.
- Finish up HTML of templates.
- Revise any content or assets after geting feedback in class.
- Review solution to RQ20
- Planning for development starting on Monday
- User Testing
- Initial accessibility testing
- “5 second test”
- Content and asset development/creation
- Identify pages that need to be developed
- Prototype basic user flows
It is important, as designers, to make sure we are design for the whole user experience—including when things go wrong. This is where 404 error pages come in. If someone mistypes a URL within your domain, the error page is displayed. If you don’t have a custom error page, the browser supplies an unuseful generic one. Your challenge today is to choose one of your completed website projects (not your menu boards) to implement a 404 error page for. Remember that a good error page should be consistent with the brand.
404 Error Page Resources
- WordPress workshop.
- Work with group to refine concepts.
- Develop a complete site map.
- Determine key pages that would need to be built for a working prototype.
- Work on needed content (text, image, video, audio, etc.)
- Refine mockups. Consider multiple screen sizes. What are the templates you will need?
- Double check your content to make sure that you are not preferencing one species or reinforcing stereotypes. Check text, images, and accessibility features.
- Read pages 1-2 and 11-19 in AccessAbility: A Practical Handbook (PDF)
- Read chapters 8 and 9 in Don’t Make Me Think by Steve Krug.
- Pitch the client.
- Critique with members of other groups.
- Refine chosen concept.
Reminder: Rebecca is out of town for a conference.
- Prepare for presentations.
- Remember to keep your process book up to date.
- Prepare for Quest
- Submit menu board (if you haven’t already)
- Complete PHP tutorials and challenge for Friday.
- Review Questions
- Character mapping from the “ethnographies” we read.
- Introduce Simulated Client Project
- Meet with teams for final project
- Team 1: Johnna, Heng-Hao, Mariana (stop specie profiling)
- Team 2: Stephanie, Olivia, Kim, Claire (open communication to build community)
- Team 3: Sean, Ashley, Hanye (consider ethics of eating species who live in the community)
- Team 4: Deandrea, Tsai-Ning, Ben, Nick Z. (redefine housing standards, especially in rural areas)
- Team 5: Nick L., Kelsi, Sydney, Alyssa (improve citizen safety training)
- Set up Slack channel for team (make sure it is public and that you invite Rebecca and all team members)
- Create personas for Simulated Client Project. All students must create at least one persona. For consistency, use the Persona Core Poster introduced in the reading assigned last week.
- Review the answer key to the Products Page and the answer key to the Landing Page. Compare your own solution. Come to class on Friday with questions.
Homework for Monday, April 6
- Familiarize yourself with PHP with either: PHP Essential Training (Lynda), Learning PHP (Lynda), and/or W3Schools PHP Tutorial + PHP Advanced: Includes.
- Challenge: Choose one page of a project from earlier this semester or a previous web course for this exercise. Break the page in to modules. Each module should be its own php file. Use an additional php file to collate all of the modules in to a single page.
- CSS Grid Quickstart Guide
- CSS Grid Exercises: Products Page, Landing Page
- Resources: MDN CSS Grid Layout, CSS-Tricks Complete Guide to Grid, Layout Land.
Homework Due Monday, April 2
- Complete CSS Grid Exercises (Landing Page and Products Page).
- Read The True Story of the 3 Little Pigs , The Three Pigs, and There’s a Wolf at the Door (all on reserve at Penfield Library).
- Read A Closer Look At Personas: What They Are And How They Work (Parts 1 & 2)
- Complete menu board by the end of next class.
- Process book and portfolio documentation due on Monday at the start of class.
- Due 3/23 at 11:59pm Promotional website and copyright documentation
- Due 3/36 at the start of class Process Book
- Revise Promotional Website for critique
- Review Questions
- Images: Content or Decoration?
- HTML Tags: img, figure, figcaption
- CSS Properties: background-image, float, clear, overflow
- Continue working on Promotional Website. Make sure you have implemented any HTML entities needed. Complete CSS for typography.
- No Review Questions!
- Content Feedback
- Prototype Exercise
- Read chapter from Don’t Make Me Think
- For Monday, March 5 you need to have a complete plan for the website and the HTML (minus the images) written.
- Review Question: download rq12.html. Your goal is to design this page of typography resources so that it is easy to skim. Add this file to a project folder, create a stylesheet and start styling! Submit on Google Drive.
- Moodboard and Logo Critique
- Empathy Maps
- Complete Empathy Map Exercise
- Read chapters 1-5 in Don’t Make Me Think by Steve Krug by Wednesday, February 28.
- Menu Board Project
- Acrobat DC: Creating Accessible PDFs with Chad Chelius
- InDesign CC 2018 Essential Training with David Blotner
Due February 28: Choose One*
You will need to submit the certificate of completion and the tutorial files you completed.
- Typography Mindmap
- Introduction to Promotional Website project
- Complete the Moodboards for Web Designers course by Sue Jenkins on Lynda.com (http://oswego.edu/lynda to log in). The course is about an hour. You will need to provide a certificate of completion (in Lynda click your name in the top right hand corner > certificates). Print your certificate and bring to class.
- Review Questions
- Complete typography blog exercise. Make the site live. Test on large screen, iPads, and at least one phone. Identify issues (document those issues in a Google Doc) and then revise your design to address the issues.
- Evaluate the typography your final Typography Blog design.
- An evaluation requires that you identify and explain the criteria you are evaluating with.
- An evaluation is not an argument for why you deserve a good grade. A good evaluation looks as the design critically and demonstrates a good understanding of best practices.
- Remember to address the following: the tone established, legibility, readability, horizontal rhythm, vertical rhythm, chunking, hiearchy, punctuation, etc. Do not forget to consider how well the typography works on all screen sizes.
- Be specific. Point to very specific elements of the design and specific design decisions that you made.
- Show as well as tell by including screenshots of your website to illustrate what you are talking about.
- 500 word evaluation
- Submit as a PDF on Google Drive and Lisa French. Bring a printed copy to class
- Challenge: Write a love letter to typography. Pick one element, aspect or concept to focus on. The letter should include an opener and a closer. Create a webpage to “hold” that letter. Type is image. No additional content is allowed.
- Bonus: Create a webpage for one of the provided quotations about typography. The typographic choices should reflect the content of the quote and the designer who said the quote.
- Complete in class exercise.
- Create an e-greeting inspired by the candy hearts provided.
- Project must be contained in a single file.
- At least one photo or scan of a candy heart must be included.
- Bonus: Include motion.*
- Bonus: Send the greeting via email (and not as an attachment) by the end of class.*
*Graduate students must complete one bonus as part of their challenge.
- HTML: metadata
- <meta charset=”UTF-8″>
- <meta name=”description” content=”Put a short description of your site here.”>
- <meta name=”keywords” content=”search phrase 1, term2, search phrase 3, keyword4″>
- <meta name=”author” content=”author’s name”>
- <meta name=”designer” content=”your name”>
- <meta name=”viewport” content=”width=device-width, initial-scale=1″>
- hostname is rocky.oswego.edu
- username and password are your laker credentials
- upload a project folder to the public-html folder
- URL is http://oswego.edu/~yourLakerID/projectFolderName
- Exercise: Test, Publish and Revise
- Add metadata to HTML
- Check HTML code with provided markup
- Validate HTML and CSS. Address all errors and warnings.
- Make code live
- Test on large screen in lab
, on iPad, and on a phone. Make notes about what needs to be revised at each screen size. Use the Chrome add-on Measure to check your line lengths.
- Use the Wave Evaluation tool to check for accessibility issues.
- Revise your files
, make live,and retest (repeat as necessary).
Submit your testing notes, final version of the site, and a shortcut to the live website.
- Check to see if you have a public-html folder when logging in to FTP. If not, file a ticket with CTS today!
- Maddy presentation and critique.
- How do we evaluate design work? What should be in a written evaluation?
- What should be in portfolio documentation? What format is appropriate?
- Process book
- Written Evaluation
- Portfolio Documentation
- Read chapters 10-12 in Better Web Type. These chapters will cover typographic details you will need to implement in your website project for Monday.
- Exercise: create a copy of the last exercise folder for this exercise. Implement appropriate Open Type Features, punctuation and special characters. Refine the overall design. Make sure you have added any necessary attribution or other details required to abide by copyright law and the licenses of the assets used in the project. This will be the final version of your website, which will be published live on the web (refine accordingly).
- Vertical Rhythm: baseline grid (applied to the vertical space on the site), chunking, modular scale (applied to the type sizes)
- Modular Scale Tools: ModularScale, TypeScale
- Exercise 8: Make a copy of exercise 7 and add the following:
- Revise design based on feedback during critique.
- Implement a modular scale.
- Implement a baseline grid.