Tīmekļa dizaina kritika # 80: Jaunā adaptīvā WebAppers vietne
Ir pienācis laiks vēl vienai satriecošai tīmekļa dizaina kritikai, kurā mēs apskatīsim reālu vietni un analizēsim dizainu. Mēs norādīsim uz abām jomām, kas ir labi paveiktas, papildus tām, kurās varētu izmantot kādu darbu. Visbeidzot, mēs pabeigsim, lūdzot jūs sniegt savu atsauksmi.
Šodienas vietne ir WebAppers, lieliska vieta, kur atrast atvērtā koda tīmekļa resursus. Lecam iekšā un redzēsim, ko domājam!
Izpētiet Envato elementus
Ja vēlaties iesniegt savu vietni, lai tā būtu redzama turpmākajā dizaina kritikā, tas prasa tikai dažas minūtes. Par jūsu dizaina kritizēšanu mēs iekasējam 49 ASV dolārus - ievērojami mazāk, nekā jūs maksātu konsultantam par jūsu vietnes apskati! Jūs varat uzzināt vairāk šeit.
Par WebAppers
“WebAppers ir emuārs, kas veltīts augstākās kvalitātes atvērtā koda resursu izplatīšanai tīmekļa izstrādātājiem un tīmekļa dizaineriem katru dienu. Kā tīmekļa dizainers jūs atradīsit dažas no labākajām bezmaksas ikonām, fotoattēliem, sukām, fontiem un dizaina iedvesmām. Kā tīmekļa izstrādātājs jūs atradīsit arī dažus no labākajiem Javascript un Ajax komponentiem, piemēram, modālajiem logiem, izvēlnēm, galerijām, rīka padomus, diagrammas, kalendāra spraudņus un daudz ko citu. ”
Šeit ir mājas lapas ekrānuzņēmums:
Pirmais iespaids
Ja jums rodas jautājums, vai Design Shack kritika ir tā vērta, jums jāmeklē ne tālāk kā atkārtotie klienti. WebAppers faktiski bija mūsu 14. tīmekļa dizaina kritikas klients, un viņi ir atgriezušies, lai mūs apskatītu viņu pavisam jauno, pilnībā pārveidoto atsaucīgo vietni.
Manas pirmās domas par jauno dizainu ir ļoti pozitīvas. Tas nav mazs atjauninājums, viņi ir veikuši vietni pilnīgi jaunā vizuālā virzienā, un es tiešām domāju, ka tas ir labāks par to. Vecajai vietnei bija kopīgs bruģēts izskats, piemēram, kopā tika izmesti dažādi neatbilstīgi resursi. Turpretī jaunais dizains ir ļoti tīrs un profesionāls, un tas nāk kā pilnīgi pielāgots darbs. Un tas reaģē uz sāknēšanu!
Mēs joprojām esam ļoti agrīnā tīmekļa reaģējošās attīstības sākumā, tāpēc mana cepure tiek veltīta ikvienam, kurš faktiski uzņemas iniciatīvu noņemt RW no ērtās teorijas zonas un ieviest to reālās pasaules praksē.
Padziļināsim vietnes dizainu un redzēsim, kas darbojas labi un ko varētu uzlabot.
Jauns logotips
Vecajam WebAppers logotipam bija šāda veida 80. gadu rokera apelācija. Tur bija sava veida kaķis, dažas apgaismes skrūvju formas; tas bija quirky, bet jautri.
Vienmēr es uzskatu, ka logotips ir nedaudz mulsinošs. Nekad nevarēju precīzi pateikt, vai zibens formas ir domātas tikai tam, vai varbūt tās ir lauvas krēpes. Un kāds gan tam visam bija sakars ar atvērtā pirmkoda tīmekļa resursiem?
Jaunajam logotipam ir vienkāršāka, uz tekstu balstīta pieeja. Man ļoti patīk lapas čokurošanās “W”, kuras centrs kalpo arī kā “A”, vizuālais attēls. Tā ir tikai izcila ideja, kas tika veiksmīgi realizēta.
Man arī patīk, ka logotips skaidri norāda, kāda ir vietne. Tiklīdz ielādēju mājas lapu, acis pievēršas logotipam un es zinu, ko šī lapa man piedāvā. Tas ir ārkārtīgi svarīgi, un pārāk bieži šajās kritikās es dizaineriem saku pretējo (ka ir grūti saprast, kas ir viņu vietne).
Izkārtojums
Kā jau minēju iepriekš, jaunais izkārtojums ir atsaucīgs, un ar to es domāju, ka tas izmanto multivides vaicājumus, lai mainītu izkārtojumu vairākos iepriekš iestatītos pārtraukuma punktos. Lai “pilnībā reaģētu”, daži saka, ka vietne jāveido arī uz šķidruma režģa, kāds ir redzams Smashing Magazine, projektā, kurš, bez šaubām, kaut kādā veidā to iedvesmoja.
WebAppers nepielāgojas ik pēc pārlūka platuma izmaiņām (vismaz līdz vismazākajai atkārtošanai), un, godīgi sakot, es, spēlējoties ar to, domāju, ka tas ir lieliski. Tas joprojām ir ārkārtīgi elastīgs dizains, kas labi pielāgojas visiem dažādajiem ekrāna izmēriem, kas ir daudz vairāk, nekā vairums vietņu var apgalvot.
Plašajā versijā ir četras galvenās kolonnas. No kreisās un labās puses ir navigācija, primārais saturs, sekundārā satura sānjosla un reklāma. Abas sānjoslas ir veidotas tā, lai izskatās gandrīz kā atvilktnes, kuras izslīd no galvenā satura, un tā ir nevainojama metafora, ņemot vērā, ka tās sabrūk, jo platums sašaurinās.
Sašaurinot logu uz leju, mēs nolaižam reklāmas kolonnu labajā malā. Tomēr saturs šajā brīdī vienkārši nepazūd, tā vietā reklāmas parādās virs labās sānjoslas, virzot šo saturu uz leju. Šis ir elegants risinājums, kas izskatās lieliski un joprojām saglabā lielāko daļu sākotnējā satura.
Pēc tam notiek smalks lēciens, kas nedaudz sašaurina galvenā satura sleju. Trauks kļūst šaurāks, teksta lielums samazinās, un attēli samazina to platumu. Ja vēl vairāk sašaurinām logu, mēs iegūstam visnozīmīgāko izkārtojuma maiņu:
Šeit mēs redzam, ka trešā kolonna ir pilnībā izkritusi un viss saturs, kas tajā atradās, ir paslēpts. Tas nozīmē, ka reklāmas ir pilnībā pazudušas (Smashing Magazine dara to pašu) un vairs nav vairs arī sānjosla, kurā ir populārs saturs un meklēšanas lauks.
Mana vienīgā reālā problēma šeit ir tāda, ka no šī brīža vietnē, šķiet, nav meklēšanas. Es esmu par dizaina maiņu, jo mainās ekrāna izmērs, bet funkcionalitāte ir saudzīgāka tēma, un samazinājumiem ir jāpieiet piesardzīgi. Meklēšana šķiet diezgan primāra funkcija, un es droši vien būšu neapmierināta, ka nevaru izpildīt šo uzdevumu savā tālrunī vai planšetdatorā.
Galu galā vietne sadalās līdz vienas kolonnas izkārtojumam, un navigācija tagad tiek parādīta vienkāršā nolaižamajā izvēlnē, kas parasti labi darbojas gan mobilajās, gan galddatoru ierīcēs.
Kopumā es domāju, ka izkārtojums darbojas patiešām labi, un, izņemot meklēšanas funkcionalitāti, es neesmu pārliecināts, ka es tajā daudz ko mainītu.
Aplūkojot aizkulises, mēs redzam, ka šim projektam palīdzēja Twitter Bootstrap, kas ir patīkami, jo lapa nepavisam neizskatās pēc jūsu tipiskā copy / paste Bootstrap projekta un pierāda, ka varat izmantot šo instrumentu komplektu zem pārsega, neupurējot pasūtījuma dizains.
Estētika
Tagad, kad mēs esam apsprieduši, kā darbojas vietnes struktūra vai kauli, apskatīsim apledojumu uz augšu. Vietnei ir raksturīga galvenokārt pelēka krāsu shēma ar izsmalcinātiem krāsu niansēm šeit un tur. Tas galvenokārt izmanto pievilcīgas, minimālas ikonas un, protams, Helvetica kā galveno un gandrīz ekskluzīvo burtveidolu.
Mans vismīļākais aspekts visā šajā vietnē ir kontrasta trūkums. Visam lapā ir sava veida vienmuļa izjūta, kurā nekas īsti neizceļas. Es redzu, kā klusētajam izskatam ir paredzēts, lai tas būtu viegli acīm, bet tas ir pietiekami mīlīgs, ka gandrīz jūtas mazliet saspringts.
Ciktāl es uztraucos, risinājums tam ir tik vienkāršs, ka tas prasa tikai viena faila: fona tekstūras - aizstāšanu. Es paķēru tumšu tekstūru no Subtle Patterns un devu tam testa braucienu WebAppers vietnē ar lieliskiem rezultātiem.
Tumšais fons vietnei piešķir vajadzīgo kontrastu un patiešām izceļ galveno saturu, virzot to jūsu uzmanības centrā. Tas ir pārsteidzoši, cik daudz atšķirību var radīt neliels kniebiens!
Viena otra maza lieta, kas mani nedaudz bļauj, ir ēnu ietekme uz rakstu nosaukumiem, kas redzami zemāk esošajā ekrānuzņēmumā:
No vienas puses, es domāju, ka tas ir foršs efekts. No otras puses, es domāju, ka tas ievērojami apgrūtina teksta lasīšanu. Varbūt, ja ēnas necaurredzamība tiktu vienkārši samazināta, tā būtu mazāk traucējoša.
Kopsavilkums
Es domāju, ka WebAppers pārprojektēšana noteikti ir veiksmīga. Vietne ir skaistāka nekā jebkad agrāk, un tā ir jauka, lai būtu ierīces agnostiska. Tas ir ērti lietojams, zīmols ir loģiskāks, un satura izklāsts ir patiešām jauks.
Manas vienas lielās bažas ir vizuālā kontrasta trūkums, bažas, kas pilnībā izzūd, iekļaujot tumšāku fona modeli. Esmu skeptiski noskaņots arī par lēmumu nomainīt meklēšanas funkcionalitāti šaurākās izkārtojuma versijās. Es nedomāju, ka vietnes apmeklēšanai manā iPhone noteikti vajadzētu nozīmēt, ka esmu pazaudējis iespēju meklēt.
Izņemot šos jautājumus, tā ir lieliska vietne. Noteikti apstājieties un dodiet tam testa braucienu. Es domāju, ka jums patiks tas, ko redzat.
Tava kārta!
Tagad, kad esat izlasījis manus komentārus, piesakieties un palīdziet, sniedzot dizainerim dažus papildu padomus. Paziņojiet mums, kas, jūsuprāt, ir lielisks attiecībā uz dizainu un kas, jūsuprāt, varētu būt spēcīgāks. Kā vienmēr, mēs lūdzam arī jūs ievērot vietnes dizaineru un piedāvāt skaidrus konstruktīvus padomus, neņemot vērā bargos apvainojumus.
