Medienpädagogik Praxis-Blog » WebDesign

Websites hinter Gittern

Eike Rösch — Wed, 27 Jan 2010 05:00:23 +0000

"Gitter" von rudolf_schuba auf flickr.com

“Immer schauen, wie’s die Profis machen” ist eines meiner medienpädagogischen Mottos, und das hat mich jüngst zu einer neuen Erkenntnis gebracht: Wireframes sind eine geniale Methode, um mit mehreren Menschen an einem Website-Entwurf zu arbeiten. Die Gittermodelle (manchmal auch “Mock-up” genannt) stammen aus der professionellen Webentwicklung, sind meiner Meinung nach auch ein guter Ansatz, um während eines medienpädagogischen Website-Projektes mit einer Gruppe gemeinsam die Grundstrukturen einer Website festzulegen.

Wie das aussieht, was die Vor- und Nachteile sind, das erklären zwei Artikel der Webkrauts und von Dr.Web. Stellt sich nur noch die Frage, wie mensch solch einen Wireframe denn konkret erstellt. Dafür gibt es verschiedene Herangehensweisen mit herkömmlichen Programmen wie bspw. Photoshop. Ein Tutorial im InteractionDesign Blog erklärt das genauer. Sehr schön, praktisch und funktionell finde ich aber auch eine webbasierte Lösung wie Mockingbird. Viel Spaß beim Entwerfen!

Kostenlose Webdesigner Software für den Mac

Tobias Albers-Heinemann — Tue, 08 Dec 2009 23:39:30 +0000

Gute Software für medienpädagogische Projekte muss nicht immer teuer sein, ich denke das haben wir hier schon öfter gezeigt. Eher ist es die Schwierigkeit, unter der Vielzahl der kostenlosen Anwendungen die passenden heraus zu finden.

Aus diesem Grund sind wir auch immer wieder erfreut, gute Artikel zu finden, in denen themenbezogen Software empfohlen wird.

In dem Beitrag 14 Free Mac Apps for Web Designers on a Budget werden kostenlose Web- und Design-Anwendungen für den Mac vorgestellt, die das Arbeitsleben eines Medienpädagogen enorm erleichtern.

Aber wie sieht es bei Ihnen aus? Gibt es andere kostenlose Programme, die für Ihre Arbeit unverzichtbar geworden sind?

Wissenswertes über Farben

Eike Rösch — Wed, 07 Oct 2009 04:00:05 +0000

"Hannover: colorful chair-parade 25.605.15" von Juergen Kurlvink auf flickr.com

Spätestens wenn es um Webdesign oder um die Gestaltung von Broschüren und Plakaten geht, steht auch der/die letzte MedienpädagogIn vor der Wahl “Welche Farbe hättns denn gern?”. Meist wird dann aus der Hüfte geschossen mit einigermaßen zufriedenstellenden Ergebnissen, aber jeder Blick auf Produkte von Profis provoziert die nächste Frage: “Wo haben die nur die passenden Farben her?”

Grund genug, um sich in einer ruhigen Minute mal mit Farbenlehre, Farbräumen, dem Farbkreis, Komplementärfarben, Farbpaletten oder auch Farbsymbolik – und Bedeutung auseinander zu setzen. Der Gestalter Klaus-Dieter Knoll hat das in seinem Blog getan und sein Wissen in vier anschaulichen und praxisorientierten Artikeln [1,2,3,4] zusammengefasst. Auf dass die TeilnehmerInnen beim nächsten Webprojekt davon profitieren. Sehr praktisch in diesem Zusammenhang ist übrigens auch das Tool colorsuckr.com, das aus hochgeladenen Bildern die passenden Farben extrahiert.

Websiteentwürfe leicht gemacht

Eike Rösch — Mon, 03 Aug 2009 04:01:21 +0000

"Moodboard Schnipsel" von dbloete auf flickr.com

Nicht immer müssen bei medienpädagogischen Website-Projekten Gestaltungsentwürfe gemacht werden – aber wenn, dann ist das kein leichtes Unterfangen, denn wer diskutiert schon gerne über kreative Entwürfe und damit über Geschmäcker?

Nun bin ich auf Moodboards aufmerksam geworden, eine Methode aus dem gestalterischen Bereich, mit dem erste Attribute einer Website, eines Videos oder auch eines Wohnzimmers visualisiert werden können. Und ich finde, dass Moodboards auch eine Methode für die medienpädagogische Arbeit sein können: Wenn alle TeilnehmerInnen einer Projektgruppe ein solches Produkt zu einer Website (oder einem Video) erstellen, ist das eine gute Basis, um über einen gemeinsamen Look zu diskutieren. Das Dr. Web Magazin führt ins Thema ein und nennt gute Links; hier und hier gibt es erste Anleitungen.

Unser Blog im neuen Glanz und mit neuen Funktionen

Eike Rösch — Sat, 09 May 2009 13:41:38 +0000

