We’re going to work in small groups today. You can choose to either meet in a break out room or via Slack. You’ll complete the Typography Activity Review, Workshop for 2020 Series, and then begin your homework.
While you’re working, I’m going to meet with each group and you’ll share your 2020 image series progress. Please make sure to join the main Zoom room at the provided time slot.
Groups:
1 – Benjamin, Katie, Rachel(2:15pm)
2 – Erica, Selina, Sarah M.(2:50pm)
3 – Sonia, Ki, Brynn, Lauren(3:30pm)
4 – Victoria, Michelle, Xin(4:10pm)
2020 Series
🟡 Updates 🟡
2020 Series is due 1 week from today(09/28). This Wednesday will be a working session with individual check ins on Slack(with optional Zoom time). Please review the agenda for additional notes and activities at 2pm. We will not meet as a group, but I’ll have something for you to do.
For homework:
Sketch out 3 ideas for the design of your website. You can design at 1280px in width(flexible height, but it should be at least 720px tall). This should be pretty quick and gestural – you can use any tool you feel comfortable with.(Photo or scan of a hand drawing, illustrator, InDesign, Figma, Sketch). We’re going to be working in Figma starting with the next project, so if you’d like to start experimenting with that, go right ahead*. Make sure that you can share your document in Slack on Wednesday.
Begin programming your project so that I can help with any programming questions on Wednesday.
*For those of you who want to start getting familiar with Figma(NOT REQUIRED)
In your Slack Channel: Share either a zipped file of your typography activity or a glitch.com link to your typography activity. If you upload it to https://glitch.com/ – you can cut/paste your HTML into the index.html and your CSS into the style.css file. You’ll also need to update the path to your stylesheet to <link rel="stylesheet" href="/style.css">
Once you’ve done the above, review the different approaches everyone in your team explored. Have a discussion about the type choices and how that impacts the readability and visual impression of the text.
If someone is having technical challenges, work together to make sure everyone has a functioning specimen by the end of class. Compare to the reference document.
You want your images to be 2x the size that it’ll be displayed. For example – if you want your image to be 600px wide in your design, you’ll export it at 1200px. This is to accommodate retina screens as well as to give you flexibility to change it around in the website. Figma, Sketch, and Illustrator make it easy to export assets @2x.
Image File Sizes
You also want image file sizes that are as small as possible while retaining quality. Always aim for images that are smaller than 1MB. This is really important!
If you’re working in Photoshop, save for web by pressing CMND + OPTION + SHIFT + S this helps you get a small file size that’s optimized for web.
You can see a filesize estimate in the lower left hand corner of the image preview
Image File Types
These are acceptable file types for uploading your work:
jpg(smallest file size with best quality. most common)
2020 Series
🟡 Updates 🟡
1. Typography Activity Review in Small Groups
2. Workshop for 2020 Series
Image Dimensions
Image File Sizes
If you’re working in Photoshop, save for web by pressing CMND + OPTION + SHIFT + S this helps you get a small file size that’s optimized for web.
Image File Types