Kategorie-Archiv: MEDIENGESTALTUNG

Layout | Übung 9

Heute dreht sich alles rund um das Layout, wie das Anordnen auf einer Seite, also die zur Verfügung stehenden Elemente auf einer Seite (Print o. Digital) oder mehreren arrangieren, und den bestmöglichen Informationsgehalt oder auch Aufmerksamkeit zu erreichen.

Aufgabe I

Bildschirmfoto 2015-06-05 um 20.44.45

Raster / Text-Bild-Verhältnis bei Newsseiten

Heute gestalte ich die Homepage des Newsportal watson.ch neu. 
 Viewport: iPad Porträt Mode (768*1024)

Neue Watson-Seite für das iPad
Neue Watson-Seite für das iPad
Hier noch auf dem iPad ersichtlich
Hier noch auf dem iPad im Querformat

Typografie | Übung 8

Zum einem sollte Typografie den Inhalt unterstützen – neutrale Typografie gibt es nicht – und zum anderen soll die gewählte Schriftart (besonders bei Mengentext) gut lesbar sein.

Heute dreht sich alles um Typografie.

Bildschirmfoto 2015-06-05 um 21.00.04

Aufgabe I

Display Typografie

Auftrag: Gestalten Sie ein CD-Cover Ihrer Lieblingsband (Bandname und CD Titel).

Das Album "TO THE SEA" von JACK JOHNSON
Das Album “TO THE SEA” von JACK JOHNSON

 

und meine Version nach der Bearbeitung
und meine Version nach der Bearbeitung
 __________________________________________________________________
Aufgabe II

Um die (Bild-/)Textgestaltung zu üben, sollten wir einen modernen Designvorschlag für die Wikipedia-Seite erstellen.

Schriftwahl, Textstrukturierung, Auszeichnungen

Heute gestaltete ich folgende Wikipedia-Seite neu: http://de.wikipedia.org/wiki/Versal neu.

Angelegt auf eine Screenbreite von 1024 px.

Und hier die neue Website
Und hier die neue Website

 

Aufgabe III

Typografie-Sünden

Bildschirmfoto 2015-05-11 um 20.34.31

Bildschirmfoto 2015-05-11 um 20.35.35

Bildschirmfoto 2015-05-11 um 20.35.46

Einstellungsgrössen | Perspektive | Kadierung | Übung 7

Bildschirmfoto 2015-06-05 um 22.10.21

Heute dreht sich alles um Einstellungsgrössen, Perspektive und die Kadierung.

Aufgabe I

Heute nehme ich einen kurzen Werbespot vor und untersuche die verwendeten Einstellungsgrössen.

AMAG Werbespot:

Untitled-1Untitled-2

Hier noch der Link zum Werbespot.

Aufgabe II

Ich erstelle Stills, in denen die bekannten Einstellungsgrössen und Perspektiven gezeigt werden. Dabei mussten wir in einer Gruppenarbeit verschiedene Bildperspektiven nachstellen. Wir sollten dabei das Licht und der Aufbau beachten.

Hier ein paar Varianten
Hier ein paar Varianten

 

Aufgabe III

Mein Schulweg mit speziellen Einstellungen, Perspektiven und Kadierungen (engl. framing)

Mein Schulweg in einfachen Bildern
Mein Schulweg in einfachen Bildern

 

Icon und Farben | Übung 5

In dieser Aufgabe mussten wir diese Konstruktion im Illustrator nachzeichnen und einfärben, um die Plastizität vor zu heben.

Bildschirmfoto 2015-03-10 um 13.30.36

Je nach Betrachtung des Würfels kann man den kleinen Würfel in der Mitte alleine sehen oder als einen Ausschnitt des grossen Würfels. Die Kontraste der Farben lösen in unserem Hirn unterschiedliche Betrachtungsweisen aus und lassen das ganze Objekt plastisch wirken.

 

Icon und Farben | Übung 4

Heute mussten wir ein Piktogramm, resp. ein Icon selber erstellen.
Das Piktogramm soll ein Navigationssystem für ein Fahrrad darstellen.

Als erstes versuchte ich ein Fahrrad darzustellen.
Als erstes versuchte ich ein Fahrrad darzustellen.

Für dieses Piktogramm liess ich mich von bereits bekannten Piktogramme inspirieren.

Im Piktogramm habe ich ein bereits bekanntes Icon eingebaut - es ist das Zeichen für Orientierung.
Im Piktogramm habe ich ein bereits bekanntes Icon eingebaut – es ist das Zeichen für Orientierung.
Im unteren Bereich ging ich auf die Räder ein, welche mit einem Kompass und das GPS Signal mit einem Navigationsgerät soll verbinden.
Im unteren Bereich ging ich auf die Räder ein, welche mit einem Kompass und GPS Signal mit einem Navigationsgerät die Verbindung machen soll.
und hier das fertige Piktogramm.
und hier die Kombination…
mit den Farben
mit den Farben
Da ein Piktogramm schlicht und nicht zu komplex sein sollte, habe ich es auf das wesentliche reduziert.
Da ein Piktogramm schlicht und nicht zu komplex sein sollte, habe ich es auf das wesentliche reduziert.

