Das Apple-Designteam gilt heute als eine der talentiertesten Designer-Gruppen der Branche. Den Trends, die sie setzen, folgt nicht nur jedes andere große Tech-Unternehmen, sondern auch Webdesigner in jeder erdenklichen Produkt- und Dienstleistungsnische.
Folgen Sie uns auf einer aufregenden Zeitreise und erleben Sie die Entwicklung von Apples Designstil. Auf Apple.com erhalten Sie einige erstaunliche Einblicke, die bis ins Jahr 1997 zurückreichen, während wir den Aufstieg und Fall einiger wichtiger Designtrends beobachten.
Apple und Design
Das Bild oben ist eine Momentaufnahme der Apple-Website in ihrer aktuellen Form. Es ist ein perfektes Bild von allem, was wir an Apples Sinn für Design lieben. Es ist sauber und minimal und legt großen Wert auf die Schönheit des Produkts.
Es gibt nicht eine Million verschiedene Banner- oder Mega-Dropdown-Menüs zum Durchsuchen, sondern lediglich ein einfaches Navigationsschema, ein Produkt und vier verschiedene Inhaltsfelder am unteren Rand, die als universelle Möglichkeit dienen, andere wichtige Produkte und Informationen hervorzuheben.
Beachten Sie auch die Kopie: kurz und auf den Punkt mit einem Hauch von Übertreibung (wo wäre Apple ohne sie?). Trotz der Tatsache, dass das iPhone 4S über Hunderte von Funktionen verfügt, mit denen man prahlen kann, haben sie es auf vier grundlegende Punkte reduziert, gerade genug, um Ihr Interesse zu wecken und Sie zu weiterem Nachdenken anzuregen.
War es immer so?
Apple ist seit langem für seinen Stil und sein überlegenes Design bekannt. Eine unschlagbare Innovation steht an vorderster Front für ihren Erfolg, aber diesen Erfolg voranzutreiben, ist ein eng integriertes Markenimage, das unwiderruflich in seinen Produkten, Werbespots, Webseiten und sogar in den Filialen verankert ist.
Da wir Apple.com als den vielleicht prominentesten und häufig aktualisierenden Impuls für die visuelle Marke von Apple betrachten, kann ich nicht anders, als mich über die Reise zu wundern. Wie hat sich diese Marke entwickelt? Wie sahen frühe Versionen von Apple.com aus? Waren sie ähnlich? Haben sie die gleiche einfache Ästhetik gemeinsam oder waren sie eher geneigt, die geschäftigen Webdesign-Stile aus einem Jahrzehnt zu reflektieren?
Apple im Druck
Um ein Gefühl für die Markenentwicklung von Apple zu bekommen, sollten wir kurz die Zeit vor Apple.com in Betracht ziehen. Jobs hat bei der Entstehung des Unternehmens immer Wert auf Einfachheit gelegt. Dieser Begriff hatte jedoch damals eine ganz andere visuelle Übersetzung. Mac Mothership bietet eine reizvolle Sammlung von Vintage-Anzeigen von Apple, die uns einen Einblick in das Markenimage von Apple in den späten 70er Jahren ermöglichen. Wie Sie sehen, ist es weit von Apple.com entfernt.
Diese Anzeigen sind mit Verkaufsgesprächen und Informationskopien gefüllt. Dies kann ein notwendiges Übel für neue Produktkategorien sein, geht aber darüber hinaus. Sogar die Logos zeigen eine Weiterentwicklung von Apples Definition von sich. Das Original auf der linken Seite ist eine sehr komplexe Abbildung von Newton unter einem Baum, die aktualisierte Version auf der rechten Seite ist ein bunter Regenbogen, der über die Seite schießt. Beide sind weitaus komplexer als das einfache und allgegenwärtige Symbol, das wir heute sehen.
In den nächsten zwanzig Jahren würde Apple mit großzügigen Mengen an Whitespace flirten, aber nur kurz zwischen Anzeigen, die denselben grundlegenden kopierreichen Ansätzen folgten, die wir oben sehen.
Man könnte sagen, dass der wichtigste Schritt in Richtung auf die Schlichtheit der Marke Apple, die wir heute kennen, von TBWA \ Chiat \ Day stammt, der Agentur hinter dem ursprünglichen Macintosh-Werbespot von 1984 und einer der bekanntesten Werbekampagnen aller Zeiten: Think Anders.
1997 hatte Apple seine Identität gefunden. In mehr als einem Jahrzehnt ist die Think Different-Kampagne keinen Tag älter geworden. Es fühlt sich nicht wie die Originalanzeigen von Apple veraltet an, sondern ist zeitlos und mächtig genug, um viele nachfolgende Generationen zu beeinflussen.
Zurück zum Web
Think Different hat alles für Apple verändert (diese Gebühr wurde natürlich durch die Rückkehr von Jobs in den Jahren 1996-97 verursacht). Es bot nicht nur Apple, sondern auch seinen Kunden eine erstaunliche Identität. Optisch hat es Apples Markenstil zu dem gebracht, was wir heute kennen.
Nirgendwo ist das deutlicher als auf Apple.com. Mit der wundervollen Zeitmaschine von The Internet Archive können wir in die Anfänge von Apples Website zurückkehren. Think Different schlug 1997 aus. Wenn sich unsere Prämisse als wahr herausstellt, sollten wir dies als ein Jahr der Veränderung für die Website betrachten. Hier ist ein Blick auf Apple.com um die Mitte des Jahres 1997:
Nicht ganz so, wie man es von Apple erwartet? Wie bei den frühen Print-Anzeigen sehen wir hier den Typ und viele davon. Um ehrlich zu sein, im Vergleich zum damaligen allgemeinen Zustand des Webdesigns, war dies tatsächlich ein ziemlich minimales Design. In der Tat ist alles schön angelegt, aber es gibt eine Menge Inhalt. Was Sie im Screenshot nicht sehen, ist, dass diese Nachrichtenabschnitte kilometerweit laufen (klicken Sie hier für die Live-Version).
Denken Sie daran, dass dieses Design vor dem Denken anders ist. Die früheren Apple.com-Designs haben diese Ästhetik geteilt. Lassen Sie uns jetzt zum Mai 1998 springen, der ersten In-Takt-Website, die ich nach dem Think-Different-Format gefunden habe.
Der Unterschied zwischen den beiden Ästhetiken ist unglaublich, sie scheinen nicht einmal von derselben Firma zu sein (seien wir ehrlich, sie sind es wirklich nicht). Wo wir früher Unordnung und eine Fülle von Informationen gefunden haben, finden wir jetzt Leerzeichen. Tonnen und Tonnen Leerraum. Wo wir früher eine Seite gefunden haben, die kilometerweise gescrollt wurde, finden wir jetzt Kürze.
Die einfache Überschrift lautet "Apple". Die Produktaufnahme hat sich zum Helden entwickelt und es gibt sogar eine beeindruckende Animation des iMac, der sich durch das Wunder der animierten GIF in Position bringt.
Denke gleich
Der erstaunlichste Teil des Designs von 1998 ist für mich, wie ähnlich es ist, was Apple derzeit für 2012 verwendet! Die Typografie, das Logo und Farbspritzer dienen als wichtige Design-Lektion in Bezug auf die Art der Elemente, deren Alterung im Laufe der Zeit zu erwarten ist. Das grundlegende Layout hier ist jedoch schockierend nahe an dem, was wir heute auf Apple.com sehen.
Der obere Teil der Site ist für die Hauptproduktfunktion reserviert (in diesem Fall der ursprüngliche iMac), und der untere Teil ist in einige horizontale Rechtecke mit anderen wichtigen Produkten unterteilt.
Hauptunterschiede
Wie bereits erwähnt, ist die Typografie ein Hauptelement, das sich in dieser Entwicklung auszeichnet. Es gibt einen Grund, warum wir Sans-Serif-Schriften als "modern" bezeichnen. Sie können deutlich sehen, wie die aktuelle Schriftart von Apple ihre Designs im Vergleich zu den klassischen Old-Style-Serifen von 1998 vorwärts bringt.
Eine der wichtigsten Änderungen, die ich hier sehe, ist die Navigation. Beachten Sie, wie weit unten die Seite ist. Heutzutage sind wir so an die Navigation nach oben gewöhnt, dass dieses Design sicherlich viele Benutzer für eine Schleife (vielleicht sogar eine unendliche) wirft. Apple hat offensichtlich gelernt, dass die Unterstützung, die Sie auf die Website bringen möchten, buchstäblich oberste Priorität hat.
Eine sehr wichtige Komponente des Layouts, die Sie nicht aus dem Screenshot oben erhalten, besteht darin, dass der Inhalt mit fester Breite auf der linken Seite des Bildschirms angezeigt wird. Heutzutage zentrieren moderne Websites ihre Layouts normalerweise so, dass der Ursprung in der Mitte des Browserfensters liegt.
Erwähnenswert ist auch der Apple-News-Feed, der jahrelang ein fester Bestandteil der Website war und erst Anfang dieses Jahres entfernt wurde.
Vorwärts bewegen: 1999
Im Oktober 1999 verwendete Apple noch das gleiche Design. Die Produkte werden weiterentwickelt, aber das Seitendesign ist fast genauso wie im Vorjahr. Beachten Sie den Appell an Pixars Toy Story 2 direkt auf Apple.com. Können Sie sagen, dass Steve an der Spitze beider Unternehmen steht?
Beachten Sie auch eine große Änderung im Logo, inzwischen hat Apple den Regenbogen zugunsten eines festen weißen Apple getötet. Apple würde sich als starker Führer in einer Bewegung zur Logo-Vereinfachung erweisen, die bis heute andauert. Mehr darüber lesen Sie in unserem Artikel, Pepsi vs Coke: Die Kraft einer Marke.
2000
Wenn wir Mai 2000 erreichen, sehen wir einige große Veränderungen. Für den Anfang ist das gesamte Layout jetzt im Browser zentriert. Außerdem wurde die Navigation schließlich ganz nach oben verschoben und ähnelt stark der von Apple mit OS X bekannten Aqua-Style-Oberfläche. Beachten Sie, wie kompliziert die Navigation mit den beiden Linksebenen ist.
Glänzende Schaltflächen und Registerkarten waren eine gewaltige Bewegung im Webdesign und waren der Standard "cool". seit einigen Jahren. Die aktuelle Besessenheit des Webdesigners mit einfachen, minimalen Tasten mit flachen Farben oder dezenten Farbverläufen ist eine direkte Antwort auf diesen eher kunstvollen Stil
2001
Schneller Vorlauf bis November 2001 und wir sehen einige wichtige Sprünge. Der Aquastil hat seinen Weg in den News-Feed gefunden, der Serifenlosentyp beginnt sich zu etablieren (beachten Sie den Unterabschnitt) und die Inhaltsfelder haben sich dramatisch entwickelt. Wir haben den Sprung von vier auf drei statt drei gemacht, und die Boxen sind jetzt völlig unterschiedliche Formen mit abgerundeten Ecken, wie wir sie in den Registerkarten oben sehen. Sie sind heute immer noch rund, aber Apple hat den Grenzradius dramatisch zurückgezogen.
Obwohl Adobe im Mittelpunkt dieses Screenshots steht, war 2001 aufgrund der Veröffentlichung von iTunes und des iPod ein enormes Jahr. Dies ist der erste Vorstoß einer Generation nicht traditioneller Geräte, die das Unternehmen völlig neu definieren würde. Dies war auch das Jahr, in dem sie den Sprung auf OS X vollzogen hatten. Dies war ein entscheidender Schritt hin zu einem viel benutzerfreundlicheren und intuitiveren System, das sich als hilfreich erweisen könnte, wenn Windows-Benutzer von der Liebe zum iPod angezogen würden.
2004
Ende 2004 hatte Apple mit dem Hervorheben des Hauptinhaltsbereichs mit einem einfarbigen abgerundeten Eckfeld begonnen. Normalerweise sieht man diese Box in Schwarz, was für einen schönen Kontrast zum weißen Hintergrund sorgt, aber die bunte Werbung des iPods war eine Gelegenheit, die Seite lebendig zu machen.
Ein weiterer sehr wichtiger Aspekt des Designs von 2004: Sie haben den Sprung zu allen serifenlosen Typen geschafft. Dies ist ein wichtiger Meilenstein bei der Weiterentwicklung von Designtrends.
2005
Das Flirten mit Schwarz im Jahr 2004 führte zu einem großen Experiment für die Veröffentlichung von Tiger im Jahr 2005. Hier sehen wir den größten Teil der Apple.com-Startseite in Schwarz. Ein Trend, der sich auf viele Produktseiten auswirkt.
Eine sehr große Sache im Jahr 2005 waren Produktreflexionen, die unten auf dieser Seite mit den iPods sichtbar sind. Ich erinnere mich ganz genau, wie ich diese gesehen habe und sie sofort für die Projekte, an denen ich gerade arbeitete, abgerissen hatte.
2007
Die Trends von Apple blieben für die nächsten Jahre ziemlich statisch. Erst Ende 2007 machten sie einen großen und sehr willkommenen Sprung in Richtung der heute bekannten Website.
Die Homepage der Website wurde komplett überarbeitet. Sie haben den Inhalt erheblich erweitert und die alte Aquanavigation zerstört. Sie wurde durch eine stark vereinfachte Version ersetzt, wobei die sanften Farbverläufe verwendet wurden, von denen ich bereits erwähnte, dass sie für die meisten Designer dem Aquatrend folgen würden. Die erweiterte Breite des Inhalts ist sicherlich auf die Breitbildschirme zurückzuführen, die auf den meisten Desktops und Notebooks vorhanden waren. Es ist sehr wichtig, auf Hardware-Entwicklungen zu achten, die Einfluss auf die Entwicklung von Benutzeroberflächen haben können und sollten.
Beachten Sie auch, dass sich die Suchleiste schließlich oben auf der Seite befindet. Dies war ein zu langer Nachschub, der viel zu lange in den Boden geworfen wurde, und es war großartig zu sehen, dass es endlich die Aufmerksamkeit und Prominenz erhielt, die es verdient hatte.
2011
Apple fand seinen Schritt mit dem vorherigen Design und blieb bis Januar 2011 weitgehend unverändert, ein eindrucksvoller Durchlauf für jeden Standard!
Anfang dieses Jahres sahen wir, wie Apple einen Schritt zurückkehrte und die Navigation wieder glänzend machte, wenn auch ein aktualisiertes dunkles Finish. Sie begannen auch mit etwas subtilem Hintergrundgeräusch zu experimentieren, ein schmerzhafter Schachzug, der meiner Meinung nach das typische Designerteam so erscheinen ließ, als ob sie auf populäre Trends sprangen, die von unzähligen anderen vor ihnen gesetzt wurden. Klicken Sie auf das Bild, um die Textur ganz nah zu sehen.
Was kommt als nächstes?
Es ist schwer vorherzusagen, wohin Apples Homepage als nächstes gehen wird, aber wir sehen einige interessante Experimente auf der Website. Trotz der Tatsache, dass die Homepage die Rauschtextur verloren hat, hat die aktuelle iPhone-Seite eine viel stärkere Implementierung eines strukturierten Hintergrunds mit einem Inset-Produktbereich eingeführt.
Es gibt auch einige wirklich beeindruckende Animationen des iPhone, die in und aus dem Blickfeld fliegen.Diese ersetzen die animierten GIFs von 1998 durch moderne Webtechnologien. Der Kern der Idee ist jedoch auf jeden Fall derselbe.
Wird Apple künftig zu alten Tricks wie animierten Produkten und glänzenden Tasten zurückkehren? Und werden sie bei der Umsetzung von texturierten Hintergründen stapfen und vielleicht mehr Texturen einführen, die wir in iOS sehen? Deine Vermutung ist genauso gut wie meine!
Fazit
Diese Studie über die Entwicklung von Apple.com ist so viel mehr als nur ein Blick in die Launen eines einzelnen Unternehmens. Sie ist eine wichtige Lektion für mehrere wichtige Trends im Webdesign für alle Unternehmen des letzten Jahrzehnts. Wir sahen die Vereinfachung der Layouts und die Reduzierung des Textes, den Aufstieg des serifenlosen Typs und die mehrjährige Liebesaffäre mit Glanz, mit der wir heute trotz der daraus resultierenden Wiedergeburt des Minimalismus immer noch spielen.
Wir können leicht andere Trends erkennen, z. B. die zunehmende Bedeutung von Suchleisten, die Erkenntnis, dass die Navigation prominent und leicht zu finden sein sollte, und der Reichtum, den neue Web-Technologien in einer Zeit nach Flash zum Webdesign bringen. Apple war dafür verantwortlich, HTMl5 und CSS3 vielleicht offener voranzutreiben als alle großen Tech-Unternehmen, die direkt gegen Adobes Regierung vorgegangen sind.
Ein großes Dankeschön an die Leute von Internet Archive für die Erhaltung dieser und zahlreicher anderer bedeutender Stücke der Designgeschichte. Ich freue mich sehr darauf zu sehen, ob Apple in den kommenden Jahren als Führer oder Nachfolger bei Trends im Webdesign fungieren wird.