Redesign Gymnasien der Schweiz
Logo
Skizzen
Für das Logo habe ich zuerst ein paar Skizzen erstellt. Dabei gab es bessere aber auch schlechtere Ideen natürlich. Meine Favoriten habe ich dann im Illustrator erstellt und ausprobiert wie sie wirken.
Prozess
Nach einer Besprechung mit mk konnte ich meine Favoriten immer mehr ausarbeiten. Dazu habe ich verschiedene Schriften ausgetestet. Ich konnte mich jedoch noch nicht für eine entscheiden.
Die Idee vom Bücherregal ist, dass man es als Bücherregal oder auch als Gebäude sehen kann. Genau so hat dies sich beim anderen Logo ergeben.
Die zwei Favoriten habe ich cs und da vorgestellt und wir haben und für das Gebäude entschieden. Wir wurden uns noch nicht ganz einig ob wir die zentrierte oder linksbündige Version präferieren. Ich habe dann schliesslich für das Layout die linksbündige Version gewählt da es besser hineingepasst hat.
Layout
Vorheriges Design
Das vorherige Layout sah so aus:
Skizzen
Ich habe ziemlich viele verschiedene Skizzen erstellt da ich bei diesem Layout Schwierigkeiten hatte eine gute Idee zu finden. Vorallem bei der Kantonsübersicht war es sehr schwer. Da die Farben der Flaggen sehr leuchtend sind war es schwierig das orange miteinzubringen ohne das es zu wild wurde. Zudem haben einige Flaggen einen weissen Hintergrund und ich hatte nur die Möglichkeit einen dunklen Hintergrund zu nehmen oder auf die Flaggen eine dunklere Schicht zu legen. Ich habe einige Versionen der Skizzen im psd ausprobiert da man nur dort sehen konnte was wirklich funktionierte.
Entwürfe
Ich habe ziemlich viele Entwürfe erstellt aber war mit fast keinem zufrieden. Ich hatte Schwiergikeiten beim Layout da ich keine guten Einfälle zu diesen Elementen hatte und es keine sonstigen Bilder oder längeren Texte gab. Ich war dann viel zu starr auf einer Sache. Nach den Ferien hatte ich zum Glück wieder etwas Abstand zu dem Layout und ich konnte neue Ideen einbrignen.
Bei den Startseiten habe ich versucht eine Ecke des Gebäudes vom Logo miteinzubinden um zu signalisieren das mand darüber hovern soll. Danach sollte die Kachel orange werden und der Kanton wäre erschienen. Dies haben wir dann wieder verworfen da die Ecken nicht gut aussahen. Ich habe zuerst alle meine Ideen in der selben Version ausprobiert da ich schon Schwiergikeiten hatte überhautp eine Version zu erstellen. Nächstes Mal werde ich definitiv anders vorgehen und zuerst ein Layout abschliessen und dann mit dem nächsten beginnen.
Bei den Unterseiten habe ich vorallem mit den Farben gespielt und versucht das Orange miteinzubringen.
Finale Varianten
Diese Beiden Versionen sind von mk abgesegnet und ich habe sie rr zur überprüfung geschickt.
Beide Versionen sind sehr ähnlich zueinander aber der dunkle Hintergrund passte in meinen Augen bei beiden am besten. Der Header, Footer und Anmeldebereich sind bei beiden gleich. Ich fand die Idee und das Aussehen dieser Teile gut und wollte sie daher für beide verwenden.
Umsetzung
Kantonsboxen
Für die Kantonsboxen haben wir diese Klasse genutz: frame-imageorient-26
Diese Klasse wird hinzugefügt wenn man im Backend bei einem Text & Medien Element bei der Position und Ausrichtung des Bildes "Neben dem Text links" anwählt. Da dies nur in diesem Fall angewählt wird konnten wir die Kantonsbox somit gestalten.
Es war etwas schwierig das Wappen richtig zu positionieren da es im responsive anfangs nicht so funktionierte wie gedacht. Wir konnten es nicht absolut machen da es wichtig war dass das Wappen auf den Text reagiert. Daher haben wir der ganzen Box das padding-top entfernt und dies nur beim Text wieder angefügt.
Den Text konnten wir relativ einfach mit flex einmitten.
Code css
/* frame-layout-140 "hellgrauer Hintergrund & Kantonsboxen" */
.frame-layout-140 {
background-color: #393939;
&.frame-imageorient-26 {
padding-bottom: $base_seitenabstand/3 * 2;
padding-top: 0;
.ce-textpic {
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.ce-header-bodytext {
padding-top: $base_seitenabstand/3 * 2;
width: 100%;
.ce-bodytext {
width: 100%;
a {
white-space: nowrap;
}
}
}
.ce-gallery {
margin: 0;
max-width: 120px;
width: 100%;
align-self: flex-start;
.ce-column {
margin: 0;
padding: 0;
}
}
}
}
interaktive Schweizerkarte
Für die interaktive Schweizekarte haben wir ein Backend-Layout genutz. Dazu wurde ein bereits existierendes umbenennt und angepasst. Genaueres zu Backend-Layouts. Die Karte wurde mit einem html Element eingefügt und ich habe klassen hinzugefügt und die Verlinkungen. Vorbereitet wurde die Karte im Illustrator
show Box
Beim hovern sollte der Name des Kantons erscheinen. Dafür haben wir im svg ein div "showBox" erstellt und darin alles Kantone aufgelistet.
Code:
css:
.showBox {
h4 {
position: absolute;
top: auto;
left: 0;
right: 0;
bottom: -8px;
pointer-events: none;
opacity: 0;
text-align: center;
transition: opacity 0.3s ease, bottom 0.3s ease;
&.show {
opacity: 1;
bottom: 0px;
}
}
}
svg:
<!-- Kantonsliste -->
<div class="showBox">
<h4 class="ur">Uri</h4>
<h4 class="ag">Aargau</h4>
<h4 class="be">Bern</h4>
<h4 class="fr">Freiburg</h4>
<h4 class="ge">Genf</h4>
<h4 class="gl">Glarus</h4>
<h4 class="gb">Graubünden</h4>
<h4 class="ju">Jura</h4>
<h4 class="lu">Luzern</h4>
<h4 class="ne">Neuenburg</h4>
<h4 class="sg">St.Gallen</h4>
<h4 class="sh">Schaffhausen</h4>
<h4 class="sz">Schwyz</h4>
<h4 class="so">Solothurn</h4>
<h4 class="tg">Thurgau</h4>
<h4 class="ti">Tessin</h4>
<h4 class="vs">Wallis</h4>
<h4 class="vd">Waadt</h4>
<h4 class="zg">Zug</h4>
<h4 class="zh">Zürich</h4>
<h4 class="ar">Appenzell Ausserrhoden</h4>
<h4 class="ai">Appenzell Innerrhoden</h4>
<h4 class="bl">Basel-Landschaft</h4>
<h4 class="bs">Basel-Stadt</h4>
<h4 class="ow">Obwalden</h4>
<h4 class="nw">Nidwalden</h4>
</div>