Välkommen till vår 30: e designkritik! Varje vecka tittar vi på en ny 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 Gray Ang, den personliga portföljen av en webbdesigner i Malaysia.
Om du vill skicka din webbplats till en framtida designkritik tar det bara några minuter. Vi debiterar $ 24 för att kritisera din design - betydligt mindre än du skulle betala för en konsult för att ta en titt på din webbplats! Du kan läsa mer här.
Om Gray Ang
? Jag heter Gray och jag är webbdesigner och front-end-utvecklare baserat i Kuala Lumpur, Malaysia. Jag forskar, planerar, utformar och kodar webbplatser. Jag är goda vänner med Photoshop och HTML / CSS / jQuery, och jag gör kunder, användare och maskiner lyckliga.?
Här är en skärmdump av hemsidan:
Som du kan se är webbplatsen byggd på en färgstark spektrumbakgrund med ett mörkskydds taggmoln som innehåller saker som webbdesign? och? CSS3 ?. Vad du inte får från skärmdumpen är att bakgrunden har ett animerat element också. Det finns flera suddiga cirklar som flyter och pricker om bakom innehållet. Klicka på någon av skärmdumparna nedan för att sluta på webbplatsen och se den i aktion.
Den här webbplatsen är faktiskt ganska liten och enkel så vi tar en titt på var och en av sidorna och analyserar hur estetiken påverkar användarupplevelsen.
Hem
Jag uppskattar definitivt det arbete som gick in i webbplatsens estetik. Den omgivande inställningen är ganska vacker. Problemet med att skapa en så komplex bakgrund är emellertid att du så småningom måste lägga upp innehåll ovanpå det, vilket kan vara en mycket svår uppgift.
De stora bleka orden i bakgrunden minskar läsbarheten av texten på hemsidan. Huvudavsnittet är inte alls omöjligt att läsa, men designen är ganska upptagen i texten, vilket tvingar användarna att arbeta lite hårdare än de normalt skulle.
Vidare tenderar det röda som används som svävarfärg och betoningspunkt att gå vilse i bakgrunden. Detta är förståeligt eftersom det helt enkelt inte är lätt att hitta en färg som kontrasterar väl med en mångfärgad bakgrund. Men du vill fortfarande undvika visuell dissonans.
Den enklaste lösningen på alla dessa problem, och de flesta av dem som vi diskuterar idag, kan vara att helt enkelt placera en svagt transparent svart bakgrund bakom allt innehåll. Detta kommer att ge innehållet mer en solid grund att stå på och låter designern behålla den nuvarande bakgrunden.
Du kan också överväga att lägga till någon form av header-grafik till den här sidan. Jag gillade verkligen hur fotot på? Om? sidan stod ut och jag tror att den här ideen skulle kunna dupliceras här.
Handla om
Här ser vi en annan sida som är ganska attraktiv, men lider av samma problem som nämns ovan. Jag tycker dock om den intressanta layouten på jobbet här. Navigeringen stannar medan det andra innehållet rullar och sidan är uppdelad i tydligt separata och snyggt ordnade kolumner.
Omsidan delar upp i tre separata undersidor: introduktion, CV och saker jag gör.? Detta gör det möjligt för konstruktören att passa in ganska lite innehåll samtidigt som den primära navigeringen är super enkel.
Arbetar
The? Works? sidan är ett snyggt arrangemang av miniatyrer och text som i sin tur leder till dedikerade projektsidor som det som visas nedan. Miniatyrerna har en fin tjock gränsbehandling som hjälper dem att sticka ut från bakgrunden och citatet längst upp till vänster är stort och djärvt nog att läsas.
Jag finner rätt inriktning av det stora citatet för att vara lite besvärligt men. Allt på sidan har en stark vänsterjustering, och det är ofta effektivt att avsiktligt bryta en regel som denna, jag tror inte att den fungerar här. Den allmänna formen på stycket är oregelbunden, vilket gör det ganska svårt att läsa med rätt inriktning.
Kontakta
Sidans sista sida är "Kontakt?" sida. Detta innehåller några stycken text och en enkel men snygg kontaktform. Det första jag märkte här var att citatet högst upp på sidan känns lite av. Du kan försöka vänsterjustera den oberoende av citat så att? T? i? The? och dem? i? miles? bilda en hård linje. Detta bör hjälpa den vänstra anpassningen att känna sig lite starkare än den för närvarande gör.
Fälten i formuläret är vidare så transparenta att de är nästan osynliga. Återigen kan det här se bra men användbarheten lider. Kom ihåg att en sidas estetik har ett huvudmål: att markera innehållet på ett attraktivt sätt. Din design ska tjäna för att öka användbarheten, inte offra den i stilens namn.
När du klickar på ett fält för att börja skriva, ökar opaciteten och det blir mycket mer märkbart. Jag föreslår att du ställer in denna opacitet till standardstatusen och ökar den ytterligare när den väljs.
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.