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.
Idag ska vi titta på webbplatsen för RoyalSlider, en populär JavaScript-innehållsreglage. 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 RoyalSlider
? Möt den nya versionen av populäraste reglaget på CodeCanyon. Sedan juli 2011 såldes 4637 licenser. Vi har fått, 5 av 5 stjärnor betyg baserat på 378 recensioner.?
? Varje skjutmall är mottaglig. Ta en titt på den i din mobila enhet eller försök att ändra storlek på din webbläsare för att se effekten.?
Här är en skärmdump av hemsidan:
Första intrycket
Jag älskar att dyka in på webbplatser som verkligen är fokuserade på detta eftersom vi kan utveckla en tydlig uppsättning mål och väga framgången med designen mot dessa mål.
Så vad handlar den här sidan om? Det enda syftet är att sälja en produkt: The RoyalSlider ,? vilket är faktiskt ett extremt populärt objekt på CodeCanyon. Med den här mini-webbplatsen kan utvecklaren verkligen gå in i bra detaljer om hur fantastisk skjutreglaget är och vad det gör.
Som du kan se på skärmdumpen ovan har han gjort det exakt. Själva platsen är väldigt attraktiv, så ur ren estetisk synvinkel, har jag inte mycket att säga annat än? Bra jobb !? Men från en innehållsorganisationssynpunkt tror jag att vi kunde se några förbättringar.
? Från en innehållsorganisationssynpunkt tror jag att vi kunde se några förbättringar. ?Med tanke på att utbildande besökare om denna produkt är ett primärt mål tror jag att vi kan omstrukturera en del av informationen för att bättre passa våra behov.
Låt oss zooma in och ta en titt på några specifika områden för att se hur vi kan göra några förbättringar.
Rubriken
Sidhuvudet är definitivt den bästa delen av sidan. Designern använde detta område för att visa upp sin produkt, vilket är perfekt, speciellt med tanke på att den är så vacker och mycket funktionell!
Designen här och någon annanstans är super minimal. Vita, grå och svarta är de primära färgerna som fyller sidan med en djärv, iögonfallande röd som används för områden som uppmärksammas.
Navigationen är lätt att använda, logotypen är enkel men attraktiv, och det finns en uppenbar länk för att köpa objektet på CodeCanyon. Det är ärligt inte så mycket jag skulle ändra här.
Den enda sak som jag skulle tänka på är att kasta ett dristigt rubrik ovanpå de två styckena till höger. Just nu drar skjutreglaget så mycket av din uppmärksamhet (bra) att dina ögon förblir förankrade till det utan att nödvändigtvis göra resan till den lilla texten till höger.
? Att se en bit av stor, djärv text, nästan oavsett vad den sa, skulle hjälpa till att dra användarens uppmärksamhet över? ?Att se en bit av stor, djärv text, nästan oavsett vad den sa, skulle hjälpa till att dra användarens uppmärksamhet över till den viktiga informationen i den del av innehållet. Här är en snabb och smutsig mockup av vad jag menar:
Funktionerna
Hela resten av sidan är upptagen med ren text: över tjugo stycken! Var och en av dem är kort, snygg formaterad och innehåller en rubrik, vilket gör sidan ganska lätt att bläddra igenom.
Trots att texten är snygg formaterad tror jag att det här området skulle kunna använda en stor ansiktslyftning. Huvudmålet med detta steg skulle vara att bryta upp allt detta textinnehåll så att det blir lättare att siktas och mer attraktivt att se. Detta kan åstadkommas med en kombination av två olika tekniker.
Lägg till stödjande bild
Det första som jag skulle vilja se i detta område är några bilder. Varje gång du har stora bitar med textinnehåll, är det en bra idé att arbeta i någon form av visuella bilder för att hjälpa till med att bära innehållet och lägga till visuellt intresse för sidan.
Tjugofem stycken är mycket innehåll och utan visuellt hjälpmedel kommer du att förlora dina läsare. Kom alltid ihåg att folk som surfar på nätet har ADD, vi sällan fokuserar vår uppmärksamhet på en sak.
Dina besökare läser igenom Twitter, kontrollerar deras e-post och uppdaterar Facebook, allt medan du tittar på din webbplats! Om du ska konkurrera om uppmärksamhet i den miljön måste du ta med mer till bordet än några stycken.
? Dina besökare läser igenom Twitter, kontrollerar deras e-post och uppdaterar Facebook, allt medan du tittar på din webbplats !?En enkel lösning skulle vara att samarbeta några av styckena med miniatyrbilder. Rubrikerna här, till exempel? Snabbvänlig? och? video support ,? låna sig perfekt till förhandsvisning av miniatyrbilder så att det inte borde vara så svårt.
Skapa klara sektioner
Nästa strategi som jag skulle vilja se här är att ta allt detta textinnehåll och dela upp det tydligare i olika avsnitt. Just nu finns det två avsnitt, men de är inte riktigt visuellt distinkta på något sätt.
Jag skulle rekommendera att dela innehållet i minst tre eller fyra avsnitt, skapa större, mer framträdande rubriker, och eventuellt ändra bakgrundsfärgen på varje sektion något för att hjälpa dem att skilja sig (alternativt mellan vitt och grått).
Inspiration: Squarespace
En webbplats som jag tror drar av de råd som jag ger här ganska bra är Squarespace. Den här webbplatsen är estetiskt mycket lik RoyalSlider, men hur de presenterat sina funktioner är mycket mer engagerande och imponerande.
Lägg märke till den rika bilden, stora rubriker och varierande bakgrundsfärg.När du rullar ner på sidan är sektionerna tydliga distinkta och så attraktiva att informationen inte är överväldigande.
Jag föreslår inte att någon ska riva av Squarespace-designen, men du kan lära dig några värdefulla lektioner genom att analysera vad de har gjort och varför.
Responsive FTW
Antalet mottagliga webbplatser på nätet ökar stadigt. Jag är glad över att se webbutvecklare från hela, från stora företag till enmansoperationer, vilket gör responsen högsta prioritet i sina mönster.
? Det är inte bara RoyalSlider-webbplatsen som är fullt lyhörd, glidaren själv är responsiv. ?Denna sida är ett lysande exempel på denna trend. RoyalSlider-webbplatsen är inte bara lyhörd, glidaren själv är responsiv. Detta är ingen liten prestation och jag lovar utvecklaren här för hans engagemang för att göra webben lite mer av en agnostisk upplevelse av enheten.
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.