Responsive Web Design – Eine Linksammlung

28. Juni 2013 at 09:00

 


Diese Linksammlung beinhaltet neben Artikeln und Vorträgen die das
Thema inhaltlich beleuchten auch praktische Tools für die Umsetzung.

 


Artikel & Vorträge:

http://trentwalton.com/2011/07/14/content-choreography/
http://daverupert.com/2013/04/responsive-deliverables/
http://vimeo.com/55076713
http://de.slideshare.net/yiibu/pragmatic-responsive-design
http://alistapart.com/article/responsive-web-design
http://gravitydept.com/blog/magento-imagine-2013-responsive-design-panel/



Blogs & Autoren:

http://trentwalton.com
https://twitter.com/RWD
http://bradfrostweb.com/
http://daverupert.com/

 


Shops
http://skinnyties.com/
http://vsco.co/store
http://www.unitedpixelworkers.com/
http://bradfrostweb.com/demo/mobile-first/?codekitCB=390071910.751946# 

 


Konzept & Design:

1. Pattern
http://bradfrost.github.io/this-is-responsive/patterns.html
http://bradfrostweb.com/blog/web/responsive-nav-patterns
http://responsivenavigation.net/examples

 

2. Navigation
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/
http://tympanus.net/Blueprints/SlidePushMenus/
http://responsive-nav.com/

3. Best Practice
http://worldwildlife.org/
http://www.bbcgoodfood.com/
http://www.starbucks.com/
http://www.sony.com/index.shtml
http://www.time.com/time/

4. Maps
http://www.mapbox.com/tour/

 


Tools für Designer

1. Moodboard / StyleTiles
http://styletil.es
http://danielmall.com/articles/rif-element-collages

2. Fonts

3. Icon-Fonts

http://icomoon.io
Hier ein ausführlicher Artikel zum Umgang mit Icomoon:
http://asimpleframe.com/writing/custom-icon-font-tutorial-icomoon

http://css-tricks.com/examples/IconFont (Gründe für IconFonts)
http://fontastic.me
http://fortawesome.github.io/Font-Awesome/icons

 


4. SVG
http://danielmall.com/articles/svg-workflow-for-designers/

 


Frontend:

1. Bilder
http://www.resrc.it/
http://scottjehl.github.io/picturefill
https://github.com/scottjehl/picturefill
Einsatz von SVG:
http://www.grumpicon.com
Choosing A Responsive Image Solution
http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/

2. Video:
http://flowplayer.org/demos/
http://alistapart.com/article/creating-intrinsic-ratios-for-video

3. Typografie:
http://fittextjs.com/
http://letteringjs.com/

4. Grids:
https://gridsetapp.com

http://thatcoolguy.github.io/gridless-boilerplate/

Photoshop Blend Modes Explained

11. Juni 2013 at 09:59

Die Arbeit mit Füllmethoden in Photoshop ist oftmals ein experimenteller Prozess.
Der folgende Artikel erklärt was hinter den Methoden steckt und wie diese funktionieren.
Ein Verständnis fördert die zielgerichtete Auswahl von Füllmethoden

http://photoblogstop.com/photoshop/photoshop-blend-modes-explained#HowBlendModesWork

(Übersetzung der Bezeichnungen Füllmethoden: http://www.photoshop-weblog.de/englisch-deutsch/#Fullmethode)