UI Design - Isländische Kultur & Events

Fallstudie: Responsive Web-Design-Prozess.

Brief: Um ein Land oder eine Stadt Ihrer Wahl zu wählen und eine responsive Website zu entwerfen, die auf verschiedenen Plattformen von Desktop, Mobile usw. anpassbar ist und das Thema am besten beschreibt.

Mein Grund für die Entscheidung, Island zu wählen und eine Website für kulturelle Veranstaltungen auf isländischer Kultur zu errichten, war deshalb, weil ich schon einige Male dort gewesen war. Daher war es für mich sinnvoll, eine Hommage zu erweisen, indem ich eine responsive Website entworfen habe, die Island gewidmet ist das Land selbst.

Eine kurze Geschichte Islands ist, dass es ein nordisches Land ist, das im nordatlantischen Teil Europas liegt und für seine wunderschönen Berge und Lavafelder, die großen Eisgletscher und Flüsse bekannt ist. In der Region leben ungefähr 349.000 Menschen Land ist also nicht ganz ein großes Land und es ist auch bekannt, dass es 800.000 mehr Schafe gibt als die eigentlichen Menschen!

Tor

1. Recherchieren und Finden von Inhalten, die am besten beschreiben, wie Island dargestellt wird, indem verschiedene Forschungsmethoden verwendet werden, die definieren, wie Island dargestellt wird.

2. Entwerfen eines Drahtmodells und Verwenden verschiedener Komponenten zur Strukturierung und Anordnung der besten Optionen, die für verschiedene Plattformen sowohl für Mobilgeräte als auch für Desktop erforderlich sind.

3. Erstellen Sie eine funktionsfähige Prototyp-Website mit hoher Wiedergabetreue von mobilen Geräten und Desktops aus, indem Sie verschiedene Statusänderungen vornehmen, je nachdem, wie sich die Plattformen reagieren lassen.

Forschung

Anfänglich war das Sammeln und Brainstorming derartiger Informationen mit verschiedenen Methoden verbunden, um mithilfe verschiedener Methoden ausreichend wertvolle Inhalte zu erhalten, die die Darstellung von Island zum Ausdruck brachten. Daher half der Einsatz eines „Arbeitsblatts für Design“, die ausdrucksstarken Stimmungen abzutrennen, um anzugeben, aus welchen Kategorien die einzelnen Kategorien stammen Farbe, Form, Bewegung würden dazu beitragen, eine aussagekräftigere Erklärung für den Kontext zu geben, basierend auf dem Ausdruck von Wörtern. Die Wahrnehmung, die die meisten Menschen über Island haben, ist, dass es als kaltes, klimabasiertes Land bekannt ist, das für eisige Landschaft und besonders für grüne Landschaft bekannt ist Sie hören das Wort Eis, das mit Kälte und Wind verbunden ist und ein atmosphärisches Außengefühl vermittelt.

Arbeitsblatt für Inception-Design

Die Verwendung von Moodboards war eine weitere Methode, um mein Projekt visuell zu interpretieren, indem inspirierende Bilder verwendet wurden, um besser darzustellen, wie jedes Bild einen Gedanken hinter einer Idee mit Phantasie, Farbbildern und Tönen zum Ausdruck bringt

Es gelang mir jedoch, ein paar Bilder aus meinem persönlichen Urlaubsarchiv zu holen, die ich 2017 in Island in der Nähe von Reykjavik und um die Außenkanten der Berge und anderer Standorte mitgenommen hatte Bilder wurden von lizenzfreien Websites wie pexels.com aufgenommen

Island Mood Board

Daraufhin experimentierte man mit verschiedenen Typografien und Schriftarten unter Verwendung einer Stil-Kachel-Tafel, wobei der Schwerpunkt hauptsächlich auf Farben wie Blau, grauen Mitteltönen lag, was hauptsächlich mit den Primärfarben vor allem für dort tiefblauen Himmel und eisblauen Gletschern bis hin zu anderen Himmelshimmel verbunden ist und berge.

