Project 2: Interactive Storytelling
During Class: Conduct 3 Usability Tests on classmates.
Go over how to inspect code of any live website on your browser window.
Image Optimization
Try to maintain quality while saving the smallest file size possible. You want everything to be below a megabyte. GIFs and videos may be the exception.
Figma – PNGs, JPGs, SVGs
Click here to see
- Select the images throughout your Frames and click “Export” on the bottom right panel.
- Choose the file format – PNG, JPG, SVG
- Click on “Export” button
- Files go to your Downloads folder
Adobe XD
Click here to see
PNGs and JPGs:
- Select your images throughout your Artboards and click on “Mark For Export” on the bottom right panel.
- Go to File > Export > Batch
- Choose your file format and “Design” and save to an “images” folder in your “project-2” folder
SVGs from XD (vectors):
This format is widely used for icons or other vector assets which need to scale on different screen sizes without losing quality, for example in responsive websites.
When exporting as SVG, you have two options to choose from:
- Embed: the bitmap image you are saving is placed into the SVG file itself.
- Link: the bitmap image you are saving is stored separately, and a reference to it is added in the SVG file.
In doubt, just choose the Embed option.
You can also tick the “Optimize asset” checkbox if you want lighter assets in terms of file sizes (the code within the SVG file will be minified, resulting in smaller file).
In Photoshop – PNGs and JPGs:
Click here to see
Go to Export > Save For Web (Legacy) > Choose File Format > Save. If you want something transparent – choose PNG-24 or PNG-8.
Accessibility
- Web Accessibility for Designers Checklist
- Contrast Checker
- Accessibility Evaluation Tool
- Guide for Designing Better Mobile App Typography
- The Responsive Website Font Size Guidelines
- Human Interface Guidelines for iOS Typography
DUE NEXT CLASS
Design:
- Any last changes to the design based upon feedback in the Usability Tests. You can also make updates to the design while you code it.
File Organization/Setup:
- Save a file called project2.html in your project2 folder. Then link to it from your Sandbox.
<a href="project2/project2.html">Project 2</a> - If you haven’t yet, save an images folder and a css folder in the project2 folder.
- In this css folder, save the skeleton.css and normalize.css file from when you downloaded Skeleton . Then also save a new custom.css file. Link these to your project2.html file.
- In this images folder, save all your exported/optimized images.
Start HTML Structure:
In the <head> of the project2.html, include at least the following:
- change the <title></title>
- links to the 3 css documents:
<link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/skeleton.css"><link rel="stylesheet" href="css/custom.css">- Download Skeleton again if you need to grab the css again.
- links to your Google or Typekit fonts
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In the <body>,
- Structure: start to write out divs including containers, rows, and columns, h1 – h6 and p. You can refer to the Skeleton Exercise for help. Base your columns and amounts off the 12-column grid system.
- Text: Copy and paste your text into the corresponding locations on the page.
- Images: Start to link your images in corresponding locations on the page. If the image is going to be included as a background-image in the css, you can save it for the next step.