Skip to content

Project to create a "Google-Doodle" for Web Design 2 | Winter 2020 | Instructor: Prof Colin P. Manikoth | Eastern Washington University / EWU

Notifications You must be signed in to change notification settings

erik1968/google-doodle

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

78 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Guitar Google Doodle

UPDATE As of 3/20/2020: Work did start on a version 2. It would be like a cousin of the first in the guitar instrument designs -- going from a Flying V shape to a Gibson Les Paul Classic shape that is instantly recognizable.

Version 2: Will be different guitar body - a Gibson Les Paul Classic design w/the same type of styling: fills, gradients, stroke weights, and iconography -- but, new color palette for guitar & stage background

Color, Type & Design:

  • Colors: #Stage = Hi-Sat Blue #66FCF1 (OR 3FEEE3, 1 shade darker), w/contrasting lettering in Hi-Sat Pink #FF007F
  • Typography: "Google" lettering chosen based (after svg conversion) on retro 80s font called Arcade Machine (markup annotated)
  • Design: The guitar and amplifier stack svgs were designed in Ai and Figma based on real Amps (Marshalls) & Gibson FlyingV (all elements to scale)

Todo:

  • Make wireframes of steps req'd for animation goals that didn't make it in Vers 1
  • Do the wireframes in Figma; get direction on what Javascript APIs to go with

Animation Goals for Version 2 & 3:

  • Something that shows a high amount of electrical energy starting in the guitar -- triggered by mouse hover & click/tap -- that bursts & shoots through each letter G > O > O >>>> and impacts/activates/energizes/pulses the #MegaStack (or variant guitar amplifier).
  • I'd like this to be interactive w/a Call to Action at top of #STAGE like "Play Me" (this all was original plan -- just don't have the skill yet in Javascript & not enough time this quarter to "reverse engineer" someone else's code that does these things) ** GOOD NEWS Up Front: The guitar vectors are done & layers specified exactly to target each part of letter that will get animated

Collage

Link to Figma Collage

References

[Google "Stage" fonts used & converted to svg: "Arcade Machine" at:] (https://www.freeforfonts.com/arcade-machine-80s-retro-font-free-download/)

About

Project to create a "Google-Doodle" for Web Design 2 | Winter 2020 | Instructor: Prof Colin P. Manikoth | Eastern Washington University / EWU

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published