Wir wollen unseren LeserInnen Informationen für die medienpädagogische Praxis vielfältig, geballt und gleichzeitig übersichtlich und leicht auffindbar bieten. In diesem Sinne haben wir unser Blog einem gründlichen Relaunch unterzogen.

Der neue Look soll die Beiträge und Seiten lesbarer machen, die Informationen und Funktionen sollen noch einfacher auffindbar sein und wir möchten Platz haben für noch mehr Infos.

Auf der Basis werden wir nun nach und nach neue Infos hier verfügbar machen und neue Funktionen bieten. In den nächsten Tagen wird hier deswegen an einzelnen Stellen noch gefeilt, gestrichen und poliert. Wo hippe Websites solche Situationen mit einem “BETA”-Badge verschönern wollen, bemühen wir uns einfach um wenig Unannehmlichkeiten und eine schnelle Fertigstellung. In diesem Sinne: Viel Spaß beim Erkunden!

Wie finden Sie unser generalüberholtes Blog?

Was Sie sich schon immer zu Photoshop gewünscht haben…

Eike Rösch — Tue, 14 Apr 2009 22:01:27 +0000

…aber kaum zu fragen trauten, das gibts heute in geballter Menge: Egal, ob für medienpädagogische Projekte zu Bildbearbeitung, Fotografie oder Webgestaltung, hier kommen einmal mehr wichtige Quellen für Photoshop-Tutorials, -Pinsel, -Muster, -Aktionen und -Tipps.

Dr. Web listet einige allgemein wichtige Photoshop-Quellen für Tutorials und Co. auf, noupe.com ergänzt (auf Englisch) die 60 wichtigsten Pinsel-, Tutorial-, etc. -Quellen. Und dann sind mir in letzter Zeit noch Tutorials zu 3D-Effekten, Optimierung der Bildqualität, Angleichung von Hautfarben, Tonwertkorrektur und zum “Apple-Look” (3D-Effekten, Geräte, Icons, etc.).

Gut zu wissen: CSS-Sprites

Eike Rösch — Tue, 03 Mar 2009 23:01:28 +0000

Wenn bei medienpädagogischen Webprojekten selbst Webdesign-Layouts erstellt werden, geht es meistens nicht um allerhöchste Perfektion, was Ladezeit und Technologie geht – meistens müssen sich die jugendlichen TeilnehmerInnen viel Wissen in kurzer Zeit aneignen. Manchmal darf es aber auch etwas mehr sein, und dann spätestens ist es gut, auch als MedienpädagogIn den state of the art zu kennen.

Gerade bin ich mal wieder über CSS-Sprites [1,2] gebrowst, die von WebgestalterInnen aktuell gerne eingesetzt werden, um Ladezeiten zu verkürzen. Wer mehr wissen möchte: Hier wird alles genau erklärt (leider auf Englisch), Beispiele (Google, Xing, bahn.de) machen es noch deutlicher und ein CSS-Sprite-Generator hilft bei der Umsetzung. Jetzt warte ich nur noch auf ein Projekt, wo ich das mal ausprobieren kann.

Schicke Outfits für eigene Websites

Eike Rösch — Sun, 11 Jan 2009 22:01:38 +0000

Wenns bei medienpädagogischen Homepage-Projekten mal schnell gehen muss mit der Seitengestaltung, dann ist guter Rat teuer: Woher auf die Schnelle eine kostenlose (X)HTML/CSS-Vorlage herbekommen? Diese beiden Links versprechen Hilfe: Beim SmashingMagazine werden 100 wirklich schöne, professionelle und gleichzeitig kostenlose bzw. freie Templates vorgestellt; außerdem gibt es hier noch einige HTML-Templates zum Download.

Und wenn doch mehr Zeit für eigene Entwürfe da ist, dann sind diese Seiten gut zur eigenen Inspiration: Das Portfolio des polnischen Studio K und in einer weiteren Zusammenstellung des SmashingMagazines zu kreativen Webseitengestaltungen. So bekommt das nächste Webseitenprojekt auf jeden Fall ein schickes Outfit.

Inspirationen für Webgestaltung

Eike Rösch — Thu, 18 Sep 2008 22:01:57 +0000

Lange habe ich hier schon keine Hinweise auf schöne Beispielseiten für Webdesign gepostet. Ob der fehlende Blick für das Thema oder die fehlenden Beispiele der Grund waren sei dahingestellt: Jetzt sind mir beim SmashingMagazine gleich zwei Zusammenstellungen über den Mauszeiger gelaufen. Einmal eine ganz allgemeine zu außergewöhnlichen Gestaltungsmöglichkeiten von Internetseiten mit CSS, Flash und Javascript, zum anderen ein spezieller Blick auf die Gestaltung von Webshops. Auch wenn letzteres sicher nicht zu unseren thematischen Kernbereichen gehört, sensibilisiert die Onlineshop-Analyse für das zielgruppen- und zielorientierte Gestalten von Internetseiten. Und alle Beispiele sind sicher eine gute Inspiration für eigene, medienpädagogische Internetprojekte.

Farbverliebte unter sich

