Das vollständige Handbuch für ein effektives Interface-Design im Kartenstil

Die Architektur im Kartenstil ist eines der größten Dinge im Webdesign und insbesondere im mobilen Design. Von Apps bis zu responsiven Websites taucht das Kartenformat überall auf.

Aus gutem Grund. Das Design mobiler Karten sieht gut aus, funktioniert auf einer Vielzahl von Geräten gut und schafft eine klare Organisation und Methode zur Bereitstellung von Inhalten. Deshalb verwenden viele große, bekannte Marken das Kartenformat, und viele kleinere Design- und Entwicklungsgruppen folgen diesem Beispiel.

Was ist Kartendesign?

Kartendesign-Stile für mobile und Desktop-Websites werden durch einen Inhalt definiert, der aussieht, als ob er auf einer Spielkarte vorkommt. Karten-Boxen enthalten in der Regel ein bestimmtes Element oder eine bestimmte Information und sind normalerweise vertikal ausgerichtet.

Aber wie bei jeder Designtechnik gibt es viele Möglichkeiten, die Regeln zu brechen. Das Grundprinzip der Idee ist es, Informationen auf eine Art und Weise zu geben, die leicht zu sehen und gleichzeitig zu verdauen ist. Beliebte Social-Media-Sharing-Sites wie Twitter und Pinterest verwenden dieses Format zum Gruppieren von Bildern und Posts.

Was ist schön an einer digitalen Karte? ist, dass es auf verschiedene Weise manipuliert werden kann. Sie können einzeln (wie beim mobilen Design häufig) gestapelt erscheinen oder bei größeren Bildschirmen in ein Raster fallen. Karten können klein oder groß sein und sich an den Inhalt anpassen.

Das Design im Kartenstil ist auch für responsive Frameworks beliebt, da Designer Kartenspalten hinzufügen und reduzieren können, um sie an die Form und Größe des Bildschirms anzupassen. Während die meisten Designer Karten mit fester Breite entwerfen und die Kartenhöhe variabel bleiben.

Wie Karten für Ihr Projekt funktionieren können

Karten sind aufgrund ihrer Flexibilität und ihres breiten Einsatzbereichs eine trendige Option. (Es ist auch hilfreich, dass einige der beliebtesten Websites der Welt in den letzten Design-Iterationen eine Art von Karte verwendet haben - Google, Microsoft, Facebook, Twitter, Pinterest und Buzzfeed, um nur einige zu nennen.)

Möchten Sie ein Karten-Konzept verwenden? Diese Designtechnik hat einige Vorteile:

  • Es macht Inhalte leicht verdaulich.
  • Es gibt viele Designstile, die in diesem Format funktionieren, von flach bis verschönert.
  • Karten funktionieren gut in responsive Frameworks.
  • Das Format hat ein strukturiertes Erscheinungsbild und eine Struktur für viele Informationen.
  • Es funktioniert gut für viele verschiedene Arten von Inhalten.
  • Karten-Designs werden praktisch für das Teilen in sozialen Medien erstellt.

Entwerfen Sie eine große Karte

Das beste Kartendesign ist einfach. Es bietet auch ein reichhaltiges Content-Erlebnis. Für ein erfolgreiches Kartenprojekt müssen diese beiden Elemente vorhanden sein. Es gibt jedoch noch viele andere Designtechniken, die Funktionalität und Ästhetik zusätzlich verbessern können.

Das Tolle an Karten ist, dass es nicht wirklich reine Designregeln gibt, die Sie befolgen müssen. Grundprinzipien eines guten Designs sind alles, was Sie benötigen, um ein Kartenprojekt zu beginnen.

Verwenden Sie viel Platz

Platz ist ein gemeinsamer Faktor bei Kartenprojekten. Insbesondere viel weiße Fläche. Es ist wichtig, jedem einzelnen Element Raum zu geben, damit es gesehen, gelesen und verstanden wird. Dies gilt insbesondere für einen Block, der häufig ein "Mini-Design" enthält. von seiner eigenen. Stellen Sie sich das so vor: Wenn jede Karte in Ihrem Projekt ein Bild, eine Überschrift, einen Haupttext, eine Aktionsschaltfläche und eine Freigabeschaltfläche oder einen Link enthält, müssen mindestens fünf Elemente in einem Abstand von etwa 600 Pixeln verwendet werden .

Wenn genügend Platz um jedes Element vorhanden ist, haben Benutzer die Möglichkeit, sich visuell zurückzusetzen, wenn sie von einem Element zum nächsten oder von Karte zu Karte schauen. Das Einfügen einer großen Menge von Zwischenräumen zwischen den Elementen hilft auch, die Aufmerksamkeit und Aufmerksamkeit durch die Karte auf eine Art und Weise zu lenken, die mit der Inhaltshierarchie zusammenarbeitet.

Eine Information pro Karte

