Wie Apple das Webdesign im Laufe der Jahre beeinflusst hat

Apple ist eine der größten Marken der Welt und mit dieser Popularität kommt ein großer Einfluss? Vielleicht mehr als jedes andere Unternehmen der Welt hat Apple eine äußerst einflussreiche Rolle bei der Gestaltung von Produkten, Anwendungen und Websites gespielt. In diesem Artikel werden wir den allgemeinen Designstil von Apple besprechen und wie dieser eine Reihe anderer beeinflusst hat.

Ein großer Teil der gesamten Marketingkampagne von Apple stammt von ihrer sehr beliebten Website auf Apple.com. Alexa bewertet diese Site auf Platz 32 der Beliebtheit. Damit liegt sie vor Websites wie der BBC, Craigslist und PayPal. Nicht schlecht für eine Website, die im Grunde nur ein Online-Shop für eine einzelne Marke ist.

Apples Website hat sich einen Ruf für attraktive Markenidentität und saubere Layouts erworben. Dank dieses Rufs hat es eine Welle von anderen Websites beeinflusst, um diesem Beispiel zu folgen. Apples Design-Stil reicht von Produktdesign und Verpackung bis hin zu den Widgets, die die Sidebar-Widgets auf ihrer Website als Design darstellen?


Apple.com Zeitreisen

Dieser Artikel konzentriert sich hauptsächlich auf die neueren Iterationen der Apple-Website. Bevor wir uns jedoch zu weit ausgraben, besuchen wir Apple.com im Laufe der Jahre (mit freundlicher Genehmigung der WaybackMachine). Das Wichtigste dabei ist, dass Apple.com, ähnlich wie das restliche Internet, nach heutigen Maßstäben ziemlich hässlich ist. Klicken Sie auf jedes Bild, um die tatsächliche Aufnahme von Wayback anzuzeigen?

1996


Ja? Ich kenne?

1999

2000


2000 markierte die Einführung der ikonischen "Bubble" -Registerkarten? was würde lange Zeit bleiben.

2001

2004

2006


Im Jahr 2006 nahmen viele der mit der modernen Ästhetik "Apple" verbundenen Stile auf ihrer Website Gestalt an.

2008

Nun gut, jetzt, nachdem wir Sie in den letzten 15 Jahren durch die Apple-Site geführt haben, wollen wir herausfinden, was sie in den neueren Iterationen ihrer Site so unglaublich einflussreich gemacht hat.


Weniger ist mehr

Das wichtigste Merkmal von Apples einflussreichem Webdesign ist der Minimalismus. Apple macht es einfach, indem es große weiße Flächen und große Ränder für die Fokussierung auf einzelne Inhaltsbereiche verwendet.

Die Homepage von Apple enthält normalerweise ein großes Produkt, das mit einem einzigen Slogan versehen ist, und einige andere Seiten, die unter dem Ordner verlinkt sind. Zum Beispiel hat Apple zum Zeitpunkt des Schreibens ein großes Bild von Apples iPad der zweiten Generation mit einem großen Titel und einer untergeordneten Überschrift.

Der angenommene Gedanke hinter dieser Design-Wahl ist, dass Apple nicht alles auf einmal auf Sie schieben möchte. Stattdessen möchten Sie, dass Sie auf die einzelnen Produktseiten klicken, um weitere Informationen zu erhalten. Gehen Sie im Gegensatz zur Microsoft-Homepage so vor. Microsoft hat auch ein großes Feature-Image, aber die Seite ist mit mehreren Anzeigen überfüllt und die Highlights am unteren Rand sind noch schwieriger zu lesen.


Organisierte Informationen

Es gibt einige Bereiche auf der Apple-Website, in denen viele Informationen gleichzeitig übermittelt werden müssen. Es wäre abfällig für die Verwendbarkeit, wenn es aufgeteilt würde. Diese Bereiche wirken jedoch immer noch sehr sauber und organisiert, da sie alle auf ein Netz beschränkt sind.

