Učenje od Microsofta: 10 dizajnerskih zamki koje treba izbjegavati
Danas ćemo se pozabaviti praksama web dizajna i trendovima najvećeg imena softvera kako bismo vidjeli možemo li naučiti išta o nekim pogreškama koje u svom radu možemo izbjeći.
Slobodno komentirajte bilo da se slažete ili ne slažete sa donjim prijedlozima. Kao profesionalni dizajneri vaš je uvid dragocjen i radujem se vašim mislima.
Istražite dizajnerske resurse
Povremeni Rant
Svima koji mrze članke ispunjene titulama, ispričavam se što je ovaj post ponekad grub. Obično se volim hvaliti dobar dizajn nego kritizirati loše, ali kad smo David Appleyard i ja odlučili napisati post o trendovima dizajna Microsofta, činilo se da će biti još puno toga za naučiti o neurednim, ružnim i / ili nepažljivim stvarima koje oni to čine nego alternativa.
Da vas izbacim u komentarima, neću spomenuti niti napraviti niti jednu usporedbu s Appleom u analizi dolje. To u najmanju ruku nije zamišljeno kao argument protiv računala naspram Maca, već pogled na ono za što smatramo da je uistinu loša praksa u web dizajnu i razvoju. Po pravilu, Microsoft je iznimno uspješna tvrtka i ne zahtijeva zahtjev zbog bilo kojeg od ovih problema. Zapravo, kao što u nastavku ističemo, Microsoft zaista ima određene zvjezdane dizajnere u timu za određene stranice, mi samo predlažemo da se primijeni veća razina kvalitete.
Imajući to u vidu, analizirajmo nekoliko mjesta za koja se čini da Microsoft zaostaje u svojim dizajnerskim i razvojnim praksama i kako od ovog znanja možete imati koristi.
# 1 Pazite na upravljanje određenim dodacima
Ako smo naučili bilo što od nedavnih grešaka između Applea i Adobe-a, stvaranje web mjesta koja u potpunosti ovise o zatvorenim dodacima može na kraju dovesti do ozbiljne povratne reakcije. Čini se da Microsoft ponavlja tu istu grešku jer vlastita mreža web lokacija postaje sve izraženija u Silverlightu.
Dok sam pregledavao Microsoftove različite web stranice koje su se pripremale za ovaj članak, neprestano su me uznemiravali prozori koji su me obavještavali da nisam instalirao Silverlight i stoga ne mogu doživjeti web stranicu onako kako je ona trebala biti prikazana. Moje pitanje je: "zašto ići ovom rutom?" Pogotovo kada govorimo o jednostavnim dijapozitivima i animacijama koje je moguće učiniti s više sveprisutnim tehnologijama. Pod uvjetom da Microsoft posjeduje Silverlight, tako da ima smisla za poslovanje da daju poticaj za ulaganje, ali to ne znači da je to najbolji izbor za to da skačete na njihovoj traci.
Bez obzira jeste li veliki obožavatelj Silverlight-a ili ne, moj savjet je biti krajnje oprezan pri zasnivanju funkcionalnosti vaše web stranice na ovoj ili bilo kojoj sličnoj tehnologiji. Kako se rasprava o tome ima li smisla razvijanje web lokacija s Flashom i dalje zagrijava, drugi u nizu sustavi poput Silverlighta još više postaju kockanje. Gdje je to moguće, držite se križanog preglednika, koda koji se podudara sa standardima i alata koji od posjetitelja ne zahtijevaju dodatne radove ili instalacije.
# 2 Pazite na svoju rezoluciju
Ovo je jedna od mojih najvećih primjedbi na Microsoft jednostavno zato što izgleda samo kao neuredan dizajn. Bez sumnje postoji tanka linija između spremanja veličine datoteke kako bi se povećala upotrebljivost i održavanja slika čistim i jasnim, ali ne mogu vam pomoći da smatram da je Microsoft skloniji prikazivanju ružnih, nazubljenih JPG-ova nego doslovno bilo koji drugi profesionalna stranica koju sam vidio u posljednjih nekoliko godina.
Neprestano smanjujući broj dial-up korisnika interneta i dalje gura prihvatljive veličine slike prema gore. To nikako ne podrazumijeva da ne biste trebali posebno voditi računa da sve bude što manje, koliko god je to razumno, ali u trenutku kada dizajniranje počnu toliko opterećivati dizajn, da dramatično smanjuje prividnu kvalitetu web mjesta, slike postaju samoubojne!
Živite od čiste ironije ako koristite slike za poboljšavanje izgleda vaše web lokacije, ali u konačnici smanjuje vašu estetsku privlačnost u tom procesu. Kad je to moguće, pregledajte svoje obrađene slike na različitim monitorima i obratite veliku pažnju na to koliko su izobličenja i artefaktiranja smatrana prihvatljivima.
# 3 Organizirana nereda
Ponekad možete slijediti sva očigledna pravila dizajna i dalje završiti s nečim što se vizualno čini podjednako. Pregledavajući Microsoftove web stranice naišao sam na bezbroj područja poput onog ispod koje se činilo neredom usprkos njihovim pokušajima organizacije sa sjedištem u koloni.
Pa u čemu je problem? Jednostavno rečeno, ovdje se u relativno malom prostoru događa tona. Iako su mislili da su definitivno pokušali organizirati sadržaj i poboljšati vidljivost čitljivosti pomoću ikona, krajnji rezultat je još uvijek neuravnotežen.
Ako pomno pogledate što se ovdje događa, čini se da su četiri stupca informacija koje su oblikovale četiri različite osobe zajedno nagurane. Lijeva strana izgleda zaista teška sa slikama u usporedbi s desnom, boja teksta je pomalo sporadična, sadržaj je nespretno raspoređen, a stupcima nedostaje dovoljno prostora za disanje da bi izgledali kao neovisna područja koja jesu.
Ovdje je lekcija biti oprezni pri pakiranju jednog područja stranice prepunog različitih podataka. Bez sumnje je dosta slučajeva kada će situacija zahtijevati puno sadržaja, ali s organizacijom se treba postupati na dosljedan i atraktivan način kao što se vidi u lijepim primjerima u nastavku (s web lokacija koje nisu Microsoftove).
# 4 Nedosljednost
Polazeći od Microsofta.com otvorite padajuće izbornike navigacijske navigacije i odaberite područje web mjesta koje ćete posjetiti. Bez obzira na vezu koju kliknete, rezultirajuća stranica izgledat će sasvim drugačije od početne stranice i razlikovat će se od većine ostalih veza dostupnih u istom padajućem izborniku.
Istraživanje Microsoftove stranice je poput okretanja koluta s ruletama. Nemate gotovo pojma gdje ćete sletjeti i što očekivati od sljedeće stranice. Neke stranice imaju zamršenu pozadinu, dok druge koriste meke pregrade ili čak eksplodirajuće krugove. Čini se da većina stranica favorizira plavu, ali ne nužno i istu plavu, a također ima i dosta stranica koje potpuno zanemaruju plavi trend.
Poanta je u tome, ima li vaša web stranica dvije ili dvije stotine, dosljednost je nužna. Korisnici čine ugodnijim kada se u nekoliko sekundi mogu upoznati s načinom rada i izgledom web mjesta. Dajući im nešto drastično drugačije na svakih nekoliko stranica pregledavanje čini zbunjujuće i manje učinkovito iskustvo.
uz to postoji ideja da je stvaranje jakog, konzistentnog branda samo dobar posao jer pomaže kupcima da se povežu s vašom tvrtkom na osobniji način. Doduše, Microsoft žonglira s mnogim različitim robnim markama i mikrosjetima koji potiču od početne stranice, ali čak i među onim što bi se moglo smatrati temeljnim stranicama Microsoft.com, teme slika i navigacijski načini izgledaju drastično raznolike.
# 5 Dizajn usmjeren na Clipart
Ovaj je prijedlog očigledno pomalo apsurdan, budući da su slika umjetnosti i Microsoft Office uvijek neumoljivo isprepleteni. Međutim, dizajn ikona je daleko od 1995. godine i došlo je vrijeme da se odreknete tog određenog stila u slikama koje koristite.
Gore prikazani primjeri umjetnosti s raznih Microsoftovih stranica jednostavno me uzbuđuju, pogotovo onaj grozni logotip "Beginner Developer". Nemam pojma zašto bumerang napada biljku ili pomaže li čarobni monitor računala koji lebdi u napadu ili bježi od mjesta događaja. Sve što znam je da je vizualna komunikacija ovdje neraskidiva zbrka.
To je jedan od osnovnih razloga što CSS galerije poput naše postoje. Ne tako da možete ukrasti dizajn drugih ljudi, ali tako možete uvidjeti u stanje dizajna u desetljeću u kojem se razvijate. Pregledavati ove galerije poput posjećivanja popularnih trgovina odjećom u tržnom centru kako biste pokazali svojoj ludoj tetki da ne mora se oblačiti kao netko iz showa Sunny i Cher.
Uvijek slobodno probijajte granice i prijeđite dalje od sadašnjih deisgn trendova pokretanjem vlastitog. Samo budite oprezni ostati tvrdoglavo stajajući godinama dok ostatak svijeta ide dalje.
# 6 Misaligned preljevni tekst
Još jedan trend koji je teško propustiti na Microsoftovim web-lokacijama su neprekidno lomljeni stupci teksta koji preplavljuju njihove očite granice.
Ovo je prilično lako popraviti i zahtijeva samo malo truda i pažnje. Jednostavno iskoristite prednosti besplatnih alata kao što je Adobeov laboratorij preglednika kako bi se osiguralo da se vaši izgledi ne bi pokvarili ako ih pregledate u bilo kojim većim preglednicima.
Iako je izgled CSS-a prilično škakljiva zvijer kada je u pitanju dosljednost preglednika, male pogreške poput ove doista smanjuju kvalitetu vaše web stranice i vrijedi vremena za rješavanje problema koje oni trebaju riješiti.
# 7 Loša poravnanja
Ponekad mi je određena stranica predstavljala izazov odlučivanja koji dizajn može istaknuti. Primjerice, na donjoj stranici prvotno sam razmotrio odabir malenog snimka zaslona koji se ne povećava kad kliknete na njega, ali što sam više pregledavao stranicu, više sam se zbunio u vezi s tim što se događa izgled.
Ako ste uopće upoznati s osnovnom teorijom dizajna, znate da je učenje za primjenu čvrstih, dosljednih poravnanja ključ za dobar izgled stranice. Neobična mješavina lijevih, središnjih i desnih vizualnih poravnanja koja se odvijaju na mjestu iznad, u kombinaciji s neuglednim praznim prostorom blizu vrha, čine zaista neobičan vizualni tijek prikazanih informacija.
Nadalje, ako posjetite stranicu iznad, vidjet ćete da sadržaj u cjelini izgleda kao da se pokušava centrirati, ali stvarno ga odbacuje pruga po sredini, zbog čega stranica izgleda sasvim desno od središta.
# 8 Nered oglasa
Besplatni dizajnerski blogovi poput ovog moraju sadržavati obilje oglasa, to je jednostavno način na koji ostvarujemo prihod i nastavljamo vam pružati sadržaj. Međutim, ako imate profesionalnu poslovnu stranicu, morate pažljivo razmisliti želite li odvratiti svoju poruku i profesionalnost oglašavanjem.
Stranice Microsofta obiluju raznim oglasima koji doista ruše estetiku stranice na kojoj se nalaze. Ponekad se ti oglasi usmjeravaju izravno na druge Microsoftove stranice, ponekad na druge tvrtke ili partnere. Nema ničeg lošeg u konceptu usmjeravanja prometa na druge dijelove vaše web stranice, ali način na koji to postižete može donijeti ogromnu razliku.
Ako postoji jedna stvar koju je većina korisnika interneta naučila uočiti, zanemariti i možda čak zameriti, to je banner oglas. Da ne kažem da ova vrsta oglašavanja ne funkcionira s pravilnim ciljanjem i dizajnom, niti da kažem da Microsoftovi korisnici ne kliknu na njih, ali zanima me postoji li bolji način.
Ako Microsoft želi usmjeriti promet na svoje mobilne telefone i druge projekte, jednostavan izlaz je postavljanje zbijenog, nestandardnog (dizajnerskog pametnog) oglasnog sustava koji se kreće kroz cijelu stranicu. No čini se da bi integriranje ovog sadržaja kao dijela stvarne web lokacije imalo puno bolju stopu klikova, jer bi više korisnika primilo na znanje poruku i ne bi trebalo kršiti internalizirana pravila o izbjegavanju reklama s natpisom po svaku cijenu.
Uz to, takva integracija bi primorala dizajne da budu konzistentniji, jer su stvoreni kao jedna cjelina, a ne kao zasebni timovi. Opet, ovo je scenarij u kojem mogu razumjeti ekonomičnost Microsoftovog pristupa, ali želim vas upozoriti na to da slijedite njihovo vodstvo. Kvote su da web stranice koje dizajnirate neće supariti mega-mreži Microsoftovih web-mjesta i stoga će se vjerojatnije posuđivati čvrstom, integriranom dizajnu, tako da možete izbjeći vizualni nemir viška oglasa.
Očito je da postoji dosta žanrova na web lokacijama na kojima se to uopće ne primjenjuje jer se očekuje da će biti prisutna reklama. Samo razmislite treba li vaša web lokacija biti posvećena prodaji vašeg proizvoda ili usluge ili vam je potreban dodatni prihod i ometanje oglašavanja.
# 9 Nedostatak sobe za disanje
U dizajnu ispisa, dizajneri postavljaju svaku stranicu s "područjem uživo". To je obično pravokutni ulomak iz okvira stranice koji definira područje u koje je sigurno smjestiti sadržaj kako bi se izbjeglo presjek stranice ili preguranje ruba. Većina web dizajnera to čini intuitivno, jer je prilično očito da ne želite da vam sadržaj bude previše naguran prema strani preglednika.
Međutim, kao što prikazuje gornja snimka zaslona, postoji nekoliko Microsoftovih stranica za koje se čini da nisu takva mišljenja. Umjesto toga, sadržaj počinje čim stranica postane s nultim horizontalnim paddingom ili marginom (barem u preglednicima s kojima sam provjerio).
Navigacijska ploča ne osjeća se kao da je ugrađena u stranu stranice, ima osjećaj da se smanjuje (opet, možda to radi upravo zbog činjenice da nemam IE). Pouka je ovdje jednostavna: budite svjesni ruba prozora preglednika. Ako ne prekršite pravilo zbog očitog vizualnog efekta krvarenja, svoj sadržaj, posebno interaktivne dijelove i veze, smjestite unutar sigurne margine kako se korisnici ne bi osjećali gužvom kad ga pokušaju koristiti.
Ako pažljivo pogledate gornju sliku zaslona, vidjet ćete još nekoliko primjera Microsoftovih dizajnera, jednostavno ne razmišljajući hoće li njihov tekst ispravno teći u svim većim preglednicima. Microsoft je to prilično zabavan trend, jer mnogi web dizajneri provode dane pokušavajući napraviti poseban smještaj za Microsoftov Internet Explorer, no više milijardi dolara kompaniji se ne može smetati da vrati uslugu provjeravanjem vlastitog rada na drugim sustavima.
# 10 Ne uspijevam iskoristiti svoj talent
Iako gore ima dosta negativnih komentara o web dizajnerima kod Microsofta, bio sam ugodno iznenađen kad vidim da oni u stvari imaju prilično puno web stranica i stranica koje izgledaju jednostavno zadivljujuće.
Gore navedeni primjeri samo su dva od mnogih mjesta za koja vjerujem da ih je Microsoft stvarno izbacio iz parka svojim izgledom, odabirom boja, grafikom i kompatibilnošću preglednika. Ovo mi govori da negdje među ogromnim bazenom kabineta u ovoj tvrtki sjedi nekoliko stvarno talentiranih pojedinaca sposobnih da tvrtku potpuno izvedu iz dizajnerskog sloma.
Ovi dizajneri, ma tko bili, trebali bi biti unaprijeđeni u radna mjesta koja će im omogućiti suradnju i postaviti dosljedne standarde koje bi doslovno svaki Microsoftov web dizajner bio prisiljen slijediti. Umjesto labirinta nepovezanih gomila sadržaja, mogli bi stvoriti snažno zaštićenu mrežu lijepih mjesta koja očito pripadaju istoj obitelji.
Posljednji prijedlog koji vam predstavljam je pronaći ove vrste izvanrednih pojedinaca u vlastitoj tvrtki i dati im glas. Umjesto da se žalite zbog nedostatka talenta među ostalim članovima vašeg tima, imenovajte najjače dizajnere i programere na položaje na kojima mogu utjecati na svaki komad vizualne komunikacije koja se povezuje s određenom markom.
To se može postići efikasno i učinkovito stvaranjem jasnih, dosljednih i strogih smjernica robne marke koje se distribuiraju svakom dizajneru i programeru za svaku zasebnu marku s kojom radite.
Završne misli
Da zaključimo, iako Microsoft posjeduje prilično iznimno talentirane web dizajnere, rad tih pojedinaca gotovo je zasjenjen ogromnom količinom sadržaja koji čak i ne zadovoljava standarde koje bismo očekivali od rookie dizajnera i programera u prvoj godini,
Srećom, možemo koristiti tvrtke poput Microsofta kao instruktivna pomagala kako bismo jasno pokazali da u stvari postoji pogrešan način. Nikada to ne zamišljajte samo zato što ste usamljeni freelancer ili mala dizajnerska tvrtka koja ne može u potpunosti nadmašiti mega korporacije i dizajnerske tvrtke kada je u pitanju kvaliteta posla koji proizvedete.
Otkrio sam da je često lakše naći primjere kvalitetnih dizajnera u kućnim uredima širom svijeta nego sjediti za stolovima velikih tvrtki. Udobno uživajte u činjenici da ne morate koordinirati i kontrolirati kvalitetu stotina dizajnera. Potrudite se da stvorite neke od najboljih web stranica na mreži s malom količinom resursa koje posjedujete, zajedno s masovnom količinom osobnog pogona za stvaranje lijepo funkcionalnih dizajna.
