Veebikujunduse kriitika # 80: uus tundlike WebAppersi sait
On aeg järjekordseks vingeks veebidisaini kriitikaks, kus heidame pilgu tõelisele veebisaidile ja analüüsime kujundust. Toome välja mõlemad valdkonnad, mida on hästi tehtud, lisaks neile, kus saaks mõnda tööd kasutada. Lõpuks küsime teilt enda tagasiside.
Tänane sait on WebAppers, suurepärane koht avatud lähtekoodiga veebiressursside leidmiseks. Hüppame sisse ja vaatame, mida arvame!
Uurige Envato elemente
Kui soovite oma veebisaidi edaspidises disainikriitikas kajastada, võtab see vaid paar minutit. Teie kujunduse kritiseerimise eest võtame 49 dollarit - tunduvalt vähem kui maksaksite konsultandil teie saidi vaatamise eest! Lisateavet saate siit.
Teave WebAppersi kohta
„WebAppers on ajaveeb, mis on pühendatud iga päev kvaliteetsete avatud lähtekoodiga ressursside jagamisele veebiarendajatele ja veebidisaineritele. Veebidisainerina leiate parimaid tasuta ikoone, aktsiafotosid, pintsleid, fonte ja kujunduse inspiratsiooni. Veebiarendajana leiate ka mõned parimad Javascripti ja Ajaxi komponendid, näiteks modaalaknad, menüüd, galeriid, näpunäited, diagrammid, kalendrite pistikprogrammid ja palju muud. ”
Siin on kodulehe ekraanipilt:
Esmamulje
Kui teil on küsimus, kas Design Shacki kriitika on seda väärt, ei pea te otsima kaugemale kui korduvad kliendid. WebAppers oli tegelikult meie 14. veebidisaini kriitika klient ja nad tulid tagasi, et lasta meil heita pilk nende uhiuuele, täielikult ümber kujundatud tundlikule saidile.
Minu esimesed mõtted uue kujunduse osas on väga positiivsed. See pole väike värskendus, nad on võtnud saidi täiesti uues visuaalses suunas ja ma tõesti arvan, et see on selle jaoks parem. Vanal saidil oli munakividest koosnev välimus, nagu visati kokku erinevad sobimatud ressursid. Uus kujundus on seevastu väga puhas ja professionaalne ning tuleb välja nagu täiesti kohandatud teos. Ja see on tundlik alglaadimisele!
Oleme veebi tundliku arenguga veel väga varakult seotud, nii et minu müts läheb kõigile, kes tegelikult teevad initsiatiivi, et eemaldada RWD teooria mugavast piirkonnast ja viia see reaalse maailma praktikasse.
Vaatleme sügavamalt saidi kujundust ja vaatame, mis töötab hästi ja mida saaks parandada.
Uus logo
Vanal WebAppersi logol oli selline 80ndate rokkari kaebus. Oli mingi kass, mingid valgustuspoldid; see oli pentsik, aga lõbus.
Leidsin, et logo on alati pisut segane. Ma ei osanud kunagi päris täpselt öelda, kas välkkiire kuju oli mõeldud just selleks või oli see võib-olla lõvimurre. Ja mis pistmist sellel oli ikkagi avatud lähtekoodiga veebiressurssidega?
Uus logo kasutab lihtsamat tekstipõhist lähenemist. Tegelikult armastan ma visuaalselt lehe lokirullit “W”, mille kese toimib ka “A”. See on lihtsalt lahe idee, mis õnnestus üsna edukalt.
Mulle meeldib ka see, et logo ütleb selgelt, mida sait endast kujutab. Niipea kui avaleht laaditakse, libisevad mu silmad logole ja tean, mida see leht mulle pakub. See on äärmiselt oluline ja nendes kriitikates ütlen liiga sageli, et ütlen disainerile vastupidist (et on raske mõista, mis nende saidil on).
Paigutus
Nagu ma eelpool mainisin, on uus paigutus reageeriv ja ma mõtlen sellega, et see kasutab meediumipäringuid paigutuse ümberpaigutamiseks mitmetes eelseadistatud murdepunktides. Et olla täielikult reageeriv, väidavad mõned, et sait tuleb rajada ka vedelikuvõrgule, nagu seda on näha Smashing Magazine'is - projektis, mis kahtlemata inspireeris seda mingil moel.
WebAppers ei pöördu brauseri laiuse iga minutilise muutuse juurde (vähemalt väikseima iteratsioonini) ja kui aus olla, siis sellega mängides arvan, et see sobib. See on endiselt märkimisväärselt paindlik disain, mis sobib hästi igasuguste erinevate ekraanisuurustega, mida on palju rohkem, kui enamik veebisaite väita suudab.
Laias versioonis on neli peamist veergu. Vasakult paremale on need navigeerimine, esmane sisu, sekundaarse sisu külgriba ja reklaam. Need kaks külgriba on kavandatud välja nägema peaaegu nagu sahtlid, mis libisevad põhisisu alt välja, täiuslik metafoor, arvestades, et need laguse kitsenedes kokku varisevad.
Kui akent kitsendame, kukutame reklaami veeru paremasse serva. Sisu ei kao sellel hetkel lihtsalt ära, selle asemel ilmuvad reklaamid parema külgriba kohal, surudes seda sisu allapoole. See on elegantne lahendus, mis näeb hea välja ja säilitab endiselt suurema osa algsest sisust.
Pärast seda on peen hüpe, mis kitsendab põhisisu veergu. Mahuti muutub kitsamaks, teksti suurus väheneb ja pildid vähendavad nende laiust. Kui akent veelgi kitsendada, saame kõige olulisema paigutuse nihke:
Siin näeme, et kolmas veerg on täielikult kadunud ja kogu sisu, mis seal oli, on peidetud. See tähendab, et reklaamid on täielikult kadunud (Smashing Magazine teeb sama asja) ja ka populaarse sisu ja otsinguvälja sisaldav külgriba on kadunud.
Minu ainus tegelik probleem on see, et sellest hetkest alates ei näi see sait olevat otsitav. Olen kõik disaini nihutamise nimel, kuna ekraani suurus muutub, kuid funktsionaalsus on puutetundlikum teema ja vähendamisse tuleb suhtuda ettevaatlikult. Otsimine tundub üsna esmane funktsioon ja ma oleksin tõenäoliselt pettunud, et ma ei saa seda ülesannet oma telefonis või tahvelarvutis täita.
Lõpuks laguneb sait ühe veeru paigutuseks ja navigeerimine kuvatakse nüüd lihtsas rippmenüüs, mis tavaliselt töötab hästi nii mobiilseadmetes kui ka lauaarvutites.
Üldiselt arvan, et paigutus töötab tõesti hästi ja kui otsingufunktsioonid välja arvata, pole ma kindel, et muudaksin selles palju.
Kulisside tagant vaadates näeme, et sellele projektile aitas kaasa Twitter Bootstrap, mis on tore, kuna leht ei näe üldse välja nagu teie tüüpiline copy / paste Bootstrap-i projekt ja tõestab, et saate seda tööriistakomplekti kapoti all ilma ohverdamata kasutada. kohandatud kujundus.
Esteetika
Nüüd, kui oleme arutanud saidi struktuuri või luude toimimise üle, vaatleme ülemist jäätumist. Sait võtab enamasti halli värvilahenduse, millel on peent värvi hüpiknärid siin ja seal. Selle peamiseks ja peaaegu eksklusiivseks kirjatüübiks on palju kasutatud atraktiivseid, minimaalseid ikoone ja muidugi Helvetica.
Minu kõige vähem lemmik aspekt kogu sellel saidil on kontrasti puudumine. Kõigil lehel on omamoodi monotoonne tunne, miski ei paista silma paista. Ma näen, kuidas summutatud pilk on mõeldud silmadele kergeks, kuid see on piisavalt õrn, et peaaegu tunneb end pisut pingutavat.
Minu jaoks on lahendus selle jaoks nii lihtne, et see hõlmab ainult ühe faili: tausttekstuuri asendamist. Haarasin peent mustrist tumeda tekstuuri ja andsin sellele WebAppersi saidil proovitulemuse, mis andis suurepäraseid tulemusi.
Tume taust lisab saidile vajalikku kontrasti ja tõstab tõepoolest esile põhisisu, surudes selle teie tähelepanu keskpunkti. On hämmastav, kui palju erinevust võib väike näpistamine anda!
Üks teine väike asi, mis mind pisut häirib, on artiklite pealkirjade variefekt, mida on näha alloleval ekraanipildil:
Ühelt poolt on see minu arvates lahe efekt. Teisest küljest arvan, et see muudab teksti lugemise oluliselt raskemaks. Ehk kui varju läbipaistmatust lihtsalt vähendataks, häiriks see vähem.
Kokkuvõte
Ma arvan, et WebAppersi ümberkujundamine on kindlasti edukas. Sait on ilusam kui kunagi varem ja on teinud kena hüppe seadme agnostiliseks poole. Seda on lihtne kasutada, bränding on loogilisem ja sisu esitlus on tõesti kena.
Minu üks suur mure on visuaalse kontrasti puudumine, mure, mis kaob täielikult tumedama taustamustri lisamisega. Olen skeptiline ka otsuse suhtes jätta otsingufunktsioonid paigutuse kitsamatele versioonidele. Ma ei arva, et oma iPhone'is saidi külastamine peaks tingimata tähendama, et kaotasin otsinguvõimaluse.
Peale nende probleemide on see siiski hea sait. Peatuge kindlasti mööda ja andke sellele proovisõit. Arvan, et teile meeldib see, mida näete.
Sinu kord!
Nüüd, kui olete minu kommentaare lugenud, astuge sisse ja aidake, andes disainerile täiendavaid nõuandeid. Andke meile teada, mis on teie arvates disainilahenduses suurepärane ja mis võiks teie arvates olla tugevam. Nagu alati, palume teil ka saidi kujundajat austada ja pakkuda selgeid konstruktiivseid nõuandeid, mis ei võimalda ränki solvanguid.
