Sorry, hier wird Flash 8 benötigt...

Donnerstag, 21. August 2008

yugop.com




Yugo Nakamuras Portfolio mit seinen programmierten Glanzstücken.
Wunderbare Interaktionsmöglichkeiten und subtile Graphiken.
Selbstreflektion. Unvorhersehbare Schönheit. Abstrakte Kommunikation.
Auf dieser Seite bleibt man einfach hängen.
Herr Nakamura zeigts uns allen.

www.yugop.com


Post von
Maika Flügel

Montag, 14. Juli 2008



http://www.midwestisbest.com

Sehr einfach und bunt gestaltete Website von Mike Perry. Trotz der riesigen Mengen an Arbeiten, verliert man nicht die Übersicht. Die Links zu den Arbeiten sind farblich den verschiedenen Kategorien zugeordnet. Außerdem gibt es Filter, um nur bestimmte Kategorien angezeigt zu bekommen. Man kann sich jedoch auch einfach mit den Pfeilen durch die ganzen Seiten klicken. Mir gefällt auch die Möglichkeit des PDF-Downloads von ausgewählten Arbeiten.

(frederik niemann)

Mittwoch, 9. Juli 2008

Website Luke Stephenson



Die von mir ausgesuchte website findet ihr hier:

http://www.lukestephenson.com/

Dabei handelt es sich um eine weitere von vielen gerade so modernen, aber halt "schön einfachen" designerwebsiten. der inhalt ist klar und deutlich, schwarz auf weiß auf der linken seite positioniert. hier kann man direkt zu den einzelnen projekten des fotografen springen, die jeweilige fotoauswahl trifft man über das kleine zahlenmenü unterhalb der bilder.
einfach und funktioniert. so lässt die sehr neutrale seite genug raum für die fotografien ohne selbst als "aufwendiges kunstwerk" programmiert zu sein.
ich finds gut.

martin vorwerk

Dienstag, 8. Juli 2008

Typografie ist Trumpf! In der letzten Übungmaterial im ZIP Nummer 12 findet Ihr mehrere Beispiel-Dateien zum Umgang mit relativen Schriftgrößenangaben (Stichwort Barrierefreiheit), Vermeidung der 13 Typosünden im Web (frei nach Willberg) und ein paar hoffentlich nützliche Anregungen zu detailtypografischen CSS-Kniffen und Handgriffen.

Samstag, 5. Juli 2008

Einer geht noch...
Mittwoch 9.7.08, 17.15h,
Raum 01/217


Für die letzte Veranstaltung haben wir nochmal ein besonders leckeres Thema: Typografie im Web. Außerdem unvermeidlich wie immer am Ende: Unterschriften für Scheine/Leistungen und Manöverkritik (neumodisch heißt das jetzt 'Evaluation der Lehre' und ist auch mittlerweile endlich Pflicht)

Mittwoch, 2. Juli 2008

Übungmaterial Nummer 10 enthält ein möglichst simples Beispiel für eine Navigation mit mehreren Ebenen: Textlinks listenbasiert nur mit CSS (ohne Javascript) angeordnet, ohne Einsatz von JavaScript (daher hoffentlich 1A barrierefrei) und um es erstmal einfach zu halten ohne viele Hintergrundbilder zur Gestaltung.

Samstag, 28. Juni 2008

Schöne Paper Prototyping Bilder

Imagesearch


Twitter (hieß am Anfang noch 'my.stat.us')


Flickr Places


und ein lustiger Interface-Test für ein Mailprogramm :)

Donnerstag, 26. Juni 2008

designerinaction.de