Die aktuelle iPod-Website von Apple verfügt über ein gleitendes Heldenbild, wobei drei kleinere darunter angeordnet sind. Dieses Trio gliedert sich dann in sechs weitere Elemente, die einen hierarchischen Sinn erzeugen. Apple bietet das wichtigste (und zufällig auch teuerste) Produkt an der Spitze und zeigt die weniger großen Produkte (z. B. Software-Updates und Zubehör)..

Dieser Pyramideneffekt ist auf der gesamten Apple-Site sichtbar.


Konsistente Marke

Für die meisten Marken ist der Bekanntheitsgrad des Einzelhandels ein wichtiges Werbemedium. Die Leute holen Ihr Produkt möglicherweise in einem Ladenregal ab und scannen die Verpackung nach Informationen. Apples Erfahrungen im Einzelhandel sind sehr unterschiedlich. Da Sie das Produkt vor dem Kauf nicht sehen können (an nahezu jedem Ort), müssen Sie die Verpackung nicht mit Text und Werbegrafiken füllen.

Das Interessante ist jedoch, dass Apples Website auf die gleiche, minimalistische Weise gestaltet ist. Apples Stil wird in allen physischen und virtuellen Eigenschaften angezeigt, sodass Sie eine Apple-Box (oder sogar ein Produkt) als Apple-Box identifizieren können, genau wie Sie es bei einer Website tun könnten.


Produktaufnahmen

Wie bereits erwähnt, verwendet Apple hauptsächlich mehrere große Fotos seiner Produkte anstelle mehrerer kleinerer. Wenn Sie eine der wenigen Produktseiten besuchen, steht das Image im Mittelpunkt, bevor Preise, Funktionen oder Verfügbarkeit erwähnt werden. Diese spezielle Technik spielt eine sehr gute Rolle in der allgemeinen Theorie der visuellen Hierarchie, indem das Produkt in erster Linie hervorgehoben wird.

Diese Theorie ist sehr einfach, aber sehr effektiv, um ein gutes Bild eines Produkts als ersten Eindruck zu erzeugen.


Animation und Interaktivität aus neuen Webstandards

Wie Sie wissen, ist Apple ein Kreuzfahrer für neue Webstandards wie HTML5. Ihre eigene Website spiegelt dies wider, indem sie eine Auswahl an etwas neuartiger Interaktivität durch die Verwendung von Nicht-Flash-Webtechnologien bietet.

Wir wissen auch aus erster Hand, dass Flash der Hauptgrund für den Absturz von Macs ist.

Diese kleinen Animationsbereiche scheinen im Vergleich zu ihren Flash-Pendants extrem funktional zu sein. Die Flash-widerliche Gang wächst von Tag zu Tag und meine Verwendung von Chrome zeigt regelmäßig den Absturz des beliebten Adobe-Plugins. Tatsache ist, dass die von Flash vor HTML5 angebotenen Höhen mit einer besseren Kompatibilität in der fünften HTML-Version repliziert werden.

Der virtuelle Boykott von Flash beeinflusst Apple nicht von seiner Website. Stattdessen ist dies eine Demonstration dessen, was nur mit den Technologien erreicht werden kann, die mit den mobilen Geräten von Apple kompatibel sind.

Apples iPad 2-Site bietet eine interaktive Demo des Smart Cover-Zubehörs, auf der Benutzer die Farbe des iPad und des Gehäuses ändern und streichen oder ziehen können (je nach Gerät), um das Cover zu falten. Und kein Blitz!

Icons

Wenn Sie durch die Apple-Website navigieren, werden Sie feststellen, dass die meisten Marketing-Punkte Bilder enthalten, die einen Einblick in das ansonsten langweilige Marketing-Dribbeln geben. Beispielsweise verwendet die Mac OS X-Site von Apple (siehe Abbildung unten) ein großes Symbol neben dem 64-Bit-Abschnitt des Betriebssystems. Die übrigen Punkte von Apple haben jeweils auch ein eigenes Symbol.

Je tiefer Sie in die Apple-Website einsteigen, desto deutlicher werden die Symbole. Wenn Apple versucht zu demonstrieren, dass diese Interation ihrer Software um 40% schneller ist, verwenden sie ein Bild, um dies hervorzuheben. Dies bricht den Inhalt auf und fügt Apples ansonsten schlichtem Design etwas mehr Farbe hinzu.

