Tools:

http://colorschemedesigner.com/

http://www.colorblender.com/

http://www.colorotate.org/

http://www.aviary.com/tools/color-swatches

http://kuler.adobe.com/#themes/rating?time=30

Bücher:

Color, Psychologie und Farben

Das Große Buch der Farben

Kunst der Farbe: Subjektives Erleben und objektives Erkennen als Weg zur Kunst

Handbuch der Farben

Alles fing an wie immer: mit einer Schnapsidee bei einem geselligen Abend. “Es fing ganz harmlos mit einem Youtube-Abend 2009 an. Aber dann steigerte sich die Idee zur ersten “Best of The Internet”-Ausstellung, bei der die Besucher zu Kuratoren werden”, berichtet Sonja Hahn, eine der Organisatorinnen der Mitmach-Ausstellung im Pengland in Mainz, deren Titel sich mittlerweile zu “The Very Best of the Internet” gesteigert hat (es geht immer noch besser!).

Und so kann man nun vom 28. Januar bis 1. Feburar 2011 an der Ausstellung 2.0 teilnehmen: Am Freitag abend startet die Sache mit schneeweißen Wänden und einem Beamer. Jeder kann nun seine Lieblingsseite auswerfen und -drucken lassen. Die Printversion landet an der Wand, wo alle Besucher sie dann via Post-Its bewerten können.

An den Abenden findet zudem ein Rahmenprogramm zu Theman wie “Ökonomie der Aufmerksamkeit”, “Netzpolitik”, “Selbstbestimmung in Unternehmen” und Open Stages statt. Weitere Infos gibt es unter www.pengland.de/2011/01/the-very-best-of-the-internet/ oder bei Facebook

Raster oder Grid – das klingt irgendwie verdammt bürokratisch und einengend. Doch für die User sind Sites, die auf einem durchdachten Gestaltungsraster beruhen, einfach viel einfacher zu nutzen. Dabei gilt: Grids sollten so präzise wie nötig und so flexibel wie möglich sein. Webdesigner Philipp Fuchslocher zeigt in der WEAVE 06.2010 Schritt für Schritt, wie man professionelle Gestaltungsraster für Online und Mobile erstellt. Um das Tutorial leichter nachbauen zu können, stellt er hier die Arbeitsmaterialien zur Verfügung.

Arbeitsmaterial jetzt herunter laden!

conManchmal kann es für Designer und User viel einfach sein, alles auf eine Seite zu packen, anstatt ausufernde Unterseiten-Universen anzulegen. Denn: „In vielen Fällen eröffnet die Reduktion auf das Wesentliche ungeahnten Platz für Kreativität“, meint Webdesigner René Schulze. In der WEAVE 06.2010 erklärt er, welche Navigationsstrukturen, Designansätze und gute Beispiele es gibt. Und er hat hier eine Auswahl seiner 25 Lieblings-Single-Page-Website zusammen getragen.

Portfolio mit Designs und Digital Keepsakes von Bryan Katzel (siehe Bild oben) >>> webleeddesign.com

Website der russischen Online Agentur Creative People >>> cpeople.ru

Portfolio des Grafik Designers André PGoncalves >>> www.andre-goncalves.com

Digital Design-Portfolio von Cory Etzkorn >>> www.coryetzkorn.com

Portfolio des Berliner Motion Designer Paul Rajescha >>> www.project75.net

Portfolio des australischen Webdesigners und Developers Dean Oakley >>> www.deanoakley.com

Portfolio des indischen Designers Gopal Raju >>> www.indofolio.com

Portfolio der amerikanischen Art Direktorin Claire >>> www.vanityclaire.com

Portfolio des britischen Developers Charlie Gentle >>>www.charliegentle.co.uk

Portfolio des Londoner Webdesigners Peter Pearson >>> www.peter-pearson.com

Website der Full Service Agentur More >>> morellc.com

Portfolio des Digital Type Designers Fred Smeijears >>> https://ourtype.com

Portfolio des Grafik- und Webdesigners Damien Delire >>> www.visuall.be/

Portfolio des polnischesn Designers Krzysztof Tryk a.k.a. Aubo Lessi >>> parkink.net

Website von Make Your Mark Creative >>> www.mymcreative.com

Portfolio des Designers Edvin Lee >>> www.commonbrand.com/

