[Leo_Ryberg]

• Om man inte har en jättestor skärm ser man inte slidern/rubrikerna utan att scrolla ned. Vore kanske bättre att placera slidern till höger, och lägga både slidern och rubrikerna (till exempel ”Maggördel Basic 295kr”) till vänster, under rutan som poppar fram när man hovrar över modellen.

• Rutan som poppar fram när man hovrar över modellen känns lite hackig och hoppig. Kanske låta den vara utfälld hela tiden, men fadea in/ut text när man hovrar över modellen istället?

I övrigt, snygg sida och bra koncept, lite nytänkande och kul.

[Leo_Ryberg]

Snygg butik. Enkel, bra layout.

Dock kanske det vore bra att göra så att man lägger produkten i varukorgen redan på sida ett, och checkar ut på sida två. Nu är sida ett en presentation, och därifrån klickar man sig fram till produkten, som är sida två. Därifrån går man till utcheckning, som är sida tre. Det flödet skulle nog gå att effektivisera lite.

[Leo_Ryberg]

Känner att jag kan bidra lite här, främst med grafiska grejer och lite utvecklingstips. Vore ju kul om fler lade till tips här, så att den här tråden blir någon sorts guidebok som nya e-handlare kan använda sig av.

Logotyper och grafiska profiler:

• En logotyp bör vara simpel i färg och form. För att det skall bli snyggt i tryck bör en logga helst inte innehålla några gradients/toningar. Bäst är generellt en logga som bara består av enfärgade fält, och en till fyra färger. Om du inte planerar att trycka upp något material behöver du inte tänka på antalet färger/toningar på samma sätt.

• En loggas igenkänningsfaktor bör vara hög. Bäst är en logga med en tydlig siluett, och klar, tydlig, läsbar skrift. Symboler bör vara enkla och fåfärgade.

• Om du beställer en logotyp och planerar att använda den i icke-digital form, se till att få en .ai- eller .eps-fil i CMYK-färg (additiv färgskala). Om du inte vill trycka logotypen räcker det med en pixelfil i storformat och RGB-färg (deduktiv färgskala).

• Tänk på att en logotyp helst skall gå att passa in i ett rektangulärt fält, utan att det blir massor av utrymme över i någon del av fältet. ”Spretiga” logotyper med enstaka delar som sticker iväg på höjden eller bredden är generellt svåra att passa in i till exempel listor över logotyper, och tar onödigt mycket plats i annonser. Tänk ”platseffektivt” så blir det oftast bra.

• Om du beställer en grafisk profil bör du få åtminstone följande:
– Logotyp med regler för användning.
– Typsnitt för rubriker och brödtext till både webb och tryck (Om du inte beställt specifikt för webb).
– Färger och regler för hur de skall användas – vilka färger som går på vilken bakgrund, osv. Färgerna bör vara specificerade i RGB, CMYK och i vissa fall även i Pantone-skalan. Pantone är viktigast om du trycker upp stora mängder material, då tryck i Pantone (en skala av färdigblandade färger) är billigare än CMYK-tryck.

• Ett bra ställe att trycka upp visitkort/kort är moo.com. De har en speciell tryckteknik som gör att man enkelt kan trycka kort som är likadana på ena sidan, men olika på andra sidan. Detta är oerhört dyrt att göra med traditionell tryckteknik, så om du till exempel vill kunna dela ut visitkort med unika rabattkoder på utan att det blir helt sjukt dyrt, är detta rätt ställe.

Grafiskt / Användarinteraktion:

• Köpknappar i en utstickande färg konverterar bättre. Använd gärna klara färger, och undvik varningsrött.

• Ju färre steg kunden behöver gå igenom för att handla, destå bättre för konverteringen. Det är till exempel bra att kunna lägga produkter i varukorgen direkt från produktlistningen. Ännu bättre (främst om dina kunder brukar köpa en produkt i taget) är en ”köp nu”-knapp i produktlistningen som öppnar en popup-snabbkassa, så att man kan handla direkt från startsidan.

• Begränsa dig till högst två typsnitt, och använd dem konsekvent. Till exempel kan du ha ett typsnitt till rubriker och puffar, och ett typsnitt till all brödtext. Flera typsnitt gör att det ser rörigt ut.

