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 Quote Roller, en underbar webbapp för att skapa och skicka professionella förslag.
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 Quote Roller
? Citat Roller hjälper till att automatisera och effektivisera förslagets skapande. Göm rutinmässig text, kopiera kopiering i Word. Med Quote Roller kan du spara och återanvända generell information om ditt företag, användarvillkor och andra saker som du brukade lägga in förslag manuellt. Citat Roller kommer också med ett vänligt och intuitivt dra och släpp-gränssnitt som har obegränsad anpassningsfunktion.?
Här är en skärmdump av hemsidan:
Initial Impression
Strax utanför flaggan kan jag berätta att jag verkligen gillar den här sajten. Det exemplifierar flera trender i modern webbdesign, vilket betyder att det inte är exakt unikt men det behöver inte vara. Poängen är att kommunicera att Quote Roller är ett avancerat, modernt, quote-building verktyg och den här designen gör just det.
Det är oerhört viktigt att behålla mål som detta i åtanke när du skapar en webbplats. Alltför många designers slår av i en riktning som passar deras humör på en viss dag, vilket resulterar i vackra webbplatser med leriga meddelanden. Grafiken på en webbplats är en primär kommunikationskälla och du vill se till att de säger vad du vill att de ska!
Färger
Det första jag vill diskutera är färgschemat eftersom det använder en mycket populär teknik som vi har diskuterat här tidigare. Den primära paletten använder olika blå nyanser, ett val för ett rent och professionellt utseende. När det här täta omfånget av färger har upprättats läggs en tonfärg i det som verkligen står ut på sidan, i detta fall orange.
Det fungerar väldigt bra eftersom det ger dig mycket makt att rikta användarens öga. När du rullar ner på sidan ser du massor av blå och vit avbruten av mycket få ljusa orter av orange. Dina ögon kommer naturligtvis att gravida mot de ljusa fläckarna, där du kommer att se och läsa exakt vad designern vill att du ska. Det är en super enkel teknik med starka resultat.
Grafisk tema
Huvudinnehållet på webbplatsen hålls i en runda hörnrektangel. Detta placeras ovanpå en kanvasstrukturerad bakgrund. Den här attraktiva men subtila texturen lägger stor vikt vid sidan och är väldigt lätt att bygga. Vi lär dig en liknande teknik i den här artikeln.
Navigationsområdet har ett riktigt fint band inslaget runt det. Detta tjänar till att både hjälpa navigationsområdet att sticka ut och ge en tredimensionell effekt på sidan som helhet.
Ett annat lager läggs precis ovanför sidfoten där kunden citerar och rekommendationer finns. Dessa typer av effekter ger bara webbplatsen en fin, polerad känsla. Du kan säga att designarna faktiskt tillbringade tid att förädla den estetiska kvaliteten.
Typografi
Har du inte budgeten för Typekit eller en liknande premium webbtypstjänst? Google Web Fonts erbjuder ett fantastiskt, gratis och enkelt att implementera alternativ. Citat Roller använder Google Web Fonts för? Merriweather? rubrik, en unik och sofistikerad serif.
Lägg märke till att anpassad typsnitt implementering här är ganska konservativ, bara rubrikerna använder Merriweather, resten är Arial. Genom att använda en anpassad typsnitt för kroppen är kopian bra, men det är inte alltid det bästa alternativet på grund av laddningstider. Vidare är det ganska lätt att bara gå nötter med fina teckensnitt och få det ultimata resultatet att se ut som en röra. En säkrare rutt är att bara hitta en anpassad typsnitt och låta den vara unik design.
Messaging
Meddelandet på webbplatsen är mycket enkelt och tydligt: • Skapa, spåra och skicka förslag? är den allra första du läser. Det finns inget att slå runt bushen, du förstår omedelbart vad som händer.
Detta förstärks av många skärmdumpar. Jag hatar absolut att hitta en ny webbapp och sedan leta efter minuter på slutet för att hitta en skärmdump. Ibland finns det inte någon på hemsidan eller till och med introvideoen! Om du gömmer gränssnittet tills en användare faktiskt loggar in, så antar jag att du skäms över det.
Närmare på messagingfronten gillar jag också hur funktionerna presenterades på denna sida. Den djärva rubriken med en liten ikon och en solid understrykning som är skild från stycket ser väldigt skarpt ut. Detta område är mycket läsbart och använder gott om utrymme för att ge varje föremål andningsrum.
Tour Page
Om du letar efter en solid produktturinspiration har Quote Roller en bra en. Jag gillar de stora skärmdumparna som alternerande sidor ner på sidan. Genom att rulla igenom den här sidan får du en snabb men grundlig titt på vad du får genom att logga in för appen.
Slutsats
Citat Roller är en riktigt snygg webbplats som tjänar sitt syfte väl. Det är rent, modernt och professionellt, en perfekt kombination när du säljer en webbtjänst till företagare.
Meddelandet är mycket tydligt med mycket förstärkning via ikoner och skärmdumpar. Färgerna är perfekta och det finns mycket uppmärksamhet på detaljer.
Sammantaget ger jag det en enorm tumme upp och kan inte riktigt tänka på något negativt att säga om det!
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.