Thema WebDesign »
Leichter eigene WordPress Templates gestalten
Website-Projekte mit WordPress sind auch mit einer selbstgehosteten Installation mittlerweile sehr leicht umzusetzen und erfreuen sich daher in der Medienpädagogik großer Beliebtheit. Das Beste für die jugendlichen Macher_innen ist dabei sicher die riesige Auswahl an vorgestalteten Templates, mit denen die eigene Website einen individuellen Look bekommt.
Ist die Kreativität der Beteiligten aber mal angeregt, dann kann das schnell nicht mehr ausreichend sein – das ist dann der Einstieg in die Gestaltung eines eigenen Templates mit HTML5 und CSS. Mit dem Template «Bones» gibt es für diese Fälle nun ein ideales Starterkit: Responsiv, schnell und noch dazu frei und kostenlos – da macht Selbstgestalten doppelt Spaß.
Platzhaltergrafiken wie aus dem Arm geschüttelt
Ein lorempixel von hector lazo @ flickr.com (CC BY-SA)
Manchmal muss es in kreativen Prozessen – und damit auch in der Medienpädagogik – schnell gehen. Etwa, wenn die Idee für eine Website-Gestaltung oder die einer SchülerInnenzeitung Formen annehmen soll, die genauen Inhalte aber noch fehlen.
In diesen Fällen hilft lorempixel: Analog zu den klassischen Platzhaltertexten, die mit lorem ipsum beginnen, liefert die Website kostenlos pixelgenaue Platzhaltergrafiken für Web und Print. Die Gestaltung lässt sich nach Genre wählen, die Ergebnisse stehen unter einer CC (BY-SA)-Lizenz – und sind perfekt weboptimiert. Da sage ich nur noch: Lorem ipsum dolor sit amet!
Websites hinter Gittern
"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
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
"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
"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
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?
Gut zu wissen: CSS-Sprites
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
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.