Bildschirmfoto 2015-03-10 um 10.11.32Bildschirmfoto 2015-03-10 um 10.12.05

Bildschirmfoto 2015-03-10 um 10.12.37

Bildschirmfoto 2015-03-10 um 10.13.00

Form | Übung 3

In dieser Übung musste ich ein Memoryspiel aus nur schwarz/weissen Grundformen erstellen.

Den Link zum Memory-Spiel von mir findet Ihr –> hier <–

Zuerst skizzierte ich die Elemente auf Papier, dann übertrug ich es in den 
 Ilustrator und zuguter Letzt machte ich ein einfaches Online-Spiel daraus.

 Entwurf der Karten

Ich habe mich für gefüllte, schwarze Kreise entschieden mit einem weisen Motiv.
Ich habe mich für gefüllte, schwarze Kreise entschieden mit einem weisen Motiv.

 

Das ganze dann im Illustrator bearbeitet und weiter entwickelt.
Das ganze dann im Illustrator bearbeitet und weiter entwickelt.

Das Design der Karten

Bis ich dann 5 verschiedene  Paare hatte
Bis ich dann 5 verschiedene Paare hatte

 

Das Spiel als Online-Game

Zuletzt habe ich das Spiel noch programmiert, resp. einen geeigneten Code im Netz gefunden der auf HTML und Java-Script basiert.

Mit Dreamweaver habe ich dann noch am Layout gebastelt und hochgeladen.
Mit Dreamweaver habe ich dann noch am Layout gebastelt und hochgeladen.

Den Link zum Memory-Spiel von mir findet Ihr –> hier <– Probier es  aus!

Form | Übung 2

Gleichgewicht, Ungleichgewicht oder Bewegung

Hier habe ich 5 abstrakte Kompositionen mit folgenden Elementen:
4 gleich lange schwarze Streifen im weissem Quadrat. Man versucht mit unterschiedlichen Anordnungen Gleichgewicht, Ungleichgewicht und Bewegung zu erzeugen.

Die Vorlage mit 4 gleichen Balken.
Die Vorlage mit 4 gleichen Balken.

 

Gleichgewicht vorhanden - stabile Lage, oder?
Gleichgewicht vorhanden – stabile Lage, oder?
Der eine Querbalken hat das Bedürfnis nach unten zufallen, jedoch stützt ihn ein andere Balken - immer noch stabil.
Der eine Querbalken hat das Bedürfnis nach unten zufallen, jedoch stützt ihn ein andere Balken – immer noch stabil.
Wie lange dauert es bis der obere Balken auf den kleinen fällt? Ungleichgewicht im Bild.
Wie lange dauert es bis der obere Balken auf den kleinen fällt? Ungleichgewicht im Bild.
Bilder können nicht nur ungleich erscheinen oder instabil - sondern sie können auch unruhig wirken.
Bilder können nicht nur ungleich erscheinen oder instabil – sondern sie können auch unruhig wirken.
Unterschiedliche Abstände lassen ein Bild auch unruhig wirken
Unterschiedliche Abstände lassen ein Bild auch unruhig wirken

Form | Übung 1

Was ist gutes Design?

Die 10 Punkten für ein Good Design
Die 10 Punkten für ein Good Design

 

BMW s1000rr 2015
BMW s1000rr 2015

Diese Maschine ist eindeutig innovativ, wenn man an die Technik vor 20 Jahren zurück denkt. Nützlich? In wenigen Sekunden über hundert Meter zurücklegen ist in der heutigen, rasanten Welt ein grosser Vorteil. Zwei Räder sprechen für sich und demnach ist das Produkt auch selbsterklärend. Das Design ist auch eher schlicht, denn die zweirädrige Maschine besteht nur aus so vielen Teilen, wie es nötig ist.  Zudem verspricht es genau so viel wie es auch aussieht.
Über die Langlebigkeit lässt sich streiten, denn selten ist eine Technik langlebig und dementsprechend auch das Design. Aber die Form und die Farben gab es schon lange und wird es bestimmt auch wieder bei modernen Maschinen geben, die mit einer neuen Technologie unterwegs sein werden. Natürlich ist das Design auch vollendet und bis zum letzten Bauteil durchdacht. Wie umweltfreundlich es ist steht offen, aber bestimmt ist es schonender als die alten, schweren Motorräder aus den 50er-Jahren. Und zuletzt: Viel weniger hätte man bei diesem Produkt nicht gestalten können.

Great house | US
Great house | US

 

BMW M9
BMW M9