Website Design

[Lucifus]

http://www.wtcourse.com/wtcourse03/


Hola GotWoot. I'm currently enrolled in a Winter Term course at my college, and our final is to create an interactive E-Commerce website.

It's been a long time since I've touched any html, and I was never that experienced to begin with, but at the very least I know design and photoshop.

Comments and critiques please, be brutal.

The color scheme was chosen by my two partners who know next to nothing about web design.....:rolleyes:

Edit: All the menu bar links are down, so don't even bother; lol.

[darkshadow]

I just woke up, so no in depth crits yet... but I like what I see ;D.

[Lucifus]

Thanks; but come on people, im in the zone. Comments and critiques, whatever you think doesn't fit, or might fit well let me know. I want to get the website template done and move on to the rest.

I've never made an e-commerce site before, and its been at least 4 or 5 years since I've touched MySQL. Anyone know what I should be focusing on next, or any good tutorials to setup a pimping sales section?

And what the hell is UberCart, what other options are there?

EDIT: O and also, how difficult would it be to create a fairly gotwoot like forums for this site in my own image? Are there any packages/modules I could simply download to mold into my own design?

[Munsu]

Where are the anime banners?

The search box looks weirdly placed in regards to the logo location.

Also the menus need to be shifted to the left.

[Lucifus]

LoL, critique and I might find some under my bed.

[Munsu]

"MYOPTIONS" or "MY OPTIONS"?

Maybe a hover style on the menu labels changing the color of the font to a darker shade or to a bluish color would be nice.

Overall, I like the color scheme. I think the white borders of the box in the middle of the page might look better with a grayish color.

[Kraco]

The basic theme looks quite nice. But if I think of my favourite computer store's website, I'd say you'd need to have a bunch of good bargains right on the front page. If you think of the visitors, they are people looking for computer parts (I guess that's the kind of e-commerce site you are going for), so you need to captivate them during the very first seconds of their visit or they will quickly leave unimpressed, not bothering to browse any further.

I'd also move the website address right under the "Ballistic Computing". It seems a bit lost on its own.

You need the login text boxes readily available in an easy to find location.

[Munsu]

I'd also make the Banner section (what I assume is being used to place a banner, which is empty now) much thinner so the content of the website is higher and readily visible for people who enter the page. Don't make them scroll down just to start seeing content.

[Buffalobiian]

I think the colours need to be flashier. At the moment it's lifeless. "Cool", but not something that you'd want to interact with.

Space usage is fairly poor at the moment. Think about what things are useful that you can have around the place, and what can go. For example, if articles are going to be a major feature of the site, have a small section to the side with perhaps the latest 5 articles linked, instead of making the user click "Latest Articles". People may not be initially interested in your articles, but by a topic you covered instead.

If you have no use for that banner space, have the gallery rotating up there instead. Makes things more eye catching.

Also, for the gallery, stick to a scroll-bar style one. When I looked at what you had there with those pictures on top of each other, i thought the layout was broken. When using a well-designed site, one should know where each click will lead them, not guess.

Consider having the shopping cart amount and access in the top right instead of a drop-down.

Search bar could be smaller. No need to be so big.

The address of the site is unnecessary. If people are seeing the site, they know where to go (or where to find out).

[Archangel]

It looks very sleek, though I'm not much of a fan of the gallery

Overall, good job. I wish most of the internet looked like that.

[Lucifus]

Thanks for the critiques guys, very helpful and on point. You guys got me motivated to do some major changes to the template before we begin work on er.

I'm still not done with the centerpiece of the homepage, it needs to be even more functional and stylish.

Thanks for the critiques, anymore would be a great help!

http://www.wtcourse.com/wtcourse03/

I'll definitely be editing the hell of the the content section with the gallery, article, and shoutout tabs. Its fugly as it is right now, and not too functional either.

