() translation by (you can also view the original English article)
Apple ist eine der größten Marken der Welt und mit dieser Popularität kommt einen großen Einfluss... Vielleicht hat Apple mehr als jedes andere Unternehmen der Welt eine äußerst einflussreiche Rolle bei der Gestaltung von Produkten, Anwendungen und Webseiten gewirkt. In diesem Artikel diskutieren wir den allgemeinen Designstil von Apple und wie er eine Reihe anderer beeinflusst.
Ein großer Teil der gesamten Marketingkampagne von Apple stammt von ihrer beliebten Webseite auf Apple.com. Alexa rangiert diese Seite als #32 in der Beliebtheit - das setzt sie vor Webseiten wie BBC, Craigslist und PayPal stellt - nicht schlecht für eine Website, die im Grunde nur eine Online-Fassade für eine einzelne Marke ist.
Die Website von Apple hat sich einen Ruf für ihre attraktive Markenidentität und ihre aufgeräumten Layouts verdient. Dank dieses Rufes hat es eine Welle anderer Webseiten beeinflusst, dem Beispiel folgen. Apples Designstil reicht vom Produktdesign und der Verpackung bis hin zur Gestaltung der Seitenleisten-Widgets auf ihren Webseiten...
Apple.com Zeitreisen
Dieser Artikel konzentriert sich hauptsächlich auf die neueren Iterationen der Apple-Webseite. Bevor wir uns jedoch zu weit vertiefen, lassen wir uns auf Apple.com im Laufe der Jahre besuchen (mit freundlicher Genehmigung der WaybackMachine). Das Wichtigste dabei ist, dass Apple.com, ähnlich wie der Rest des Internets, nach heutigen Standards ziemlich hässlich begann. Klicken Sie auf jedes Bild, um die tatsächliche Aufnahme vom Wayback zu sehen...
1996
Ja… ich weiß...
1999
2000
Im Jahr 2000 wurden die legendären „Bubble" -Tabs eingeführt... die für noch eine lange Zeit bleiben würden.
2001
2004
2006
Im Jahr 2006 nahmen viele der Stile, die mit der modernen "Apple" -Ästhetik verbunden sind, auf ihrer Webseite Gestalt, an.
2008
Okay, jetzt, da wir Sie in den letzten 15 Jahren durch die Apple-Webseite geführt haben, wollen wir uns damit befassen, was sie in den letzten Iterationen ihrer Website so unglaublich einflussreich gemacht hat.
Weniger ist mehr
Das größte Merkmal von Apples einflussreichem Webdesign ist sein Minimalismus. Apple hält es einfach, indem große Stelle mit weißem Raum und große Margen verwendet, um sich auf einzelne Stelle des Inhalts zu konzentrieren.
Die Apple-Homepage enthält normalerweise eine große Produktaufnahme mit einem einzigen Slogan und einige andere Seiten, die unter der Falte verlinkt sind. Zum Beispiel, zum Zeitpunkt des Schreibens bietet Apple beispielsweise ein großes Bild Apples zweiter Generation iPad mit einem großen Titel und einem Untertitel.
Der angenommene Gedanke hinter dieser Designentscheidung ist, dass Apple Ihnen nicht alles auf einmal übertragen möchte. Stattdessen möchten sie, dass Sie zur einzelnen Produktseite durchklicken, auf der sie weitere Informationen anzeigen können. Nehmen Sie diesen Ansatz im Gegensatz zur Microsoft-Homepage. Microsoft hat auch ein großes vorgestellten Bild, aber die Seite ist mit mehreren Anzeigen überfüllt und die Highlights unten sind noch schwerer zu lesen.
Organisierte Informationen
Es gibt einige Stelle auf der Apple-Website, in denen viele Informationen gleichzeitig übermittelt werden müssen. Es wäre abfällig für die Benutzerfreundlichkeit, wenn sie aufgeteilt würden. Diese Stelle scheint jedoch immer noch sehr sauber und organisiert zu sein, da alles auf ein Raster beschränkt ist.
Apples aktuelle iPod-Seite enthält ein verschiebbares Heldenbild mit drei kleineren, die ordentlich darunter positioniert sind. Dieses Trio zerfällt dann in weitere sechs Elemente, wodurch ein hierarchischer Sinn entsteht. Apple bietet das wichtigste (und zufälligerweise, teure) Produkt oben und zeigt die kleineren Produkte unten (wie Software-Updates und Zubehör).
Dieser Pyramideneffekt ist auf der gesamten Apple-Webseite offensichtlich
Konsistente Marke
Für die meisten Marken ist die Bekanntheit des Einzelhandels ein wichtiger Werbeträger. Möglicherweise holen die Leute Ihr Produkt in einem Ladenregal ab und scannen die Verpackung nach Informationen. Apples Einzelhandelserfahrung ist sehr unterschiedlich. Da Sie das Produkt vor dem Kauf nicht sehen (an nahezu jedem Ort), müssen Sie die Verpackung nicht mit Text und Werbegrafiken füllen.
Das Interessante ist jedoch, dass die Apple-Website auf dieselbe minimalistische Art und Weise gestaltet ist. Apples Stil zeigt sich in allen physischen und virtuellen Eigenschaften, sodass Sie eine Apple-Box (oder sogar ein Produkt) als ein Apple identifizieren können, so wie Sie auf einer Webseite tun könnten.
Produktaufnahmen
Wie bereits erwähnt, verwendet Apple hauptsächlich einzelne, große Fotos seiner Produkte anstelle mehrerer kleinerer. Wenn Sie eine ihrer wenigen Produktseiten besuchen, steht das Bild im Mittelpunkt, bevor jegliche Preisgestaltung, Features oder Verfügbarkeit erwähnt werden. Diese spezielle Technik spielt sehr gut in der allgemeinen Theorie der visuellen Hierarchie, indem sie das Produkt in erster Linie nach oben bringt.
Diese Theorie ist sehr einfach, aber sehr effektiv, um ein gutes Bild eines Produkts als ersten Eindruck zu erhalten.
Animation und Interaktivität durch neue Webstandards
Wie Sie wissen, ist Apple ein Kreuzritter für neue Webstandards, wie HTML5. Ihre eigene Website spiegelt dies wider, indem sie eine Auswahl an etwas neuer Interaktivität durch den Einsatz von kein-Flash-Webtechnologien bietet.
Wir wissen auch aus erster Hand, dass Flash der Hauptgrund für den Absturz von Macs ist.
Diese kleinen Stellen der Animation scheinen auch extrem funktionell im Vergleich zu ihren Flash-Pendants. Die Flash-verabscheuungswürdige Gang wächst von Tag zu Tag und meine Verwendung von Chrome zeigt regelmäßig den Abstürzen von Adobes beliebtes Plugin. Tatsache ist, dass die Höhen, die Flash vor HTML5 angeboten werden, werden in der fünften HTML-Version mit besserer Kompatibilität repliziert.
Der virtuelle Boykott von Flash ist etwas, das Apple nicht von seiner Website beeinflusst. Stattdessen ist es eine Demonstration, was nur mit den Technologien, die nur mit Apples mobilen Geräten kompatibel sind, erreicht werden kann.
Auf der iPad 2-Website von Apple zeigt eine interaktive Demo des smart Cover-Zubehörs, in der Benutzer die Farbe des iPad und der Hülle ändern und (je nach Gerät) wischen oder ziehen können, um das Cover zu falten. Und kein Flash!Symbole
Wenn Sie durch die Apple-Webseite navigieren, werden Sie feststellen, dass den meisten Marketingpunkten Bilder zugeordnet sind, die einen kleinen Einblick in das ansonsten langweilige Marketing-Dribbeln geben. Auf der Mac OS X-Site von Apple (im Bild unten) verwendet beispielsweise ein großes Symbol neben dem 64-Bit-Betriebssystem-Stelle. Die restlichen Punkte von Apple haben jeweils das eigene Symbol.
Je tiefer Sie in die Apple-Webseite gehen, desto deutlicher werden die Symbole. Wenn Apple zu demonstrieren versucht, dass diese Interaktion ihrer Software 40% schneller ist, verwenden sie ein Bild, um dies hervorzuheben. Dies bricht den Inhalt auf und fügt dem ansonsten schlichten Design von Apple ein wenig zusätzliche Farbe hinzu.
Dafür gibt es ein Symbol.Einfluss der Schnittstelle
Apples Webseite ist eine Sache, die einen großen Einfluss auf das Design bildet, aber die Software hat einen ähnlichen Effekt. iOS verwendet eine Reihe einzigartiger Elemente der Schnittstelle, die auf Web-Apps und Webseiten gleichermaßen sichtbar geworden sind. Beispielsweise kann der Schieberegler von iOS in einer Auswahl von Web-Apps angezeigt werden, die den Stil zum Ein- und Ausschalten einer Aktion verwenden.
Apple hat ein neues Zeitalter des Benutzeroberflächendesigns eingeleitet, das sauber und einfach zu bedienen ist. Der Einfluss der Benutzeroberfläche (UI) von Apple führt zu einer großartigen Erfahrung mit Web-Anwendungen, bei denen die Idee einer minimalistischen, vereinfachten Benutzeroberfläche mit Schlüsselfunktionen auf der Grundlage der Art des verwendeten Elements leicht erkennbar ist. Wenn Sie einen Schieberegler sehen, wissen Sie, dass er zwei Schlüsselfunktionen hat - höchstwahrscheinlich ein- und ausschalten.
Während die eigentlichen UI-Elemente ihren eigenen Einfluss auf Web-Anwendungen generieren, kann der klare, minimalistische Stil der UX kann auch als ein Einfluss auf das Design angesehen werden. Alles von den Symbolen bis zum Farbverlauf über Menüs in Mac OS X sieht großartig aus. Die subtilen Farbverläufe im Bild unten lassen das Design weniger als flach aussehen und erinnern mich stark an den sauberen Farbverlauf von Chrome für Mac auf der Oberseite.
Beispiele für Apple-inspirierte Designs
Die folgenden Beispiele sind eine sehr kleine Auswahl der Vielzahl von Webseiten, die entweder direkt oder indirekt von Apples Ansatz für das Webdesign beeinflusst wurden.
MacRabbit
Die Produktseite von MacRabbit nimmt Einfluss von Apples sauberen, monochromen Webdesign und Schnittstellenstilen. Beachten Sie auch, dass hier dieselben Apps und Support-Logos verwendet werden, wie auf Mac OS X.
Tapbots
Beachten Sie, dass Tapbots dasselbe große, seitenbeherrschendes Heldenbild verwenden, gefolgt von drei kleineren Apps, die unten vorgestellt sind.
Pixelmator
Symbole sind weiteres wichtiges Merkmal von Apples Webdesign. Auf Apple.com gibt es eine Menge gut gestalteter, wunderschöner Symbole und auf der Webseite von Pixelmator werden einige weitere gezeigt. Es gibt einige von Apple erstellte Symbole, aber die meisten sind originell und spielen gut mit dem Textschatten.
Symphony
Symphony zeigt dasselbe Z-Layout, wie auf den einzelnen Produktseiten von Apple mit einem Logo auf der linken Seite, gefolgt von der Navigation und einem großen Heldenbild.
Cult of Mac
Als Apple-Blog nimmt Cult of Mac viele Design-Hinweise aus dem großen A selbst auf. Die gleichen, subtilen Farbverläufe werden auf dem vorgestellten Post-Set und die dunkleren in der Menüleiste verwendet.
Gibson
Ein Blick auf Gibson zeigt eine Art von Apple Einfluss. Alles, vom Apple-ähnlichen Trio der unten gezeigten Bilder bis hin zur Aufnahme in jeden "Apple-Inflenced Web Designs (Apple-beeinflussten Webdesigns)" Aushebung auf den Netzschreien von Apple.
Checkout
Auf der App-Promo-Site von Checkout werden viele der Designprinzipien von Apple berücksichtigt, darunter graue Farbverläufe, große Produktaufnahmen und sogar Apples Hot News-Stil Ticker.
Versions
Versions ist ein dunkles Webdesign, das jedoch auf die Theorie des Leerraums gut stellt. Während der Raum selbst nicht weiß ist, verwendet sie große Mengen an leerem Raum, um zu bewirken. Die benutzerdefinierten Symbole werden auch zur Demonstration von Inhalten verwendet.
