Stockholm 101 - UI-Grundlagen

Einführung

Ich beschloss, an einer Website zu arbeiten, die die Besucher zu einem Besuch in Stockholm in Schweden befördert.

Stockholm ist eine wunderschöne nordische Stadt voller Geschichte und Kultur. Die Formen und Farben der Architektur und die positive, zukunftsorientierte Kultur sind einige der Hauptgründe für mich

Die Idee der Website bestand darin, Menschen dazu zu ermutigen, zu 101+ Gründen beizutragen, warum sie Stockholm besuchen sollten. Es war eine Website, die von benutzergenerierten Inhalten betrieben wurde. Ähnlich wie bei Humans of NYC usw. Der einzige Zweck der Website bestand darin, weitere Besuche in Stockholm anzuregen.

Design Inception

Moodboards

Richtung entwerfen

Gemeinsame Themen, die in meiner Forschung identifiziert wurden und in meinem Moodboard reflektiert werden, sind die kühleren, blassen Naturfarben, die in Stockholms Gebäuden reflektiert werden. Da es ein nordisches Land ist, ist grauer bewölkter Himmel üblich und steht für die Identität der Stadt.

Ein weiteres wichtiges, aber wichtiges Thema, das meine Designrichtung informierte, war die Identifizierung der gotischen, aber farbenfrohen Gebäude in der Stadt. Stockholm scheint eine verspielte Stadt mit einem historisch ernsten Unterton zu sein.

Die Persönlichkeit der schwedischen Musikexporte wie Avicii, Robyn und Abba ist auch bei der Gestaltung einer Website, die die Stadt widerspiegelt, kaum zu übersehen. Meine Designrichtung kombiniert all diese Elemente.

Ideen- und UI-Kit

Ich beschloss, mein Projekt voranzutreiben, indem ich beide Designanweisungen zusammenbrachte, um das UI-Kit und das Design der Website zu informieren.

Schweden ist ein nordisches Land, in dem das Wetter kalt wird und die Tage oft kurz sind. Dies scheint die Stimmung und Kultur der Stadt nicht zu beeinträchtigen, also kombinierte ich verspielte Farben mit den Schatten des Winters. Dies ist an den Fortschrittszuständen und dem Logo erkennbar.

Ich habe den Adobe-Farbwähler mit verschiedenen Bildern meines Moodboards verwendet, um Komplementärfarben zu identifizieren. Ich habe Haupt- und Sekundärfarben für die Website identifiziert.

Unten sehen Sie eine Momentaufnahme des UI-Kits.

Endgültiges Design

Unten ist die endgültige Kopie meiner Desktop-Website.

Fazit

Der Kurs war eine fantastische Einführung in die Welt der Benutzeroberfläche und des Designprozesses. Es war eine Herausforderung, die Dinge rein äußerlich und visuell zu betrachten, aber es hat mir sehr gut gefallen.

Mein einziges Problem war die Tatsache, dass ich es wirklich schwer hatte, Figma als Software zu beherrschen. In der Vergangenheit habe ich Sketch verwendet, um Prototypen mit hoher Wiedergabetreue zu erstellen. In der Zukunft werde ich zu Sketch zurückkehren, wenn ich mehr Arbeit für mein UI-Portfolio schaffe.