Edit: It's come to attention after browsing my site on my laptop, that Munsu was totally on the money. With my laptops resolution, I can barely see past the second divider bar. I'm going to have to remedy this. =(

[Lucifus]

Well, I completed the site to some extent and got my grade; learned a lot creating it, but that's as far as I'll go with that one.

Anyway, just pulled an all nighter to start a new project.

http://home.eckerd.edu/~jmatkins/index.html

Comments and critiques please! Your last one;s really helped me out.

[Archangel]

What are you planning to do with the space below?

Regardless, it looks pretty great so far. I'd probably just move the login to the right of the below bar ( the one with the rotating text ) as to save space for the photos.

[Buffalobiian]

^ yeah, other than that, not much to criticise until more content is shown at the bottom.

[Ryllharu]

I would shrink the login box by about half horizontally and move it to the right. Keep it at the top, that would be fairly consistent with most commercial sites. Then go with a simplified logo to the left to balance it out.

Looks good so far otherwise.

[Lucifus]

Just got down with my latest and first in a long while.

Critiques/Comments anyone? Did it for a friend o mine in the music business.

my100brand (http://www.my100brand.com/)

O, and you guys should totally watch the first you-tube video on the home page. Because it rocks.

[Lucifus]

./apologizes for the double post.


I totally scrapped the last one and spent all weekend learning HTML5 and CSS3. I've learned so much. =D

Anyways, please mofackers, critique! I plan to present this Monday.

http://www.my100brand.com/

[Lucifus]

http://home.eckerd.edu/~jmatkins/

Another School Project; used a template I made a while back and improved on er. Assignment is simply to make a e-commerce site with PHP functions. Fairly certain I'm the only overachieving bastard who actually made a full blown site.

Regardless, critiques/comments? I intend to host this site as my first personal online venture.

[Ryllharu]

Being able to use the scroll wheel in the quantity field is kinda odd, when it appears at all. In IE, it's just a regular box. The weird scrolling thing occurs in Opera (but nobody cares, fun though). It also goes into negatives.

The layout of the sign-in bar at the top is weird. It's centered, yet the logo makes it look like a mistake, since the line between the two bars is cut off in that spot. Suggest tossing it all to the left side or stretching it to the length of the window and defining a limit on where the login boxes go, eliminating the logo issue.

[Buffalobiian]

Personally I've never been a fan of the "centred, blog-like listing" feel. Seems kind of crude. Could you instead narrow those products into a "list view", which when clicked would open up a page dedicated to the product instead?

[enkoujin]

I'm using Chrome on Windows XP with 1280x1024 resolution. I'm not too sure how many of these functions were required as part of the marking criteria.

Functionality:

- I agree with Buff; centered websites aren't too appealing nor are they suitable for product/shopping pages

- maybe I'm missing something here, but I can't change the quantity of the items I'm buying; if I want more "Darth Vader Mugs", I would have to go back and keep on adding it to my shopping cart

- search function doesn't work

- it would be awesome to be able to see thumbnails of the products I'm looking at so that I can see more products on my screen (~8); if I want to look at a product in more detail, I can click on the thumbnail to see more information

- the double navigation (checkout | search | subscribe | ...) and (home | shop | cart | ...) looks really awkward; maybe you can bring the user to the product page with a highlighted function asking me to continue to shop, edit my cart or checkout?

- navigations are typically on the left hand side while search functions are on the right

- the footer "website designed by ..." is really annoying; they should not follow me everywhere I go



Aesthetics:

- the second header/bar underneath the registration/login part seems really out of place

- there are too many colours in your gradient background

- the grey font on the home page at the bottom next to your logo does not stand out at all (grey on light grey)

- the capitalized text are sending mixed messages (screaming) at me to buy this or that (the condescending factor is bothering me)

- what's up with the blue bar under the grey bars (it looks pretty random)?



Personal:

- site "under construction" messages always annoy me to no end

- product pictures are too big to be practical on a real website

- the logo could use some work if it was an actual business logo

- add money signs ($) so that I'm not confusing quantity with money amount

- add taxes and shipping fees if applicable

- there should be a name underneath your logo or at least something telling me that I'm on xyz.com; it's subtle subconscious advertising and also lets me know immediately what website I'm on

[Lucifus]

Thanks to all three of you very much! (especially to enkoujin for the in-depth and enlightening review)

Got a 95%, went above and beyond all of my classmates and my professor's teaching. Granted, this was for Computer Networks & not for a web design course; but I'm a fan of creating websites and I do want to get my own up and running eventually.

My first time coding in PHP, useful as hell and I still have a lot to learn.

I intend to address each and every point you guys have made despite the assignment being over, because as I've said, I intend to officially host this site eventually.

My first venture utilizing jquery, javascript, html, php(cookies & session variables), css, & an actual SQL database I made on my own. (used em before, but always pre-made ones)

Very educational, though I know there's still lots more to learn. Please feel free to comment on any of the changes I've made and let me know if I'm doing something a little off. Thanks enkoujin, you pointed out a great deal of helpful insights. I have no idea what I was thinking having navigation on the right & searching on the left.

Things to do:

- Flip Navigation & Search positioning.

- Streamline template to better aesthetics.

- Create dropdown menu's for simpler navigation.

- Miniaturize product pages & create pages of each product.

- Setup User Database.

- Make search/registration/ & login functional.

- Streamline Cart/Checkout pages.

Let me know if you think there's anything else I need to add/change on that list. Thanks guys, you've been a big help.

Edit: As far as resolution goes, I had checked out my site on IE, FF, & Chrome using 800x600 on my home monitor. Once you mentioned your resolution though, it hit me that despite my test, I still had a 27" monitor. Went to school and checked the pages out on school machines and boy did I need to fix somethings. Aesthetics should be far more pleasing now, though I still intend to change the template a bit more.

[enkoujin]

Looks better already, brah.

Great work (though, I'd really reconsider changing your logo if you're using it for a business site)!

[Lucifus]

Well, that is the first logo I've ever made. I'm pretty proud of it, but your judgement's been spot on thus far.

What issues does it have, and since I appear to be in need of a business logo, what do you think are the criteria's I should be trying to meet?

[enkoujin]

All personal opinion coming from a 20 year-old young adult over-analyzer.

A typical business person would say that they want something that's powerful, sleek, stylish, simple, etc. (varies on their business) that speaks to consumers. Whatever you choose to do as a logo becomes a message to your clients/customers and any bystanders; ask yourself, what does your business/organization represent? The Apple logo is probably the greatest example of this - the food and imagery is simple and almost universal. This logo says to consumers that their products are very simple to use because there's a high emphasis on user-friendly interfaces; simple like an apple.

Now for your logo, let's say this:

http://home.eckerd.edu/~jmatkins/images/slider/ad1.jpg

We've got the nice fancy shadow, motion blur and reflection. Really, it would be something innovative looking 10 years ago, but if you can read marketing, people are looking for something that's simple, means a lot and is easily recognizable. There's just too much going on here.

The imagery is telling me that yeah, there's a bunch of unclear shit in the background, but the "A" is very clear. So yeah, I can see that your business probably makes finds or creates solutions more clear to me. But it's also reflecting against a surface that your company is on the edge. That's pretty cliche and overused in today's logos, but yeah, I'm cool with that. There's a drop shadow as well, so it's telling me that your organization is very human. Maybe too human.

Then there's the complex weave inside the "A" enclosing a small disproportionate "s". It looks like you use complex methods to find your solutions like there's some kind of entrapment around your "s". What also strikes me is that the "s" is small; like your business offers small solutions that are tucked away in honeycomb hive.

Also, the reflection at the against the surface is different from the actual logo. Are you trying to tell me that your organization is not what it actually seems? Of course, you could argue that a projection of a solution isn't clear unless they directly see you (your logo), but but a logo shouldn't be easily misinterpreted; it should be clear.

As you can see, there's just simply way too many mixed messages going on in this logo. You need to tone it down a lot and go for one or two main messages that your logo can represent. Also, the name seems a bit too long for the size of your logo. I'd consider re-branding or shortening the name as another option if it makes creating your logo easier.

A lot of innovative web logos often make clever wordplay with their logos, text or motto. Sometimes they'll mix it up and combine the logo and text together. The impression and impact of the logo is key. Here are some examples of what I'm referring to:

http://www.fuelyourcreativity.com/50-kick-ass-logos-for-inspiration/
http://www.hongkiat.com/blog/80-creative-and-well-designed-logos/

I'm not saying you should go along the same route, but I've got to admit that they're damn impressive. Be creative/innovative and create a lasting impression with your logo.

[Lucifus]

1269

New Logo; far more happy with er, but worried I went a bit overboard with the drop shadow.

Other than this, I'd go with a dark blue theme, whatdya think peops?

1270

[Buffalobiian]

1269

New Logo; far more happy with er, but worried I went a bit overboard with the drop shadow.

Other than this, I'd go with a dark blue theme, whatdya think peops?

1270

What's the background colour?

If it's a dark background, go with the white version. If it's light, go with the blue.

Contrast (without going overboard) = easy/comfortable reading = win.

[enkoujin]

I really like the blue one; great work!