Die Seite die ich euch vorstellen möchte ist www.designerinaction.de
Sie ist gut struckturiert und sehr klassisch was die Positionierung der Elemente angeht. Das Menü ist listenartig unterm Logo plaziert und hat teilweise Unterpunkte. Der Contentbereich ist immer gleich aufgebaut, mit einem rechteckigem bild und kurzem Textblog daneben als Appetithäppchen. Dieser ist noch mit einem längeren Text zum Beitrag verlinkt. Von dort kann man sich dann noch weiterklicken zu der Webseite.
Die seite beinhaltet nur designnahe Artikel. Selbst die Werbung ist auf die Zielgruppe designinteressierte abgezielt.
Alles in allem eine Inhaltlich gute und struckturierte Seite.

Florian Beddig

Dienstag, 24. Juni 2008

Wichtige Ankündigung für
Mittwoch den 25.6.2008


Da ab 18 Uhr in der Aula nicht nur die Honorarprofessurverleihung sondern auch die Vorstellung des neuen HBK-Katalogs stattfindet, wird unsere Veranstaltung diesmal etwas kürzer! Dadurch haben alle (mich eingeschlossen) die Gelegenheit rüberzugehen. In der nächsten Woche wird die Veranstaltung dafür garantiert länger, also schon mal den Abend freihalten ;)

Montag, 23. Juni 2008

Übung Nummer 9 enthält wie bereits angekündigt verschiedene beispielhafte Wege, eine Bildergalerie anzugehen: Entweder mit reinem CSS (was die Möglichkeiten etwas einschränkt), mit Javascript (wir machen es uns einfach und benutzen Dreamweaver) oder mit Flash (bietet die größten Freiheiten, dafür muß man sich aber zumindest ein wenig mit Flash auseinandersetzen).

retrospektive.net


http://www.retrospektive.net/

Hier ein mit wenigen Mitteln, meiner Meinung nach, gut gelungenes Portfolio.
Der Aufbau der Seite wird einem auf Anhieb klar.
Hauptsächlich zeichnet sich die Seite durch die Ästethik und weniger durch ein wirklich innovativen Einsatz von irgendwelchen Flash-Elemente aus. Aber gerade deswegen finde ich sie gut gelungen.

Faux absolute positioning



A List Apart habe ich ja schon wärmstens empfohlen. In Ihrer neuesten Ausgabe haben sie eine neue Technik-Idee am Start, mit der man mehrere Säulen + Header + Footer in einem CSS-Layout bewerkstelligen kann (etwas, das bisher ja weder mit absolutem noch mit floating Layout wirklich in jedem Browser funktioniert hat). Sie nennen es Faux absolute positioning und es bietet einem quasi das beste aus beiden Welten.

Der Artikel setzt Grundkenntnisse in CSS voraus (oder eine ernsthafte Auseinandersetzung mit CSS-Layouts), da er auch relativ detailiert geschrieben ist. Grundsätzlich errechnet diese Methode den linken Offset von einer fixed Position (statt vom rechten Ende des vorhergehenden Elements). Das haben sie hingebastelt mit einer cleveren Kombination von position: relative, left: 100% negativen margin-lefts - dies funktioniert in allen aktuellen Browsern und bis runter zum IE 5.5 Win ohne Hacks, also großer CSS-Sport sag ich mal :)

Mittwoch, 18. Juni 2008

3 Seiten mit 0 "wooow, tolles Design"-Effekt (sorry)


www.Bildblog.de
Die hellsten Sterne am Bildhimmel - manchmal sogar heller als die Sonne

www.stuffonmycat.com
Fotosammlung aus dem ruhigen Leben in der Wohngemeinschaft Katze und Mensch.
Wie der Name schon sagt geht es um die Disziplin des Platzierens von Gegenständen auf den Katzen. Dem Gewinner winkt ein Fisch.
www.beichthaus.com
Wie der Name schon sagt eine Therapiestunde im Monolog.


In der Übung Nummer 8 beschäftigen wir uns ausführlich mit verschiedenen Arten, ein spezielles CSS-Problem anzugehen: Das Zentrieren. Beliebige Inhalte in einem beliebigen Bereich horizontal und vertikal genau mittig zu platzieren ist leider nicht mehr so einfach wie es früher mit Tabellen-Layouts mal war. Aber es gibt natürlich immer Mittel und Wege...

