Ik ben bezig met het ontwerpen van een webshop. Het gaat over een webshop in ramsj - grote partijen boeken die (onder de titel "beschadigd") voor spotprijzen verkocht worden. De site moet overzichtelijk zijn, maar toch veel informatie tonen.
Bij het ontwerpen heb ik gekozen voor een brede content-kolom aan de linkerkant met daarnaast een sidebar aan de rechterkant. Twee sidebars - zoals gebruikelijk is bij webshops - vond ik niet praktisch: het wordt direct een stuk drukker en er is minder ruimte per kolom.
Bij de indeling van de site heb ik rekening gehouden met de paginavouw: zorg dat de belangrijkste elementen zonder scrollen (in de praktijk dus tot 570 pixels van de bovenkant) te zien zijn. In de sidebar gaat het om de zoekfunctie en de lijst met categorieën. Verder is het duidelijk als (een deel van) het winkelwagentje te zien is.
Op de productpagina's is het belangrijk dat in de content alle belangrijke gegevens direct zichtbaar zijn: een afbeelding, de titel, de auteur(s), de categorie, een korte beschrijvende tekst, de prijs en natuurlijk de bestelknop.
Tot nu toe heb ik enkel het design van de homepage. Als blijkt dat men hier positief over is zal ik in die stijl doorgaan.
Ik zal actief in dit topic blijven reageren en eventuele updates van het design blijven posten.
Even een vraagje naar Jonathan, hoe ga je precies te werk als je aan een website design begint? Als je gewoon zomaar ergens begint, dan ben je al niet goed bezig.
Het beste wat je kunt gaan doen is beginnen met de meer bekendere webshop site's zoals ebay, amazon en marktplaats. Vergelijk wat deze site's in het gemeen hebben en begin dat in je eigen design te verwerken (nu zeg ik niet dat je de kleuren etc. moet gaan kopieren, maar de lay-out).
Na je hebt bepaald waar je alles gaat neer zetten (schets), ga je bepalen wat voor kleuren je wilt gaan gebruiken, ikzelf zou bij een webshop voor een witte achtergrond gaan. Kijk ook eens bij colourlovers.com of iets dergelijks voor inspiratie.
Nu je de schets en kleuren hebt, gooi ze bij elkaar, tweak het wat beter zodat de algemene UI ook klopt en laat het dan zien.
Wat overigens het meest belangrijke is, is dat een gebruiker geintresseerd moet zijn, maar de site moet ook SUPER simpel zijn in gebruik (shoppers zijn dom).
@Mitchell
Als je het over webshops hebt vind ik E-bay en Marktplaats al geen goed idee. Amazon is dan een beter voorbeeld.
@Jonathan
Ook de lay-out hoef je niet zomaar over te nemen, deze zoals die hier is lijkt me wel aardig prima. Misschien dat je beter (net als bij Bol.com) ook een horizontaal menu kan gebruiken (puur voor schakelen tussen "boeken, dvd, cd etc., winkelwagentje")
Dit maakt het voor de bezoeker denk ik wat gemakkelijker.
Qua indeling vind ik hem verder wel leuk zo. Net als Mitchell mis ik nog wel wat in de kopjes, die zijn zo erg kaal en vallen niet zo op. Misschien de tekst wat anders positioneren, een plaatje erin verwerken ofzo. Iets fleuriger.
Zelf zou ik het veel minder in afgesloten blokken opdelen (maar slechts scheiden door witruimte, in een witte pagina zonder kleurblokken :) ) maar dat is een smaakverschilletje, en ik kan me er ergens wel in vinden dat je gele layout die je momenteel hebt beter bij de doelgroep past.
Maar wat ik wel mis in deze layout zijn de 'meer (##)...' linkjes in de blokken. Je toont nu altijd maar 4 boeken, maar wat nu als ik die 4 al heb, maar toch wil bladeren in die categorie ("nieuwe boeken" bijv. of "van deze schrijver")
En als je specifiek op ramsj doelt, misschien is het leuk om dan de prijs in de overzichten (de 'voor' prijs) wat beter uit te lichten, of in je sidebar prijscategorieën te maken (voor wanneer iemand bijvoorbeeld cadeautjes zou zoeken)
Totally off-topic
Stuur me een PM/e-mail als de site af is! En hoe beschadigd zijn die boeken?
Ontopic
Ik vind het ontwerp niet lelijk, maar wel wat saai. Misschien kan je op een paar pekken wat icoontjes verwerken? Bijvoorbeeld in het zoekveld. Voor de titels aan de rechterkant.
Of links en rechts wat andere kleurtjes gebruiken, waardoor het minder een blok wordt.
Ik las van de week (volgens mij in een oude Twinkle) dat mensen graag zien wat ze besparen. Doe bij de prijzen zoiets als bij Bol.com. 'Advies prijs € 10,00, onze prijs € 5,00, u bespaart: 50%'.
@Mitchell: er is wel degelijk over nagedacht. Een aantal dingen zijn belangrijk (zoeken en de categorieën) en die moeten duidelijk te vinden zijn. Verder moet de site simpel te gebruiken zijn. Concurrenten van de webshop hebben een groter assortiment, deze webshop moet het dus hebben van de uitstraling en de informatie die on-line aangeboden wordt. Daarom is ervoor gekozen om alles lekker simpel te houden.
@Robert_Deiman: een top-menu lijkt me een beetje verstorend werken, ik denk niet dat het er mooi uitziet. Ik zal nog even nadenken over de kopjes.
@Jelmer: samen met de opdrachtgever is ervoor gekozen om enkel vier bestsellers, nieuwste titels, aanbiedingen (gaat er misschien zelfs uit) of aanraders op de homepage te tonen. Meer (met een doorklik) is niet de bedoeling. Op de productpagina zullen de gerelateerde boeken en de "kopers-die-dit-boek-kochten-kochten-ook"-boeken gelimiteerd zijn tot vier stuks. De "meer-van-deze-schrijver"-boeken moeten wel doorklikbaar worden. Ik dacht er aan om de titel van het blok als link te gebruiken, maar ik denk niet dat mensen dat direct begrijpen. Misschien moet ik daar dus nog een meer-linkje in verwerken.
Ik zal inderdaad even kijken of ik de voor-prijs wat opvallender kan maken.
@Elwin: ik zal je nu een PM sturen met de URL, anders ga ik het vergeten. Hier in het topic noem ik nog even geen namen/URL's. Verder over de beschadiging: door wettelijke/contractuele dingen kunnen uitgevers boeken niet vroegtijdig goedkoop wegdoen. Zoals Wikipedia ook zegt zijn de boeken óf onbeschadigd óf expres licht beschadigd (viltstift langs een stapel boeken o.i.d.). Het gaat dus gewoon om boeken in goede staat.
Ik zal even kijken of ik nog wat icoontjes neer kan gooien, maar is het echt nodig? Het gaat erom dat de boeken vooral opvallen, volgens mij is dat nu wel zo. Ook de besparing zal ik ergens proberen te verwerken.
