Week 13

Notes

• Sketch Prototyping
  • Sketch Cloud
  • Sharing Documents on Cloud
  • Viewing Documents on Cloud
    • Make sure all artboards have a solid background color!
  • Enhancing Prototypes with Sketch plugins
    • Anima
      Allows for better interaction with prototypes: including hover and other animation effects
      Pricing: Limited free plan available and a 14-day trial for paid plans
    • InVision Craft Plugin
      Enhanced prototyping
      Pricing: Limited free plan available (1 project limit)
• Adobe XD Prototyping
  • Share prototypes for review
  • Design, prototype, and share with Adobe XD
    • Make sure all artboards have a solid background color. If white, give them a slight border for better viewing.
    • When previewing, XD will not show you your prototypes at 100%. To see 100% view, you mush "share" then and view at full screen in a web browser.

Both Sketch and Adobe XD are under active development and new features are released often. If there was something that you weren't able to do now, changes are, it may soon be possible. This is an exciting and quickly developing area of web design and UX/UI tools.

• Adobe XD: November 2019 release (version 24.0)
• Sketch version notes

Homework

Final Project Due

The final version of your website prototypes are due next week (Tuesday, 12/17 at 6pm).

Things to consider in your final prototypes:

• You should have at least 5 fully functional artboards (pages) with prototyping links working
  • All main navigation
  • Internal links (as possible)
• Your prototypes should look as close as possible to a final website
• Demonstrate how your site will change when a mouse hovers and clicks on navigation or buttons
  • Use a different artboard for this if the application doesn't allow for this type of prototyping
• Your prototypes should models a horizontal size between 1020px and 1440px.
  • All artboards should be the same size. You may also have separate pages or artboards at another size, but you should have 1 complete set at that desktop size.
• View your prototypes at 100%! This is essential to evaluate things like font size, type choice and leading.
• Your mockups should have footers
• Your footers should not cover your content.
  • The only exception to this is if you are designing an always visible fixed footer
• Your prototypes should show the full page vertically. Make them longer as necessary to do this. If your pages are very long with repeated content, show enough to give a representative view.
• Use real content in your prototypes. Don't repeat text and elements over and over. Variation is important to demonstrate a real design.

Other notes

• You are only required to do one size prototype. The suggestion to try different sizes was to get you to consider the intricacies involved in creating full web projects. If you did more than on size 👏
• Pay attention to text rags, but not too much. We really don't have control over font rendering at this level because of variable page widths, font sizing, font rendering, dynamic content, and browser variations.

If necessary, review the mockup assignment from the final project page.

Deliverables

You will submit your final project in 3 parts:

1. Add your final prototypes to your website
   • Export your original Sketch or XD file as a pdf. Link to the pdf in your website.
   • Use the cloud sharing features of Sketch or XD to upload your document and create a link to it. Add the link onto your website.
2. Upload all files to the shared Google Drive folder under Comm244-Final > [Your Name] > Final Prototype
   • All original Sketch or InDesign files
   • Any additional typefaces you used that were not from Adobe Fonts or Google Fonts. Make sure that you also include any linked libraries you might have used. Have a friend test opening the document to make sure it opens and no assets are missing.
   • A pdf file containing all artboards from your document (this is important in case I'm unable to load elements from your original)
3. Update the Final Prototype Links Google Doc in the Shared folder with a link to your live prototype online.