Dienstag, 17. Juni 2008

thebestdesigns.com – Webseitenvorstellung


thebestdesigns.com ist eine Linksammlung für »Designer-Websites". Die Webseite ist einfach und klar strukturiert und somit leicht navigierbar. Neben der einfachen Navigation besitzt thebestdesigns.com ein sehr schönes und fast schon elegantes Design.
In der Hauptspalte finden sich jede Menge thumbnails zu verlinkten Webseiten. Diese Designer Webseiten machen den Großteil des »contents« aus. Unter jedem thumbnail gibt es auch kurze Informationen zu den Gestaltungsmitteln der jeweiligen verlinkten Website, sowie das Verlinkungsdatum.

thebestdesigns.com ist eine sehr interessante, schöne und gut sortierte Webseite für Designer Webseiten. Sehr inspirativ und vielseitig.
»Ein muss für jeden Webdesigner«

von: manuel albert

Montag, 16. Juni 2008

WEB-Werkstatt-- Kurzreferat

Hallochen..Hier mein "Kurzreferat Web-TIP"

newsflex.de

Das ist eine Homepage zur "Berieselung" das Portal nennt sich selbst fun & entertaimentportal. Man kan hier gut nach netten,interessanten Sachen gucken. Man kann sich im Berreich Surftips,DVS,Filme,Kino,Musik etc. berieseln lassen und gucken was es momentan so an "wichtigen Neuigkeiten" in den einzelnen Bereichen gibt. Am besten gefällt mir die Abteilung Surftips,da man dort einige interessante Internetseiten entdecken kann und stundenlang mit gucken,klicken und stöbern verbringen kann.

LG Steffi

Mittwoch, 4. Juni 2008

www.tokyoplastic.com

www.tokyoplastic.com

tokyoplastic.com ist eine Internetseite eines japanischen Grafikbüros aus Tokyo das sich Hauptsächlich auf Animationen konzentriert. Nebenbei produziert es aber auch Grafiken und kleine Spielzeugfiguren aus Plastik.
Die Seite ist sehr liebevoll und detailliert gemacht und zeigt sehr viele Flash-Animationen auf. Durch ein einfaches und übersichtliches Menü in dem der Benutzer durch ein paar Mausklicks zu den gewünschten Sektionen kommen kann, ist die Seite einfach zu bedienen. An der ein oder anderen Stelle muß der Benutzer sogar die Animationen, die die Zwischensequenzen darstellen, durch gezieltes Klicken zum fortlaufen bringen.
Einziger negativer Punkt der mir an der Seite aufgefallen ist, ist dass die Textinformationen auf ein Minimum reduziert worden sind, so dass man lediglich das Nötigste, jedoch nichts wirklich über den Backround des Büros erfährt.
Trotzdem ist mein Fazit, dass es eine optisch interessante Seite ist und auf eine angenehme und einfach zu bedienende Art, die Informationen vermittelt, die sie vermitteln will.

von M. Wetzig
Diesmal enthält das ZIP zur Übung Material zur Integration (Embedding) von Medien: Videos als Quicktime und Flash-Filme an sich (gerne dann auch mit Video, siehe youTube), beides in Designer-Portfolios wie „Web 2.0“-Seiten ja reichlich vertreten. Dies erledigt man sauber mit dem qtobject bzw. dem swfobject 2.0, für beides finden sich Beispiele und Links in den Ordnern im ZIP.

Montag, 2. Juni 2008

Typografie mit sIFR



Alles wichtige zu Typografie im Web mit sIFR findet sich im Wiki, besonders interessant, da grade die neue Version 3 fertig wird:
sIFR 3 Wiki, FAQs, Examples, usw.
Die Demo zeigt, das man so ziemlich jeden Font einbinden und formatieren kann (und das davon alleine die Website nicht besser wird):
sIFR 3 beta Demo
Und wer wie Sebastian damit bereits angefangen hat zu arbeiten findet hier ein paar nützliche Hinweise zu Problemen mit sIFR2:
sIFR 2 Fehler bei Textlinks,...

