web-animation-18-19
Week 1
Table of Contents
Inspiration
The Experimental Layout Lab by Jen Simmons by @jensimmons.
Slides
Theory
- Why do all the websites look the same? by Boris M眉ller.
- Frontend design by Brad Frost
- The Great Divide by Chris Coyier
- Devtools for Designers by Chris Coyier
Lab
Steal like an artist
Recreate your chosen piece of artwork in the browser.
Synopsis
- Time: 16:00h
- Goals: subgoal 1, subgoal 2, subgoal 3 & subgoal 4
- Due: before lecture 2
Description
Build your artwork inside the browser. Start with an html breakdown, sketch out on paper. What html elements do you need? Then start creating a boilerplate inside of your github repository. What files do you need? Play around inside of the Developer Tools (firefox, safari, chrome) to tweak your design.
- Do you need
SVGsfor certain elements? - What types of styling can you do with CSS? What
selectorscan you use? - How are you going to layout the page? Do you need to use
flexboxorcss-grid? - How does it need to look based on different screen sizes? Should it be
responsive?
Extra resources
- Shay Howe - Transforms
- Sara Soueidan - SVG articles
- MDN - SVG Tutorial
- CSS Tricks - Flexbox
- CSS Tricks - Grid
- Webflow University - Box Model