Web Design Critique # 80: The New Responsive WebAppers Site
Het is tijd voor weer een geweldige kritiek op het webontwerp, waarbij we een echte website bekijken en het ontwerp analyseren. We zullen wijzen op zowel de gebieden die goed zijn gedaan als de gebieden die wat werk kunnen gebruiken. Ten slotte sluiten we je af met je eigen feedback.
De site van vandaag is WebAppers, een geweldige plek om open source webbronnen te vinden. Laten we erin springen en zien wat we denken!
Verken Envato Elements
Als u wilt dat uw website wordt opgenomen in een toekomstige ontwerpkritiek, duurt het maar een paar minuten. We brengen $ 49 in rekening voor het bekritiseren van uw ontwerp - aanzienlijk minder dan u zou betalen voor een consultant om uw site te bekijken! Meer informatie vind je hier.
Over WebAppers
“WebAppers is een blog die dagelijks open source-bronnen van topkwaliteit deelt voor webontwikkelaars en webdesigners. Als webdesigner vind je enkele van de beste gratis pictogrammen, stockfoto's, penselen, lettertypen en ontwerpinspiraties. Als webontwikkelaar vind je ook enkele van de beste Javascript- en Ajax-componenten zoals modale vensters, menu's, galerijen, tooltips, grafieken, plug-ins voor agenda's en nog veel meer. ”
Hier is een screenshot van de homepage:
Eerste indruk
Als je je afvraagt of een Design Shack-kritiek het waard is, hoef je niet verder te zoeken dan de terugkerende klanten. WebAppers was eigenlijk de klant voor onze 14e kritiek op het webontwerp en ze zijn teruggekomen om ons te laten kijken naar hun gloednieuwe, volledig opnieuw ontworpen, responsieve site.
Mijn eerste gedachten voor het nieuwe ontwerp zijn erg positief. Dit is geen kleine update, ze hebben de site in een geheel nieuwe visuele richting gebracht en ik denk echt dat het er beter voor is. De oude site had een soort geplaveid uiterlijk, alsof verschillende niet-overeenkomende bronnen bij elkaar werden gegooid. Het nieuwe ontwerp is daarentegen zeer schoon en professioneel en komt uit als een volledig op maat gemaakt stuk werk. En het reageert snel!
We zijn nog erg vroeg in de responsieve evolutie van het web, dus mijn hoed gaat af voor iedereen die daadwerkelijk het initiatief neemt om RWD uit het comfortabele theoretische gebied te verwijderen en het in de praktijk te brengen.
Laten we dieper ingaan op het ontwerp van de site en kijken wat goed werkt en wat kan worden verbeterd.
Nieuw logo
Het oude WebAppers-logo had dit soort rocker-aantrekkingskracht uit de jaren 80. Er was een soort kat, een paar lichtgevende boutvormen; het was eigenzinnig maar leuk.
Ik vond het logo echter altijd een beetje verwarrend. Ik zou nooit helemaal kunnen zeggen of de bliksemvormen precies zo bedoeld waren of dat het misschien leeuwenmanen waren. En wat had dat eigenlijk allemaal te maken met open source webbronnen?
Het nieuwe logo heeft een eenvoudigere, op tekst gebaseerde benadering. Ik ben eigenlijk dol op het visuele van de paginakrul "W", waarvan het midden ook als een "A" dient. Het is gewoon een ronduit cool idee dat redelijk succesvol is uitgekomen.
Ik vind het ook leuk dat het logo duidelijk aangeeft waar de site over gaat. Zodra ik de startpagina laad, dwalen mijn ogen af naar het logo en weet ik wat de pagina me te bieden heeft. Dit is buitengewoon belangrijk en het is maar al te vaak in deze kritieken dat ik een ontwerper het tegenovergestelde vertel (dat het moeilijk is om te zien waar hun site over gaat).
Indeling
Zoals ik hierboven al zei, reageert de nieuwe lay-out en daarmee bedoel ik dat het mediaquery's gebruikt om de lay-out opnieuw te laten verlopen op een aantal vooraf ingestelde breekpunten. Om 'volledig responsief' te zijn, zeggen sommigen dat een site ook moet worden gebouwd op een vloeiend raster zoals dat te zien is in Smashing Magazine, een project dat deze ongetwijfeld op de een of andere manier heeft geïnspireerd.
WebAppers past zich niet aan elke minuut verandering in de browserbreedte aan (althans tot de kleinste iteratie), en om eerlijk te zijn, aangezien ik ermee speel, vind ik dat prima. Het is nog steeds een opmerkelijk flexibel ontwerp dat zich goed aanpast aan allerlei verschillende schermformaten, wat veel meer is dan de meeste websites kunnen beweren.
In de brede versie zijn er vier primaire kolommen. Van links naar rechts zijn dit de navigatie, primaire inhoud, secundaire inhoudsbalk en advertenties. De twee zijbalken zijn zo ontworpen dat ze er bijna uitzien als lades die uit de hoofdinhoud schuiven, een perfecte metafoor aangezien ze in elkaar zakken als de breedte smaller wordt.
Terwijl we het venster verkleinen, laten we de advertentiekolom helemaal rechts vallen. De inhoud verdwijnt echter niet alleen op dit punt, in plaats daarvan verschijnen de advertenties boven de rechterzijbalk, waardoor die inhoud naar beneden wordt geduwd. Dit is een elegante oplossing die er geweldig uitziet en toch de meeste originele inhoud behoudt.
Hierna volgt een subtiele sprong die de kolom met de hoofdinhoud enigszins verkleint. De container wordt smaller, de tekst wordt kleiner en de afbeeldingen verkleinen de breedte. Als we het venster nog verder verkleinen, krijgen we de belangrijkste lay-outverschuiving:
Hier kunnen we zien dat de derde kolom volledig is weggevallen en dat alle inhoud die erin zat, is verborgen. Dit betekent dat de advertenties volledig zijn verdwenen (Smashing Magazine doet hetzelfde) en de zijbalk met de populaire inhoud en het zoekveld is ook verdwenen.
Mijn enige echte probleem hier is dat vanaf dit punt op de site niet doorzoekbaar lijkt te zijn. Ik ben helemaal voor het verschuiven van het ontwerp omdat de schermgrootte verandert, maar de functionaliteit is een gevoeliger onderwerp en reducties moeten voorzichtig worden benaderd. Zoeken lijkt een vrij primaire functie en ik zou waarschijnlijk gefrustreerd zijn dat ik deze taak niet op mijn telefoon of tablet kan uitvoeren.
Uiteindelijk valt de site uiteen in een enkele kolomlay-out, waarbij de navigatie nu verschijnt in een eenvoudig native vervolgkeuzemenu, dat meestal goed werkt op zowel mobiele als desktop-apparaten.
Over het algemeen denk ik dat de lay-out heel goed werkt, en met uitzondering van de zoekfunctionaliteit, weet ik niet zeker of ik er veel aan zou veranderen.
Als we achter de schermen kijken, kunnen we zien dat dit project werd geholpen door Twitter Bootstrap, wat leuk is omdat de pagina helemaal niet lijkt op je typische Bootstrap-project voor kopiëren en plakken en bewijst dat je die toolkit onder de motorkap kunt gebruiken zonder in te boeten aangepast ontwerp.
Esthetiek
Nu we hebben besproken hoe de structuur of botten van de site werken, laten we de kers op de taart eens bekijken. De site krijgt een grotendeels grijs kleurenschema met hier en daar subtiele kleuraccenten. Het maakt veel gebruik van aantrekkelijke, minimale iconen en natuurlijk Helvetica als het primaire en bijna exclusieve lettertype.
Mijn minst favoriete aspect van deze hele site is het gebrek aan contrast. Alles op de pagina heeft een soort eentonig gevoel en niets valt echt op. Ik kan zien hoe de gedempte look bedoeld is om gemakkelijk voor de ogen te zijn, maar het is flauw genoeg dat het bijna een beetje spannend aanvoelt.
De oplossing hiervoor is wat mij betreft zo eenvoudig dat het slechts gaat om het vervangen van een enkel bestand: de achtergrondstructuur. Ik pakte een donkere textuur van Subtle Patterns en gaf het een testrun op de WebAppers-site met geweldige resultaten.
De donkere achtergrond voegt een broodnodig contrast toe aan de site en benadrukt de hoofdinhoud echt door deze naar de voorgrond te brengen. Het is verbazingwekkend hoeveel verschil een kleine aanpassing kan maken!
Een ander klein ding dat me enigszins irriteert, is het schaduweffect op de titels van het artikel, te zien in de onderstaande schermafbeelding:
Enerzijds vind ik het een gaaf effect. Anderzijds denk ik dat dit de tekst aanzienlijk moeilijker te lezen maakt. Als de dekking van de schaduw gewoon zou worden verminderd, zou het misschien minder storend zijn.
Samenvatting
Ik denk dat het herontwerp van WebAppers zeker een succes is. De site is mooier dan ooit en heeft een mooie sprong gemaakt om apparaatonafhankelijk te zijn. Het is gemakkelijk te gebruiken, de branding is logischer en de inhoudspresentatie is echt leuk.
Mijn enige grote zorg is het gebrek aan visueel contrast, een zorg die volledig verdwijnt met het opnemen van een donkerder achtergrondpatroon. Ik sta ook sceptisch tegenover de beslissing om de zoekfunctionaliteit op de smallere versies van de lay-out te laten vallen. Ik denk niet dat het bezoeken van de site op mijn iPhone noodzakelijkerwijs zou betekenen dat ik niet meer kon zoeken.
Afgezien van deze problemen is het echter een geweldige site. Kom zeker langs en maak een proefrit. Ik denk dat je het leuk zult vinden wat je ziet.
Jouw beurt!
Nu je mijn opmerkingen hebt gelezen, kun je meedoen en helpen door de ontwerper wat verder advies te geven. Laat ons weten wat je geweldig vindt aan het ontwerp en wat je denkt dat sterker zou kunnen zijn. Zoals altijd vragen we u ook respect te hebben voor de ontwerper van de site en duidelijk constructief advies te geven, zonder harde beledigingen.
