Tagdesign

Aaron Draplin

Thanks to Zak Koski for introducing me to this (now famous) Detroit designer. Not sure I’ve seen someone more real grace the stage at TED.

Portland/CreativeMornings – Aaron James Draplin from CreativeMornings/Portland on Vimeo.

Also checkout:
America Is F*cked
TEDx Portland
Advice for young designers trying to “get in” to the industry.

Can’t get enough?  Do an internet search and you’ll find TONS of talks.

How I Learned HTML & CSS

TO DO ———————————————

===============================================================================
Zen Coding for Aptana
http://coding.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/

RESPONSIVE WEB DESIGN (priceless roundup)
http://www.mayfielddigital.co.uk/blog/web-round-up/best-responsive-web-design-examples-and-resources/

Fluid Design Examples w/ Media Queries
http://zomigi.com/blog/examples-of-flexible-layouts-with-css3-media-queries/

Responsive Design
http://csstips.org/2012/02/27/getting-started-with-responsive-web-design-100-articles-and-tutorials/#.T2fSwrutz5A
http://www.wpmayor.com/articles/more-tutorials-and-resources-on-responsive-theme-design-for-wordpress/
Example: http://thisiscounterculture.com/team
Responsive Navigation Patterns
http://bradfrostweb.com/blog/web/responsive-nav-patterns/

TOOLS & Reference
==============================================================================
Benzier Curve Builder – Animation Ease-In / Ease-Out
http://www.roblaplaca.com/examples/bezierBuilder/

CSS / HTML Playground
http://dabblet.com/

HTML Outliner – Give URL or Upload File to get Outline of page
http://gsnedders.html5.org/outliner/

Fonts – Web Safe
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

css transition timing – REFERENCE *GREAT*
http://www.the-art-of-web.com/css/timing-function/

Chroma Color Picker & Saver
http://lucumalabs.com/chroma/#50964a

MOBILE
==============================================================================
45 Design Templates
http://www.1stwebdesigner.com/inspiration/mobile-web-designs-show-future-trends/

Website design for mobiles
http://blog.savvydog.com/?p=60

==============================================================================
HTML =========================================================================
==============================================================================
Structures: div, section, article
http://oli.jp/2009/html5-structure1/

Smartphone Screens Resolutions
http://cartoonized.net/cellphone-screen-resolution.php

HTML Dog’s Guides on HTML and CSS
http://www.htmldog.com/guides/

