Webdesignkritikk nr. 80: The New Responsive WebAppers Site
Det er på tide med en annen fantastisk webdesignkritikk, hvor vi tar en titt på en ekte webside og analyserer designet. Vi vil påpeke begge områdene som er gjort godt i tillegg til de som kan bruke litt arbeid. Til slutt avslutter vi med å be deg om å gi dine egne tilbakemeldinger.
Dagens nettsted er WebAppers, et flott sted å finne open source webressurser. La oss hoppe inn og se hva vi synes!
Utforsk Envato Elements
Hvis du ønsker å sende inn nettstedet ditt for å bli vist i en fremtidig designkritikk, tar det bare noen få minutter. Vi belaster 49 dollar for kritikk av designen din - betydelig mindre enn du betaler for en konsulent for å se på nettstedet ditt! Du kan finne ut mer her.
Om WebAppers
"WebAppers er en blogg som er dedikert til å dele toppkildekildessursressurser av topp kvalitet for webutviklere og webdesignere daglig. Som nettdesigner finner du noen av de beste gratis ikonene, arkivbilder, børster, skrifter og designinspirasjoner. Som nettutvikler vil du også finne noen av de beste Javascript- og Ajax-komponentene som modale vinduer, menyer, gallerier, verktøytips, diagrammer, plugins for kalendere og mye mer. ”
Her er et skjermbilde av hjemmesiden:
Førsteinntrykk
Hvis du lurer på om en Design Shack-kritikk er verdt det, trenger du ikke se lenger enn de gjentatte kundene. WebAppers var faktisk kunden for vår 14. kritikk for webdesign, og de har kommet tilbake for å få oss til å se på deres splitter nye, helt omformede responsive nettsted.
Mine første tanker for det nye designet er veldig positive. Dette er ingen liten oppdatering, de har tatt nettstedet i en helt ny visuell retning, og jeg tror virkelig det er bedre for det. Det gamle nettstedet hadde en brosteinsbelagt sammenliknende utseende, som forskjellige ressurser som ikke matcher ble kastet sammen. Den nye designen, derimot, er veldig ren og profesjonell og kommer av som et helt tilpasset stykke arbeid. Og det er responsivt å starte opp!
Vi er fremdeles veldig tidlig i den responsive utviklingen av nettet, så hatten min går til alle som faktisk tar initiativ til å fjerne RWD fra det komfortable teoriområdet og sette det ut i virkelighetens praksis.
La oss grave dypere inn i nettstedets design og se hva som fungerer bra og hva som kan stå å forbedre.
Ny logo
Den gamle WebAppers-logoen hadde denne typen rockerappell fra 80-tallet. Det var en katt av noe slag, noen lysboltformer; det var sære, men morsomt.
Men jeg har alltid funnet at logoen var litt forvirrende. Jeg kunne aldri helt se om lynformene var ment å være nettopp det, eller om de kanskje var en løve manke. Og hva hadde noe av det å gjøre med åpen kildekode nettressurser likevel?
Den nye logoen tar en enklere, tekstbasert tilnærming. Jeg elsker faktisk det visuelle av sidekrøllen “W”, hvor sentrum også fungerer som et “A”. Det er bare en flat og kult ide som ble trukket av ganske vellykket.
Jeg liker også at logoen tydelig sier hva nettstedet handler om. Så snart jeg har lastet inn hjemmesiden, skyter øynene opp til logoen, og jeg vet hva siden tilbyr meg. Dette er ekstremt viktig, og det er altfor ofte i disse kritikkene at jeg forteller en designer det motsatte (at det er vanskelig å se hva nettstedet deres handler om).
Oppsett
Som jeg nevnte ovenfor, er den nye utformingen lydhør, og med det mener jeg at den bruker mediesøk for å gjenspeile oppsettet på en rekke forhåndsinnstilte bruddpunkter. For å være "fullt responsive" sier noen at et nettsted også må bygges på et flytende rutenett som det som ble sett på Smashing Magazine, et prosjekt som uten tvil inspirerte dette på noen måte.
WebAppers reflekterer seg ikke til hvert minutts endring i nettleserens bredde (i det minste til den minste iterasjonen), og for å være ærlig, mens jeg spiller med det, synes jeg det er bra. Det er fremdeles et bemerkelsesverdig fleksibelt design som tilpasser seg godt til alle slags forskjellige skjermstørrelser, noe som er mye mer enn de fleste nettsteder kan hevde.
I den brede versjonen er det fire primære kolonner. Fra venstre mot høyre er de navigasjon, primærinnhold, sidefelt for sekundært innhold og reklame. De to sidefeltene er designet for å se nesten ut som skuffer som glir ut av hovedinnholdet, en perfekt metafor med tanke på at de kollapser når bredden smalner.
Når vi smalere vinduet ned, slipper vi reklamekolonnen helt til høyre. Innholdet forsvinner ikke bare på dette tidspunktet, men annonsene vises i stedet over høyre sidefelt og skyver innholdet nedover. Dette er en elegant løsning som ser bra ut og fremdeles opprettholder det meste av det originale innholdet.
Det er et subtilt hopp etter dette som begrenser hovedinnholdskolonnen noe. Beholderen blir smalere, tekststørrelsen avtar og bildene reduserer bredden. Hvis vi smalere vinduet ytterligere, får vi det mest betydningsfulle layoutskiftet:
Her kan vi se at den tredje kolonnen har falt helt bort og alt innhold som var inne har blitt skjult. Dette betyr at annonsene har forsvunnet fullstendig (Smashing Magazine gjør det samme) og sidefeltet som inneholder det populære innholdet og søkefeltet, er borte også.
Mitt eneste virkelige problem her er at siden dette punktet ikke ser ut til å være søkbart. Jeg er alt for skiftende design ettersom skjermstørrelsen endres, men funksjonalitet er et mer berørt emne, og reduksjoner må kontaktes med forsiktighet. Søk virker som en ganske primær funksjon, og jeg vil sannsynligvis være frustrert over at jeg ikke kan utføre denne oppgaven på telefonen eller nettbrettet mitt.
Etter hvert brytes nettstedet opp til en enkelt kolonneoppsett, idet navigeringen nå vises i en enkel, nedfelt rullegardinmeny, som vanligvis fungerer godt på både mobile og stasjonære enheter.
Totalt sett synes jeg oppsettet fungerer veldig bra, og med unntak av søkefunksjonaliteten, er jeg ikke sikker på at jeg ville endret mye på det.
Når vi ser bak kulissene kan vi se at dette prosjektet ble hjulpet sammen av Twitter Bootstrap, noe som er fint fordi siden ikke ser ut som det typiske kopier / lim inn Bootstrap-prosjektet i det hele tatt og beviser at du kan bruke verktøysettet under panseret uten å ofre tilpasset design.
estetikk
Nå som vi har diskutert hvordan strukturen eller knoklene på nettstedet fungerer, la oss ta en titt på prikken over i’en. Nettstedet tar på seg et stort sett grått fargeskjema med subtile farger dukker opp her og der. Den bruker tungt å bruke attraktive, minimale ikoner og selvfølgelig Helvetica som dens primære og nesten eksklusive skrifttype.
Min minst favoritt aspekt av hele dette nettstedet er mangelen på kontrast. Alt på siden har en slags monotont preg uten at noe virkelig skiller seg ut. Jeg kan se hvordan det dempet utseendet er ment å være lett på øynene, men det er intetsigende nok til at det nesten føles litt anstrengt.
Løsningen for dette, så vidt jeg er bekymret, er så enkel at det bare innebærer å erstatte en enkelt fil: bakgrunnsstrukturen. Jeg tok tak i en mørk tekstur fra Subtle Patterns og ga den en testkjøring på WebAppers side med gode resultater.
Den mørke bakgrunnen tilfører litt sårt tiltrengt kontrast til nettstedet og fremhever hovedinnholdet ved å skyve det i forkant av oppmerksomheten. Det er utrolig hvor mye forskjell en liten finjustering kan gjøre!
En annen liten ting som plager meg litt er skyggeeffekten på artikkeltitlene, sett på skjermdumpen nedenfor:
En hånd, jeg synes det er en kul effekt. På den andre siden tror jeg det gjør teksten betydelig vanskeligere å lese. Kanskje hvis skyggens uklarhet ganske enkelt ble redusert, ville den være mindre distraherende.
Sammendrag
Jeg tror at WebAppers redesign definitivt er en suksess. Nettstedet er vakrere enn noen gang og har tatt et fint hopp mot å være agnostisk til enheten. Den er enkel å bruke, merkevaren er mer logisk og innholdspresentasjonen er veldig fin.
Min eneste store bekymring er mangelen på visuell kontrast, en bekymring som helt forsvinner med inkluderingen av et mørkere bakgrunnsmønster. Jeg er også skeptisk til beslutningen om å slippe søkefunksjonaliteten på de smalere versjonene av oppsettet. Jeg tror ikke at å besøke nettstedet på iPhone-en min nødvendigvis burde bety at jeg mistet muligheten til å søke.
Andre enn disse problemene er det et flott nettsted. Sørg for å komme innom og gi den en prøvekjøring. Jeg tror du kommer til å like det du ser.
Din tur!
Nå som du har lest kommentarene mine, kan du slå inn og hjelpe ved å gi designeren noen flere råd. Gi oss beskjed om hva du synes er flott med designet og hva du synes kan være sterkere. Som alltid ber vi deg også respektere nettstedets designer og tilby klare konstruktive råd ugyldige for harde fornærmelser.