Wir haben bereits festgestellt, dass die Karte mehrere Elemente in einem Design enthalten wird, wobei sich jedoch nur ein Teil der Informationen oder der Inhalt darauf konzentrieren sollten. Folgen Sie dem Konzept einer Idee pro Block, um das Bild und den gesamten unterstützenden Text zu vereinheitlichen.

Diese Idee kann dazu führen, dass Inhalte, die dramatisch abwechslungsreich sein könnten, im selben Raum arbeiten, absichtlich und organisiert wirken. Benutzer haben die Möglichkeit, die Teile Ihres Inhaltsportfolios auszuwählen, die sie konsumieren und freigeben möchten.

Wählen Sie ein klares, scharfes Bild

Das Bild ist König des Kartendesignraums. Sie brauchen ein großartiges Bild - und es muss auch groß sein, um Benutzer auf jede einzelne Karte zu ziehen. (Denken Sie daran, dass dies ein überfüllter Internetbereich ist.)

Wenn Sie nicht über ein Bild verfügen, wählen Sie einen Kunststil oder erstellen Sie Text, der nicht anders kann, als den Benutzer anzulocken. (Erinnern Sie sich an die Flucht des Lama Ende Februar, die dank großartiger Schlagzeilen viral wurde.)

Verwenden Sie einfache Typografie

Entscheiden Sie sich für einfache Schriftarten in einfachen und gut lesbaren Farben - Schwarz und Grau sind beliebt -, die dem Design nicht im Weg stehen. Mittlere bis runde Sans Serifen sind für Lesbarkeit und ein neutrales Designgefühl beliebt.

Begrenzen Sie auch die Anzahl der Schriften. Für die meisten Kartenprojekte reicht eine einzige Schrift. Erwägen Sie die Verwendung einer fettgedruckten Variante. In den meisten Fällen genügen jedoch Größenunterschiede, um Text optimal zu nutzen. (Stellen Sie sicher, dass Sie auch die Anzahl der Wörter begrenzen. Ein Gedanke pro Karte.)

Fügen Sie ein unerwartetes Detail ein

Während Kartenschnittstellen oft unkompliziert sind, kann das Hinzufügen unerwarteter Details genau das richtige Flair vermitteln. Betrachten Sie einen abgeschnittenen oder eckigen Ausschnitt, einen abgewinkelten Rand oder einen 3D-Effekt, um die Karten hervorzuheben.

Andere Techniken wie Farbüberlagerungen oder Schwebeflugeffekte können gleichermaßen angenehm sein. Ziehen Sie auch in Betracht, nur den höchstwertigen Inhalten einen Effekt hinzuzufügen, so dass jede Karte hinsichtlich des visuellen Gewichts nicht ganz gleich ist.

Erstellen Sie ein offenes Gitter

Dies könnte das schwierigste Konzept sein, um den Kopf zu bekommen, abhängig davon, wie Ihr Designprojekt zusammenarbeitet. Genauso wichtig wie das Design jeder Karte ist die Außenseite. Abstand zwischen jedem Element.

Erstellen Sie ein Raster-Framework, das bei jeder Karte einen Kontrast aufweist. Gestalten Sie den Rahmen so, dass der Abstand von Karte zu Karte konstant ist und zwischen den einzelnen Elementen ausreichend Platz vorhanden ist. Dies könnte noch mehr ins Spiel kommen, wenn man darüber nachdenkt, wo Haltepunkte in einem responsiven Rahmen insbesondere bei Karten mit fester Breite liegen könnten.

Betrachten Sie die Usability

Eine Karte sollte mehr als nur ein Gestaltungselement sein. Es sollte einem Benutzer dabei helfen, eine bestimmte Aktion auszuführen. Von der Lektüre einer Story oder eines Artikels bis hin zur Anmeldung für einen E-Newsletter oder einem Kauf sollte die Kartenschnittstelle eine einfache Interaktion bieten.

Betrachten Sie auch, wie diese Interaktionen funktionieren. Gehen Sie über den Klick hinaus. Viele Designprojekte mit Karten werden auf mobilen Geräten verwendet. Berücksichtigen Sie Interaktionen, bei denen anstelle von herkömmlichen Klicks Taps und Swipes verwendet werden. Stellen Sie sicher, dass Tasten oder Aktionen leicht zu sehen und auszuführen sind, einschließlich ausreichend Platz zwischen Objekten, um sie leicht berühren zu können, ohne das falsche Element zu aktivieren.

Fazit

Designprojekte im Kartenstil machen Spaß, sind trendig und funktional. Durch die Verwendung einiger grundlegender Grundsätze des Designs können Sie ein Kartendeck erstellen, das ästhetisch ansprechend und funktional ist.

Die Idee Nr. 1, die zu beachten ist, ist Einfachheit. Alles zum Kartendesign sollte gut lesbar und verständlich sein. Viel Glück mit deinem Projekt!