Mittwoch, 21. Mai 2008

Eine weiße Designer-Website

So, jetzt und hier, eine sehr sehr seltene, hauptsächlich weiß gestaltete Seite eines New Yorker Desidners
(das „d“ müsste eigentlich durch ein „g“ ersetzt werden).

Mir persönlich gefällt die zurückhaltende, fast schon spartanische Gestaltung sehr gut - doch das Beste, from my point of view, is das nette Navigationskonzept.

schlicht, einfach und ergreifend

Michael Jahn

Link-Sammlungen



Wer noch so keine Idee hat, welche Website er vorstellen mag, hier ein paar Adressen, wo andere schon intensiv interessante URLs gelistet haben:

thefwa.com
designcharts.com
designiskinky.net
styleboost.com
moluv.com
linkdup.com
...

Dienstag, 20. Mai 2008

'Webseiten machen für Grafiker - Teil 2'
Hier im ZIP gibt es die Fortsetzung von letzter Woche in 2 Varianten: Einmal Ausführung A, praktisch ohne mit dem html-Code in Berührung zu kommen und zum Vergleich Ausführung B - ein handgetipptes CSS-Layout mit einigen seiner speziellen Vorteile :)

Mittwoch, 14. Mai 2008

Heute auf speziellen Wunsch 'Webseiten machen für Grafiker' - dazu hier ein ZIP mit Demonstrationsmaterial. Wir begeben uns hiermit in das traditionelle Handwerk des Tabellen-Quetschens (so hat man Websites früher immer aufgebaut), machen uns dabei/dadurch alles so einfach und bequem wie möglich und sehen irgendwie trotzdem zeitgenössisch modern aus (sag ich jetzt mal :)

Mittwoch, 7. Mai 2008

The good Foodfight



http://thegoodfoodfight.com/

Is eine Internetseite zu der Campagne „Eat Better America“ von dem Lebensmittelkonzern General Mills. General Mills ist mit einem Umsatz von 11,1 Mrd USD (2004) der weltweit sechstgrößte Lebensmittelhersteller. In den USA kauft ein Normalbürger im Durchschnitt mindestens ein Produkt des Unternehmens wenn er in den Supermarkt geht. In Deutschland ist General Mills unter anderem mit den Marken Häagen-Dazs, Old El Paso und Knack & Back vertreten.
Ziel war es, die amerikanische Bevölkerung mit dieser Campagne zum bewussten und gesunden Essen zu bewegen. Dafür wendete sich der Konzern an die Werbeagentur Mono. Diese hat dann von Grund auf eine neue Marke entwickelt (Eat better America), die Webseite und eine Spaßseite, die ich kurz präsentieren möchte.
Die Seite heißt „The good foodfight“ und ist ein online Spiel, bei dem man sich eine digitale Essensschlacht mit verschiedenen Charakteren leisten kann. Zu aller erst sucht man sich eine Kampfspeise aus. Dabei stehen drei zur Auswahl („Bean and Veggie Wraps“, „Spaghetti and Spicy Veggie Meatballs“ und „Spinach-filled Fish Rolls“), mit unterschiedlichen Spritz-, Schmerz- und Fleckparametern. Danach sucht man sich einen Gegner aus. Ruthless Ruth die böse Mensaköchin, Sake Tuya der Sushi-Koch oder Chuck Frank der Hot-Dog Verkäufer. Anschließend beginnt die Schlacht. Das Szenario irritiert den Nutzer zu Beginn, weil es sich um eine Webseitenoberfläche zu handeln scheint. Es dauert ein wenig, eh man bemerkt, dass man sich an dem Essen aus den angepriesenen Speisefotos bedienen muss. Die Gegner bedienen sich aus den gleichen Bezugsquellen und bewerfen einen. Dabei hat es den Anschein, als ob sie einem das Essen an den Bildschirm werfen würden. Sollte man den Gegner endlich einmal getroffen haben, ist das Spiel zu Ende. Andernfalls gewinnen die Gegner.
Alles in allem ist das Spiel sehr schlicht und einfach gehalten und vom Handling ein wenig gewöhnungsbedürftig. Der Spaßfaktor nimmt mit der Zeit ab, da man keine Schwierigkeitsgrade, Punkte oder Levels hat.

