Folien Download / Übungen Download
Freitag, 31. Dezember 2010
Montag, 20. Dezember 2010
Frohe Feiertage und einen guten Rutsch :)
(Mehr auf startupquote.com)
Einige haben letzte Woche noch kein Zitat vorgeschlagen – ich hoffe, Ihr habt trotzdem eine gute Idee für die Typografieaufgabe (oder Sie kommt Euch über die Feiertage) damit wir im neuen Jahr gleich zügig loslegen können.
Freitag, 3. Dezember 2010
Mittwoch, 1. Dezember 2010
Blutsgeschwister
http://www.blutsgeschwister.de/
Zwei junge Frauen, ein Motto: hauptsache keine Langeweile!
So ist auch die Homepage und der virtuelle Shop aufgebaut. Es gibt viele kleine Detailverlerliebtheiten zu entdecken, die mit Flash-Elementen funktionieren.
Und der Clou: Man kann einzigartige Kleidung shoppen!
Das Tolle an der Seite ist, dass trotz des verspielten Design alles sehr strukturiert ist. Menüpunkte sind wie Kartenreiter aufgebaut und weisen den Weg. Die Seite ist vor allem für Modeinteressierte junge Leute geeignet, die auf der Suche nach etwas Besonderem sind.
Einfach eine tolle Spielerei - und vor allem alles andere als langweilig!
Zwei junge Frauen, ein Motto: hauptsache keine Langeweile!
So ist auch die Homepage und der virtuelle Shop aufgebaut. Es gibt viele kleine Detailverlerliebtheiten zu entdecken, die mit Flash-Elementen funktionieren.
Und der Clou: Man kann einzigartige Kleidung shoppen!
Das Tolle an der Seite ist, dass trotz des verspielten Design alles sehr strukturiert ist. Menüpunkte sind wie Kartenreiter aufgebaut und weisen den Weg. Die Seite ist vor allem für Modeinteressierte junge Leute geeignet, die auf der Suche nach etwas Besonderem sind.
Einfach eine tolle Spielerei - und vor allem alles andere als langweilig!
Donnerstag, 25. November 2010
www.2gh.de
Die Webseite der Hamburger Agentur Grimm, Gallun, Holtappels ist inspiriert vom Design der Visitenkarte der Agentur.
Die Seite ist interaktiv und mit vielen 3DFlash Elementen aufgebaut.
Man wird virtuell durch die Agentur geführt und kann sich viele Projekte der Agentur ansehen.
Vor allem lädt die Seite zum herumspielen ein.
Dank des einfachen Farbkonzepts findet man sich auf der sehr verschachtelten Seite gut zurecht.
Interessant ist die Seite für alle Auftragsgeber, die auf der Suche nach einer geeigneten Agentur sind, für alle Designinteressierten und für alle die gerne auf Websiten herumspielen und immer wieder neues entdecken wollen. Man kann sich stundenlang auf der Seite aufhalten.
Die Website ist auch ganz frisch ausgezeichnet worden mit dem Multimedia Award 2011.
Mittwoch, 24. November 2010
Freitag, 19. November 2010
Timberland Earthkeepers Websitevorstellung
Name: Timberland Earthkeepers Collection
Thema & Ziel:
Thema ist, wie man es vom Titel her schon erahnen kann(Earthkeepers=Bewahrer der Erde) der Umweltaspekt im Bezug auf die Timberland Kollektion, die zum großen Teil aus recycleten Materialien besteht und daß Timberland sich für die Umwelt einsetzt(Bäume pflanzen etc.)
Das Ziel dieser Website ist nicht vorrangig die Produktwerbung sondern eine Aufpolierung des Images hin zur umweltfreundlichen Marke.
Nutzen/Interesse:
Zunächst ist die Seite für Timberland nützlich, da sie damit, wie eben gesagt ihr Image aufwerten und sich in eine umweltfreundliche Richtung positionieren.
Da es die Möglichkeit gibt sich über Facebook an einem Wiederaufforstungsprogramm in Haiti zu beteiligen (man pflanzt virtuelle Bäume und es werden echte dafür in Haiti angepflanzt) nutzt es auch tatsächlich der Erde.
Aufbau:
1.Landingpage
2.Ein kurzes Video als Intro. Als der Character nach der Flasche springt stoppt das Video und der Screen wird zur Website.
3.Website:
Man sieht einen Mann waagerecht in der Luft schwebend nach einer Plastikflasche greifen.
Die Seite ist recht übersichtlich aufgebaut. Oben und unten sehen wir 2 Leisten und in der Mitte das Bild des Springenden „Flaschenjägers“ mit einem „Drag“ Button in der Mitte einer waagerechten Linie. Mit diesem Button kann man das Bild um 90° drehen, wobei die Drehung in 5 Abschnitte unterteilt ist. Jeden dieser Abschnitte kann man gesondert anklicken und erfährt so mehr über die Kollektion(Aussehen,Umweltaspekt etc.), aber auch die Kampagne(Werbemovie und Making Of).
Diese einzelnen Punkte der Drehung werden auch nochmal unter dem Bild kommuniziert und daneben sehen wir einen Facebook Link zum „Bäume pflanzen“ und natürlich einen Link zum Shop.
Die Seite gefällt mir, da man sie spielerisch erkunden kann und somit ziemlich schnell alles entdeckt was Sie kommunizieren will.
Ein weiterer Pluspunkt ist die Dreidimensionalität und die Interaktion mit dem Charecter im 3D Raum. Dies macht wirklich Spass und so wird das Entdecken der 5 Aspekte/Punkte zu einem Kinderspiel. Man kann sich sogar eine 3D Brille aufsetzen (gibt’s auch bei Timberland im Shop) und die Seite dann auch richtig dreidimensional sehen.
Volkswagen.de in neuem Design
neuer Auftritt ( http://www.vokswagen.de )
Der Branchenriese Volkswagen hat seine PKW-Website einem umfassenden Relaunch unterzogen. Ein Schwerpunkt bei der Umstellung war die stärkere Verschmelzung der jeweiligen in Flash realisierten, interaktiven Fahrzeug-Specials, die bislang meist in einem separaten Fenster vorgehalten wurden, und nun ein echter Bestandteil der Website sind.
Das neue Interface verfügt über eine Gesamtbreite von 962 Pixeln ( 186 px breiter als die Vorgängerversion ), sitzt nun mittig im Browserfenster und bedient sich einer sehr expressiven Bildsprache.
Bisher nur für Deutschland aktuell werden alle anderen Ländergesellschaften sukzessive ihre Portale auf das neue Design namens “4.0″ umstellen.
Verantwortlich für die Konzeption und das neue Design ist die Agentur argonauten G2, die sich vor mehr als zwei Jahren im Pitch durchsetzen konnte und zuvor für VW die visionäre Website ”Volkswagen 2028” entwickelte. Diese ist Teil der Kommunikation zur grundsätzlichen Repositionierung der Marke Volkswagen und soll insbesondere den Markenwert „Innovation” transportieren und nachhaltig stärken. VW präsentiert auf dieser Website die eigene Version der automobilen Zukunft.
Viele dieser konzipativen Elemente sind schon im Markenauftritt seit dem 09.11.2010 sichtbar.
Die Stärke der ”Ideen” und ihre innovative Funktion in der Umsetzung ist Kern des Aufbaus und der Nutzerführung. Die Website ist feingliedrig, eine gelungene Komposition aus interaktiver Teilhabe und ausreichender Information - sodass das Wort ”Infotainment” als passendes Schlagwort ausgewiesen werden kann.
Damit bleibt nur noch Mercedes und BMW der Schritt in eine zentral ausgerichtete Website ...
Sonntag, 14. November 2010
Slides vom 12.November 2010
Montag, 1. November 2010
Rumgekritzelt
Die Website www.leoburnett.de zeigt die Arbeit der Werbeagentur Leo Burnett aus Frankfurt. Die Agentur hat aktuell das Werbeetat fürs ZDF bekommen. Durch diesen Internetauftritt soll ein möglichst umfassendes Bild der Agenturarbeiten gegeben werden. Es werden die Kunden mit den gestalteten Projekten vorgestellt, man kann im Zeitraffer zuscchauen, wie das neue Gebäude gebaut wird und nebenbei kann man die Homepage sinnlos vollkrizeln. Interessant ist das auf jeden Fall, wenn man sich für die Agentur interessiert, aber auch am Aufbau der ganzen Site kann man sich vertüdeln und hier nochmal gucken und da war ich ja auch noch nicht.
Gestalterischer Aufbau: der Block in der Mitte, der sich permanent je nach Bleistiftfahrt in verschiedene Richtungen bewegt, beinhaltet alle Kunden und Projekte, alles Wissenswerte zur Agentur sowie lustige Illustrationen/Animationen. Das alles ist in kleinen Symbolen oder Schriftzügen angeordnet, die meist erst sichtbarer werden, wenn man mit dem Bleistift darauf kommt. Was ich besonders gelungen finde, dass man mit einem Klick in die weiße Fläche wieder zurück gelangt, so hat man nie das Gefühl, irgendwo im Agentur-Dschungel verloren zu sein. Trotz dass die Seite auf den ersten Blick sehr wirr erscheint, weil man gar nicht weiß, was man zuerst anklicken soll, ist sie sehr übersichtlich und die Weiterführungen immer gleich gestaltet (wie gesagt, zuück findet man super schnell).
In der Zeile unten rechts befinden sich dann die Inhalte nochmals Links, um schnell zu wichtigen Seiten zu gelangen (z.B. Kontakt oder Jobs).
Wenn man sich dann mit dem Bleistift ausgetobt hat und die Seite zugeschmiert hat (funktioniert ohne Klicken - was auf Dauer sehr nervig sein kann), klickt man unten in der Buttonzeile BIG BLACK PENCIL und man hat seinen Mauszeiger wieder. Die Seite ist auch noch mit akkustischen Elementen versehen, die jeweils zum angeklickten Kunden, Illustration etc. passen.
Donnerstag, 28. Oktober 2010
Donnerstag, 21. Oktober 2010
Layout Templates: Zwei von meinen Templates für Website-Layouts. Jeweils ein flexibler Browser-Rahmen (MacOS-Style) in 1024 und 1280 Pixel Breite. Jedes Template ist im ZIP doppelt vorhanden, als Photoshop-PSD und Fireworks-PNG. Alle Dateien enthalten nützliche Hilfslinien, Cursor, etc.
Stöbern erlaubt!
Die Website die ich am 22.10. vorstellen werde, ist die Seite der Agentur Grabarz und Partner aus Hamburg. Zu erreichen ist die Seite unter:
http://www.grabarzundpartner.de
Erstellt wurde die Seite als Eigenportfolio, das die Agentur, deren Arbeiten und Mitarbeiter, sowie Neuigkeiten auf eine sehr interessante Weise aufzeigt. In erster Linie soll die Seite sicherlich potentielle Kunden ansprechen, aber auch für jeden anderen Interessierten hat die Seite in meinen Augen einiges zu bieten.
Auf den ersten Blick scheint der Aufbau der Seite recht einfach zu sein und wirkt vielleicht auch etwas uninteressant – doch es gibt einiges zu entdecken. Obwohl ich mich ziemlich lange mit der Seite beschäftigt habe, habe ich nicht das Gefühl, schon alle Details zu kennen. Mir fallen nach wie vor immer wieder neue und interessante Dinge auf. Der Unterhaltungsfaktor ist daher sehr hoch.
Wie funktioniert nun diese Seite? - Nach Eingabe des Links, scheint man zunächst falsch gelandet zu sein. Man erhält die Info, dass der Internetserver der Agentur zurzeit nicht erreichbar sei und man daher mit einem Arbeitsplatz eines Mitarbeiters verbunden wird. Dieser Mitarbeiter ist bei jedem neuen Besuch ein anderer. Nachdem man nun die „Verbindung“ bestätigt hat, scheint man sich tatsächlich am Arbeitsplatz eines Macs in der Agentur zu befinden. Nun kann das stöbern und entdecken beginnen. Alles ist funktional und scheint wie an einem echten Mac zu sein. Man kann alles öffnen und sich so Arbeiten, Videos und viele weitere nützliche (und weniger nützliche) Informationen anschauen. Die Sache wird soweit getrieben, dass man sogar auf den „privaten Ordnern“ des Mitarbeiters stöbern kann. Dort findet man Musiklisten, private Fotos und diverse andere amüsante Dinge.
Was ist, wenn ich schnell an Informationen kommen will? - Kein Problem, wer schnell etwas sucht und weiß was er sucht, hat schnellen Zugang zu allen Daten, indem er die Obere Leiste (genannt: Finder) nutzt. Hier gibt es eine Art Sitemap, die eigentlich eine Suche nach Anfangsbuchstaben ist. Kontakt und Impressum, sowie AGB´s sind ebenfalls schnell zugänglich. Alles was man in der oberen Leiste finden kann, kann man auch über das Menü und die Festplatten-Symbole erreichen. Neuigkeiten und Jobangebote usw. begrüßen einen gleich nach Öffnen der Seite auf dem Desktop (dessen Hintergrundbild übrigens auch bei jedem neuen Besuch bzw. jedem neuen Mitarbeiter wechselt). - So ist der Nutzer nicht gelangweilt und bleibt der Seite treu. D.h. er wird sie sicherlich wieder besuchen.
Fazit:
Aus meiner Sicht ist diese Seite die ideale Kombination aus Informationen und humorvoll umgesetzten Details. Eine ganz eigene Art der Webseite.
Mittwoch, 20. Oktober 2010
Abenteuerspielplatz
http://www1.tombraider.com/legend/
Nicht auf die deutsche Fahne klicken, sondern die amerikanische. Anscheinend gibt es die deutsche Version der Website nicht mehr.
Tomb Raider: Legend ist der siebte Teil der Tomb Raider Reihe und erschien am 7. April 2006. Die Website wird es allerdings schon mindestens ein Jahr vorher gegeben haben, genau weiß ich das nicht.
Aufbau der Website
Als ich damals, mit ca. 15 Jahren, die TR: Legend-Website zum ersten Mal sah, war ich hellauf begeistert! Ein Wurstelparadies! Ich persönlich bevorzuge unterhaltsame Websites; ein bisschen hier klicken, ein bisschen da klicken und jedes Mal passiert etwas (teilweise unnützes) Neues. Dann bin ich glücklich!
Die gesamte Website baut auf einem 'Mayatempel-Look' auf: Felsen, Steinwände, diverse Fallen; Speere, Steine, Spieße, Pfeile, Holz, Insekten und anderem. Fast jeder Effekt hat natürlich einen eigenen Sound, z.B. klingt es so, als würden zwei Schwerter aufeinander schlagen, wenn die Spieße hervorschnellen.
Das Ganze wird nebenbei vom TR: Legend-Soundtrack begleitet.
Trotz des ziemlich komplexen Designs der Seite, wird der informative Inhalt nicht in den Schatten gestellt. Im Gegenteil; gerade weil so viel 'tempeliges' passiert, klickt man wirklich alles an, ließt sich alles durch und downloaded alles, was es zu downloaden gibt.
Das gesamte Design der Seite unterstreicht den Abenteuercharakter des Spiels. Ich habe direkt Lust mir Pistolen um die Hüften zu schnallen und mich in den nächsten Busch zu schmeißen! Meiner Meinung nach ist die Website einfach nur gelungen, und zwar zu 100 %!
Ann-Christin Westphal
Sonntag, 17. Oktober 2010
Nochmal en detail zur Aufgabe „Helden des Altags“
Es soll eine Website entstehen, die „Helden des Altags“ gesammelt präsentiert. Helden können hier viele Dinge sein, grundsätzlich sollen dies Gegenstände, Dinge oder Erfindungen sein, die Dir persönlich und sicher auch der Menschheit insgesamt einen großen Dienst erweisen und ohne die man sich ein Leben nicht mehr vorstellen möchte - die viele aber als selbstverständlich ansehen und daher kaum angemessen wahrnehmen und wertschätzen!
Diese „Helden“ können vieles sein, eine kurze Liste mit einigen Vorschlägen von Kai und mir findet ihn in den Kommentaren. Daher sind auch verschiedene strategische/kommunikative Ausrichtungen für die Website vorstellbar. JEDER soll für sich 2 verschiedene Richtungen durchdenken und ausprobieren:
A. INFORMATIV: Die Website als ein großes Tool/Lexikon mit viel nützlichem Wissen zu vielleicht tausenden von „Helden“. Schnell bedienbar und durchsuchbar.
B. UNTERHALTSAM: Die Website als eine Inszenierung von einigen dutzend echter „Helden“, die so wirklich kleine „Helden“ sein können. Hier braucht es Emotionalität. Die Heldenverehrung kann man z.B. über persönliche Gründe und Anekdoten erzählen oder humorvoll-ironisch aufbereiten.
Zu A und zu B sollen jeweils 3 Seiten bzw. Zustände der Website konzipiert werden:
1. Die Startseite, die dem unvorbereiteten Besucher erklärt, was „Helden des Altags“ sind und eine Übersicht über die Inhalte gibt.
2. Eine Top-10-Seite, auf der zehn „Helden“ präsentiert werden. Wie die Auswahl zustande kommt ist Teil Eures Konzepts, dies können die zuletzt in der Website hinzugefügten sein, die poplärsten, die „heldenhaftesten“, die teuersten, die seltensten, usw. usw.
3. Eine Einzelseite, auf der ein einzelner „Held des Altags“ umfassend dargestellt wird - mit allem, was Ihr dazu für nötig haltet. Das dürft Ihr ggf auch frei erfinden. Vorstellbar sind aktuelle Daten, Zahlen, Fakten ebenso wie seine Entstehungsgeschichte und Erfinder, Bildergalerien, Einsatz von Video und Audio, Begründungen für den Heldenstatus gerade dieses Dings, persönliche Erlebnisse, Beitrage von Besuchern der Website uvm.
Macht für jeden also mindestens 6 Screens (A1, A2, A3, B1, B2, B3), ggf. mehr, wenn Ihr verschiedene Zustände eines Screens darstellen wollt. Die Screens sollen konkreter sein als bei der ersten Aufgabe: Ihr verwendet echte Bilder (selbstgemacht oder im Web gefunden ist erstmal egal). Ihr schreibt, was dort wirklich an Textinformationen stehen soll (um Textlängen darzustellen könnt Ihr den auch mehrfach hintereinander kopieren oder mit lorem ipsum auffüllen). Ihr verwendet in der Navigation echte Begriffe/Symbole/... damit man versteht wie man von der Startseite bis zur Einzelseite kommt.
Ob Ihr das mit Stift auf Papier macht oder in Software ist Euch überlassen.
Sollten noch Fragen offen sein, schreibt sie einfach als Kommentar an diesen Post. Frohes Schaffen!
Diese „Helden“ können vieles sein, eine kurze Liste mit einigen Vorschlägen von Kai und mir findet ihn in den Kommentaren. Daher sind auch verschiedene strategische/kommunikative Ausrichtungen für die Website vorstellbar. JEDER soll für sich 2 verschiedene Richtungen durchdenken und ausprobieren:
A. INFORMATIV: Die Website als ein großes Tool/Lexikon mit viel nützlichem Wissen zu vielleicht tausenden von „Helden“. Schnell bedienbar und durchsuchbar.
B. UNTERHALTSAM: Die Website als eine Inszenierung von einigen dutzend echter „Helden“, die so wirklich kleine „Helden“ sein können. Hier braucht es Emotionalität. Die Heldenverehrung kann man z.B. über persönliche Gründe und Anekdoten erzählen oder humorvoll-ironisch aufbereiten.
Zu A und zu B sollen jeweils 3 Seiten bzw. Zustände der Website konzipiert werden:
1. Die Startseite, die dem unvorbereiteten Besucher erklärt, was „Helden des Altags“ sind und eine Übersicht über die Inhalte gibt.
2. Eine Top-10-Seite, auf der zehn „Helden“ präsentiert werden. Wie die Auswahl zustande kommt ist Teil Eures Konzepts, dies können die zuletzt in der Website hinzugefügten sein, die poplärsten, die „heldenhaftesten“, die teuersten, die seltensten, usw. usw.
3. Eine Einzelseite, auf der ein einzelner „Held des Altags“ umfassend dargestellt wird - mit allem, was Ihr dazu für nötig haltet. Das dürft Ihr ggf auch frei erfinden. Vorstellbar sind aktuelle Daten, Zahlen, Fakten ebenso wie seine Entstehungsgeschichte und Erfinder, Bildergalerien, Einsatz von Video und Audio, Begründungen für den Heldenstatus gerade dieses Dings, persönliche Erlebnisse, Beitrage von Besuchern der Website uvm.
Macht für jeden also mindestens 6 Screens (A1, A2, A3, B1, B2, B3), ggf. mehr, wenn Ihr verschiedene Zustände eines Screens darstellen wollt. Die Screens sollen konkreter sein als bei der ersten Aufgabe: Ihr verwendet echte Bilder (selbstgemacht oder im Web gefunden ist erstmal egal). Ihr schreibt, was dort wirklich an Textinformationen stehen soll (um Textlängen darzustellen könnt Ihr den auch mehrfach hintereinander kopieren oder mit lorem ipsum auffüllen). Ihr verwendet in der Navigation echte Begriffe/Symbole/... damit man versteht wie man von der Startseite bis zur Einzelseite kommt.
Ob Ihr das mit Stift auf Papier macht oder in Software ist Euch überlassen.
Sollten noch Fragen offen sein, schreibt sie einfach als Kommentar an diesen Post. Frohes Schaffen!
Freitag, 15. Oktober 2010
Freitag, 24. September 2010
Endabgabe SS2010!
Letzter Termin zur Abgabe ist der letzte Tag des Sommersemesters:
30.September 2010 23.59Uhr.
Bitte als Mail an Michael und Kai: Entweder ein Link zur Website oder ein Zip (vernünftig benannt) mit allen benötigten Dateien.
30.September 2010 23.59Uhr.
Bitte als Mail an Michael und Kai: Entweder ein Link zur Website oder ein Zip (vernünftig benannt) mit allen benötigten Dateien.
Dienstag, 14. September 2010
Let there be font
Seit heute gibt es nun auch den Webfont-Service von Monotype (Linotype) - einer der größten Schriftfactorys - auf webfonts.fonts.com offiziell online. Das kostenlose Einstiegsangebot ist auf 25.000 Pageviews pro Monat beschränkt, man hat aber immerhin Zugriff auf gut 2000 der 7000 verfügbaren Fonts, komplett legal und gratis.
Basisbeispiele zur sauberen Verwendung von Flashfilmen in bzw. als Websites mittels SWFobject (z.Zt. v2.2). Neben dem Unterschied von statischer und dynamischer Einbindung gibt es noch ein etwas komplexeres Beispiel für einen Verwendung des Flashfilms als vollflächige Webseite im Browserfenster mit einer Mindestgröße.
Montag, 13. September 2010
Schöne Übersicht über HTML5-Videoplayer
Gerrit von Aaken hat sich die Mühe gemacht, 15 Player zu testen und jeweils das gleiche Video beispielhaft einzubinden, damit sich Technik und Skins direkt vergleichen lassen.
Samstag, 11. September 2010
Basisübung HTML(4): Vom einfachen (und etwas langweiligen) Standartlayout in Photoshop/Fireworks zur HTML-Seite - Struktur überlegen, DIVs aufbauen, Grundstyling, Navigation aus Donnerstag, 9. September 2010
Freitag, 3. September 2010
Mittwoch, 1. September 2010
Mittwoch, 25. August 2010
Say Goodby to images (?)
Die Picto-Beispiele von Drew Wilson sind ein schönes Beispiel für gestalterischen Umgang und Möglichkeiten mit @font-face.
Samstag, 21. August 2010
Webtypography in depth
Wer es ganz genau wissen möchte schaue sich diese beiden files parallel an :)
Und hier der Videomitschnitt dazu:
Und hier der Videomitschnitt dazu:
Freitag, 20. August 2010
13 Typosünden nach Willberg
Da es ja eh gratis als Werbung für den Verlag Hermann Schmidt Mainz verteilt wurde, kann man es glaub ich legal so ins Netz stellen.
Material zur 3.Aufgabe „Typographie“
Hier das Original-Video:
und hier der zu bearbeitende Text daraus:
und hier der zu bearbeitende Text daraus:
Andy, do you feel that.. the public has insulted your art?
Äh, no.
Why not?
Oh, I hadn't thought about it.
It doesn't bother you at all then?
Äh, no.
Well, do you think that they have shown a lack of appreciation for what Pop Art means?
Äh, no.
Andy, do you think that Pop Art has (sort of) reached the point where it's becoming repetitious now?
Äh, yes.
(der Schweigende lächelt, Andy Warhol lächelt)
Do you think it could break away from being Pop Art?
Äh, no.
Are you just going to carry on?
Äh, yes.
Donnerstag, 19. August 2010
Mittwoch, 18. August 2010
Bannerama Download
Hier der etwas größere Download (80 MB) mit allen Beispielen der BANNERAMA-Veranstaltung zu Online Marketing und Bannerkampagnen - Gestaltung, DOs und DON'Ts, Umgang mit Text-Bild-Verhältnis, Timing und Kontext der Werbemittel, usw.
Dazu die vorgestellten Source-Files (alle extra so aufgebaut, das sie abwärtskompatibel zu Flash 8 sind):
- Helfer wie TwenLite/Max und Tweener
- Local Connections
- Direktionales Motion Blur
- Alpha Transparenzmasken
- Lensflares
- Animations-Cycles
- Particle Engine
- Einfache Filter-Beispiele und gescriptete Filter
- Tipps zu Dateigrößen-Optimierung
- Möglichkeiten zur Performance-Optimierung
Freitag, 6. August 2010
Sonntag, 4. Juli 2010
e-Learning: Think Vitamin
Unter dem Motto "All the training you'll ever need for less than 1$ per day" bietet Think Vitamin seinen Mitgliedern Paid-Video-Content aus versch. Bereichen des Web Designs an:
Wer, so wie ich, Abends gerne halbwach Lehrvideos guckt, sollte sich unbedingt mit Think Vitamin auseinandersetzen. Der Content ist erstklassig, hat aber leider auch seinen Preis.
Schöne Sommerferien :)!
- Design
- User Experience
- HTML5
- CSS3
- JavaScript
- JQuery
Wer, so wie ich, Abends gerne halbwach Lehrvideos guckt, sollte sich unbedingt mit Think Vitamin auseinandersetzen. Der Content ist erstklassig, hat aber leider auch seinen Preis.
Schöne Sommerferien :)!
Website Präsentation Johannes
Moin Moin, Leseratten.
hier nochmal der Link zu meiner Präsentation einer Website.
Ich habe mich für diese Seite entschieden, weil sie das Visuelle-Musikprojekt sehr gut vermittelt.
Durch diesen (3D)-Raum in dem man sich bewegt, bekommt man das Gefühl ein Teil dieser Website zu sein.
Ein gewaltiger Nachteil der Navigation ist meiner Meinung nach das man horizontal scrollt in dem man klickt und mit der Maus in die Richtung geht in die man scrollen will. Dies ist etwas untypisch und sorgt im ersten Moment für Verwirrung.
Lobenswert ist hingegen die gesamte Aufmachung, die thematisch einfach sehr gut passt. Ebenfalls positiv ist, dass es ebenfalls passend zum Projekt, sehr wenig Text gibt. So kann man die Thematik auf sich wirken lassen.
Die (erstatz)-Seite ist jetzt eher langweilig und unspektakulär, auch vom Design ist sie nicht sehr ansprechend, zu finden ist diese Unter dem Menüpunkt "info" in der unteren Mitte der Internetseite.
Für alle die noch die andere Website mal probieren wollen finden diese unter:
viel spaß bei dieser innovativen, audio-visuellen-navigation.
Eine sonnige kursfreie Zeit.
Johannes
Freitag, 18. Juni 2010
Sonntag, 6. Juni 2010
SAAB - 60 Years
SAAB war früher ein schwedischer Luftfahrt und Rüstungskonzern.
Die Geschichte des Unternehmens als Autokonzern, wird auf dieser Webseite durch eine Zeitleiste präsentiert. Es ist eine optisch schöne und kurz gefasste Reise in dieVergangenheit, mit einem Blick in die Zukunft. Dies ermöglicht ein Video, das immer vor und zurück gespielt wird, je nachdem welches Jahr gewählt wurde. Die gesamte Geschichte wurde "auf einen Tisch" gelegt und somit präsentiert. Es sind die Kleinigkeiten, die Liebe zum Detail, die Kamerabewegungen, die bildnerische Erzählung der Geschichte und die Ästhetik, die uns doch länger als gedacht auf dieser Webseite festhält.
2010 wird ein Kampfjet ähnliches Konzeptfahrzeug vorgestellt.
Eine Botschaft für künftige Design-Ideen, die das SAAB Unternehmen sehr gut wiederspiegelt, ein Autobauer mit flugtechnischen Wurzeln.
Für dieses Konzeptfahrzeug, Aero X, gibt es auch eine Webseite mit einer Leiste, die uns erlaubt, das Auto von Außen und von Innen zu betrachten.
Eine Botschaft für künftige Design-Ideen, die das SAAB Unternehmen sehr gut wiederspiegelt, ein Autobauer mit flugtechnischen Wurzeln.
Für dieses Konzeptfahrzeug, Aero X, gibt es auch eine Webseite mit einer Leiste, die uns erlaubt, das Auto von Außen und von Innen zu betrachten.
SAAB 60 Years
SAAB Aero X
Webdesign: Kunden im alltäglichen Leben
Im Webbereich hat sich eine sehr spezielle Mentalitaet bei Kunden gebildet, die uebertragen auf andere Branchen sehr ... merkwuerdig aufgenommen werden wuerde.
Zu Recht, wie ich finde. Viel Spaß mit dem Video.
Zu Recht, wie ich finde. Viel Spaß mit dem Video.
Freitag, 4. Juni 2010
Sonntag, 30. Mai 2010
Freitag, 28. Mai 2010
Reflow Gecko
'Inside Gecko' von Satoshi Ueyama ist ein in Processing geschriebenes kleines Programm zur Zeitlupen-Visualisierung der Abläufe im Browser: Schon erstaunlich, wie viele Arbeitsschritte und Interpretationen für die verschiedenen HTML-Tags und CSS-Layer ablaufen, bis der Browser schlußendlich die Seite anzeigt.
Im zweiten CSS-Beispiel (auch wieder als ZIP) habe ich versucht, die grobe Arbeitsschritte zu einer exemplarischen Website abzuspeichern. Diese HTML-Seite ist gestalterisch wirklich nichts besonderes, aber sie zeigt in 5 Schritten den kurzen Weg zu einem einfachen Layout und enthält ein paar CSS-Feinheiten für den IE 6 sowie eine schlichte JS-Lytebox.
Das erste CSS-Beispiel als ZIP. Das ist eine wirklich einfache Übung, aber ein paar der grundsätzlichen Basics sollten hier hoffentlich deutlich werde: Block- und Inline-Elemente, Kaskadieren und Vererbung, CSS aus externer Dateien einbinden, verschiedene Stylesheets je nach media-type, usw.
Abonnieren
Kommentare (Atom)