Det är dags för en annan fantastisk webbdesignkritik, där vi tittar på en riktig webbplats och analyserar designen. Vi pekar på båda områdena som görs bra förutom de som kan använda lite arbete. Slutligen avslutar vi genom att be dig att ge din egen feedback.
Dagens webbplats är WebAppers, ett bra ställe att hitta open source webresurser. Låt oss hoppa in och se vad vi tycker!
Om du vill skicka din webbplats till en framtida designkritik tar det bara några minuter. Vi tar ut $ 49 för att kritisera din design - betydligt mindre än du skulle betala för en konsult för att kolla på din webbplats! Du kan läsa mer här.
Om WebAppers
? WebAppers är en blogg dedikerad till att dela toppkvalitet av öppen källkod för webbutvecklare och webbdesigners dagligen. Som webbdesigner hittar du några av de bästa fria ikonerna, lagerfoton, penslar, teckensnitt och designinspirationer. Som webbutvecklare hittar du också några av de bästa JavaScript- och Ajax-komponenterna, som modala fönster, menyer, gallerier, verktygstips, diagram, kalendrar, plugins och mycket mer.?
Här är en skärmdump av hemsidan:
Första intrycket
Om du undrar om en Design Shack-kritik är värt det, behöver du inte leta längre än upprepade kunder. WebAppers var faktiskt kunden för vår 14: e webbdesign kritik och de har kommit tillbaka för att få oss att kolla på deras helt nya, helt omgjorda mottagliga webbplats.
Mina första tankar för den nya designen är mycket positiva. Det här är ingen liten uppdatering, de har tagit platsen i en helt ny visuell riktning och jag tycker verkligen att det är bättre för det. Den gamla platsen hade en kullerstenslagad sammanslagning, liksom olika icke-matchande resurser slogs samman. Den nya designen är däremot mycket ren och professionell och kommer ut som en helt anpassad bit av arbete. Och det är lyhörd att starta!
Vi är fortfarande väldigt tidigt i den svåra utvecklingen på webben, så min hatt går av för alla som faktiskt tar initiativ till att ta bort RWD från det bekväma området av teori och sätta den i verklig världspraxis.
Låt oss gräva djupare in i webbplatsens design och se vad som fungerar bra och vad som kan bli bättre.
Ny logotyp
Den gamla WebAppers-logotypen hade den här typen av 80-talsklockan. Det fanns en katt av något slag, några belysningsbultformer; det var udda men roligt.
Jag hittade alltid logotypen för att vara lite förvirrande men. Jag skulle aldrig kunna berätta om blixten var tänkt att vara just det eller om de kanske var en lejonman. Och vad gjorde något av det med open source webbresurser ändå?
Den nya logotypen ger ett enklare, textbaserat tillvägagångssätt. Jag älskar faktiskt visuellt av sidokretsen? W?, Vars centrum också fungerar som ett? A ?. Det är bara en platt och cool idé som drogs ganska framgångsrikt.
Jag tycker också att logotypen tydligt anger vad webbplatsen handlar om. Så fort jag laddar hemsidan går mina ögon till logotypen och jag vet vad sidan erbjuder mig. Detta är oerhört viktigt och det är alltför ofta i dessa kritiker att jag berättar en designer motsatsen (att det är svårt att se vad deras webbplats handlar om).
Layout
Som jag nämnde ovan är den nya layouten lyhörd, och därmed menar jag att det använder mediafrågor för att återställa layouten vid ett antal förinställda brytpunkter. Att vara fullt mottaglig? vissa säger att en webbplats måste byggas på ett fluidnät som det som ses på Smashing Magazine, ett projekt som utan tvekan inspirerade detta på något sätt.
WebAppers återflöser sig inte vid varje minutsändring i webbläsarens bredd (åtminstone till den minsta iterationen), och för att vara ärlig, när jag spelar med det, tycker jag att det är bra. Det är fortfarande en anmärkningsvärd flexibel design som anpassar sig bra till alla olika skärmstorlekar, vilket är mycket mer än de flesta webbplatser kan hävda.
I den breda versionen finns det fyra primära kolumner. Från vänster till höger är de navigering, primärt innehåll, sekundär innehåll sidofält och annonsering. De två sidospåren har utformats för att se nästan ut som lådor som glider ut ur huvudinnehållet, en perfekt metafor med tanke på att de kollapser när bredden smalnar.
När vi sänker fönstret ner, släpper vi annonseringskolonnen längst till höger. Innehållet försvinner inte bara vid denna tidpunkt, men i stället visas annonserna ovanför den högra sidofältet och trycker ner innehållet nedåt. Detta är en elegant lösning som ser bra ut och behåller fortfarande det mesta av det ursprungliga innehållet.
Det finns ett subtilt hopp efter det här som smalnar huvudkolumnen något. Behållaren blir smalare, textstorleken minskar och bilderna minskar deras bredd. Om vi förstärker fönstret ännu mer får vi det mest betydelsefulla layoutskiftet:
Här kan vi se att den tredje kolumnen helt har tappat bort och allt innehåll som finns inne har blivit dolt. Det innebär att annonserna har försvunnit helt (Smashing Magazine gör samma sak) och sidofältet som innehåller det populära innehållet och sökfältet är också borta.
Mitt enda verkliga problem här är att från denna punkt på webbplatsen verkar inte vara sökbar. Jag är alla för att flytta designen som skärmstorleken ändras men funktionaliteten är ett snabbare ämne och reduktioner måste närmar sig med försiktighet. Sökning verkar som en ganska primär funktion och jag skulle troligen bli frustrerad att jag inte kan utföra denna uppgift på min telefon eller surfplatta.
Så småningom bryter platsen till en enda kolumnlayout med navigationen som nu visas på en enkel inbyggd rullgardinsmeny, som vanligtvis fungerar bra på både mobila och stationära enheter.
Sammantaget tycker jag att layouten fungerar väldigt bra, och med undantag för sökfunktionen är jag inte säker på att jag skulle ändra mycket på det.
Titta bakom kulisserna kan vi se att detta projekt hjälpte sig av Twitter Bootstrap, vilket är trevligt eftersom sidan inte ser ut som ditt typiska kopiera / klistra Bootstrap-projekt alls och visar att du kan använda den verktygslåda under huven utan att offra specialdesignad.
Estetik
Nu när vi har diskuterat hur strukturen eller benen på webbplatsen fungerar, låt oss ta en titt på glasyret på toppen. Webbplatsen tar ett i stort sett grått färgschema med subtila poppar av färg här och där. Det gör stor användning av attraktiva, minimala ikoner och naturligtvis Helvetica som sin primära och nästan exklusiva typsnitt.
Min minst favorit aspekt av hela denna sida är bristen på kontrast. Allt på sidan har en slags monotont känsla med ingenting som verkligen står ut. Jag kan se hur det dämpade utseendet är tänkt att vara lätt på ögonen, men det är blött nog att det nästan känns lite ansträngande.
Lösningen för detta, så långt jag är bekymrad, är så lätt att det bara innebär att man ersätter en enda fil: bakgrundsstruktur. Jag tog en mörk konsistens från Subtle Patterns och gav det en testkörning på WebAppers webbplats med bra resultat.
Den mörka bakgrunden lägger till en väldigt nödvändig kontrast till webbplatsen och belyser verkligen huvudinnehållet genom att trycka på det i framkant av din uppmärksamhet. Det är fantastiskt hur mycket av en skillnad en liten tweak kan göra!
En annan liten sak som buggar mig lite är skuggseffekten på artikeltitlarna, ses på skärmdumpen nedan:
Ena handen tycker jag att det är en cool effekt. Å andra sidan tycker jag att texten gör det svårare att läsa texten. Kanske om skuggans opacitet var enkelt reducerad skulle det vara mindre distraherande.
Sammanfattning
Jag tror att WebAppers redesign är definitivt en framgång. Webbplatsen är vackrare än någonsin och har tagit ett bra hopp mot att vara agnostiker. Det är lätt att använda, varumärket är mer logiskt och innehållspresentationen är riktigt bra.
Min enda stora oro är bristen på visuell kontrast, ett problem som helt försvinner med införandet av ett mörkare bakgrundsmönster. Jag är också skeptisk till beslutet att släppa sökfunktionen på smalare versioner av layouten. Jag tror inte att besöka webbplatsen på min iPhone borde nödvändigtvis betyda att jag förlorade möjligheten att söka.
Annat än dessa problem är det en bra sida. Var noga med att sluta och ge den en provkörning. Jag tror att du kommer att tycka om vad du ser.
Din tur!
Nu när du har läst mina kommentarer lägger du in och hjälper till med att ge designern ytterligare råd. Låt oss veta vad du tycker är bra om designen och vad du tycker kan vara starkare. Som alltid ber vi att du också respekterar webbplatsens designer och erbjuder tydliga konstruktiva råd, utan att det blir några svåra förolämpningar.