Es gibt keinen Mangel an Unternehmen, die gängigen Designtrends folgen, um einen Massenmarkt anzusprechen. Viel seltener ist die Art von Unternehmen, die tatsächlich Designtrends setzt. Heute untersuchen wir die Techniken eines Unternehmens, das die Spitze der Design-Food-Kette einnimmt: Apple.
Im Folgenden finden Sie 15 praktische Wege, um dem Beispiel von Apple bei der Erstellung schöner Schnittstellen zu folgen.
# 1: Halte es einfach
Werfen Sie einen Blick auf die Homepage von Apple und denken Sie nicht darüber nach, was Sie sehen, sondern was Sie nicht sehen. Ich gebe Ihnen einen Hinweis, es ist alles auf dieser Site (nein, nicht diese Site, klicken Sie auf den Link dumm). Die Antwort ist natürlich visuelle Unordnung. Eine Homepage soll den Benutzern alles über Ihr Unternehmen erzählen, alle Ihre Produktkategorien detailliert kommunizieren, endlose Funktionen auflisten und Ihr Logo so groß wie möglich präsentieren. Recht? Laut Apple: falsch.
Die Homepage von Apple zeigt einfach ihre neuesten Arbeiten und stellt Ihnen einige leicht verständliche Kategorien zur Verfügung, mit denen Sie die gewünschten Informationen finden. Zugegeben, Sie planen nicht, für ein bemerkenswert allgegenwärtiges Unternehmen zu entwerfen, das keiner Einführung bedarf. Sie können jedoch ein minimales, aber ansprechendes Design verwenden, um die Benutzerfreundlichkeit zu erhöhen.
Stellen Sie sich vor, Sie fahren zu einem Flughafen. Während Sie entlang der Straße fahren, werden Sie gleichzeitig mit fünf oder sechs Schildern getroffen, die Karten mit den Positionen für alles enthalten, von Terminals bis hin zu behindertengerechten Toiletten. Der Kartendesigner würde argumentieren, er habe Ihnen alle Informationen gegeben, die Sie benötigen, um dorthin zu gelangen, wo Sie hin möchten. Sie würden zweifellos zurückschimpfen, dass seine Schuld darin lag, es Ihnen auf einmal zu geben, als Sie mit 20 Meilen pro Stunde vorbeifuhren. Stellen Sie sich vor, Sie befinden sich am Sky Harbor, Phoenix Arizonas bemerkenswert einfach zu navigierenden Flughafen. Beim Einfahren sehen Sie ein Schild mit der Aufschrift: Hallo, willkommen in Sky Harbor. Es gibt drei Terminals. Während Sie weiterfahren, erreichen Sie weitere Hinweisschilder mit jeweils einer kurzen Beschreibung, welche Fluggesellschaften in jedes Terminal einfliegen und wo Sie ankommen oder abfliegen. Das Gefühl, wenn Sie in Sky Harbor einfahren, ist "Wow, das ist einfach!"
Apple verfolgt beim Interface-Design den gleichen Ansatz. Anstatt Sie mit allem zu schlagen, was sie im Namen der Benutzerfreundlichkeit haben, verwenden sie kleinere Informationen, um Sie zu dem Ort zu führen, der den Inhalt enthält, nach dem Sie wirklich suchen. Sehen Sie sich die Website an, an der Sie gerade arbeiten, und überlegen Sie, wie Sie komplexe Informationen in kleinere Teile aufteilen können, die der Benutzer nicht für überwältigend hält.
# 2: Verwenden Sie Amazing Product Shots
Ein Hauptgrund von Apple, die überflüssige Grafiken auf ihrer Website einzuschränken, ist es, wirklich zu zeigen, worauf es ankommt: ihre Produkte. Schauen Sie sich nur die Aufnahmen an, die sie verwenden. Es ist fast unmöglich, eine Seite auf der Apple-Site einzusehen und sich nicht lange auf die Produkte zu konzentrieren.
Es gibt mehrere Dinge, die diese Produkte so unglaublich aussehen lassen. Die erste ist, dass sie offensichtlich makellos sind. Kreieren Sie dies bis zu Experten für digitale Bildgebung. Ich habe nicht genau gesehen, wie sie das machen, aber die Kombination ist wahrscheinlich eine Mischung aus Fotografie, 3D-Modellierung (wählen Sie Modo, Lightwave, Maya usw.) und natürlich Photoshop.
Das nächste, was sie tun, ist, dass sie einen großen Teil der Seite einnehmen. Wenn Sie Stunden damit verbringen, eine schöne Paketaufnahme zu machen und die Größe dann auf ein Miniaturbild zu verkleinern, ist dies einfach nicht so überwältigend. Beachten Sie, dass Apple auch häufig mehrere Produkte enthält, die auf attraktive Weise angeordnet sind (siehe Abbildung oben).
Die Lektion hier ist, nicht einfach ein Foto von Ihrem Produkt zu machen und es täglich anzurufen. Verbringen Sie die Zeit, um es fantastisch aussehen zu lassen. Egal, ob es sich um eine Dose erfrischte Bohnen oder um einen Lexus handelt, geben Sie Ihr Bestes, um einen großartigen Heldenschuss zu machen.
Glauben Sie nicht, dass Sie Ihr Nicht-Tech-Produkt so gut aussehen lassen können wie Apple-Produkte? Werfen Sie einen Blick auf We Shoot Cans als Beweis dafür, dass ein talentierter Künstler jedes Produkt gut aussehen lässt.
# 3: Kontrast ist Schlüssel
Eine andere Sache, die diese Apple-Produktaufnahmen so toll aussehen lässt, ist die einfache Umgebung, in die sie fallen. Das menschliche Gehirn liebt es dagegen. Das ist der Grund, warum wir die Bergketten und den Horizont über dem Ozean anstarren. Es ist auch der Grund, warum wir sagen: oooooohhhh? wenn wir ein schwarz glänzendes iPhone auf einem flachen weißen Hintergrund sehen. Sie sollten versuchen, selektiven Kontrast in jedem einzelnen Design, das Sie erstellen, anzuwenden. Suchen Sie nach Möglichkeiten, Kontrast mit Farbe, Größe, Schriftstärke und allem anderen zu verwenden, mit dem Sie arbeiten müssen.
Apple setzt nicht nur Kontrast zu ihren Produktaufnahmen. Schauen Sie sich das Bild oben an und überlegen Sie, was Sie anspricht. Es ist wahrscheinlich der große blaue Download-Button. Fahren Sie auf der Apple-Site herum, und Sie werden feststellen, dass fast jedes Mal, wenn Sie möchten, dass Sie etwas tun (Kaufen, Herunterladen usw.), sie einen hellen blauen Knopf verwenden, um Ihre Aufmerksamkeit zu erregen.
# 4: Schwitzen Sie das Kleine Zeug
Bei Apple dreht sich alles ums Detail. Jedes kleine Stück ihrer Website ist perfekt verarbeitet. Fallen Sie niemals in die Falle, zu sagen: Niemand wird es merken. oder? gut genug? Oft ist es der Zeitrahmen, der für die kleinsten Details aufgewendet wird, um die guten Designer von den großen zu trennen.
Kaufen Sie sich nicht in die kleinen Sachen ein? Schauen Sie sich die Social-Media-Logos auf der Microsoft Office-Startseite an und sagen Sie mir, dass Sie dadurch nicht erschreckt werden.
Ich besitze persönlich Vektordateien für jedes dieser Logos. Wenn ich es schaffe, glauben Sie nicht, dass sich die Microsoft-Designer die Zeit genommen hätten, bessere Versionen dieser Logos ausfindig zu machen, um die schlampige Auswahl des Photoshop-Zauberstab zu vermeiden? Ich fordere Sie auf, irgendetwas, das auf der Apple-Website so schlecht gemacht wurde, zu finden, geschweige denn auf der Zielseite einer der beliebtesten Softwarekomponenten.
# 5: Vermeiden Sie Flash
Ich habe noch nie mit der Flash-Hasser-Masse mitgemacht, aber Tatsache ist, dass die Menge wächst. An der Spitze der Massen steht kein anderer als Apple-Chef und weltbekannter Technologie-Hellseher Steve Jobs. Sehen Sie sich diesen Auszug aus einem aktuellen Wired-Artikel an:
Über Adobe: Sie sind faul, sagt Jobs. Sie haben all dieses Potenzial, um interessante Dinge zu tun, aber sie lehnen es einfach ab. Sie machen nichts mit den Ansätzen, die Apple verfolgt, wie Carbon. Apple unterstützt Flash nicht, weil es so fehlerhaft ist, sagt er. Wann immer ein Mac öfter abstürzt, liegt das an Flash. Niemand wird Flash verwenden, sagt er. Die Welt bewegt sich zu HTML5.? (Quelle)
Dies sind starke Worte von einem Mann, der in der Tech-Welt für Führung steht. Um ehrlich zu sein, viel von dem, was er sagt, ist wahr. Online-Flash-Inhalte sind sicherlich nicht die zuverlässigste Technologie und sind in hohem Maße von zusätzlicher Software und aktuellen Plugins abhängig, die der Benutzer möglicherweise besitzt oder nicht. Darüber hinaus geben HTML5 und CSS3 Einblick in eine Zukunft, in der Sie mit einfachem, standardkonformem Code ein reichhaltiges interaktives Multimedia-Erlebnis erzielen können.
Wenn Sie als Entwickler bei Apple an ihrem virtuellen Flash-Boykott teilnehmen, werden Sie es wahrscheinlich nicht bereuen. Sie müssen nicht einmal eine aktive Haltung gegen Flash einnehmen, sondern müssen die Verwendung so weit wie möglich vermeiden. Sie haben mit Sicherheit garantiert weniger Kopfschmerzen von Benutzern, die Ihre Inhalte nicht anzeigen können.
# 6: Machen Sie es freundlich
Apple wurde jahrelang als Kult angesehen, der alles andere als freundlich war. Sie haben wirklich versucht, diese Idee in den letzten Jahren zu bereinigen, indem sie ihr Image umgestaltet haben, um zugänglicher zu sein. Der auffälligste Ort, an dem Sie dies sehen, befindet sich im Bereich "Holen Sie sich einen Mac". Anzeigen. Der Mac wird als alltäglicher Typ dargestellt, während der PC "draußen" ist. Geschäftsmann, der immer nichts Gutes vorhat. Unterm Strich besagen diese Werbespots, dass Apple wirklich eine offene Community ist und jeder, von Teenagern bis zu Omas, passt.
Eine weitere Sache, die sie getan haben, ist die Verbesserung ihrer früheren technischen Unterstützung für den technischen Support. Jetzt kann jeder in einer größeren Stadt einfach einen Termin im Apple Store vereinbaren, um eine kostenlose Einzelberatung zu erhalten, um eventuelle Probleme und / oder Fragen der Kunden zu lösen.
Alle diese Techniken werden durch Grafiken freundlicher, lächelnder Gesichter verstärkt. Derzeit hat der Apple Store in meiner Nähe etwa ein Dutzend Pappaufsteller von Apple-Mitarbeitern im Fenster, als wollte er sagen: "Komm rein, wir helfen gerne." Sie können diese lächelnden Mitarbeiter auch an einigen Stellen auf der Apple-Website erkennen, wie auf dem Bild oben gezeigt.
Was Apple tut, ist ein Gleichgewicht zwischen erstaunlichem, aber nicht-persönlichem technologiebasiertem Design und lächelnden Gesichtern. Unabhängig davon, was Sie verkaufen, überlegen Sie, ob es angebracht ist, das Produkt freundlicher aussehen zu lassen und darüber nachzudenken, was Sie tun können, um es dort hinzubekommen. Sogar ein einfaches? Hallo? in einer Überschrift kann ein langer Weg gehen.
# 7: Verwenden Sie ein starkes Gitter
Das Bild oben spricht für sich. Jede Seite auf der Apple-Site folgt einer strengen Gitterstruktur. ob einfach oder kompliziert, es ist da. Die Absicht? Sehen Sie sich auf der obigen Seite an, wie viele Informationen Sie auf Sie werfen. Es ist einfach eine Tonne im Gange, aber es scheint irgendwie attraktiv zu sein anstatt zu überwältigen.
Durch das Aufspalten sporadischer Informationen in verwaltbare Zellen werden visuelle Störungen und Verwirrungen drastisch reduziert. Beachten Sie, dass jede Zelle auch eine visuelle Referenz zur Textbeschreibung enthält. Diese visuellen Referenzen sehen sehr ähnlich aus und passen in das gesamte Apple-Thema. Auch wenn Sie Stock-Bilder verwenden, sollten Sie versuchen, ein ähnliches Thema beizubehalten, damit die auf der gesamten Seite verteilten Bilder nicht voneinander abweichen.
# 8: Erstellen Sie Unterrichtshilfen
Um die Nachricht zu unterstreichen, dass die Oberseite der Maus tatsächlich eine Multi-Touch-Oberfläche ist, hat Apple die obige Abbildung erstellt. Selbst ohne die Überschrift könnte fast jeder verstehen, was auf dem Bild vor sich geht, und folglich verstehen, wie man eine brandneue Technologie verwendet, die ihnen völlig unbekannt ist.
Apple geht jedoch noch weiter als Illustrationen. Nahezu jede Hard- und Software auf ihrer Website enthält ein Begleitvideo, das Ihnen zeigt, wie es funktioniert. Dies ist ein großer Weg, um Fragen zur technischen Unterstützung zu reduzieren. Ich verweise meine Freunde (die wegen mir alle zu Mac konvertiert wurden und daher mich als kostenlosen technischen Support sehen) auf diese Videos, weil sie eine viel reichhaltigere und verständlichere Erfahrung bieten als ein Telefongespräch jemals. Schauen Sie sich die Bibliothek mit Schulungsvideos von Apple an, um zu sehen, wie großartig diese für sich selbst sind.
# 9: Sei beständig
Das Bild oben zeigt einen Screenshot des iTunes Stores. Ähnlich aussehend? Wenn Sie denken, es sieht Apple.com sehr ähnlich, haben Sie recht. Sehen Sie sich jetzt Mac OS X an, insbesondere im Finder. Wieder sehen wir ein starkes gitterbasiertes Design, viel Weiß, metallische Texturen und Blau als Aufmerksamkeitsgreifer (in Auswahlbereichen). Und schließlich werfen Sie einen Blick auf die gesamte Apple-Hardware-Serie, um diese Texturen und Designelemente in die reale Welt zu bringen.
Apples allgemeiner Look oder "Markenkern"? wird auf jede einzelne Sache angewendet, die sie entwerfen. Es ist erstaunlich, wenn man merkt, wie sehr ihre Software tatsächlich wie ihre Hardware aussieht. Wie viel integrierter kannst du bekommen? Wenn Sie jemals mit der Entwicklung einer Marke beauftragt werden, schauen Sie sich jeden Aspekt des Unternehmens an, von Fernsehwerbung und Websites bis hin zu den Produkten selbst. Überlegen Sie, wie Sie all diese unterschiedlichen Elemente integrieren können, um wie einzelne Teile eines zusammenhängenden Ganzen zu wirken.
# 10: Nicht nur ein großer Laden
Apple ist eine großartige Fallstudie für eine erfolgreiche E-Commerce-Site. Beachten Sie, dass die gesamte Website dazu bestimmt ist, Sie zu beeinflussen, um ihre Produkte zu kaufen, und Sie über ihre Produkte zu informieren.Die Site fühlt sich jedoch nicht wie ein großer Laden an.
Was ich damit meine, ist in den obigen Screenshots dargestellt. Die Top-Einstellung ist die dedizierte Time Capsule-Seite. Apple liebt es, schöne Produktseiten mit intelligenten Schlagzeilen zu erstellen, die Sie darüber informieren, wie großartig ihre Produkte sind. Beachten Sie, dass dies technisch nicht der "Laden" ist. Wenn Sie auf die Schaltfläche "Kaufen" klicken, gelangen Sie zu der Seite im zweiten Bildschirm: dem eigentlichen Online-Shop. Hier hat Apple den visuellen Reiz vollständig reduziert und auf Benutzerfreundlichkeit konzentriert. Sie geben Ihnen die Informationen, die Sie ohne Ablenkungen benötigen, und machen den Kauf eines Artikels mit wenigen Klicks einfach.
Wenn Sie einen Online-Shop erstellen, besteht Ihre erste Idee wahrscheinlich darin, einen Shop zu errichten. Wenn Sie über die Zeit, das Budget, die Freiheit usw. verfügen, sollten Sie eine Website erstellen, um die Artikel im Geschäft auf eine Weise zu präsentieren, die im Geschäft selbst nicht effizient wäre. Erstellen Sie schöne dedizierte Seiten, die Ihr Produkt wirklich aufwerten und ein "Kaufen" enthalten. Ein Link, der die Kunden zum visuell langweiligen, aber äußerst praktischen Store-Bereich der Website führt.
# 11: Sei zuversichtlich
Seien wir ehrlich, Apple-Produkte sind ziemlich erstaunlich. Klicken Sie für einige Minuten auf der Apple-Site und Sie werden feststellen, dass sie nicht gerade demütig sind. Ihre Schlagzeilen sind gefüllt mit Adjektiven wie schön, kraftvoll, unterhaltsam, revolutionär, benutzerfreundlich und fortschrittlich. Ihre Produktbeschreibungen zeigen Ihnen, dass der Artikel das Beste ist, was es in seiner Kategorie gibt. Wenn Sie es überanalysen, hört sich das vielleicht etwas hochmütig an. Als zufälliger Besucher wären Sie wahrscheinlich nur beeindruckt.
Egal, ob Ihre Website ein Produkt, eine Dienstleistung oder einfach nur eine Idee bewirbt, verkaufen Sie sich nicht zu kurz. Verwenden Sie niemals das Wort? Gut? Wenn Sie sagen können, "großartig"? sag nie? attraktiv? wann kannst du sagen? schön.? Wenn Sie sich auf Ihr Produkt verlassen können, sollten Sie es unbedingt Ihren Besuchern mitteilen. Sie werden feststellen, dass es auf sie abfällt und dass sie im Allgemeinen einen viel positiveren ersten Eindruck haben, wenn sich alles auf Ihrer Website darauf konzentriert, sie davon zu überzeugen, wie großartig Sie sind.
Wie immer gibt es natürlich eine Bruchstelle. Lassen Sie jemanden, der nicht an der Site beteiligt ist, Ihre Kopie durchlesen, um sich zu vergewissern, dass das Selbstlob nicht so dick ist, dass es zu einem Ärgernis wird.
# 12: Lege eine legale Kopie dort ab
Dieser ist klein aber wichtig. Wenn Sie für ein Unternehmen arbeiten, das groß genug ist, um eine Rechtsabteilung zu haben, wissen Sie, dass die Mitarbeiter der Rechtsabteilung wirklich hart arbeiten, um zu beweisen, dass sie nicht wertlos sind. In der Regel bedeutet dies, dass Sie als Designer etwas erstellen, an die Rechtsabteilung senden und ein Dokument mit 500 Wörtern mit zusätzlichem Inhalt erhalten, für den Sie gesetzlich vorgeschrieben sind. Unweigerlich folgt Fluchen.
Was Sie mit diesen Inhalten machen, ist wichtig. Überlegen Sie, ob es sich um Informationen handelt, die der Benutzer tatsächlich wissen möchte, oder ob es nur eine böse Notwendigkeit ist, die niemand lesen wird. Wenn es sich um Letzteres handelt, nehmen Sie eine Seite aus Apples Buch (sozusagen ein Biss aus Apple) und werfen Sie sie ganz unten auf der Seite in einer kleinen, aber lesbaren Schrift, die sich nicht zu sehr vom Hintergrund abhebt. Ihr oberstes Ziel als Mitarbeiter sollte es sein, diese Inhalte zugänglich, auffindbar und lesbar zu machen. Ihr Ziel als Designer ist es jedoch, sicherzustellen, dass Ihr Design nicht durcheinander gebracht wird, indem Sie ihn mit unwichtigen Durcheinander füllen.
# 13: Umfassende Fußzeilennavigation
Schauen Sie sich die Fußzeile im obigen Screenshot an. Apple hat den unteren Rand jeder Seite in ein äußerst hilfreiches Navigationswerkzeug umgewandelt. Dies ist eine großartige Möglichkeit, um die Schwierigkeit beim Navigieren einer großen Site zu reduzieren. Anstatt ihre primäre Navigation mit einem Link zu jedem Abschnitt der Website zu füllen, haben sie sie für allgemeine Kategorien reserviert. Wenn Sie innerhalb einer Kategorie nach unten zum Seitenende blättern, finden Sie eine umfassendere Übersichtskarte in der Fußzeile.
Beachten Sie, dass sie sich nicht darum bemüht haben, dass es hervorsticht. Es reicht aus, dass Sie es erkennen können, wenn Sie nach etwas suchen, aber subtil genug, dass Sie es nicht noch einmal ansehen, wenn Sie keine Hilfe bei der Navigation benötigen.
# 14: Erstellen Sie schöne benutzerdefinierte Symbole
Mit der Einführung von OS X brachte Apple Icons in einen völlig neuen Bereich. Seitdem hat das beeindruckende Icon-Design die Betriebssysteme überflutet und auf das Web übertragen. Es gibt jedoch einige kostenlose Online-Icons, die so berühmt geworden sind, dass sie klischeehaft geworden sind.
Bevor Sie also eine Reihe von Icons herunterladen, die wie alles andere im Web aussehen, probieren Sie es selbst aus. Starten Sie Photoshop und / oder Illustrator, entstauben Sie die Zeichenfähigkeiten und machen Sie sich selbst ein paar großartige Icons. Am Ende werden sie Ihre Website-Designs wirklich aufpolieren. Wenn Sie die Kunst des guten Ikonendesigns beherrschen, werden Sie feststellen, dass Sie weniger auf Kunst von Drittanbietern angewiesen sind, um erstaunliche Websites zu erstellen (was wirklich gut ist). Wenn überhaupt, dann retten Sie diese Verrückten in der Rechtsabteilung vor dem Versuch, die rechtlichen Beschränkungen für all diese "frei" herauszufinden. Symbole.
# 15: Interaktiver und dynamischer Inhalt
Fast jede Seite von Apples Site enthält eine automatische Diashow, ein animiertes Akkordeon-Menü, ein Video oder eine interaktive Fotogalerie. Ziel ist es, die Aufmerksamkeit des Benutzers zu erhalten. Statischer Inhalt kann etwas langweilig sein und dazu führen, dass ein Benutzer die Website verlässt, um nach etwas interessanterem zu suchen. Apple behält Ihre Aufmerksamkeit, indem es Ihnen viele Seiten mit ständig wechselnden Inhalten oder interaktiven Elementen bietet.
Diese Art von Inhalt sollte aus einer Reihe von Gründen mit äußerster Vorsicht angegangen werden. Zunächst einmal ist es einfach, mehr als die Hälfte Ihrer Besucher zurückzulassen, wenn Sie Funktionen programmieren, für die ein spezielles Plugin erforderlich ist.Halten Sie sich an allgemein unterstützte Technologien, die in mehreren Browsern funktionieren. Außerdem ist es sehr einfach, sich mit dynamischen Inhalten mitreißen zu lassen. Es gibt eine sehr feine Grenze zwischen auffälligem und ärgerlichem und Sie müssen unbedingt lernen, wo diese Linie fällt. Ansonsten geben Sie den Besuchern Kopfschmerzen anstelle des guten Eindrucks, den Sie anstrebten.
Eine Sache noch?
Zusammenfassend lässt sich sagen, dass Apple Inc. für klassisches Design steht. Wir können eine Menge lernen, wenn wir diese großartigen Designer bei der Arbeit beobachten, die weit über das bloße Abreißen der kühlen Reflexe, die sie auf alles setzen, hinausgehen. Die oben genannten Tipps sollen im Allgemeinen auf einzigartige Weise auf Ihre eigene Arbeit angewendet werden. Nutzen Sie sie als Inspiration, um Ihren eigenen Weg im großartigen Site-Design zu beschreiten.
Jedes Mal, wenn jemand von Apple spricht, gibt es Evangelisten und Hasser, die bestrebt sind, ihre unsterbliche Liebe oder ihren tiefgreifenden Hass auf Apples Designmethoden zu teilen. Verwenden Sie die Kommentare unten, um uns mitzuteilen, wer Sie sind. Sind Sie für Minimalismus mit glänzenden Symbolen oder haben Sie es satt, dass das Internet wie ein Haufen Apple-Möchtegerns aussieht? Wir möchten deine Gedanken hören.