DSGN 270

Sprint Activity 2 - SVG Logo Design

Weight: 10%

Due:

Late Penalty: 10% deduction for each day late. Submissions will not be accepted more than three days late.

Using Figma, create a simple and web friendly svg logo and render it on a live html site hosted on Github Pages.

For this assignment, you will create a logo and deliver 2 variants of the logo (monochrome and multi-colored). These will be deployed to a web page as an img and inline svg respectively.

Your monochrome logo should be added to the page with an img tag

The colored and/or animated logo should be added as an inline svg and styled using either transform attributes or with css transitions.

Instructions

  1. In Figma, create a simple logo (it can be for anything)
  2. Use at least 3 paths to create the logo
  3. Export your svg logo as an svg
  4. Optimize the logo in svgomg
  5. Create a git repo and add an html page to it
  6. Add the svg code to the html page inline
  7. Add color (fill or stroke) to at least 1 path using css
  8. Deploy the html page to github pages

Rubric

  • Up to 5 points for your logo design
    • design quality
    • 250-400px w/h
    • optimized monochrome version is 1 path
    • optimized colored version is at least 2 paths
    • follows best practices for web logos and icons
  • Up to 5 points for inline svg
    • css used to add colors to multi pathed logo
    • hover or other pseudo state (possibly with transition) on at least 1 of the logos
    • both logos are on the page
    • logos are displayed at appropriate sizes and positioning

Submission Instructions

  • Get a zip file of your project repo from github and add it to your submission
  • Add a link to your figma design space
  • Add a link to your Github Pages website
  • Add a link to your Github Repository