Idag ska vi titta på webbdesignsätten och trenderna i det enskilt största namnet i programvaran för att se om vi kan lära oss något om några misstag att undvika i vårt eget arbete.
Känn dig fri att kommentera att du håller med eller håller med med nedanstående förslag. Som professionella designers är din insikt värdefull och jag ser fram emot dina tankar.
The Occasional Rant
Till alla som hatar artiklar fyllda med rants, ber om ursäkt att det här inlägget är lite svårt ibland. Jag föredrar normalt att lova bra design över att kritisera dåligt, men när David Appleyard och jag bestämde mig för att göra ett inlägg på designtrenderna i Microsoft så verkade det bara vara mycket mer att lära mig om de röriga, fula och / eller oanvändbara sakerna som de gör än alternativet.
För att skära av dig i kommentarerna kommer jag inte att nämna eller göra en enda jämförelse med Apple i analysen nedan. Detta är inte tänkt att vara ett PC-mot-Mac-argument i det lilla, utan snarare en titt på vad vi anser vara verkligt dålig praxis inom webbdesign och utveckling. I all rättvisa är Microsoft ett enormt framgångsrikt företag och är inte krävande misslyckande på grund av något av dessa problem. I själva verket, som vi påpekar nedan, verkar Microsoft verkligen ha några stjärnformgivare på laget för vissa webbplatser, vi föreslår att en högre grad av kvalitetskontroll genomförs över hela linjen.
Med det i åtanke, låt oss analysera några ställen som Microsoft tycks ha förkortat i sin design och utvecklingsmetoder och hur du kan dra nytta av denna kunskap.
# 1 Akta dig för att ange vissa pluggar
Om vi har lärt oss någonting från de senaste skavningarna mellan Apple och Adobe är det att skapa webbplatser som är helt beroende av stängda tredjeparts plugins kan så småningom leda till något allvarligt backfire. Microsoft verkar upprepa samma blunder som sitt eget nätverk av webbplatser blir mer och mer deponent på Silverlight.
När jag bläddrade Microsofts olika webbplatser som förbereder mig för denna artikel, blev jag ständigt trakasserad av Windows och informerade mig om att jag inte hade installerat Silverlight och därför inte kunde uppleva webbsidan så som det var meningen att det skulle ses. Min fråga är, varför gå denna väg ?? Speciellt när vi pratar om enkla bildspel och animeringar som kan göras med mer allestädes närvarande teknik. Beviljas, Microsoft äger Silverlight så att det ger god affärsintresse för att de ska säkerhetskopiera sin investering, men det betyder inte att det är det bästa valet för dig att hoppa på deras bandwagon.
Oavsett om du är ett stort fan av Silverlight eller inte, är mitt råd att vara extremt försiktig med att basera funktionaliteten på din webbplats på denna eller någon similarl-teknik. Eftersom debatten om huruvida det är meningsfullt att utveckla webbplatser med Flash fortsätter att värmas upp, blir andra i radsystem som Silverlight ännu mer av en gamble. Om möjligt, håll dig till kors-webbläsare, standardkompatibel kod och verktyg som inte kräver ytterligare arbete eller installationer från dina besökare.
# 2 Se din upplösning
Detta är en av mina största klagomål om Microsoft, helt enkelt för att det bara verkar som slarvig design. Det finns utan tvekan en bra linje att gå mellan att hålla din filstorlek nere för att öka användbarheten och hålla dina bilder rena och klara, men jag kan inte låta bli att känna att Microsoft verkar vara mer benägen att visa fula, skurna JPG än vad som helst bokstavligen någon annan professionell webbplats som jag har sett de senaste åren.
Den allt större minskningen av uppringda Internetanvändare fortsätter att trycka upp acceptabla bildstorlekar upp och uppåt. Det innebär inte att du inte bör vara noga med att göra allt så litet som det är rimligt, men det ögonblick som det börjar väga så tungt på designen att det dramatiskt minskar den uppenbara kvaliteten på webbplatsen blir bilderna självkämpande!
Du lever ut ren ironi om du använder bilder för att göra din webbplats ser bättre ut men slutligen minska din estetiska överklagande i processen. När det är möjligt, förhandsgranska dina bearbetade bilder på olika bildskärmar och var noga med hur mycket distorsion och artefaktion du tycker är acceptabel.
# 3 Organiserad Clutter
Ibland kan du följa alla de uppenbara designreglerna och ändå sluta med något som verkar visuellt subpar. Browser Microsofts webbplatser kom jag över otaliga områden som den nedanför som bara verkade röriga trots deras försök att kolonnbaserade organisationer.
Så vad är problemet? Enkelt uttryckt, det finns ett ton pågår i ett relativt litet utrymme här. Även trodde att de definitivt försökt ordna innehållet och förbättra visuell läsbarhet genom ikoner, är slutresultatet fortfarande ganska balanserat.
Om du tittar på vad som händer här känns det som fyra kolumner med information som utformats av fyra olika personer som har hopats ihop. Vänster sida verkar väldigt tung med bilder jämfört med höger, textfärgen är lite sporadisk, innehållet är besvärligt förskjutet och kolumnerna saknar tillräckligt med andningsrum för att få dem att verka som de oberoende områdena som de är.
Lektionen här är att vara försiktig med att packa ett enda område på din sida för full av olik information. Det finns otvivelaktigt många gånger när situationen kommer att kräva mycket innehåll, men organisationen bör hanteras på ett konsekvent och attraktivt sätt, vilket framgår av de vackra exemplen nedan (från webbplatser utanför Microsoft).
# 4 inkonsekvens
Starta från Microsoft.com, öppna de gigantiska navigeringsmenyerna och välj ett område på webbplatsen att besöka. Oavsett vilken länk du klickar kommer den resulterande sidan att se ganska annorlunda än hemsidan och olika fortfarande från de flesta andra länkar som finns tillgängliga i samma nedrullning.
Att utforska Microsoft-webbplatsen är som att spinna ett roulettehjul.Du har nästan ingen aning om var du ska landa och vad du kan förvänta dig från nästa sida. Vissa sidor har swooshy-bakgrund medan andra använder mjuka gradienter eller till och med exploderande cirklar. De flesta sidor verkar vara blåa men inte nödvändigtvis samma blåa och det finns också många sidor som helt och hållet ignorerar den blå trenden.
Poängen är, om din webbplats har två sidor eller tvåhundra, konsistens är ett måste. Det gör användarna bekvämare när de kan bli bekanta med hur en webbplats fungerar och ser inom några sekunder. Att ge dem något drastiskt annorlunda på några få sidor gör en mer förvirrande och mindre effektiv upplevelse.
utöver detta finns det tanken att skapa ett starkt och konsekvent varumärke är bara bra affärer, eftersom det hjälper kunderna att relatera till ditt företag på ett mer personligt sätt. Visst är Microsoft jonglering många olika märken och microsites som alla härrör från hemsidan, men även bland vad som kan betraktas som kärnan Microsoft.com-sidor verkar bildtema och navigeringsmetoder drastiskt olika.
# 5 Clipart-centrerad Design
Detta förslag är uppenbarligen lite absurt att se hur klippkonst och Microsoft Office alltid har varit oupphörligt sammanflätade. Men ikondesign har kommit långt sedan 1995 och det är dags att ge upp den specifika stilen i de bilder du använder.
Exemplen på den här arten som dras från olika Microsoft-sidor gör mig enkelt cringe, särskilt det hemska? Nybörjareutvecklare? logotyp. Jag har ingen aning om att en boomerang angriper en växt eller om den magiska svävardatorskärmen hjälper till i attacken eller flyr från scenen. Allt jag vet är att den visuella kommunikationen här är en oförklarlig röra.
Detta är en av de främsta orsakerna till CSS-gallerier som vår egen existens. Inte så att du kan stjäla andras design, men så kan du få en inblick i designens läge under det årtiondet du utvecklar. Bläddring genom dessa gallerier är att besöka populära klädbutiker i köpcentret för att visa din galna faster som hon behöver inte klä sig som någon från Sunny och Cher showen.
Känn dig alltid fri att bryta gränser och gå längre än nuvarande deisgn trender genom att starta din egen. Var bara försiktig med att stanna stubbigt stagnerande i flera år medan resten av världen går vidare.
# 6 Felaktig överflödig text
En annan trend som är svår att missa över Microsofts webbplatser är de ständigt trasiga kolumnerna av text som överflödar sina uppenbara gränser.
Den här är ganska lätt att fixa och behöver verkligen bara lite ansträngning och uppmärksamhet. Var noga med att dra nytta av gratis verktyg som Adobes webbläsarlabb för att se till att dina layouter inte bryts när de visas på några större webbläsare.
Även om CSS-layout är ett riktigt knepigt odjur när det gäller kryss-webbläsarens konsistens, innebär små misstag som detta verkligen din webbplatskvalitet och är värt felsökningstiden de tar för att lösa.
# 7 Dålig anpassning
Ibland presenterade en given sida mig med utmaningen att bestämma vilken designfolie som skulle påpeka. Till exempel på sidan nedan ansåg jag ursprungligen att använda en liten skärmdump som inte blir större när du klickar på den, men ju mer jag tittade på sidan ju mer blev jag förvirrad om vad som händer med layouten.
Om du är bekant alls med grundläggande designteori vet du att lärande att genomföra solida och konsekventa anpassningar är nyckeln till bra sidlayout. Den udda blandningen av vänstra, centrala och rättvisa visuella inriktningar som äger rum på platsen ovan, i samband med det obekväma tomma utrymmet nära toppen, gör ett riktigt udda visuellt flöde av den information som presenteras.
Vidare, om du besöker sidan ovan ser du att innehållet som helhet verkar som att det försöker centreras men verkligen kastas av bandet över mitten, vilket gör att sidan verkar helt rätt i mitten.
# 8 Ad Clutter
Gratis designbloggar som den här måste presentera massor av annonser, det är helt enkelt sättet vi ger en inkomst och fortsätter att ge dig innehåll. Om du kör en professionell företagswebbplats måste du dock noga överväga om du vill förringa ditt meddelande och professionalism med reklam.
Sidorna i Microsoft.com är fyllda med olika annonser som verkligen sätter ner estetiken på sidan som de är på. Ibland pekar dessa annonser direkt på andra Microsoft-sidor, ibland till andra företag eller partners. Det finns inget fel med konceptet att styra trafik till andra delar av din webbplats, men hur du uppnår detta kan göra en stor skillnad.
Om det är en sak som de flesta webbanvändare har lärt sig att upptäcka, ignorera och eventuellt ensamma, är det en bannerannons. För att inte säga att denna typ av reklam inte fungerar med korrekt inriktning och design, eller att ens säga att Microsoft-användare inte klickar på dessa, men jag undrar om det inte finns något bättre sätt.
Om Microsoft vill rikta trafik till sina mobiltelefoner och andra projekt är det enkelt att utföra ett roterande, icke-standardiserat (designvis) annonssystem som rullar över hela sin webbplats. Det verkar emellertid som att integrera detta innehåll som en del av den faktiska webbplatsen skulle ha en mycket bättre klickfrekvens eftersom fler användare skulle notera meddelandet och inte behöva bryta några internaliserade regler om att undvika bannerannonser till varje pris.
Plus, en sådan integration skulle tvinga mönstren att vara mer konsekventa eftersom de skapas som en enhet snarare än av separata lag. Återigen är detta ett scenario där jag kan förstå kostnadseffektiviteten i Microsofts strategi, men vill varna dig mot att följa deras ledning.Odds är att de webbplatser du designar inte kommer att konkurrera med mega-nätverket på Microsoft-webbplatser och kommer därför mer sannolikt att ge dig en solid, integrerad design så att du kan undvika den visuella röran av överskott av annonser.
Självklart finns det många platser genrer där detta inte alls gäller som reklam förväntas vara närvarande. Se bara till att du överväger om din webbplats ska vara avsedd att sälja din produkt eller tjänst eller kräva extra inkomst och distraktion av reklam.
# 9 Ett brist på andningsrum
I tryckdesign designar designers varje sida med ett "live-område". Det här är vanligtvis ett rektangulärt inlägg från sidans trim som definierar det område där det är säkert att placera innehåll för att undvika sidoklipp eller kantklingning. De flesta webbdesigners gör det här intuitivt, eftersom det är ganska uppenbart att du inte vill att innehållet ska vara för långt uppåt på sidan av webbläsaren.
Men som skärmdumpen ovan visar, finns det några Microsoft-sidor som inte tycks lägga lager i sådana åsikter. Istället startar innehållet så snart som sidan gör med noll horisontell polstring eller marginal (åtminstone på de webbläsare som jag kontrollerade med).
Navigationspanelen känns inte som den är inbyggd i sidan av sidan, det känns som att det blir cutoff (igen kan det bara göra det på grund av det faktum att jag inte har IE). Lektionen här är enkel: Var alltid medveten om kanten på webbläsarfönstret. Om du inte bryter mot regeln för en uppenbar visuell blödningseffekt, placera ditt innehåll, särskilt interaktiva delar och länkar, väl inom en säker marginal så att användarna inte känner sig trånga när de försöker använda den.
Om du tittar noggrant på skärmbilden ovan kan du se några fler exempel på Microsofts designers, helt enkelt inte överväga huruvida texten kommer att flöda ordentligt på alla större webbläsare. Det här är ganska underhållande trenden för Microsoft, eftersom många webbdesigners spenderar sina dagar på att försöka göra speciella bostäder för Microsofts Internet Explorer, men multibolagsdollbolaget kan inte vara besväret att återställa favoriten genom att kontrollera sitt eget arbete på andra system.
# 10 misslyckades med att utnyttja din talang
Även om det finns gott om negativa kommentarer ovan om webbdesigners över på Microsoft, blev jag positivt överraskad att se att de faktiskt har en hel del webbplatser och sidor som ser helt enkelt fantastiskt ut.
Exemplen ovan är bara två av de många platserna som jag tror att Microsoft verkligen slog det ut ur parken med sin layout, färgval, grafik och kompatibilitet mellan webbläsare. Vad det här berättar för mig är att någonstans bland den stora poolen av skåp i detta företag sitter några riktigt begåvade individer som kan ta företaget helt ur sin designnedgång.
Dessa designers, vem de än är, bör främjas till positioner som skulle tillåta dem att samarbeta tillsammans och ställa in konsekventa standarder som bokstavligen skulle varje Microsoft-webbdesigner tvingas följa. I stället för en labyrint av oupphörliga jumbles av innehåll kunde de skapa ett starkt märkesnätverk av vackra webbplatser som alla helt klart hör hemma i samma familj.
Det sista förslaget jag presenterar för dig är att hitta dessa typer av enastående individer i ditt eget företag och ge dem en röst. I stället för att klaga på bristen på talang bland de andra medlemmarna i ditt lag, utse de starkaste designersna och utvecklarna till positioner där de kan påverka varje visuell kommunikation som rullar ut i samband med ett visst varumärke.
Detta kan göras effektivt och effektivt genom att skapa tydliga, konsekventa och strikta varumärkesriktlinjer som distribueras till varje designer och utvecklare för varje distinkt varumärke som du arbetar med.
Slutsatser
Sammanfattningsvis, trots att Microsoft har en hel del extremt begåvade webbdesigners, är dessa individers arbete nästan helt överskuggad av den stora mängd innehåll som inte ens uppfyller normer som vi skulle förvänta oss av rookiedesigners och utvecklare i deras första år .
Lyckligtvis kan vi använda företag som Microsoft som instruktionshjälpmedel för att tydligt illustrera att det faktiskt finns en felaktig väg att göra saker. Föreställ dig aldrig det bara för att du är en ensam frilansare eller ett mindre designföretag som du inte helt kan överträffa megakorporationer och designföretag när det gäller kvaliteten på det arbete du producerar.
Jag har funnit att det ofta är lättare att hitta exempel på kvalitetsdesigners i hemmakontor runt om i världen än att sitta vid skrivbordet hos stora företag. Torka i det faktum att du inte behöver samordna och kontrollera kvaliteten på hundratals designers. Gör ditt bästa för att skapa några av de bästa platserna på webben med den lilla mängd resurser du har i samband med en massa mängd personlig körning för att skapa vackert funktionella mönster.