Styletiles

Nachdem ich 20 verschiedene Schriftarten online von „googlefonts“ heruntergeladen und heruntergeladen hatte, beschloss ich, den Rest aus dem Weg zu räumen und hauptsächlich mit „PT-Sans“ und „Lato“ zu arbeiten, da diese beiden Schriftarten, die meiner Meinung nach ein simples Gefühl hatten, gut funktionierten Idee, die ich um das Projekt herum hatte.

Die nächste Etappe bestand darin, meine Hände in die praktische Arbeit zu bringen und das Wireframing hauptsächlich freihändig mit dem altmodischen Stift und Papier abzugeben, wobei die Struktur und das Layout zu berücksichtigen waren, einschließlich der Anzahl der einzubeziehenden Spalten, die ich noch nie gemacht hatte, aber sinnvoll war Ich habe darüber nachgedacht, wie der Inhalt umgestellt werden soll und wie alles hineinpassen würde. Insbesondere, da ich einen responsiven Prototyp für Mobile und Desktop entwickeln musste.

Am Ende skizzierte ich zunächst eine Anzahl von Layouts für das Mobiltelefon, in der ich dachte, dass die mobile Website als Entwurf aussehen würde, wobei ich mich hauptsächlich auf die 3 Seiten von der "Landingpage" bis hin zum "Kontakt" und den "Kontaktbereich" konzentriere Dasselbe musste auch für die Desktop-Version getan werden, bei der eine größere Auflösung desselben Prozesses entworfen wurde. Dabei wurde auch berücksichtigt, wie die mobile Version der komprimierten Version bedeutet, dass ich darüber nachdenken muss, wie sich die Komponenten zwar strukturell ändern, sich aber dennoch auf jeder Plattform ansprechen .

Der nächste Schritt bestand in der Erstellung des UI-Toolkits, das aus bestimmten Komponentenelementen besteht, die aus Schaltflächensymbolen, verwendeten Schriftarten und den durchgehenden Farben während des gesamten Prozesses bestehen. Die Mehrzahl der Symbole kam flaticon.com

Nachdem ich schließlich mein Logo auf dem Adobe Illustrator als Vektordatei aus drei Bergen entworfen hatte, um die Identität der isländischen Berge zu präsentieren, war nichts Besonderes, da es mit dem Thema, wie meine Website aussehen sollte, übereinstimmen musste es ist auf einem einheitlichen Designniveau und bedeutet nichts, um einfach zu wirken, aber effektiv.

Logo Mountain Designed mit Adobe Illustrator

Die Erstellung der High Fidelity-Website auf Sketch hatte ihre Vor- und Nachteile, da ich mich so sehr an Photoshop gewöhnt hatte und mit Sketch konvertieren musste, da ich zuvor nur eine kurze Erfahrung mit dieser hatte. Ich brauchte ein paar Tage, um das Gefühl zu bekommen .

Ursprüngliche Landing Page vor Änderung

Am Ende habe ich einige Layouts sowie Symbole und Komponenten einige Male geändert und neu angeordnet, nachdem ich von den Kursleitern Feedback erhalten hatte, was den Entwurfsprozess und die visuelle Interaktion der Benutzer mit der Website sowohl auf Mobil- als auch auf Desktop-Negativität angeht die späteren Stufen.

Desktop-PrototypMobiler Prototyp

Abschließend

Ich habe das Gefühl, dass ich noch viel zu tun habe, was den Entwurfsprozess angeht. Dies hat mir geholfen, meine Ideen besser zu planen und zu strukturieren, indem ich mir mehr Zeit für die Recherche aufnehme und wertvollere Inhalte und Beweise in Bezug auf die Art und Weise verwendet eine Reise vom Anfang bis zum Ende anhand einer Storytelling-Methode zu validieren, wenn Sie eine Fallstudie präsentieren oder schreiben.