Eike Rösch — Fri, 25 Apr 2008 11:36:47 +0000

“Wie kuler, nur besser!”, so könnte mensch die Website der COLOURlovers beschreiben: Dort können Farbinteressierte ihre Farbpaletten, aber auch reine Farben und Muster, tauschen und bewerten. Das ganze wird flankiert von allerlei Community-Features. Ein guter Tipp also für das nächste medienpädgogische Projekt, bei dem es um die eigene Gestaltung einer Website geht.

Professionelles Webdesign im Web2.0

Eike Rösch — Thu, 13 Mar 2008 23:45:50 +0000

Wer meint, Webdesign im Web2.0 sei nichts als der polierte-Platte-Effekt und bunte Buttons und Sterne, der/die ist auf dem Holzweg. Das ist eine der Erkenntnisse, die mensch auf der Seite von Ben Hunt erlangen kann. Der erfahrene Webdesigner gibt auf webdesignfromscratch.com sein umfangreiches Wissen weiter – von Grundlagen wie das Design mit XHTML und CSS über ausgefeilte Schritt-für-Schritt-Anleitungen zum Design einer professionellen Seite bis hin zu Detailfragen wie allgemeiner Gestaltung und Branding. Den/die BesucherIn erwarten interessante Artikel, PDFs mit Teilaspekten und auch ein kostenloser Auszug aus dem Buch des Autors. Hut ab vor der Freigiebigkeit und eine dicke Weiterempfehlung – sei es für die eigene Weiterbildung oder den Einsatz in Projekten der Medienpädagogik.

Was das Herz begehrt…

Eike Rösch — Wed, 23 Jan 2008 22:02:50 +0000

…zumindest in professioneller Hinsicht und für WebmeisterInnen, bietet forwebdesigners.com. Aktuell bietet die Seite mehr als 500 Links auf Quellen, die die Arbeit von WebmasterInnen und vor allem WebdesignerInnen einfacher machen: Seiten- und Grafikgeneratoren, CSS-Tipps und -Tools, Gestaltungsinspirationen undundund.

Zu letzteren gehört auch webcreme.com. In leichtem CSS-Design werden dort täglich Gestaltungssahnestückchen aus dem Netz gesammelt.

Best of CSS Design 2007

Eike Rösch — Mon, 17 Dec 2007 22:01:51 +0000

Kurz vor Jahresende kürt WebDesignerWall die CSS-Gestaltungshöhepunkte 2007. Die Liste der 50 besten Websites bietet einen guten Eindruck des State-of-the-Art des Webdesigns, ist eine schöne Inspirationsquelle – und eignet sich vor allem als Beispielgeber für HTML-/CSS-Workshops in der Medienpädagogik. Danke dafür.

Ein Adventskalender zu Standards im Web

Eike Rösch — Mon, 03 Dec 2007 13:28:23 +0000

“Eine richtige Plage [auf Webpages] sind Flash-Animationen, die den Besucher mit überraschender lauter Musik oder Sprache vom Stuhl hochschrecken lassen” – wahre Worte der Webkrauts aus dem Adventskalender 2006. Die Webspezialisten, die sich die Verbreitung der Webstandards im deutschen Raum auf die Fahnen geschreieben haben, treten auch in diesem Jahr wieder mit einem Adventskalender an, der hinter jedem Türchen interessante Beiträge zu Webtechnologie verspricht. Da können auch MedienpädagogInnen aufhorchen und mitlesen.

WebDesign-Muster und -Stilblüten

Eike Rösch — Fri, 12 Oct 2007 12:18:04 +0000

Wie Patrick Haney hat auch Brian Christiansen in einem Flickr-Photoset gesammelt, was im Web gerade so an Design-Standards und -Innovationen zu finden ist. Das ganze ist sehr schön nach verschiedenen Kategorien sortiert und eignet sich damit auch hervorragend für gezielte Inputs im Rahmen von Webschulungen in der Medienpädagogik. Und in jedem Fall eine gute Quelle für Inspirationen.

Medienpädagogik Praxis-Blog » WebDesign

Websites hinter Gittern

Verwandte Artikel

Kostenlose Webdesigner Software für den Mac

Verwandte Artikel

Wissenswertes über Farben

Verwandte Artikel

Websiteentwürfe leicht gemacht

Verwandte Artikel

Unser Blog im neuen Glanz und mit neuen Funktionen

Verwandte Artikel

Was Sie sich schon immer zu Photoshop gewünscht haben…

Verwandte Artikel

Gut zu wissen: CSS-Sprites

Verwandte Artikel

Schicke Outfits für eigene Websites

Verwandte Artikel

Inspirationen für Webgestaltung

Verwandte Artikel

Farbverliebte unter sich

Verwandte Artikel

Professionelles Webdesign im Web2.0

Verwandte Artikel

Was das Herz begehrt…

Verwandte Artikel

Best of CSS Design 2007

Verwandte Artikel

Ein Adventskalender zu Standards im Web

Verwandte Artikel

WebDesign-Muster und -Stilblüten

Verwandte Artikel