Intro to Web Design Project

[Sajin]

Seeing how I'm basically teaching the Photoshop portion of my intro to web design class, I decided to work ahead into the Dreamweaver part, what do you guys think?

The project is design a fictitious website for a product or company of your choice.

I went with the company who created Sword art online in the anime, sword art online, advertising and compelling people to buy and play the game

Any comments and critique is appreciated
http://imageshack.us/photo/my-images/507/screenshot20120901at234.png/

Edit: if the picture isn't showing up magnify it and it should fix it. Imageshack is being stupid

 

[FireCat]

Well, looks pretty good. But the image are “too small” lol

 

[Sajin]

http://www.flickr.com/photos/86336387@N04/7906226056/sizes/l/in/photostream/

This link is a little better

 

[FireCat]

^ Yeah that's better! Well, It looks good.
But maybe the text looks kinda messed up somehow.

 

[Sajin]

I've since fixed the text but for some reason I fucked up the table and the div tags so when I launch the page in a browser it puts the text above the rest of the website (looks fine inside dreamweaver)

 

[Whitesock]

FINAL EDIT: Kinda went on a rant here. Hope it's useful. It provided a nice break from my digital concept painting class

Are you just leaving the sides black? Perhaps also take those basic lines you have separating everything and spiff them up more. Lines are alright, but what I want to see is a design that isn't totally flat.

I also don't know why you centered the text. Makes it harder to read and/or follow. Try to make your text fit into columns (check European mags for great examples, they have great text flow!).

This seems like a decent start, but it feels flat and uninteresting. Really try to push some values and also make it seem to feel less like a computer screen and more like its own environment. This is going to sound a little odd, but designs like this are much more interesting if they aren't just lines of color but reminiscent of actual things.

A quick google images of Awesome website designs yields pages that feel like environments. They are their own little imaginary places for you to explore. Very interesting and it will REALLY capture anyone to see your site.

Notice that these designs have a lot of depth to them. They do not feel flat. They feel like there is something going on around the important text.

-------

Now for a bit of a critique. No, not of yours, but what yours should be shooting for. We'll take this one for example (taken off that google search I just posted here). It has depth. It feels like there is space around the text. Even though the actual spacious photo is only about half of the space used up here, it continues around the sides. With some quick and easy graphics, they took the image in the center and made some motifs around it to make you still feel like you are in there cool space, but yet are not distracted by the outside parts.

The main bulk of this is the photo and text. Lets look at the text now. It is very stylish with about 3-6 different typefaces (some might even be lettered instead of typefaced). Even with all the hustle around it, it is still easy to read. The stylish bits go along with the theme as well. It all reads well and gels together nicely. We can tell the text is a very important part, but it isn't taking away from the main feature, which is the photo saying YOU WANT TO GO HERE BECAUSE THIS PLACE LOOKS AWESOME. It's an alright photo with an excellent backing cast that makes the site design very nice.

I encourage you to look at some of these and maybe even critique them yourself. Find something that strikes out to you and is really cool. Then find out why it is cool. Then use that in your own projects and BAM, you are making kickass designs!

-------

I decided to try and see if I could add a bit more depth in this. Just did a quick brushover/level balance to add some more texture in the background and interest. I made the light in this design flow around as it would in real life if this was an open space. This helped it to appear less flat. Also the increase in contrast made it pop out of the screen more. I also pushed the shadows more towards a dark red/orange which helps it appear further back as this is close to the opposite of the light blue-ish green.