• Använd fetstil, klara färger och textstorlek för att dra uppmärksamhet till specifika delar av layouten. Ge det viktigaste elementet (ofta köpknappen) störst visuell tyngd. Arbeta dig sedan nedåt mot de delar av sidan som är minst viktiga att kunden uppmärksammar.

• Ha inte animerade element (till exempel en slider/film) i närheten av ett viktigt stycke text / en köpknapp. Rörelserna på skärmen fångar kundens uppmärksamhet, och leder iväg uppmärksamheten från köpknappen. Om du vill ha en slider/film, se till att det är det elementet som är huvudfokus på sidan, och att man lätt kan ledas vidare till ett köp via det animerade elementet.

• Begränsa dig till ett fåtal färger. En bra grafisk profil brukar specificera upp till fem olika färgkoder eller så – Och då är flera av dem ofta olika nyanser av samma grundfärg.

• Ha lägre färgmättnad (och i vissa fall kallare färger) på element i ”bakgrunden”, och högre färgmättnad på element i ”förgrunden”. Det är samma trick som illustratörer och konstnärer använder för att skapa djup i en bild. Man koncentrerar sig automatiskt på färgglada element, och lägger mindre fokus på sådana som är blekare.

• Trygghetsingivande logotyper bör vara tydliga, men de bör inte se plottriga ut, då detta ger butiken ett mindre seriöst intryck. Samma sak med olika ”trygg e-handel”-stämplar. Använd om möjligt monokromatiska varianter av logotyperna/certifieringarna, och anpassa tonen efter din sidas design.

• Var försiktiga med färgmättnaden. Fullt mättade färger är nästan alltid obekväma att titta på när du sitter vid en skärm, speciellt under längre perioder, och särskilt om du har text i en mättad färg på en bakgrund i en annan. Till exempel klarrött på kolsvart, eller klarblått på kritvitt. Det anstränger läsarens ögon, och det är lätt att undvika genom att använda lite mildare toner.

