Left vs Right brain is a myth! The brain is a muscle and technical/creative, whatever - flexing it makes it stronger, solving problems in new and different ways!
Front End Masters Course Source
Concepts:
- Layouts and Grids - design in line, but tastefully break the system
- Balance:
- Symmetry/Assymmetry: explore art history!!! print making, etc. Great examples to inspire.
- Shape. Scale. Cropping. Use tools to create a dynamic and interesting layout! Make rules. Break rules.
- Grid:
- Making and Breaking the Grid. Reminder - make it. break it.
- Use a grid to solve a visual problem.
- Provide a systematic order to layout.
- Designing in the browser is ok - but if you are developing, you probably are not designing
Photoshop
Illustrator
Sketch
Figma
...
Layout: Create a quick composition. Just make a sketch. Utilize shape, grid, cropping, tools, or just pen and paper and draw.
(TODO - flesh out some tools, tips, and tricks)
GRID and FLEXBOX - you can use them now. So do. They are great. Some learning resources:
- Grid By Example
- Basic Grid Example
- Advanced Grid with Semantic UI
ClipPath & Masking Tools. Check out this css tricks article <-- this article has some amazing simple little examples of animating with masks.
CSS Writing Mode.
Take your sketches and make them with code :)
Color modes. CMKY, RGB, HSL. Addititive/Subtractive Mixing. Limit colors as you get started - add more as you get more advanced/complex/detailed. Less is more.
Dont animate gradient - lots of repaints. Demanding! Move with transforms - these are a cheap way to animate. Generative Color - movign across the color spectrum. Much room to play!
Basics:
- Establish a visual heirarchy
- Types: Serif, sans-serif, slab serif, script fonts, Display, handwriting
Pairing
- use different typefaces.
- more is not good. less is sometimes more.
- fonts can cost the site immensly.
- similar is not usually good.
- less than 3
Line length limit - improves readability Color matters!
Mike has some great Type examples. Text Lockup. Monospace v Proportional Kerning v Leading Ligatures "Falling Down" Watch out for Widows and Orphans!
*** Fonts are a major major place for performance issues!***
- Using a common font can be good - someone might have cached the font in the browser :)
Font Specialist: Robin Rendel
Methods for including a font on a site:
Sketch with Purpose!
- Journey
- Orrery
- Hybrid Map
- Results Map
UX Flows Mocks Product Flows Engineering Plans
Writing Feature Requirements <-- Great Article!
As prototyping gets closer and closer to completion - begin thinking about the details/transitions.
Fluid Motion: Drasner Demo
- Morphing
- Context Shifting
- Enterance and Exits
- Developer Standards
Lo Fi Onboarding Bottom & Top Nav *** Loaders matter! 3.6 second. People feel like the performance is better if the loader is good. People will wait 2x as long for a custom loader.
"Im a firm believer in th idea that there's nothing new uner the sun. Said differenly, free from the pressure that all... " Stealing your way to original design. Remix it. Look around. Find your heros.
-
Codrops ****
-
What the Font * cool analysis tool
- Making and Breaking the Grid
- Typography for Lawyers
"The grid is like a lion in a cage, and the designer is the lion tamer. It's fun to play with the lion, ut the design has to know when to get out before the lion eats them."