Fazit: Muss man mal gespielt haben.

SEBASTIAN THIEME

Dienstag, 6. Mai 2008

Da mehrere fragten 'Und wie fang ich denn jetzt grundsätzlich an?', versucht das vierte Beispiel-ZIP den ganzen Bogen eines Weblayouts zu spannen, Schritt-für-Schritt von der grafischen Gestaltung bis zum fertigen CSS. Das Beispiel ist lose an eine bestehende Website angelehnt (und enthält für Fortgeschrittene wieder ein paar Ergänzungen wie z.B. das swfobject 2.0)

Freitag, 2. Mai 2008

Cascading Style Simpson


Der Homer ist an sich kein sensationelles Bild, nur ist es kein Bild sondern original komplett Typografie. manche Sachen muß man vielleicht nicht unbedingt mit CSS machen, aber warum denn nicht?

Wers wie ich erst nicht glaubt schaut in den Quelltext oder hier das ganze nochmal per jQuery animiert an.

Montag, 28. April 2008

Please Panic



Wer jetzt hier nur noch schwarze Schachteln sieht: Keine Sorge, das erklärt sich alles im Kurs diese Woche. Die Website der kleinen feinen Mac-Softwareschmiede »Panic« ist zur Abwechslung mal kein schwarzer Klotz, sondern ein prima Beispiel für Webseiteninteraktivität ohne gleich komplett durchzuflashen. Die Startseite bietet eine Drag'n'Drop-Funktion, die Unterseiten reichlich Animation in dezent milchigen, Web2.0igen Farben.
Im zweiten CSS-Beispiel (auch wieder als ZIP) habe ich mal versucht, die wesentlichen Arbeitsschritte zu einer exemplarischen Website abzuspeichern (jetzt mit Ausgangstext!). Die HTML-Seite ist gestalterisch nichts besonderes, aber z.B. so kommt man heile hinten an und ein paar CSS-Feinheiten für den IE 5/6 und eine JS-Lytebox sind zumindest schon dabei.
Das erste CSS-Beispiel als ZIP. Das ist nun wirklich noch gar keine echte Ü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.

Mittwoch, 23. April 2008

Die erste HTML-Übung als ZIP. Die Übung enthält hoffentlich alles an notwendigem Basiswissen, um so einfach und schnell wie möglich für den Kurs Interface-Design freitags Euer Konzept verzweigt klickbar zu visualisieren: Bilder in HTML anzeigen, mittels Image-Maps verschiedene Links setzen, zurück verlinken, usw.

Samstag, 19. April 2008

Vatikan

Joseph Karl Ratzinger präsentiert das kleinste Ländle Europas auf komplexem Raum im WWW...



www.vatican.va/phome_ge.htm

Freitag, 18. April 2008

Links findet Ihr als Zip zwei Bild-Dateien in klassischen Druckformaten für die Bildkompressionsübung. Das Zip hat satte 50 MB, entpackt noch wesentlich mehr, Optimierung fürs Web tut also Not! Zur Orientierung: Bei den Studenten im Kurs kam die Stadt in fast Browservollbild auf unter 150 KB, die Krokos auf unter 100 KB, die Vorschaubilder für eine Auswahl-Seite je klar unter 10 KB.

Montag, 14. April 2008

Alter Schwede