• Använd off-white(Typ #efefef) och off-black(Typ #2b2b2b) till texter istället för kritvitt(#ffffff) och kolsvart(#000000). Det är betydligt snällare mot läsarens ögon. Speciellt om det handlar om svart text mot vit bakgrund eller vice versa. Svart text på vit bakgrund fungerar väldigt bra i pappersform, men mindre bra på skärmar. Skärmar lyser och anstränger ögonen, till skillnad från papper.

• Anpassa sidan för en upplösningsbredd på 1024px. Detta är standard, och ingen med en någorlunda modern dator kommer att behöva sidoscrolla. En innehållsbredd på 960 px fungerar utmärkt. Det är i regel aldrig bra att göra en webbsida smalare än nödvändigt, eftersom du begränsar innehållsmängden.

• Om du vill ha en design som fungerar bra på mobila devices bör CSS-stylingen utgå från en responsive-mall. Det finns många bra sådana där ute, bland annat Skeleton och Foundation.

• Se till att dina länkar och knappar byter utseende vid hover. Knappar bör också byta cursor till pointer. Användare är vana vid detta, och förstår kanske inte att dina länkar är länkar om de inte byter färg / får underline vid hover.

Hoppas att det här hjälper någon. Cheers.

[Leo_Ryberg]

Nu kommer det här kanske vara rätt mycket kritik. Jag menar bara väl, så ta inte illa upp.

• Loggan är snygg, men den svarta konturen har en pixlig och skarp kant. Misstänkte först att den var i .gif-format, men den var .png. Måste vara lite dåligt urklippt.

• Leverantörernas loggor syns dåligt mot den spräckliga bakgrunden. Om du lägger dem inom en mörk board istället, kommer de att synas bättre.

• Footern bör vara lika bred som den vita boxen där innehållet ligger. Du skulle även kunna använda samma bakgrundsfärg som du använder till resten av sidan.

• Footer-boxen behöver inte ett slut och en bottenskugga längst ned. Den kan helt enkelt gå hela vägen ned till slutet på sidan. Det ser lite underligt ut när sidan slutar längre ned än footern.

• Du har dubletter av betalningsalternativen högst upp på footern. Varje logga visas två gånger.

• In Ear, Over Ear och On Ear-flikarna ser skumma ut där det skall vara transparent. De är lite mörka där, vilket ser skumt ut när de överlappar bannern. Samma sak gäller för de tre flikarna längst upp till höger. Du kan själv se de mörkare fälten vid flikarnas rundade hörn.

• har en bakgrundsbild i full storlek som tar upp 1.4 mb. Även de andra bilderna är väldigt stora och tidskrävande att ladda. Jag sitter på en hundramegabitslina, och det tog väl uppåt en minut att ladda sidan fullt ut. Använd färre bilder, spara bilderna i lite, lite lägre kvalitet (det kommer att spara utrymme, men märks knappt). Använd bara .png om du har transparens i bilden. Annars funkar .jpg mycket bättre.

Ett ännu bättre alternativ är att ha en mycket mindre bild med ett brusigt mönster, som du sedan repeterar i båda riktningarna. Detta minskar laddningstider väldigt mycket.

• De gröna, fyrkantiga köpknapparna på huvudsidan hänger inte ihop med sidans tema i övrigt. Rekommenderar att du rundar dem på något snyggt sätt. Knapparna har också bakgrundsbilder i .png-format. Du kan få fram knappar som ser ut precis på det viset med css3, så det behövs egentligen inte bilder där över huvud taget. Allt det resulterar i är längre laddningstider.

• Köpknappen på produktsidan skiljer sig från köpknappen på startsidan. Texten på knappen är även icke-centrerad i höjdled. Det där går också att göra snyggt med css3, och då slipper man även laddningstiderna.

• Kundvagnsidan ser inte ut som resten av sidan. Försök att använda ett konsekvent färgtema, och håll dig sedan till det. På kundvagnssidan ligger även produktnamnen slickade mot bildens lägre högerkant. Det bör nog vara någon typ av marginal där.

• När jag tar bort en produkt ur kundvagnen ligger den kvar i kundvagnsfältet i headern tills jag laddat om sidan.

• Kundvagns-rutan i headern har en helt annan grafisk stil än resten av sidan.

Generellt:

Jag tror att du måste välja om du vill ha den fyrkantiga, grå stilen som du har i footern och i popup-rutorna ”sök”, ”kundvagn” och ”mina sidor”, eller om du vill ha den spaceade stilen i svart, vitt och mörkblått, som du kör på resten av sidan. Stilarna ser ut att höra till helt olika grafiska profiler.

Du borde gå igenom alla bilder, och kolla vad som kan ersättas med CSS. Kolla på Button Maker om du vill ha ett schysst GUI för att få fram utseendet du vill ha på knappar. Det är bara att dra i sliders och fixa tills du är nöjd, sen copy-pastear du in koden.

Det som inte kan ersättas borde sparas ned i aningen lägre bildkvalitet. 80% brukar funka på jpg utan någon nämnvärd kvalitetsförlust. Bakgrundsbilden borde du göra liten och tileable istället. Vill du ha den ljusare högst upp kan du lägga ett lager med en transparent highlight där istället för att spara ut hela bakgrunden i ett stycke.

[Leo_Ryberg]

@mephisto73 54222 wrote:

Grym logga, du har defintivt en karriärmöjlighet i gebitet.

Loggor med subtila detaljer går ofta förlorade tycker jag. Monolitiskt och övertydligt är ofta effektivt.

Tack för uppskattningen! Jag jobbar redan med det här, så karriärsmöjligheterna är jag medveten om.

Jag vill inte kapa den här tråden, så om du vill prata mer eller beställa en logga, får du gärna kontakta mig via pm.

[Leo_Ryberg]

@Tian 53878 wrote:

Väldigt, väldigt snygg, Leo.
Själv ser jag dock ”någon med mage” liggande på den senare och är mer för ”keep it simple” enligt det första utkastet faktiskt.

Man får nog passa sig när man feedbackar någons logotyp, (särskilt om det inte efterfrågas) det är ju med stort engagemang man framställer dem oftast.
Lite som att ”fritt utrycka sig om någons outfit för dagen” och huruvida den för bytas ut / och / eller förbättras.

Man uttrycker ju ofta något med sin logga.
Som Greger på riktigt påpekar, naturligtvis väljer man själv.

Jag tycker det är viktigt att kunna stå för och ”stå bakom” / verkligen tro på sin grej.
Det brukar bli bäst då.

Ja, kanske den första, raka handtagsformen blev bättre. Blir en snygg, rak linje där, som ligger parallellt med knivens bottenlinje. Tyckte att den såg lite oarbetad och ”rå” ut, men som du säger, den första versionen kanske var bättre.

Det är ju naturligtvis Per som väljer. Jag kom mest med ett förslag, och det var absolut inte meningen att kapa tråden. Jag är en sådan människa som har lite svårt att hålla fingrarna borta när jag tror att jag kan förbättra något. Inte över huvud taget meningen att trampa på någons revir

Förresten. Jag är ny på det här forumet. Finns det någonstans där det är okay att posta upp en tråd och ta requests på logotyper? Sen jag lade upp den här har min inkorg blivit översvämmad av folk som undrar om jag kan göra saker åt dem. PMa gärna era tips om ni har några, så att vi inte går ännu mer OT i denna tråd.

[Leo_Ryberg]

@skinza.se 53875 wrote:

RIKTIGT snygg logotyp! Skulle kört på den direkt om jag vore dig Per!
Du vill inte skissa på en logga åt Skinza?

Jovisst. Du har PM.

Putsade upp konturerna på kniven lite. Drog ju bara upp ett snabbt utkast igår, och räknade inte med att alla skulle gilla den så pass mycket. Ordnade till den lite nu så att den skall se representativ ut.

[Leo_Ryberg]

Tycker att det är underligt att välja ett hus till logotypen. Det signalerar att huset står i fokus, och inte knivarna. Hus i loggan får mig snarare att tänka på en mäklarfirma.

Först såg jag inte heller att de två svarta detaljerna på sidorna om texten var fram- och bakändan på en kniv. På webbsidan är de så pass små att man missar dem. Så hus-delen hamnar ensam i fokus.

Gjorde ett snabbt utkast på hur jag skulle ha gjort det. En mot ljusare, och en mot mörkare bakgrund, beroende på kontext:

[Leo_Ryberg]

• Skulle lägga till ett hover-färgbyte på submenyerna. I nuläget är det lite otydligt vad som är ”markerat” när jag för musen över alternativen i en submeny. Kanske lysa upp hela

[Leo_Ryberg]

• Tror att du skulle tjäna på att lyfta fram kategorierna i en textmeny till vänster istället. Nu ser jag inga produkter om jag inte scrollar. Navigationssystemet är för olikt andra siter, så användare har inga referenspunkter. Kategorierna ser snarare ut som produkter, eftersom de har bilder.

• Skulle nog vara bra att lyfta fram populära produkter högst upp under slidern, istället för att lägga kategorierna där.

• Sökfältet är för likt bakgrunden. Det verkar onödigt brett, men det kanske inte skadar. Skulle iallafall rekommendera att pröva att lägga till de här reglerna till tabellen där sökfältet ligger:

border: 1px solid a6a6a6;
border-radius: 8px; (och motsvarigheter för olika webbläsare)

• Texten i ”Varukorg och Kassa”-knappen i menyn är inte centrerad i höjdläge. Om du ändrar padding-top på .menuOver till 8px borde det se rätt ut.

• Solid klarröd mot svart bakgrund skär lite i mina ögon. Det kanske bara är jag, men om inte borde du nog använda en mildare färg. Kanske inte använda solid svart i menyn, utan en väldigt mörkgrå gradient istället? Texten skulle jag göra ljust, ljust grå. Typ #989898 eller något.

• Typsnittet, storleken och färgen på loggan gör att jag inte kan läsa den. Vill du sälja lyx-produkter och ge ett matchande intryck borde du kanske använda någon typ av lyxtypsnitt? Kanske en bodoni? ”Champagne and Limousines” finns det ett rätt bra typsnitt som heter. Även ”Derivia” är bra.

• Du bygger trust bra i footern, med loggorna från kända företag. Men man måste scrolla ned oändligt långt för att komma dit. Försök att hålla startsidan relativt kort i höjdled, eller sätt loggorna i menyn också?

[Författare]

Inlägg