Unsere neue Fallstudie stellt das Projekt vor, das an der Schnittstelle von Kunst und Wissenschaft entstanden ist: Werfen Sie gerne einen Blick auf den kreativen Prozess und die Lösungen für das Physica Magazine, den wissenschaftlichen Blog, der in künstlerisches, auffälliges und funktionales Webdesign gehüllt ist.
Projekt
Physica ist eine wissenschaftliche Online-Zeitschrift, die interessante Neuigkeiten, Entdeckungen und Forschungsergebnisse in den verschiedenen Wissenschaftsbereichen wie Physik, Mathematik, KI und Informatik, Geowissenschaften und dergleichen präsentiert und hervorhebt. Hin und wieder wird eine Ausgabe veröffentlicht, die eine Reihe von Artikeln unter einem Thema vereint. Die Artikel werden von praktizierenden Wissenschaftlern verfasst, weichen jedoch vom klassischen akademischen Schreiben ab und sind vollgepackt mit den besten journalistischen Kunst- und Erzähltraditionen.
Die Aufgabe für das Tubik-Team bestand darin, einen Blog zu entwerfen, der den Inhalt elegant und intuitiv arrangiert, die Leser fesselt und mit den benutzerdefinierten Grafiken für Stimmung sorgt.
Zum Kreativteam der Tubik-Seite gehörten Ernest Asanov, Anastasia Gurinenko, Sima Shpin’, Oleksandra Mykhalyk, Kyrylo Yerokhin, Oleksandr Petulko und Kateryna Baikova.
Web-Design
Das Hauptziel der Lösung für das Website-Design bestand darin, sie gut scannbar, lesbar und leicht navigierbar zu machen, was bei Ressourcen mit hohem Textinhalt von entscheidender Bedeutung ist. Darüber hinaus war es wichtig, sich gründlich Gedanken über die Anordnung der Inhalte zu machen, damit diese für die Besucher in der ständig wachsenden Artikelbasis leicht zu finden sind. Gleichzeitig bestand ein weiteres Ziel darin, es modern, elegant, ansprechend und trendig aussehen zu lassen, damit es sich von der Masse abhebt und nicht langweilig wirkt.
Der allgemeine Designansatz umfasste daher die folgenden Punkte:
- Die primäre Farbpalette aus klaren Farben mit einem hellen, neutralen Hintergrund und hellen, kontrastierenden Farbakzenten
- die Kombination von Schriftarten, die zusammen ein gutes Gleichgewicht zwischen dekorativer Wirkung und Lesbarkeit gewährleisten würden
- Das solide Raster der Webseite ist flexibel für verschiedene Ansätze bei der Seitengestaltung
- der kreative Ansatz für visuelle Darstellungen, die zur Ästhetik und Konsistenz der Ressource beitragen würden
- Glatte und praktische Webanimationen, die die Benutzerfreundlichkeit unterstützen und die Interaktion dynamischer machen
Auf dieser Grundlage ist die Farbpalette, die die Grundlage für alle Webseiten darstellt, eine Kombination aus klaren Farben mit geeigneten Kontraststufen: Weiß, Grau, Schwarz und Rot. Das bedeutet jedoch nicht, dass es keinen Platz für Lebendigkeit und Schattierungen gibt: Sie füllen die Seiten auch mit einer riesigen Reihe individueller Illustrationen und Collagen, die in die Seiten integriert sind, wobei die Primärfarben die solide und ästhetische Leinwand bilden.
Die typografische Lösung für den Blog besteht aus einer Kombination von drei Schriftarten, die die Zwecke verschiedener Textelemente abdecken:
- Neue Machina, eine kräftige Schriftart mit Monospace-/geometrischen Schriftmerkmalen und dekorativen Anklängen sowie scheinbaren und tiefen Tintenfallen in ihren schwereren Strichstärken, inspiriert von der Ästhetik von Robotik und Maschinen und schafft eine visuelle und emotionale Assoziation mit dem Thema Technologie; Sie wird als primäre Schriftart für Slogans, Titel und Überschriften verwendet
- Pangram, eine elegante und gut lesbare serifenlose Schriftart für Textblöcke und Artikel
- STIX Two Math aus der Familie der STIX-Schriftarten (The Scientific and Technical Information eXchange), die den anspruchsvollen Anforderungen von Autoren, Verlegern, Druckern und Personen im wissenschaftlichen, medizinischen und technischen Bereich gerecht werden sollen; im Physica Magazine wird sie als Schriftart für Gleichungen und Formeln verwendet.
Alle Seiten der Website behalten ihr Layout innerhalb des Rasters basierend auf der Fibonacci-Folge. Es sieht solide und gut strukturiert aus und fühlt sich auch so an. Gleichzeitig bietet es verschiedene Optionen für Layout-Zusammenstellungen, die flexibel an die Bildschirme mehrerer Geräte angepasst werden können.
Schauen wir uns genauer an, wie das Raster für verschiedene Seiten funktioniert. Die Startseite folgt einem Split-Screen-Ansatz, bei dem der helle, luftige linke Teil des Bildschirms den Feed der Artikel präsentiert und der rechte Teil vom großen, farbenfrohen Titelbild der neuesten Magazinausgabe eingenommen wird. Die Navigation ist minimalistisch und unkompliziert. In der Kopfzeile werden das Logo und die Schaltfläche „Weitere Probleme“ an den oben gescannten Eckpunkten der Seite platziert und das Dropdown-Menü mit den Kategorien in der Mitte. Außerdem gewährleistet das Seitenmenü auf der linken Seite einen schnellen Zugriff auf die neuesten Ausgaben, die meistgelesenen Artikel und die Abonnementseite.
Und hier ist ein Blick auf die Seite für beitragende Autoren und den Katalog der Zeitschriftenausgaben, alle mit einprägsamen Collagenillustrationen.
Die Artikelseite verwendet auch konsequent die gleiche Split-Screen-Komposition, wobei der linke Teil hell und interaktiv ist, während der rechte Teil das statische Titelbild ist, das dem Layout Farbe und Ästhetik verleiht. Die Abschnitte mit Gleichungen und Formeln verwenden eine andere Hintergrundfarbe, um sie beim Scannen und Lesen leicht unterscheiden zu können.
Und auch die minimalistische 404-Fehlerseite folgt dem gleichen Ansatz beim Seitenlayout und verwendet eine prominente Illustration, die eine Verbindung zum Suchthema herstellt.
Grafische Collagen
Auch die umfangreiche Sammlung originaler Grafikcollagen, die für das Physica Magazine erstellt wurden, verdient einen genaueren Blick. Mit ihrer Hilfe löste das Designteam das Problem der Visualisierung komplexer wissenschaftlicher Prozesse und Phänomene, für die es oft keine begleitenden Fotos oder Illustrationen von Autoren gibt.
Collagen erweitern zudem den Wahrnehmungshorizont und tragen wirksam dazu bei, nicht nur für Fachleute, sondern auch für einen breiten Leserkreis ein klares visuelles Bild des im Artikel beschriebenen Themas zu schaffen. Darüber hinaus unterstützt diese Lösung die gesamte visuelle Kommunikation des Projekts und sorgt für einen einheitlichen Gesamtstil und eine wiedererkennbare Identität.
Neue Design-Fallstudien von unserem Team folgen in Kürze. Bleiben Sie dran!
Weitere Design-Fallstudien
Hier finden Sie eine Reihe weiterer Fallstudien, in denen die Designlösungen und -ansätze für einige der vom Tubik-Team durchgeführten Designprojekte vorgestellt werden.
Knabbergesundheit. Identitäts- und UX-Design für Fintech-Dienste im Gesundheitswesen
CSConnect. Website-Design für eine immersive Experience-Marketing-Plattform
Bereit, Wiederherstellen. Webdesign und Illustrationen für die Surgery Recovery Platform
ProAgenda. Identitäts- und Website-Design für Golf Management Service
BlockStock. Markenidentität und Website für Minecraft Models-Ressource
Kaiten. Identität und Produktdesign für den Lebensmittelmarkt
THT. Website-Design für Elektrotechnik-Service
Unkonventionelle Show. Website-Design für Podcast
Erfüllen. Illustrationen und Webdesign für 3PLs Marketplace
Betteln. Markenverpackung und Webdesign für den Lebensmittel-E-Commerce
Crezco. Markenidentität und UI/UX-Design für Fintech-Dienste
FarmSense. Identität und Webdesign für Agrartechnologie