Portfolio von Jon Brousseau, Associate Creative Director am New Media Department der Bostoner Universität >>> www.jonbrousseau.com

Portfolio des in Shefield, UK ansässigen Designers Nick Kingan >>> www.northform.co.uk

Portfolio des amerikanischen Kreativ-Kollektiv Made by Giants >>> madebygiant.com/

Portfolio des australischen Designers Dale Harris >>> daleharris.com

Portfolio der Berner Agentur Studio 83 >>> studio83.ch

Website einer britischen Agentur mit dem originellen Namen „Low-Res“ >>> www.low-res.co.uk

Superfamous ist Folkert Gorters Portfolio, Interactive Design in L.A. >>> cargo.superfamous.com

Portfolio des Illustrators Martin Laksman >>> www.laksman.com.ar

Portfolio des italienischen Designers und Illustrators Andrea Banchini >>> www.kinoz.com

Die Zeiten, als Webdesigner nur zwischen Arial und Times New Roman entscheiden konnten sind endgültig vorbei. Inzwischen können Gestalter aus hunderten verschiedenen Webfonts auswählen – aber nicht immer kommt das dem Design einer Seite zugute. Mit Awesome Fontstacks haben  Thorsten Böttger, Jan Krutisch, Wolfgang Wopperer (alle Hamburg) und Florian Munz (Kopenhagen) ein Tool vorgestellt, das Web Fonts automatisch so organisiert, dass sie optisch zusammenpassen.

Wie kamt ihr auf die Idee zu Awesome Fontstacks?
Wolfgang Wopperer: Nachdem wir zwei Wochen auf der ursprünglichen Idee für den Rails-Rumble herumgedacht hatten und frustriert waren, weil es nicht so recht “klick” machen wollte, kam mir auf dem Heimweg plötzlich der Gedanke: Font stacks. Man müsste Web Fonts automatisch so zusammenstellen können, dass sie optisch harmonieren, passende Schrift-Stacks für Browser ohne @font-face-Unterstützung definieren, und fertigen CSS-Code ausliefern. Und innerhalb von fünf Minuten war es ausgedacht…

Wem nützt das Tool und wie?
Wolfgang Wopperer: Awesome Fontstacks nützt Web-Developern und Designern, die mit Hilfe von CSS 3 typographisch ansprechende Websites bauen wollen – und die sich das aufwändige und zeitraubende Suchen, Zusammenstellen und Anpassen von Web Fonts sparen wollen. Vom Zusammenbau des CSS-Codes, so dass er bombensicher Cross-Browser-kompatibel ist, ganz zu schweigen. Die etwa 50 Fonts und rund 100 Varianten in unserer Datenbank sind momentan alle kostenlos kommerziell nutzbar, die meisten stammen von FontSquirrel. Diese Schriften analysieren wir anhand von Metriken wie X- und Versalhöhe, Laufweite und Schriftfamilie und schlagen automatisch passende Kombinationen vor. Am Ende bekommt der Designer die Links zu den gewählten Fonts und fertigen CSS-Code zum Einbauen ins eigene Projekt.

Wie habt ihr das konkret umgesetzt?
Wolfgang Wopperer: Wir haben uns die verfügbaren Font-Metriken angesehen und mit Algorithmen herumgespielt, die uns ein Font Matching ermöglichen. Dann haben wir mit Open-Source-Tools wie FontForge und Ruby on Rails ein System aufgesetzt, das automatisch aus Schriftdateien Metriken extrahiert, in der Datenbank abspeichert, diese vergleicht und so die automatische Kombinatorik übernimmt. Fürs Frontend nutzten wir HAML, SASS, jQuery und CSS 3.

Welche Hürden gab es auf dem Weg zum Launch?
Wolfgang Wopperer: Vor allem die teils mangelhafte Qualität der Metriken der freien Fonts. Wir mussten viel an den Algorithmen schrauben und einige Schriften aus dem Pool werfen, bevor das Matching zufrieden stellend funktionierte.

Was war habt ihr bei dem Projekt für Euch mitgenommen?
Wolfgang Wopperer: In technischer Hinsicht, dass wir uns bei der Weiterentwicklung Gedanken zu ergänzenden Algorithmen machen müssen, etwa über die Analyse von Buchstabenformen. In organisatorischer Hinsicht: Dass vier Leute in zwei Tagen enorm viel schaffen können. Im Hinblick auf die Idee: Dass wir offenbar wirklich ein Bedürfnis getroffen haben – das positive Feedback ist überwältigend.

