web-animation-19-20
Week 1
Inspiration
The Experimental Layout Lab by Jen Simmons by @jensimmons.
Table of Contents
Slides
Theory
If you want some background information on why this course exists, read the following articles. Long story short, we鈥檙e practicing front-end design.
- Frontend design by Brad Frost
- Why do all the websites look the same? by Boris M眉ller.
- 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
- 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? 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?
Feel free to ask your instructor (or other students) for advice on how to approach this for your artwork.
Extra resources
- Shay Howe - Transforms
- Sara Soueidan - SVG articles
- MDN - SVG Tutorial
- CSS Tricks - Flexbox
- CSS Tricks - Grid
- Webflow University - Box Model