Sarah Bollmann

Mein Studiums-Portfolio

Menu Close

Category: Gestalterische Grundlagen

Web-Interaktionen

Auf jeder Website gibt es sie. Interaktionselemente.
Darunter fallen Buttons, Scrollbars, Navigationselemente, Checkboxen, Trees, SocialMedia Inputs und viele mehr.
Als Auftrag suchten wir nach einer gut aufgebauten Website und markierten alle Interaktionselemente.
Ich habe die Webpage der HTW Chur etwas genauer unter die Lupe genommen. Auf der Startseite gibt es unglaublich viele Interaktionsmöglichkeiten.
Die Page erschlägt einem beinahe mit den vielen Möglichkeiten sich weiter zu klicken. Sie besteht aus gefühlten 10 Navbars, womit ich heute noch etwas überfordert bin. Es gibt auch ein Suchfeld, ein Karusell, die Möglichkeit die Sprache zu wechseln, Social Media Buttons und mehr.
Mit orange eingezeichnet sind alle Möglichkeiten, die der User anklicken kann.
Interkationen

Raster und Breakpoints

Da wir Geräte mit unterschiedlichen Viewports benützen, müssen diese bei der Gestaltung und Programmierung von Websites auch beachtet werden. So verwendet man Raster, welche die Page unterteilen und es vereinfachen auf andere Viewports zu verändern. So kann das beispielsweise aussehen. Von Desktop ausgehen sieht man, der Weissraum wird kleiner, die Spalten schmaler und statt 4 werden beim Tablet nur noch zwei grüne Raster nebeneinander angezeigt.

6-web-design-trends-awwwards-image17-500x228Wir haben News-Websiten nach ihrer Responsiveness untersucht und aufgezeigt, wie die Darstellung auf den verschiedenen Viewports aussieht.
Ich habe mich für watson.ch entschieden.
Im grösst möglichen Viewport gibt es vier vertikale Spalten. Die vierte Spalte mit der Electroluxwerbung wird, sobald man das Fenster etwas zuzieht, ausgeblendet. Es wird also auf drei Spalten reduziert.

desktopverkleinert man den Viewport weiter, gibt es nach einem Breakpoint nur noch zwei Spalten. Die dritte Spalte wird hierbei unter die anderen zwei Spalten gelegt. Auf der rechten Seite sieht man dann noch die Mobileversion. Hier gibt es nur noch eine Spalte, die alle gleichgrosse Thumbnails hat.

handy_tablet

Der kleine Prinz

Der Arbeitsauftrag der Lektionen Schrift und Farbe lautete ein Buchcover zu gestalten. Zuerst nur in schwarz-weiss, ohne Bilder und nur die Schrift als Gestaltungsmittel. Dafür verwendeten wir Antiquaschrift.

DerKleinePrinz_bw_jpg_1


 
In einem weiteren Schritt sollten wir aus unseren bisherigen Entwürfen einen auswählen und mit Farben und einfachen Elementen verschönern. Ich habe mich für weisse Schrift auf farbigem Hintergrund entschieden. Ausserdem habe ich einfache Vektorzeichnungen in Illustrator gemacht.

DerKleinePrinz_fox

DerKleinePrinz_rose

Weissraum

Weissraum ist der Raum zwischen Elementen. Dabei spielt es keine Rolle ob dieser nun Weiss, gemustert oder schwarz ist. Es geht darum den Blick des Websitebesuchers auf das Wesentliche zu lenken. Ist der Abstand zwischen den Elementen zu klein, so wirkt es schnell mal chaotisch und man weiss nicht worauf man sich konzentrieren soll.

Simple und klar kommt die Agentur Oxford House daher…
Screenshot (121)
…und so sollte man mit Weissraum nicht umgehen

Screenshot (122)

Moodboard Banksy

Für unsere Semesterarbeit gestalten wir ein Digitorial zu einem Künstler nach Wahl. Ich habe mich für Banksy entschieden. Mir gefällt Streetart sehr gut und ich konnte in Melbourne auch schon echte Werke von ihm sehen.
Als erstes erstellte ich ein Moodboard, mit Assoziationen und Werken zu Banksy. Ausserdem legte ich auch ein Farbschema und mögliche Schriften und Themen fest.
moodboard_banksy

inhalte

Der goldene Schnitt

Der Goldene Schnitt ist ein bestimmtes Verhältnis zweier Zahlen oder Größen. Wir nehmen Dinge, welche im Goldenen Schnitt sind, als besonders harmonisch wahr.
Den längeren Teil nennt man Major (ist 61.8%), den kürzeren Minor (38.2%).
Das Verhätltnis des goldenen Schnitts ist weitverbreitet. Von der Mathematik über die Architektur bis hin zur Natur.

goldenratio

Auch für uns kann sich der Goldene Schnitt in der Gestaltung als sehr wertvoll erweisen. Im Web- und Printdesign kommt er zum Einsatz…golden
….sowie in der Fotografie und Cinematografie. Durch den Goldenen Schnitt entsteht ein sehr ästhetisches Bild welches als Vollkommen angesehen wird.
image-3

Selbstporträt

In der ersten Lektion des neuen Moduls „Gestalterische Grundlagen“ bekamen wir den Auftrag ein Selbstporträt von uns auszudrucken.
Damit die Dozierenden uns besser kennenlernen haben wir dazu unseren Namen in einer Schrift, welche zu uns passt dazugeschrieben.
Ich habe mich für den Free Font „Always Forever“ entschieden. Die Schrift hat mir gefallen, weil sie nicht so streng ist sondern aussieht wie selbstgeschrieben.
Da ich gerne fotografiere habe ein Selbstporträt vom Olympus Photoplayground gewählt.

Lektion1_Portraet