Mit genialen Ideen, Kreativität und Innovationen ist das so eine Sache: Sie kommen meist nicht dann, wenn man sie braucht. Zum Glück gibt es eine Reihe von Methoden, die bei der Analyse, Konzeption und Umsetzung von gestalterischen Aufgaben helfen sollen. Aber welche ist in welchem Fall die richtige? Wolfram Nagel, Valentin Fischer, Tino Söffing und Marcel Ottmann haben nun den www.designmethodenfinder.de entwickelt: Ein Info-Archiv mit interessantem Interface…

Eigentlich sollten die Studierenden des  Masterstudiums “Communication Planning and Design” an der Hochschule für Gestaltung Schwäbisch Gmünd nur festhalten, welche Methoden  sie während ihres Semesterprojekts anwenden.  Vier Studierende entschieden sich dann allerdings zu mehr: „Wir haben beschlossen Designmethoden zu unserem Hauptprojekt zu machen und uns intensiv mit dem Thema beschäftigt“, erzählt Marcel Ottmann.

Ein Grund: Es zeigte sich, dass verschiedene Quellen zum Teil völlig unterschiedliche und teilweise schwer zugängliche Informationen zu Designmethoden liefern. “Außerdem werden meist nur die Methoden beschrieben”, so Ottmann. Selten gingen die üblichen Info-Quellen vom Problem oder der Lösung aus, die man mit der Methode erwirken will. Ein echtes Manko!

Also probierten die vier gleich mal einige Designmethoden aus, um mit ihrer Hilfe ein richtig gutes Designmethoden-Archiv zu realisieren. Eines, das Designern praktisch hilft. Gelungen ist das: Die Flash-Site hat eine intelligente Navigation, lässt sich intuitiv bedienen und liefert stets passende Methodenvorschläge zum vorhandenen Problem. Methoden-Einsteiger können das Suchfeld mit Hilfe von vorgeschlagenen Begriffen befüllen. Visuell ist das sehr schön gelöst – die einzelnen Begriffe werden in kleinen, wegklickbaren Buttons dargestellt.

Ein Beispiel zur Funktionsweise: wollen Sie zum Beispiel ein Leitsystem entwickeln, und geben daher die Begriffe „Analyse“, „Nutzergruppe“, „Einblick“, „Auswerten“, „Karten“ ein – so erhalten Sie eine Liste mit den Vorschlägen „Behavioral Mapping“ und „Cognitive Maps“. Von hier aus gelangt man zum einen zu tiefergehenden Informationen über die Methoden (siehe Bild oben). Zum anderen kann man aber auch unterschiedliche Ansichten aufrufen: neben der Listenansicht kann man sich das Suchergebnis in einem „Aufwand/Nutzen-Mapping“ oder einem “Themen-Diagramm” anzeigen lassen.

Die Bedienung der Website erinnert stark an Touchscreens: Scrollbalken gibt es nicht. Statt dessen fasst man die Inhalte mit der Maus an und schiebt sie rauf und runter. Per Klick schieben sich die Informationen nach links oder rechts aus dem Browserfenster – so wie man es beispielsweise vom iPhone kennt.

Eine iPhone- oder iPad-Version vom “Design Methoden Finder” gibt es leider noch nicht, wäre aber denkbar: „Die aktuelle Site ist für eine hohe Auflösung konzipiert und komplett in Flash realisiert“, erklärt Marcel Ottmann. Die Daten selbst liegen im XML-Format vor und könnten problemlos für mobile Endgeräte und kleinere Auflösungen verwendet werden. Die Truppe wartet eigentlich nur noch auf einen geeigneten Partner zur Umsetzung einer App…

Noch nie kämpfte Adobe an so vielen Fronten wie heute. Das Release der neuen Creative Suite 5 nahm Interactive Developer Jens Franke zum Anlass, einen kritischen Ein- und Ausblick auf Adobes Tool Palette zu werfen. Zudem hat er interessante Informationsquellen zur CS5 zusammen getragen, die wir Ihnen an dieser Stelle an die Hand geben möchten.

STARTPUNKT ADOBE
www.adobe.com/products/creativesuite/

