Det finns ingen brist på företag som följer populära designtrender för att överklaga till en massmarknad. Mycket mer sällsynt är den ras av företag som faktiskt sätter designtrender. Idag ska vi undersöka teknikerna för ett företag som upptar toppen av designens matkedja: Apple.
Nedan hittar du 15 praktiska sätt att följa Apples exempel på att skapa vackra gränssnitt.
# 1: Håll det enkelt
Ta en titt på Apples hemsida och fundera inte på vad du ser, men vad du inte ser. Jag ska ge dig en ledtråd, det är över hela denna sida (nej inte den här sajten, klicka på länken dumt). Svaret är givetvis visuell rörelse. En hemsida ska berätta för användarna allt om ditt företag, att kommunicera alla dina produktkategorier i detalj, för att lista oändliga funktioner och att visa upp din logo så stor som möjligt. Höger? Enligt Apple: fel.
Apples hemsida visar helt enkelt sitt senaste arbete och ger dig några lätt förstådda kategorier för att hjälpa dig att komma till den information du vill se. Beviljas, oddsen är att du inte designar för ett anmärkningsvärt allestädes närvarande företag som inte behöver introducera. Du kan dock fortfarande använda minimal men attraktiv design för att öka användbarheten.
Tänk dig att du kör upp till en flygplats. När du kör längs du träffas samtidigt med fem eller sex skyltar som innehåller kartor med platserna för allt från terminaler helt ner till handikapptillgängliga toaletter. Argumentet kartdesignern skulle göra är att han gav dig all information du behövde för att komma överallt du ville gå. Du skulle utan tvekan kasta tillbaka att hans fel var att ge det till dig på en gång som du körde vid 20 mph. Föreställ dig nu att du är på Sky Harbor, Phoenix Arizona är anmärkningsvärt lätt att navigera flygplatsen. När du drar in ser du ett tecken som säger? Hej, välkommen till Sky Harbor. Det finns tre terminaler ?. Sedan när du kör längs, når du fler skyltar, var och en med en kort beskrivning av vilka flygbolag som flyger till varje terminal och var du ska gå för ankomster eller avgångar. Känslan du får när du kör in i Sky Harbor är? Wow, det här är enkelt !?
Apple tar samma tillvägagångssätt för gränssnittsdesign. Snarare än att slå på dig med allt de har i användbarhetens namn, använder de mindre bitar av information för att leda dig till den plats som håller innehållet du är riktigt efter. Titta på webbplatsen du jobbar med och fundera på hur du kan bryta komplex information upp i mindre bitar som användaren inte hittar överväldigande.
# 2: Använd fantastiska produktbilder
En av Apples principiella skäl att skära tillbaka på överflödig grafik på deras webbplats är att verkligen visa upp vad som är viktigt: deras produkter. Titta bara på de bilder de använder. Det är nästan omöjligt att titta på en sida på Apple-webbplatsen och inte få dina ögon att fokusera på produkterna i några sekunder i slutet.
Det finns flera saker som gör att dessa produkter ser så otroligt ut. Det första är att de är uppenbarligen orörda. Krita den här till digital bildbehandlingsexperter. Jag har inte sett exakt hur de gör det, men kombinationen är sannolikt en blandning av fotografering, 3D-modellering (välj: Modo, Lightwave, Maya, etc.) och naturligtvis Photoshop.
Nästa sak de gör är att få dem att ta upp en stor del av sidan. Om du spenderar timmar som gör ett vackert paketskott och sedan storlek ner till en miniatyrbild, är det helt enkelt inte så överväldigande imponerande. Observera att Apple också ofta innehåller flera produkter arrangerade på ett attraktivt sätt som i bilden ovan.
Läran här är att inte bara ta ett foto på din produkt och kalla det en dag. Tillbringa tiden så att den ser fantastisk ut. Oavsett om det är en burk med refiterad bönor eller en Lexus, gör ditt bästa för att göra ett bra hjälte skott.
Tro inte på att du kan göra din icke-tekniska produkt så bra som Apple-saker? Kolla in vi skjuter burkar som bevis på att en begåvad konstnär kan få någon produkt att se bra ut.
# 3: Kontrast är nyckel
En annan sak som gör dessa Apple-produktbilder ser så darn bra ut är den enkla miljön de släpper in dem. Den mänskliga hjärnan älskar kontrast. Det är anledningen till att vi stirrar på bergskedjor och horisonten över havet. Det är också anledningen till att vi säger? Oooooohhhh? när vi ser en svart glänsande iPhone på en platt vit bakgrund. Du bör försöka tillämpa selektiv kontrast i varje enskild design du skapar. Leta efter möjligheter att använda kontrast med färg, storlek, typsnitt tjocklek och allt annat du måste arbeta med.
Apple tillämpar inte bara kontrast till sina produktbilder. Ta en titt på bilden ovan och fundera på vad som hoppar ut på dig. Det är förmodligen den stora blå nedladdningsknappen. Kryssning runt Apples webbplats och du ser att nästan varje gång de vill att du ska göra något (köp, ladda ner, etc.) använder de en ljusblå knapp för att fånga din uppmärksamhet.
# 4: Svett de små sakerna
Apple handlar om uppmärksamhet på detaljer. Varje liten bit av deras webbplats är finesserad till perfektion. Falla aldrig i fällan att säga? Ingen kommer att märka? eller? tillräckligt bra.? Det är ofta tidsmässig tid på de minsta detaljerna som skiljer de goda designersna från de stora.
Köp inte i det lilla greppargumentet? Kolla in de sociala medielogotyperna på Microsoft Office-hemsidan och berätta för mig att de inte gör dig kramad.
Personligen har jag vektorfiler av var och en av dessa logotyper. Nu om jag kan göra det, tror du inte att Microsoft-konstruktörer kunde ha tagit tid att spåra bättre versioner av dessa logotyper för att undvika det slarviga Photoshop Magic Wand-valet som de har pågått? Jag utmanar dig att hitta något som dåligt görs var som helst på Apples webbplats, mycket mindre på målsidan i en av deras mest populära programvaror.
# 5: Undvik Flash
Jag har aldrig varit en att gå med i Flash hater publiken, men faktum är att publiken växer. Ledande massorna är ingen annan än Apples vd och världsberömda tekniken clairvoyant Steve Jobs. Kolla in det här utdraget från en nyligen artikel i artikeln:
? Om Adobe: De är lata, säger Jobs. De har all denna potential att göra intressanta saker men de vägrar bara att göra det. De gör ingenting med de metoder som Apple tar, som Carbon. Apple stöder inte Flash eftersom det är så buggigt, säger han. När en Mac kraschar oftare än inte är det på grund av Flash. Ingen kommer att använda Flash, säger han. Världen flyttar till HTML5.? (Källa)
Det är starka ord från en man som är värd för ledarskap i teknikvärlden. För att vara ärlig talar mycket om vad han säger ringer sant. Online Flash-innehåll är verkligen inte den mest tillförlitliga tekniken där ute och är mycket beroende av extra programvara och aktuella plugins som användaren kanske eller inte kan ha. Vidare är HTML5 och CSS3 en inblick i en framtid där du kan uppnå en riktigt interaktiv multimediaupplevelse med en enkel, standardkompatibel kod.
Som utvecklare, om du går med i Apple i sin virtuella Flash-bojkott, kommer du förmodligen inte ångra det. Du behöver inte ens ta en aktiv hållning mot Flash så mycket som att helt enkelt undvika att använda så långt det är möjligt. Du är ganska säker på att ha mycket mindre huvudvärk från användare som inte kan visa ditt innehåll.
# 6: Gör det vänligt
I åratal var Apple märkt som en kult som var allt annat än vänlig. De har verkligen försökt rensa den här tanken de senaste åren genom att omstrukturera sin bild för att vara mer tillvägagångssätt. Den mest märkbara platsen du ser här är i "Få en Mac? annonser. Mac-skivan är porträtt som en vanlig kille varje dag medan datorn är den där ute? affärsman som alltid är okej bra. Subliminalt säger dessa reklamfilmer att Apple verkligen är ett öppet samhälle och alla från tonåringar till mormor kommer att passa rätt in.
En annan sak de har gjort är att förbättra deras tidigare abysmal tech support rekord. Nu kan någon i en storstad bara göra ett möte i Apple Store för ett gratis konsult för att ta itu med eventuella problem och / eller frågor som kunderna kan ha.
Alla dessa tekniker förstärks av grafik av vänliga, leende ansikten. För närvarande har Apple-butiken i närheten av mig ett dussin kartongutskärningar från Apple-anställda i fönstret som om du vill säga? Kom igen, vi hjälper dig gärna.? Du kan också se dessa leende anställda på några ställen på Apples webbplats, som visas i bilden ovan.
Vad Apple gör är att skapa en balans mellan fantastisk men icke-personlig teknikbaserad design och tilltalande leende ansikten. Oavsett vad du säljer, överväga om det är lämpligt att se det mer vänligt och tänka på vad du kan göra för att få det där. Även en enkel? Hej? i en rubrik kan gå långt.
# 7: Använd ett starkt nät
Bilden ovan talar för sig själv. Varje sida på Apples webbplats följer en strikt nätstruktur. oavsett om det är enkelt eller komplicerat, det är där. Syftet? Kolla in hur mycket information de kasta på dig på sidan ovan. Det är helt enkelt ett ton på gång, men det verkar på något sätt istället för överväldigande.
Att bryta sporadisk information upp i hanterbara celler minskar drastiskt visuell rodnad och förvirring. Observera att varje cell också innehåller en visuell referens för att följa textbeskrivningen. Dessa visuella referenser ser alla väldigt ut och passar in i det övergripande Apple-temat. Även om du använder stockbilder, försök att behålla ett liknande tema så det finns ingen synlig skillnad i bilderna spridda över hela sidan.
# 8: Skapa instruktionshjälpmedel
För att förstärka meddelandet om att musens topp är faktiskt en multi-touch-yta skapade Apple ovanstående illustration. Även utan rubriken skulle nästan alla kunna förstå vad som händer i bilden och förstår följaktligen hur man använder en helt ny teknik som de är helt okända med.
Apple går ännu längre än illustrationerna. Nästan varje bit av hårdvara och mjukvara på deras webbplats har en medföljande video som visar hur det fungerar. Detta går långt för att minska tekniska supportfrågor. Jag hänvisar ofta till mina vänner (som alla har konverterat till Mac på grund av mig och därför ser mig som gratis teknisk support) till dessa videoklipp, eftersom de ger en mycket rikare och lättare att förstå erfarenhet än en telefonsamtal någonsin kunde. Kolla in Apples bibliotek med instruktionsvideor för att se hur bra de är för dig själv.
# 9: vara konsekvent
Bilden ovan är en skärmdump av iTunes Store. Ser bekant ut? Om du tänker ser det ut som Apple.com, har du rätt. Ta en titt runt Mac OS X, speciellt i Finder. Återigen ser vi starkt nätbaserad design, massor av vita metalliska texturer och blå som en uppmärksammare (i val). Och äntligen, titta på hela Apple-maskinvaran för att se dessa texturer och designelement som tagits in i den verkliga världen.
Apples generella utseende eller? Varumärke essens? appliceras över varje enskild sak de designar. Det är ganska fantastiskt när du inser hur mycket deras programvara faktiskt ser ut som deras hårdvara. Hur mycket mer integrerat kan du få? Om du någonsin har till uppgift att jobba med att utveckla ett varumärke, titta på varje aspekt av företaget från annonser och webbplatser på tv-apparater ner till själva produkterna. Tänk på hur du kan integrera alla dessa olikartade element för att se ut som enskilda bitar av en sammanhängande helhet.
# 10: Inte bara en stor butik
Apple är en bra fallstudie på en framgångsrik e-handelsplats. Observera att hela webbplatsen är böjd för att påverka dig att köpa och utbilda dig om sina produkter.Webbplatsen känns dock inte som en stor butik.
Vad jag menar med detta illustreras i skärmbilderna ovan. Toppskottet är den dedikerade Time Capsule-sidan. Apple älskar att skapa vackra produktsidor med klara rubriker som informerar dig om hur bra deras produkter är. Observera att detta tekniskt inte är "butiken". Om du klickar på buy-knappen tas du sedan till sidan på den andra skärmen: den faktiska nätbutiken. Här har Apple helt tagit bort den visuella överklagan och fokuserat på användbarhet. De ger dig den information du behöver utan distraheringar och gör det enkelt att köpa ett objekt med några få klick.
Om du gör en onlinebutik kommer din första idé förmodligen att göra just det: bygga en butik. Om du har tid, budget, frihet, etc., överväga att bygga en webbplats för att visa upp föremålen i affären på ett sätt som helt enkelt inte skulle vara effektivt i affären själv. Skapa vackra dedikerade sidor som verkligen ökar din produkt och inkluderar en? Köp nu? länk som tar kunderna till den visuellt tråkiga men mycket praktiska butikssektionen på webbplatsen.
# 11: Var säker
Låt oss möta det, Apple-produkter är ganska fantastiska. Klicka runt Apples webbplats i några minuter och du hittar dem inte exakt ödmjuka om detta. Deras rubriker är fyllda med adjektiv som vackra, kraftfulla, roliga, revolutionära, lättanvända och avancerade. Deras produktbeskrivningar informerar dig om att objektet är det bästa som finns i sin kategori. Om du överanalyserar det kan det hända att det här är lite häftigt. Men som en avslappnad besökare skulle du förmodligen bara bli imponerad.
Oavsett om din webbplats marknadsför en produkt, tjänst eller helt enkelt en idé, sälja inte dig själv kort. Använd aldrig ordet bra? när du kan säga? bra? säg aldrig? attraktivt? när du kan säga? vacker.? Om du är säker på din produkt, strävar du verkligen efter att kommunicera med dina besökare. Du kommer att upptäcka att det kommer att rubba bort på dem och att de i allmänhet kommer att ha ett mycket mer positivt första intryck om allt på din webbplats är inriktad på att övertyga dem hur bra du är.
Som något är det förstås en brytpunkt. Ha någon som inte är inblandad på webbplatsen läs över din kopia för att se till att du inte häller på självkänslan så tjock att det blir en irritation.
# 12: Lägg Legal Copy på den platsen
Den här är liten men viktig. Om du arbetar för ett företag som är tillräckligt stort för att ha en juridisk avdelning, vet du att folket i juridiska avdelningar arbetar hårt för att bevisa att de inte är värdelösa. Vanligtvis betyder det att du som designer skapar något, skicka det till juridiska avdelningen och få tillbaka ett 500-talsdokument fullt med extra innehåll som du enligt lag måste innehålla. Oundvikligen följer förbannelse.
Vad du gör med det här innehållet är viktigt. Tänk om det är information som användaren faktiskt vill veta eller om det bara är en ond nöd som ingen någonsin kommer att läsa. Om det är sistnämnden, ta en sida ur Apples bok (en bit från Apple så att säga) och kasta den längst ner på sidan i ett litet men läsbart teckensnitt som inte står i kontrast till bakgrunden för mycket. Ditt primära mål som anställd bör vara att göra detta innehåll tillgängligt, hittabart och läsbart. Men ditt mål som designer är att se till att det inte skruvar upp din design genom att fylla den med oväsentliga röran.
# 13: Omfattande Footer Site Navigation
Kolla in sidfoten i skärmdumpen ovan. Apple har omvandlat botten av varje sida till ett extremt användbart navigationsverktyg. Detta är ett utmärkt sätt att minska svårigheten att navigera på en stor webbplats. I stället för att fylla sin primära navigering med en länk till varje avsnitt på webbplatsen har de reserverat det för allmänna kategorier. Inom en kategori, om du rullar ner längst ner på sidan hittar du en mycket mer omfattande sidkarta i sidfoten.
Lägg märke till att de inte har gått ut ur deras sätt att få det att sticka ut. Det räcker att du kan upptäcka det om du letar efter något men subtilt nog att du inte ger det en ny blick om du inte behöver hjälp med navigering.
# 14: Skapa vackra anpassade ikoner
Med introduktionen av OS X tog Apple ikoner till en helt ny värld. Sedan dess har den fantastiska ikondesignen översvämmade operativsystem och spillts över på banan. Det finns dock några gratis ikonuppsättningar online som har nått en sådan berömmelse att de har blivit klich?
Så innan du går ner nedladdning av en uppsättning ikoner som ser ut som allt annat på webben, ge det en gå själv. Avfyra Photoshop och / eller Illustrator, damm av de här teckningsfärdigheterna och gör dig själv några bra anpassade ikoner. I slutändan kommer de verkligen att polera av dina webbdesigner. När du behärskar konsten att skapa en bra ikondesign, märker du att du är mycket mindre beroende av tredje partskonst för att producera fantastiska webbplatser (vilket är en riktigt bra sak). Om något, kommer du att spara de galna i juridiska avdelningen från att försöka lista ut de lagliga begränsningarna på alla de? Gratis? ikoner.
# 15: Interaktivt och dynamiskt innehåll
Nästan varje sida på Apples webbplats innehåller ett automatiskt bildspel, en animerad dragspelmeny, en video eller ett interaktivt fotogalleri. Målet är att hålla användarens uppmärksamhet. Statiskt innehåll kan vara lite på den tråkiga sidan och kan leda till att en användare lämnar platsen på jakt efter något mer intressant. Apple håller din uppmärksamhet genom att ge dig massor av sidor med ständigt skiftande innehåll eller bitar av interaktiva funktioner.
Denna typ av innehåll bör behandlas med stor försiktighet av flera skäl. Först och främst är det enkelt att lämna över hälften av dina besökare bakom om du programmerar i funktioner som kräver en speciell plugin.Försök hålla fast vid allmänt stödd teknik som fungerar över flera webbläsare. Det är också väldigt lätt att få bäras bort med dynamiskt innehåll. Det finns en extremt fin linje mellan iögonfallande och irriterande och du måste absolut lära dig var den linjen faller. Annars ger du besökare huvudvärk i stället för det goda intrycket du var på.
En sak till?
Sammanfattningsvis är Apple Inc. ganska mycket synonymt med stilren design. Det finns mycket vi kan lära oss av att observera dessa stora designers på jobbet som går långt bortom att bara rippa bort de snygga reflektioner de lägger på allt. Tipsen ovan är avsedda att tillämpas generellt på ditt eget arbete på ett unikt sätt. Använd dem som inspiration för att blåsa din egen väg i bra webbdesign.
När som helst som någon nämner Apple, är det bunden att vara evangelister och hatare, ivriga att dela sin odödliga kärlek eller djupt hat på Apples designmetoder. Använd kommentarerna nedan för att berätta vilken du är. Är du för minimalism blandad med blanka ikoner eller är du sjuk på webben ser du ut som en massa Apple Wannabes? Vi vill höra dina tankar.