Dafür gibt es ein Symbol.

Schnittstelleneinfluss

Apples Website ist eine Sache, die einen großen Einfluss auf das Design hat, aber die Software hat einen ähnlichen Effekt. iOS verwendet eine Reihe einzigartiger Oberflächenelemente, die auf Web-Apps und Websites gleichermaßen aufgefallen sind. Zum Beispiel kann der Schieberegler-Schalter von iOS in einer Auswahl von Web-Apps angezeigt werden, die den Stil verwenden, um eine Aktion ein- oder auszuschalten.

Apple hat ein neues Zeitalter für das Design der Benutzeroberfläche eingeführt, das sauber und einfach zu bedienen ist. Der Einfluss der Benutzeroberfläche von Apple führt zu einer großartigen Erfahrung in Webanwendungen, bei denen die Idee einer minimalistischen, vereinfachten Benutzeroberfläche bestand, wobei die wichtigsten Funktionen anhand des verwendeten Elementtyps leicht zu erkennen sind. Wenn Sie einen Kippschalter sehen, wissen Sie, dass er zwei Hauptfunktionen hat - höchstwahrscheinlich ein und aus.

Während die eigentlichen UI-Elemente einen eigenen Einfluss auf Webanwendungen haben, kann der saubere, minimalistische Stil der UX auch als Einfluss auf das Design gesehen werden. Alles, von den Symbolen bis zum Farbverlauf über Menüs in Mac OS X, sieht gut aus. Die subtilen Farbverläufe, die im Bild unten gezeigt werden, lassen das Design weniger flach erscheinen und erinnern mich stark an den sauberen Farbverlauf von Chrome für Mac.


Beispiele für von Apple inspirierte Designs

Die folgenden Beispiele sind eine sehr kleine Auswahl der verschiedenen Websites, die direkt von Apples Webdesign-Ansatz beeinflusst wurden.

MacRabbit

Die MacRabbit-Produktseite hat Einfluss auf das saubere, monochromatische Webdesign und die Schnittstile von Apple. Beachten Sie auch, dass hier dieselben Apps und Support-Logos verwendet werden wie unter Mac OS X.

Tapbots

Beachten Sie, dass Tapbots dasselbe große, seitenbeherrschende Heldenbild verwendet, gefolgt von drei kleineren Apps.

Pixelmator

Icons sind ein weiteres wichtiges Feature im Webdesign von Apple. Es gibt eine Menge gut entworfener, wunderschöner Icons auf Apple.com, und Pixelmators Website zeigt noch ein paar mehr. Es gibt einige von Apple hergestellte Symbole, aber die meisten sind originell und spielen gut mit dem Text-Shadowing.

Symphonie

Symphony zeigt dasselbe Z-Layout, das auf den einzelnen Produktseiten von Apple verwendet wird, mit einem Logo auf der linken Seite, gefolgt von der Navigation, gefolgt von einem großen Heldenbild.

Kult des Mac

Als Apple-Blog nimmt Cult of Mac dem großen A selbst viele Design-Hinweise. Die gleichen, subtilen Farbverläufe werden für die vorgestellten Post-Sets und die dunkleren in der Menüleiste verwendet.

Gibson

Gibson nur anzuschauen, deutet auf einen Einfluss von Apple hin. Alles vom Apple-Trio der gezeigten Bilder am unteren Rand bis zur Aufnahme in jedes "Apple-inflenced Webdesign" -Rundum im Netz schreit Apple.

Auschecken

Die App-Werbeseite von Checkout greift viele Design-Prinzipien von Apple auf, darunter graue Abstufungen, große Produktaufnahmen und sogar den Hot-News-Stil von Apple.

Versionen

Versionen sind ein dunkles Webdesign, das jedoch die Theorie des Leerraums gut nutzt. Der Raum selbst ist zwar nicht weiß, verwendet jedoch viel leeren Raum, um zu wirken. Die benutzerdefinierten Symbole werden auch zur Demonstration des Inhalts verwendet.