==============================================================================
CSS ==========================================================================
==============================================================================
SM – CSS3 Learning Guide
http://www.smashingmagazine.com/learning-css3-useful-reference-guide/
SM – Mastering CSS Principals
http://www.smashingmagazine.com/mastering-css-principles-comprehensive-reference-guide/
45 Powerful CSS / Javascript Techniques – TUTORIALS
http://coding.smashingmagazine.com/2010/01/12/45-powerful-css-javascript-techniques/
Designer Web Trends  (parallax scrolling,
http://webdesignledger.com/tips/web-design-trends-in-2011
Fluid Layout (relative to default font)
http://www.alistapart.com/articles/fluidgrids/
LukeW – Multi-Device Layout Patterns
http://www.lukew.com/ff/entry.asp?1514

Media Queries in Basic Responsive Design Grid (must watch)
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-basic-responsive-grid-plus-handy-css3-media-query-reporter/

Responsive Design Examples
http://mediaqueri.es/

Progressively Enhancing HTML5 (setup Fallbacks)
http://css-tricks.com/progressively-enhancing-html5-forms/

CSS Menu – using Hover and Position
http://www.noobcube.com/tutorials/html-css/create-an-advanced-css-menu-using-the-hover-and-position-properties-/

Inline Blocks
http://www.search-this.com/2008/08/28/lets-all-get-inline-in-a-block-in-a-block/
The Display Declaration
http://www.quirksmode.org/css/display.html

Horizontal Centering
http://haslayout.net/css-tuts/Horizontal-Centering
Vertical Centering Methods
http://www.vanseodesign.com/css/vertical-centering/
Inline Blocks and Why it Sucks
http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Positioning
http://www.barelyfitz.com/screencast/html-training/css/positioning/
http://www.brainjar.com/css/positioning/default.asp

Rounded Corners – REFERENCE – including using images
http://www.w3.org/TR/css3-background/#corner-shaping
http://www.css3.info/preview/rounded-border/

Lists – Stylized – REFERENCE
http://www.marcofolio.net/css/8_different_ways_to_beautifully_style_your_lists.html
Selectors – Advanced (good for dynamic lists in forms – REFERENCE
http://sixrevisions.com/css/3-advanced-css3-techniques-you-should-learn/
Multi-Columns – CSS and Javascipt Alternative for IE – REFERENCE
http://www.csscripting.com/css-multi-column/

Speech Bubbles & Killer Buttons
http://webitect.net/design/designtutorials/6-smashingly-practical-css3-effects-you-can-use-right-now/

Animated pop out Button
http://designshack.net/articles/css/downloadbutton/

STYLE GUIDES
===============================================================================
http://paulrobertlloyd.com/about/styleguide/
http://oli.jp/2011/style-guide/

Color Guide w/ thumbnail preview of color story
http://www.cssdrive.com/index.php/main/category/C17/

STYLES – RESUME
===============================================================================
6 Professional Looking CV/Resume Web Templates
http://www.bitrepository.com/professional-looking-cv-resume-web-templates.html

40 Paid CVs (nice reference)
http://www.1stwebdesigner.com/freebies/resume-cv-templates/

Jason has a pretty example
http://www.brianjaystanley.com/LIS/resume

Another minimal one
http://courseweb.lis.illinois.edu/~stanley8/LIS590DPL/final-project/resume-example-1/resume.html#Qualifications

ANIMATION & FX (CSS)
=======================================================================
SIMPLE beginnings
http://www.webkit.org/blog/138/css-animation/

CSS Gallary – (color swatches) Dark of Black
http://www.cssdrive.com/index.php/main/category/C17/

Using CSS3 Transitions, Transforms and Animation – LEARN BABY
http://css3.bradshawenterprises.com/all/

Cast Shadow from cursor
http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html

CSS animation principals and tools
http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/

jflow video tutorial
http://net.tutsplus.com/articles/news/using-the-wonderful-jflow-plugin-screencast/

3D Parallax Painting
http://www.romancortes.com/blog/3d-meninas-explained/

Thumbnail Navigation Gallery
http://tympanus.net/codrops/2010/07/29/thumbnails-navigation-gallery/

Sticky Header (top) – Content scrolls up under transparent header
http://youloveus.co.uk/blog/the-youloveus-scrolling-background-effect-explained/

Sticky Footer (bottom w/ jQuery)
http://www.hardcode.nl/archives_139/article_244-jquery-sticky-footer
Footer using CSS
http://www.alistapart.com/articles/footers/

W3 Schools (try me)
http://www.w3schools.com/css3/css3_transitions.asp

transitions without javascript – REFERENCE
http://www.w3schools.com/css3/css3_transitions.asp

Rebuild Conent w/ a Fade
http://css-tricks.com/dynamic-page-replacing-content/

Frame by Frame Animation
http://www.cssplay.co.uk/menu/css3-animation.html

SCROLLING / SLIDING
===============================================================================
Build a Conent Slider with jQuery
http://brenelz.com/blog/build-a-content-slider-with-jquery/

Anything Slider
http://css-tricks.com/examples/AnythingSlider/

5 Scrolling Content Examples
http://www.noupe.com/design/sliding-content.html

13 “Beautiful jQuery Conent Slider Scripts – COLLECTION
http://webdesignledger.com/tutorials/13-super-useful-jquery-content-slider-scripts-and-tutorials

jQuery – How to animate the scroll
http://designshack.net/articles/html/how-to-link-to-specific-points-in-a-page-and-animate-the-scroll/

“Scrollable” jQuery Toolset
http://flowplayer.org/tools/scrollable/

8 ways to integrate ImageSwitch and jQuery
http://www.hieu.co.uk/blog/index.php/2009/03/21/8-guides-to-apply-jquery-and-imageswitch-in-web-design/

Sliding Content
http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery

jQuery.ScrollTo
http://demos.flesler.com/jquery/scrollTo/

Slideshow
http://www.agilecarousel.com/

SIDEWAYS – Badass Fullscreen Sliding Image Gallery
http://manos.malihu.gr/sideways-jquery-fullscreen-image-gallery

50 more Slideshows!  – COLLECTION
http://www.tripwiremagazine.com/2012/01/jquery-carousel.html

jQuery Slide
http://api.jquery.com/category/effects/sliding/

Dynamic Scroll – like google reader’s autoloading content
http://webdeveloperplus.com/jquery/create-a-dynamic-scrolling-content-box-using-ajax/

Scroll Background – ball through trees w/ CSS & Javascript
http://www.storiesinflight.com/html5/backgrounds.html

==============================================================================
JAVASCRIPT ===================================================================
==============================================================================
Datepicker
http://jqueryui.com/demos/datepicker/

ANIMATION (Javascript)
=======================================================================
Rebuild Content via Menu Buttons – jQuery TUTORIAL
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/

Rebuilt conent w/ Fade – jQuery TUTORIAL
http://perishablepress.com/slide-fade-content/

Pop-up Speech Bubbles using JQuery
http://demo.marcofolio.net/slick_jquery_css3_menu/default.html

Character Rigging by Anthony Calzadilla
http://www.optimum7.com/internet-marketing/web-development/pure-css3-spiderman-ipad-cartoon-jquery-html5-no-flash.html

Excellent examples on fade examples
http://www.hesido.com/web.php?page=javascriptanimation

Tweening examples
http://jstween.blogspot.com/

Dynamics (chain and more)
http://processingjs.org/learning/topic/chain/

FORMS
========================================================================
Top 10
http://www.catswhocode.com/blog/top-10-css-3-forms-tutorials

Simple Purple Login
http://www.threestyles.com/tutorials/css3-login-form-tutorial/

Styling a dropdown
http://danielneumann.com/blog/how-to-style-dropdown-with-css-only/
from this thread: http://stackoverflow.com/questions/1895476/how-to-style-select-dropdown-with-css-only-without-javascript

Better Select Dropdown
http://v2.easy-designs.net/articles/replaceSelect/

24 Ways – Field day with forms
http://24ways.org/2009/have-a-field-day-with-html5-forms

Fun with HTML 5 Forms
http://thinkvitamin.com/code/fun-with-html5-forms/

Form Validation
http://www.tizag.com/javascriptT/javascriptform.php

Dropdown conent tutorial
http://www.dhtmlgoodies.com/index.html?whichScript=show_hide_content_slide

dropdown login menu
http://web-kreation.com/all/nice-clean-sliding-login-panel-built-with-jquery/

Beautiful Forms
http://www.noupe.com/php/beautiful-forms.html

UI Wireframes
http://www.smashingmagazine.com/2010/02/05/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files/

Robbie Manson: The Mindful Designer

Another great talk on web design, that feels like it shifts a little outside of the World Wide Web. What I learned:

  • We are more efficient when designing away from the computer.
  • One of the techniques he uses is called “6-Up Sketching”, where you set a timer for 5 minutes and try to quickly come up with 6 unique concepts. After the 5 minutes is up, you and your team try to find the strong and weak points in each concept.
  • Intent has to be balanced with Experimentation. As slick as CSS is, it’s not flexible and an accident usually results in an error, not an innovation.

My notepad…

Legos for CSS Design Patterns

Thanks to Natalie Downe‘s Practical Maintainable CSS slideshow for this inspirational idea of using Legos for design grids for laying out web pages.

Quote on Development

Simplicity is hard to build, easy to use, and hard to charge for. Complexity is easy to build, hard to use, and easy to charge for.
Chris Sacca

Thanks to Michael Rubin for that one.

© 2024 Jer's Life

Theme by Anders NorenUp ↑