web://2

final project (LIA)

For your Learning Integrated Assessment design and develop a website that highlights what you have learned in web2, web1 and your other design classes.

You have the choice of doing one of the following, or proposing your own idea:

• a tutorial site for users to learn a skill or technique
• a site exploring a design style, movement and main contributor(s)
• a site that explores a neighbourhood or village
• a site about design: graphic, 3d, video, web
• tackle a burning issue in a site
• explore a passion, sharing what you know with others
• birds... do a site on birds, the City Nature Challenge & Biodiversity
• *** wine / spirits companion site

You will develop your own content including:

• title, headings & body text that effectively communicate your ideas
• photos & photo galleries to add to and reinforce your ideas
  • add captions to photos
• animations
• illustrations
• infographics

Start by creating a plan

• figma design file with
  • project description
  • research / inspiration / moodboard
  • include 2 or 3 reference sites you like
  • typography (2 fonts?)
  • colour scheme (3 colours?)
  • wireframes / layouts
  • html structure
  • animations
  • CapySkill (choose, self-evaluate, plan how to improve using SMART goals, and provide evidence)
    • CapySkill AI
    • CapySkills AI SmartGoals setter

Your site should must include some of the techniques we have focused on this year including:

• effective use of typography inlcuding titles, headings, body text, blockquotes etc
• animations
• photography & photo editing
• video (optional)
• illustrations (optional, but highly recommended)

• your site should follow web best practices
  • mobile first
  • responsive using css grid and
    • @media queries
    • minmax
    • clamp
  • well structured, semantic html
    • include <nav>, <header>, <section>, <article> and <footer> elements
    • avoid using <div>
  • good CSS practices
    • avoid repeating styles
    • use cascading
    • avoid adding classes needlessly

Evaluation

• planning: 15% i.e. Figma
• content 25% i.e. text, photos, animations
• design 25% i.e. layout, colours, CSS
• technical 25% i.e. mobile-first, repsonsive, CSS grid, CSS
• grammar & spelling (SPLI) 10%

presentations Tuesday May 13 (which is a Friday)

CMS Projects

linky links

• muse mira (Kamal)
• soccer 101 (Massimo)
• internet culture (Lydia)
• mobile savvy (Laith)
• animation 12 (Luke)
• Ora Cha (Daniel)
• Thrill Talk (Tu-Phi)
• astronomy (Alina)
• Salem (Livia)
• graphic novels (Rachelle)
• a sip of shoujo (Callia)
• arts and culture (Valentina)
• evolution of animation (Gabrielle)
• TV entertainment (Serena)
• Preservation & Piracy (Antonio)

A bit of fun with anime animation

SPA feedback

• Look at your SPA on your phone. Do it. Right Now
• do mobile first. Really.
• CSS cascading, try not to repeat the same styles / properties
• use parents to select children wihtout adding classes needlessly
• avoid using fixed / absolute widths i.e. 400px or 30rem
• too many div's
• avoid absolute widths (and heights)
• left-align body text
• don't use br or p for spacing. Use CSS!!!
• use rem for font sizes (and other responsive dimensions)

plus some more positive stuff

• nth-of-type is a good CSS tecnique
• bonus for use of Typescale for font sizes
• good variety of animation techniques on some sites
• even poorly coded sites looked good in some cases
• Figma files were mostly well done
• I like how you did Capyskills
• just need to add a "plan" and SMART goals

2. CMS group project

Create a site, with a group, using a content management system.

deliverables

• planning doc (Figma)
  • description of project
  • group members
  • site title (URI i.e. bahamas.582helvetica.com)
  • moodboard
  • colour scheme
  • list of articles / topics organized by person
• actual CMS which should have the following:
  • 2 posts / pages per person
    • original photos
    • some original content. Some content can be pulled from other sources, but must be referenced / linked
  • theme that suits the topic / audience demographic
  • some theme customization: consult the theme documentation
  • categories for posts / pages
  • tags for posts pages
• Portfolio style entry
• Capyskill package with competency, level, evidence, plan / SMART goals, validated