Obwohl sie vielleicht schon jeder kennt, aber trotzdem weil es so schön ist.
Überraschend, interaktiv und noch viel mehr...
Viel Spaß dabei!



Und den Link dazu: www.bekindmovie.com

A List Apart



A List Apart (ALA) versteht sich als ein Online Magazin für Leute die Websites machen, daher 'erscheint' grob alle 14 Tage eine neue Ausgabe mit neuen Artikeln für Designer und Entwickler zu einer Vielzahl von Themen. Neben Web Standarts, Code und Design gibt es auch eher theorielastige und kulturelle Themen, allesamt inhaltlich aktuell und hochwertig.

Bei ALA stehen diese Inhalte dann auch klar im Vordergrund. In der aktuellen Version 4 hat ALA einen klaren Aufbau und ein übersichtliches Layout (natürlich voll Standart-konform :). Die unvermeidbare Werbung ist relativ unaufdringlich integriert, die Inhalte werde sortiert zusätzlich über RSS-Feeds angeboten. Man kann vielleicht sagen, ALA macht nicht mehr als nötig, das dann aber wirklich gut: Das 2/3-spaltige Layout ist angenehm zu bedienen, die Navigation funktional, die Typo gleichermaßen angenehm anzuschauen und gut lesbar in jedem Browser, die Illustrationen haben mit ihrer aquarell-artigen Anmutung einen eigenen wiedererkennbaren Stil entwickelt.

Meiner Meinung nach insgesamt ein sehr gelungener und ausgereifter Kompromiß. Das man das auch deutlich schlechter machen kann sieht man z.B. an den inhaltlich ähnlich gelagerten FOWD (voll mit Web2.0 Bling Bling) oder selfHTML (cremefarbige Typowüsten in eher unübersichtlichem Layout)

Donnerstag, 10. April 2008

„Seam Carving“ - content-aware image resizing

Da Sebastian gestern danach gefragt hat: „Seam Carving” ist grob gesagt eine geschickt programmierte Bildanalysemethode mit dem Ziel, 'unwichtige' Bildbereiche zu definieren, um diese beim Skalieren des Bildes bevorzugt zu bearbeiten (und dadurch die wichtigen Bereiche heile zu lassen).

Ein Bild sagt mehr als 1000 Worte - das Video der Präsentation von Shai Avidan und Ariel Shamir auf der Siggraph 2007 erklärt es ganz gut denke ich...


Wer es ganz genau wissen möchte findet mehr Infos hier im PDF.
Mario Klingmann hat das ganze auch bereits in Flash/AS3 nachvollzogen/umgesetzt, das kann man sich z.B. hier anschauen.

Donnerstag, 6. März 2008

Web Trend Map 2008


Ein guter Semesteranfang und Einstieg ins Thema: iA aus Japan präsentieren die Web Trend Map 2008 (standesgemäß als 'Beta' bezeichnet). Sie enthält über 300 bedeutende Websites, auf ansehnliche Art sortiert.

Mittwoch, 30. Januar 2008

Die Web Werkstätten

„Wir bestrachten verschiedene Aspekte moderner Online-Medien, neben den technischen Eigenheiten auch medienspezifische Nutzungsformen, Interface Design, uvm. und werden dabei ein paar helle Wege in den dunklen Wald der Abkürzungen von Ajax bis Xhtml schlagen und die für Designer relevanten Grundlagen des Internets erklären.
Parallel erfolgt eine Einführung in die geeignete Software für die Produktion entsprechender Online-Medien begleitet von Übungen und/oder Kurzreferaten. So sollte jeder Teilnehmer am Seminarende in der Lage sein, seine Anforderungen an ein persönliches Online-Portfolio zu formulieren, dieses zu gestalten und umzusetzen.“

Los gehts vorraussichtlich am 9.4.08 und dann wahrscheinlich immer dienstags und mittwochs im KD-Labor bzw. ZKI-Computerpool...

Anmeldung per E-Mail an m.seifert(at)gingco.net