WIP layout for a webshop | Another update

[DementedHero]

I'm working on a project for school atm, for which our group has to create a complete webshop.

 

That includes a layout ofcourse. We haven't spoken about it yet, tomorrow is the first meeting, but I went ahead and started on this. xD

 

 

 

We got assigned Cd's and Video's (DVD's) as the products to sell.

 

 

 

 

 

 

 

NOTE:

 

This is a heavy heavy WORK IN PROGRESS, so it is far from finished.

 

 

 

 

 

Little explanation:

 

 

 

Top left, the login screen for existing customers. A register button/link will be added later. Some text and finishing touches will be added too.

 

 

 

Top middle, header with the big menu, with icons.

 

Haven't made 2 of the 4 icons yet, and it's not yet clear wether 4 will be all the icons, but oh well. For now, I placed some placeholders.

 

Yes, I'm aware of the fact that the light-reflection thing under the home-icon is smaller as it is under the cd, but I'll fix that in the next update.

 

I'm also aware that the perspective on the house is off, fixing this too.

 

 

 

Rollovers for the menu will probably be something like a spotlight focussing on the item. Perhaps made in flash.

 

 

 

 

 

Top right, a placeholder for the logo, which isn't done yet because we haven't got a proper name for the shop yet.

 

 

 

 

 

Middle left, the shopping cart, with all the items you've placed there. If you place anything in your cart, it appears there.

 

Has yet to be made and finished, some text, lot's of finishing touches. Nothing here yet, just the shape.

 

 

 

Middle, content area, where you can look at the various products for sale.

 

Every page will contain 9 thumbnails, with an option to view the specific details of the product you want. Has yet to be made too.

 

I put the outlines there, to give a general idea of how the section will look.

 

 

 

 

 

Bottom left, search function. If you're looking for a certain specific product, you can search here.

 

A link for advanced searches with criterea, for a more specific search.

 

Yet, I'm aware that that line does not start with a capital U. It's because the font does not support capital vowels. (That's a vowel right? U A I O E?) Will fix this in the next update.

 

 

 

 

 

Bottom, blue part.

 

Little disclaimer and copyright stuff will be here.

 

Left and right of the thing will be some small speakers of sorts, in the same style as the icons.

 

 

 

 

 

 

 

Voila:

 

 

 

 

Started on this yesterday, so not alot of hours in this yet, although I do have quite a bit of sketches done on paper.

 

 

 

 

 

All illustrator.

 

 

 

 

 

 

 

*edit*

 

Oh, and a few more edits:

 

The menu, with the icons, will be a bit smaller. It kinda looks too big. So, I'm moving it a bit left while resizing it, leaving a decent space at the right for a header with a certain photograph and the logo.

 

 

 

Theres also going to be a bit of space between the header and the content area, to show a little map of the site, where you are at the moment. Like:

 

Main>Shop>Cd's>Rock, or something like that.

 

 

 

 

 

*edit*

 

 

 

 

Things yet to fix:

 

Perspective on the home icon.

 

Align the blue rectangles at the top of the menu with the ones beneath it.

 

 

 

And finish the rest ofcourse XD

 

 

 

 

 

Latest update:

 

 

 

 

Added the last icon, put up a stockphoto for the banner (Note, this will not be the final banner, this is just a filler).

 

Moved the search feature upwards, where it is easier to notice.

 

The empty box will be used for featured product or something similar.

 

 

 

Added a 'scrollbar', just visualising how things would look when coded. As 9 products per page is a bit of a low amount, the part will have a scrollbar, enabling more products to be shown.

 

 

 

 

 

Another update, not done yet.

 

[Lovelydude]

I like this a lot. There's plenty of space, and everything is clean and readable. The layout's nice and comprehendable, and your use of complementary colours keeps it vibrant and interesting.

 

 

 

No crits, just keep working at it. ;D

[mvpmonkey2]

Yes, very nice layout, 'specially for 1 day mate. Good coloring, and excellent work in Illustrator. Good luck on the project! \

[rik]

Looks realy, realy proffesional DM =D> Only a few things: chance paswoord (Bad dutch -.- ) to wachtwoord, the search engine is placed on a pretty rare place, because the most search engines are on top of the page and the most people took there for them :wink:

 

 

 

And a thing that could possibly get anoying for some people: With only 9 places you will always have to go to a new place, but with maybe a few hundred singles that could be pretty anoying :wink: Maybe exstend it to 15 or something thats alreay alot better i think...

 

 

 

Also good luck with your project, i have done something simular a year ago for fun (and for a good note or whatever rapport is in english...).

 

 

 

I hope ur mates dont hate u becouse u already started without them :P and goodluck with this :

[LeonardMart]

really like it, brilliant colors, great pictures, and the best thing is that Demented Hero is taking part!

 

nice site so far, rik is right about the search engine wouldnt have noticed myself, i dont speak dutch

 

 

 

:thumbsup:

[DementedHero]

Yeah I was thinking about changing paswoord to wachtwoord.. It's not that much of a deal, paswoord is decent dutch too, but wachtwoord might seem a bit more logical.

 

 

 

I'm still doubting wether to go with a version like this, 9 at a page, or a scrolling page, with like 30+ products on there. Don't know yet.

 

 

 

The search functions is staying where it is, because I like it there, it's clearly visible, not hidden somewhere, so it shouldn't be too hard for people to adjust to this.

 

Or perhaps I can place it in the orange stripe underneath the menu, alongside the sitemap. Will discuss this with my mates.

 

 

 

 

 

Posted a little update.

 

 

 

 

 

 

 

 

Things yet to fix:

 

Perspective on the home icon.

 

Align the blue rectangles at the top of the menu with the ones beneath it.

 

 

 

And finish the rest ofcourse XD

[DementedHero]

Added another update.

[LeonardMart]

i suppose "bestel" means "order"? (sounds like bestellen in german) :?:

 

 

 

But as the whole website is about a shop, you don't really need an extra tab for ordering, do you? Many websites simply put a "Buy" or the like button on the details page of a specific product. Of course you would need that tab for ordering if you have a "Shopping cart" feature where you "add" products to the cart and at the end click on "order" to automatically put all your bought stuff in a single order.

 

 

 

I reccomend you to have a look at other online shops like amazon.com for guidelines

 

 

 

Keep on the good work!

[DementedHero]

I wasn't sure what exact word to put there, but it's just an extended shopping cart, removing things, plus checking out and paying for the products.

[DementedHero]

Added another update.

[WeeBoab]

very nice! sleek and professional looking. keep it up.

[xxxShade]

Looks like your group's got it made :P

[rik]

sry for the incoming dutch people :P

 

oke, een paar dingen:

 

 

 

* In de laatste versie bij "Meer info" heb je hierzo en hier, een wat proffesionelere manier is (denk ik): klik hier of hier

 

 

 

* Nu dat "liginnaam" duidelijker is geworden door het oranje kleuren, valt het mij pas op dat het raar klinkt; namelijk loginnaam in plaats van inlognaam :P

 

 

 

* Bij winkelwagen denk ik dat het plaatje van het mandje beter iets meer naar rechts kan worden verplaatst zodat het wat meer bij de tekst komt te horen.

 

 

 

* Sry dat ik het vraag, maar wat betekend dat bij disclaimer: "niet verantwoordelijk voor blaat hallo hier nog een disclaimer" moet daar soms andere tekst komen te staan die jullie nog niet bedacht hebben? naja, was iets wat me opviel.

 

 

 

* Hmm... lijkt me niet zo handig als alle producten dezelfde code hebben :P heb je er 1 in de aanbieding voor 5 euro heb je dat meteen bij allemaal :P

 

 

 

* De zoekfunctie is nu naar een veel fijnere positie geplaatst, maar nu heb je volgens mij de optie uitgebreid zoeken niet meer :s Ik weet niet of jullie dat willen maar misshcien kan de tekst bijv. de tekst "zoeken", de plek waar je het moet invullen en het bevestig pijlje iets naar rechts en dat je daar iets maakt waardoor je bijv. een pop-up schermpje krijgt met daarin de uitgebreid zoeken functie :?:

 

 

 

* Het is best irritant dat allen met een soort verloop is gemaakt. Bijvoorbeel onderin bij de disclaimer is dat toch niet nodig :s

 

 

 

* Misschein kunnen jullie om de voorkant plaatjes van de album's een kader maken zodat het wat meer geselecteerd lijkt ofzo? Nu is het veel te direct met de achtergrond, bijvoorbeeld bij nelly furtado, haar shirt kleur komt bijna overeen met de achtergrond en lijkt daardoor redelijk apart ;)

 

 

 

Dit is wat ik hoofdzakelijk tot nu toe tegenkwam, verder is het een mooie en ook goede site :wink: trouwens het nederlands is niet alleen in het engels om de reden hieronder maar ook omdat ik niet alles precies in het engels weet te formuleren :-#

 

 

 

 

 

sry for the dutch, but i didn't had the mood to say everything in english -.- :anxious:

[DementedHero]

sry for the incoming dutch people :P

 

oke, een paar dingen:

 

 

 

* In de laatste versie bij "Meer info" heb je hierzo en hier, een wat proffesionelere manier is (denk ik): klik hier of hier

 

 

 

* Nu dat "liginnaam" duidelijker is geworden door het oranje kleuren, valt het mij pas op dat het raar klinkt; namelijk loginnaam in plaats van inlognaam :P

 

 

 

* Bij winkelwagen denk ik dat het plaatje van het mandje beter iets meer naar rechts kan worden verplaatst zodat het wat meer bij de tekst komt te horen.

 

 

 

* Sry dat ik het vraag, maar wat betekend dat bij disclaimer: "niet verantwoordelijk voor blaat hallo hier nog een disclaimer" moet daar soms andere tekst komen te staan die jullie nog niet bedacht hebben? naja, was iets wat me opviel.

 

 

 

* Hmm... lijkt me niet zo handig als alle producten dezelfde code hebben :P heb je er 1 in de aanbieding voor 5 euro heb je dat meteen bij allemaal :P

 

 

 

* De zoekfunctie is nu naar een veel fijnere positie geplaatst, maar nu heb je volgens mij de optie uitgebreid zoeken niet meer :s Ik weet niet of jullie dat willen maar misshcien kan de tekst bijv. de tekst "zoeken", de plek waar je het moet invullen en het bevestig pijlje iets naar rechts en dat je daar iets maakt waardoor je bijv. een pop-up schermpje krijgt met daarin de uitgebreid zoeken functie :?:

 

 

 

* Het is best irritant dat allen met een soort verloop is gemaakt. Bijvoorbeel onderin bij de disclaimer is dat toch niet nodig :s

 

 

 

* Misschein kunnen jullie om de voorkant plaatjes van de album's een kader maken zodat het wat meer geselecteerd lijkt ofzo? Nu is het veel te direct met de achtergrond, bijvoorbeeld bij nelly furtado, haar shirt kleur komt bijna overeen met de achtergrond en lijkt daardoor redelijk apart ;)

 

 

 

Dit is wat ik hoofdzakelijk tot nu toe tegenkwam, verder is het een mooie en ook goede site :wink: trouwens het nederlands is niet alleen in het engels om de reden hieronder maar ook omdat ik niet alles precies in het engels weet te formuleren :-#

 

 

 

 

 

sry for the dutch, but i didn't had the mood to say everything in english -.- :anxious:

 

 

 

 

 

Thanks for the comment.

 

 

 

Alot of the stuff you mentioned is mainly just fillers. The "Meer info hierzo en hier" is just ment as a filler, to be replaced with relevant information as soon as it gets used.

 

Same with the code, price, disclaimer, etc.

 

 

 

Was working on adding the 'Uitgebreid zoeken' function.