Modul în care Apple a influențat designul web de-a lungul anilor

Apple este una dintre cele mai mari branduri din lume și cu această popularitate vine o mare influență? Poate că mai mult decât orice altă companie din lume, Apple a jucat un rol foarte important în modul în care produsele, aplicațiile și site-urile sunt proiectate. În acest articol, vom discuta stilul general de design al Apple și modul în care a influențat o mulțime de alții.

O mare parte a campaniei de marketing globale a Apple vine de la site-ul lor foarte popular la Apple.com. Alexa se clasează pe acest site ca pe o popularitate de # 32 - ceea ce o pune în fața unor site-uri precum BBC, Craigslist și PayPal - nu este rău pentru un site care este în principiu doar un magazin on-line pentru o singură marcă.

Site-ul Apple a câștigat o reputație pentru identitatea mărcii sale atrăgătoare și pentru aspectul curat. Datorită acestei reputații, a influențat un val de alte site-uri care să-i urmeze exemplul. Stilul de design al Apple este unul care se extinde de la designul produsului și ambalarea până la modul în care widget-urile barei laterale de pe site-ul lor sunt desene sau modele?


Apple Time Travel Time

Acest articol se va concentra mai ales pe cele mai recente iterații ale site-ului Apple? dar înainte de a ne sapa prea mult, sa facem o vizita la Apple.com de-a lungul anilor (prin curtoazia lui WaybackMachine). Lucrul important pe care trebuie să-l amintim aici este că Apple.com, la fel ca și restul internetului, a început destul de urât prin standardele de astăzi. Faceți clic pe fiecare imagine pentru a vedea captura reală din drum?

1996


Da? stiu?

1999

2000


2000 a marcat introducerea filelor iconice "bule"? care ar rămâne în jur de mult timp.

2001

2004

2006


Până în 2006, multe dintre stilurile asociate cu modernul "Apple" estetic au început să se formeze pe site-ul lor.

2008

Bine, acum că v-am parcurs pe site-ul Apple în ultimii 15 ani, să săpăm în ceea ce a făcut-o atât de incredibil de influentă în recentele iterații ale site-ului lor.


Mai puțin este mai mult

Cea mai mare caracteristică a designului web influent al Apple este minimalismul său. Apple îl păstrează simplu prin utilizarea unor suprafețe mari de spațiu alb și margini mari pentru a se concentra pe anumite zone de conținut.

Pagina de pornire a Apple are în mod normal un produs mare, împușcat cu un singur slogan și alte câteva pagini legate sub podea. De exemplu, la momentul scrierii, Apple are o imagine mare a iPad-ului de a doua generație de la Apple, cu un titlu mare și sub titlul.

Gândirea presupusă în spatele acestei alegeri de design este că Apple nu dorește să împingă totul pe tine imediat. În schimb, ei doresc să faceți clic pe pagina de produs individuală unde pot afișa mai multe informații. Luați această abordare în contrast cu pagina de pornire a Microsoft. De asemenea, Microsoft are o imagine mare, dar pagina este înghesuită cu mai multe anunțuri, iar evidențele din partea de jos sunt chiar mai greu de citit.


Informații organizate

Există câteva zone ale site-ului Apple care trebuie să transmită o mulțime de informații dintr-o dată. Ar fi deranjant pentru uzabilitate dacă ar fi fost împărțită. Cu toate acestea, aceste zone sunt încă foarte clare și organizate, datorită faptului că acestea sunt limitate la o rețea.

Site-ul iPod-ului actual al Apple are o imagine erotică glisantă, cu trei cele mai mici, poziționate mai jos. Acest trio se distruge apoi în alte șase elemente care creează un sens ierarhic. Apple prezintă cel mai important produs (și coincidențial, scump) produs în partea de sus și prezintă produsele mai mici de mai jos (cum ar fi actualizările software și accesoriile).

Acest efect piramidal este evident pe site-ul Apple.


Marcă consecventă

Pentru majoritatea mărcilor, importanța vânzării cu amănuntul este un mediu de publicitate vital. Oamenii ar putea ridica produsul dvs. într-un raft de magazin și vor scana ambalajul pentru informații. Experiența cu amănuntul a Apple este foarte diferită și, din moment ce nu vedeți produsul înainte de a cumpăra (în aproape orice locație), nu este nevoie să umpleți ambalajele cu text și grafică publicitară.

Cu toate acestea, interesant este că site-ul Apple este proiectat în același mod, minimalist. Stilul Apple este văzut în toate proprietățile fizice și virtuale, astfel încât să puteți identifica o cutie Apple (sau chiar un produs) ca Apple, la fel cum ați putea face un site web.


Shoturi de produs

Așa cum am menționat anterior, Apple utilizează în principal fotografii singulare și mari ale produselor sale în loc de mai multe, mai mici. Pe măsură ce vizitați una dintre puținele pagini ale produselor, imaginea se află în centrul atenției înainte de a menționa orice preț, caracteristici sau disponibilitate. Această tehnică particulară joacă foarte bine în teoria generală a ierarhiei vizuale prin aducerea produsului în primul rând.

Această teorie este foarte simplă, dar foarte eficientă în formarea unei imagini bune a unui produs ca o primă impresie.


Animație și interactivitate de la noile standarde Web

După cum veți ști, Apple este un crusader pentru noile standarde web, cum ar fi HTML5. Site-ul propriu reflectă acest lucru prin oferirea unei selecții de interactivitate oarecum inedită prin utilizarea tehnologiilor web non-Flash.

