Deane Nettles | Advertising & Graphic Design
LINKS FOR DESIGNERS
Harmonic Instruction
The Basics of Design Theory
Elements and principals of composition
45+ Free Lessons in Web-centric Design Theory
Interface Design
https://adobe.design/stories/design-for-scale/designing-design-systems-constructing-an-icon-systemApple is giving design a bad name
"People who are really serious about software should make their own hardware."
Principles of Interface Design
Responsive Design Boston Globe (In InDesign)
5 Essentials of the "Donate Now" Button
Motion Design
kylereadsays.com — a really amazing web page made up of animated gif files.
"Flawed," a simple but well-told stop-motion animation
"Motherless Brooklyn" Title Sequence Proposal 2011 (awesome After Effects animation)
"Motion Plus Design" Center: What is Motion Design?
Rotascoping (tracing over live action)
Web Design
Tutorialzine Really kick-ass coding tutorials by someone who can also design.
Demosthenese' blog Really kick-ass tutorials by a css animator.
Ideal length of text and video on web: Adweek
Color Theory for Web Designers
Gestalt Theory for Web Designers
Elegant Subheads for Web Design
Design Machines — Recommendation on how to stop becoming design machines and build web sites that matter.
Example of CSS3 animation; use Chrome browser
Adam Hartwig, 3D/animated web designer
Web SEO
link-assistant/user behavior and seo
Google — Using rich snippets for events
Web Coding
Deane's Harmonic Website Design
Adding Google fonts to your web pages
The Definitive Guide to Web Character Encoding — Tommy Olsson — Why you should use UTF-8
Campaign Monitor Guide to CSS in Emails
Display Table Anti-Hero — How to use css as opposed to html tables, so you can restructure them when they are too narrow.
Web Fonts
debugbear.com: Website Font Performance
https://www.underware.nl/case-studies/dynamification-of-typography/
Web Responsive Coding
Andy Mangold's Responsive Design Course
Web Tools
CSS Inliner: inlines your css for emails.
Dirtymarkup.com code cleanup and indenting
Style Guide Template Illustrator CS6
Web Processes
Daily UX Crash Course — The hows and whys of user interface design
Seth Godin: Quieting the Lizard Brain (Thrash Early and Ship)
Web Examples
The importance of adding space to a design
CSS — Two approaches to centering objects horizontally
CSS — Two ways to use columns in a flexible layout
CSS — Using clearfix to contain floated divs within another div
CSS — Working with divs and type
CSS — First and last child pseudo selectors
CSS — The differences between different types of positioning
CSS — Creating alternative bands of color
CSS — Playtime with floats and percentages
CSS — List margin and padding effects
Images — Overcoming limitations of png-8 with slicing
jQuery fade in site, then animation transition to inside pages, with example of text sizing using vw
css portfolio site using css columns
Instruction in floats and clears
Floats and clears example file