FLASH CS5 & MULTI-TOUCH
http://tv.adobe.com/watch/adc-presents/multitouch-capabilities-of-flash-player-101/
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/ui/Multitouch.html
http://blogs.adobe.com/flashplatform/2010/04/flash_applications_across_mult.html
http://theflashblog.com/?p=1975
http://vimeo.com/10723525

HILFREICHE TIPPS ZUM CODE HINTING IN FLASH CS5
http://theflashblog.com/?p=1981
http://theflashblog.com/?p=2002

HINTERGRUND-INFOS ZUM XFL-FORMAT
http://theflashblog.com/?p=1986

NEUHEITEN IN PHOTOSHOP CS5
http://tv.adobe.com/watch/photoshop-20th-anniversary/contentaware-fill-sneak-peek/
http://tv.adobe.com/watch/photoshop-20th-anniversary/puppet-warp-sneak-peek/
http://blogs.adobe.com/jnack/2010/05/video_new_blending_modes_in_photoshop_cs5.html

NEUE WERKZEUGE IN ILLUSTRATOR CS5
http://blogs.adobe.com/jnack/2010/05/vector_painting_hotness_in_illustrator_cs5.html
http://blogs.adobe.com/jnack/2010/05/illustrator_cs5_has_excellent_pixel_chops.html

EINFÜHRUNG IN FLASH CATALYST CS5
www.adobe.com/devnet/logged_in/dwinnie_fccs5.html?devcon=f2
www.adobe.com/devnet/flashcatalyst/articles/flash_catalyst_best_practices.html?devcon=f4a

STARTPUNKT FÜR DREAMWEAVER CS5
www.adobe.com/devnet/logged_in/sfegette_dwcs5.html
www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_layouts.html
www.adobe.com/devnet/dreamweaver/articles/using_subversion_pt2.html

SPRY FRAMEWORK FOR AJAX
www.adobe.com/devnet/spry/

FEATURE-ÜBERSICHT ZU FIREWORKS CS5
www.heathrowe.com/topfwcs5features.aspx
www.adobe.com/devnet/logged_in/bbowman_fwcs5.html?devcon=f2a

MOBILE WORKFLOW MIT FIREWORKS CS5 & DEVICE CENTRAL CS5
www.adobe.com/devnet/fireworks/articles/mobile_workflows_fw_dc.html

INFORMATIONEN ZU PREMIERE PRO CS5 & AFTER EFFECTS CS5
http://blogs.adobe.com/genesisproject/
http://tv.adobe.com/watch/learn-premiere-pro-cs5/using-final-cut-pro-with-adobe-premiere-pro/
http://tv.adobe.com/watch/after-effects-cs5-feature-tour/rotoscope-with-rotobrush/

BENMARK CS5 64-BIT SUPPORT
http://blogs.adobe.com/jnack/2010/04/photoshop_cs5_64-bit_benchmarks.html
http://tv.adobe.com/watch/after-effects-cs5-feature-tour/64-bit-performance/

64 BIT & THIRD-PARTY-ERWEITERUNGEN
http://createdigitalmotion.com/2010/03/not-everyone-pleased-to-see-after-effects-go-64-bit/
http://createdigitalmotion.com/2010/03/adobe-on-the-64-bit-transition-plugs-will-be-ready-youll-be-happy/

MIT ADOBE-VIDEO-TUTORIALS NEUE CS5-FEATURE LERNEN
http://tv.adobe.com/de/

FREEHAND RETTUNGSPAKET
www.freefreehand.org/

WICHTIGE INFOS ZUR HITZIGEN DEBATTE ADOBE VERSUS APPLE
& DIE ZUKUNFT DER WEB-ENTWICKLUNG

www.apple.com/hotnews/thoughts-on-flash/

http://blogs.adobe.com/conversations/2010/02/open_access_to_content_and_app.html
http://blogs.adobe.com/conversations/2010/04/adobe_air_on_the_android_platf.html
http://blogs.adobe.com/conversations/2010/04/moving_forward.html

http://daringfireball.net/2010/04/iphone_agreement_bans_flash_compiler
http://daringfireball.net/2010/04/middleware_and_section_311

http://createdigitalmotion.com/2010/04/apple-scores-easy-points-against-flash-but-throws-debate-on-openness-off-the-rails/

[vimeo]www.2gh.de[/vimeo]

[vimeo]http://vimeo.com/10372124[/vimeo]

[vimeo]http://vimeo.com/10133329[/vimeo]