De asemenea, stim prima mana ca Flash este primul motiv pentru care Mac-ul a fost accidentat.

Aceste zone mici de animație, de asemenea, par extrem de funcționale în comparație cu omologii lor flash. Banda de dispariție a Flash-ului crește în fiecare zi, iar utilizarea mea de Chrome demonstrează în mod regulat căderea plugin-ului popular al Adobe. De fapt, înălțimile oferite de Flash înainte HTML5 sunt reproduse cu o mai bună compatibilitate în cea de-a cincea revizie a HTML.

Boicotatul virtual al Flash este ceva ce Apple nu influențează de pe site-ul lor. În schimb, este o demonstrație a ceea ce se poate obține doar cu tehnologiile compatibile cu dispozitivele mobile Apple.

Site-ul iPad 2 al Apple prezintă un demo interactiv al accesoriului Smart Cover, în care utilizatorii pot schimba culoarea iPad-ului și a carcasei, și glisați sau trageți (în funcție de dispozitiv) pentru a desface capacul. Și nici o clipă!

icoane

Pe măsură ce navigați prin site-ul Apple, veți observa că cele mai multe dintre punctele de marketing au asociate imagini care dau o mică viziune în driblingul de marketing plictisitor. De exemplu, site-ul Apple Mac OS X (ilustrat mai jos) utilizează o pictogramă mare lângă secțiunea de 64 de biți a sistemului de operare. Restul punctelor Apple are fiecare pictogramă proprie.

Pe măsură ce ajungeți mai adânc în site-ul Apple, icoanele încep să devină mai evidente. Când Apple încearcă să demonstreze că această interacțiune a software-ului lor este cu 40% mai rapidă, ei folosesc o imagine pentru a evidenția acest lucru. Acest lucru sparge conținutul și adaugă o mică culoare suplimentară designului Apple, altfel simplu.

Există o pictogramă pentru asta.

Interfata Influenta

Site-ul Apple este un lucru care formează o mare influență a designului, dar software-ul are un efect similar. iOS utilizează o serie de elemente de interfață unice care au devenit vizibile atât pe aplicațiile web cât și pe site-uri web. De exemplu, comutatorul cursor de comutare al iOS poate fi văzut într-o selecție de aplicații web care utilizează stilul pentru a activa sau a dezactiva o acțiune.

Apple a pionierat o nouă vârstă de proiectare a interfeței cu utilizatorul, una care este curată și ușor de folosit. Influența aplicației UI a Apple se traduce într-o experiență extraordinară pe aplicațiile web care au luat ideea unei interfețe minimaliste, simpliste, cu funcții cheie fiind ușor de identificat prin tipul de element utilizat. Dacă vedeți un comutator de comutare, știți că are două funcții cheie - cel mai probabil pornit și oprit.

În timp ce elementele UI reale generează o influență proprie asupra aplicațiilor web, stilul curat, minimalist al UX poate fi de asemenea văzut ca având un impact asupra designului. Totul, de la pictograme la gradient peste meniuri în Mac OS X arata grozav. Gradienții subțiri demonstrat în imaginea de mai jos fac ca designul să arate mai puțin decît plat și să-mi amintească o mare parte din gradientul curat al Chrome pentru Mac pe partea de sus.


Exemple de modele inspirat de Apple

Următoarele exemple reprezintă o eșantionare foarte mică a varietății largi de site-uri care au fost direct influențate indirect de abordarea Apple față de designul web.

MacRabbit

Pagina de produs a MacRabbit influențează designul elegant și monocromatic al Apple și stilurile interfeței. De asemenea, rețineți că aceleași aplicații și logo-uri de asistență sunt utilizate aici ca pe Mac OS X.

Tapbots

Observați că Tapbots utilizează aceeași imagine de erou dominantă de pagină, urmată de trei aplicații mai mici prezentate mai jos.

Pixelmator

Icoanele reprezintă o altă caracteristică importantă în designul web al Apple. Există o mulțime de icoane bine concepute și frumoase care se găsesc pe Apple.com, iar site-ul Pixelmator arată câteva altele. Există câteva icoane făcute de Apple, dar cele mai originale sunt și se joacă frumos cu umbrele textului.

Simfonie

Simfonia demonstrează același aspect Z, așa cum este folosit pe paginile individuale ale produselor Apple, cu logo-ul din stânga, urmat de navigație, urmată de imaginea de erou mare.

Cultul lui Mac

Ca un blog Apple, Cult of Mac are multe repere de design de la marele A în sine. Aceleași gradiente subtile sunt utilizate în setul de posturi recomandat, iar cele mai întunecate ale barei de meniu.

Gibson

Să te uiți la Gibson arată un fel de influență a Apple. Totul de la trio-ul Apple-ish de imagini prezentate în partea de jos pentru a fi inclus pe fiecare "Apple-infinite web desene" roundup pe net striga Apple.

Verifică

Site-ul promoțional al aplicației Checkout încorporează multe din principiile de proiectare ale Apple în joc, incluzând grădini gri, fotografii mari de produse și chiar ticker-ul stilului Apple News.

versiuni

Versiunile sunt un design web întunecat, dar unul care folosește bine teoria spațiului alb. În timp ce spațiul în sine nu este alb, se folosesc cantități mari de spațiu gol. Pictogramele personalizate sunt, de asemenea, folosite pentru a demonstra conținutul.