Vanseo Design

This is really cool - I wish there was something like this happening near me.

I know it's impolite to say this, but I hope you understand it's coming from a good place: your website is awful. That may not seem important but a first impression like that nearly made me skip this post entirely when the only cost involved was reading it.

My suggestions:

1. Make the website look prettier. If you google for "free css templates" there's a site that has hundreds of them with the only requirement that you link back. They come with pre-made HTML that you just chop around as you see fit. Just looking a little different from the bland defaults stands for a lot.

2. Reorganise your visual hierarchy[1]. Your main page makes my eyes bounce all around the place because the different elements are fighting with each other for attention. MATHS JAM! SIGN UP! LOG IN! NEWS! - it can't all be important at once. If you look at something like the Business of Software front page[2], the order of importance is clearly name > when & where > price > register button > description. Different priorities are okay, but it's important to understand visual priority is a ratio, not a sum - adding 10 to everything leaves the values unchanged.

3. Multimedia = social proof. Back to the Business of Software page, there's a video halfway down that gives you a description of the conference. Why do that when it's already written out in more efficient text that you don't have to click anything to read? It's because…

As a grahic / fine artist that has moved into webDev (JS, java, grails) there is no short cut or easy answer to be an all in one coder / designer. You need the basics of graphic design first: COLOR, DOMINANCE, LAYOUT

COLOR: a good color palette will take any project up a notch
http://www.colourlovers.com/
http://www.colormatters.com/color-and-design/basic-color-theory

DESIGN STRUCTURE: much the same way you create Classes that can be extended, you can do some in design. There are Dominate objects in your code that you use to create other object.
----dominant, subdominant, subordinate Design
http://www.vanseodesign.com/web-design/dominance/

Also, if you create a dominate visual design feature, repeat that element(color / pattern / shape) else where on the site, to build consistency

Also for Page Layout, rules in Photography can be a great help. Looks that the Rules of 3rds
http://en.wikipedia.org/wiki/Rule_of_thirds

The most important part of creating anything is inspiration. Pinterest is great for looking at designs, picking what works for you and what doesn't.

You have to understand that all of your early stuff will look like crap. Much the same way we've all said "Wow, that code I wrote 6 months ago is a pile of junk. I'm surprised it's still working."

Alos, buy a sketch book and put it next to your bed. Draw before you go to sleep. Even if you just doodle.

Advanced Typography is not something I recommend right off the bat, as it can lean towards fine art at…

There are a lot of answers here that suggest the colors have something to do with it. I think that is true, but no one has suggested what I think it is overall: the Gestalt Principles[0] in action.

The Gestalt Principles are from cognitive psychology, the part of psychology that deals, in part, with how we sense (eyes) and perceive (brain / mind) visual stimuli. Those principles are used a lot in interaction design, UX design, human-computer interaction, etc.

The specific Gestalt principle at work here is likely the "Figure / Ground" principle, also known as "background-foreground". Our brains are somewhat pre-wired to see things as either being in front or back of other things. There are some optical illusions that mess with our perception of foreground, e.g. Rubin's Vase[1].

The picture in question has the buildings in black, indicating they're silhouettes because the light source isn't hitting the walls directly. The blue of the background suggests some light coming from the night sky, illuminating things from the back. The brightly colored signs would provide their own light in the real-world context, and they have a high luminance value[2], i.e. high perceived value of lightness, as if giving off their own light.

To sum it up, it looks 3d because our brains have evolved in a three-dimensional world and have built-in functionality that helps us "fill in the blanks" in situations with incomplete information.

References:

[0]:…

Thanks for replying...the 13px size is the main issue...i don't have great vision but I don't think any recent design guide would argue at 13 px is suitable in today's design standards.

One other metric is letters per line...guidelines recommend roughly 70 to 80 characters, because as lines get wider, it's harder to track which line you were on when your eyes go from the end to the beginning of the next line. It looks like your site is at around 100 characters despite it not having an extremely wide article body size.

Anyway, just my rant...this post on typography I've found to be useful: http://www.vanseodesign.com/web-design/typographic-choices/

As for what kind of project makes a developer, well, that's definitely open for discussion. I have no idea, but was just looking for a litmus test beyond just learning or being interested in code.

I've got a bit of a lifehack about that.

The average use will look at a menu in a "F" pattern[1]. Try to imagine a big "F" over the menu, then pick something outside of it.

Try to stay clear of images too. If they require an image to sell you the product, there's a reason.

Avoid fancy descriptions and titles. Something called "Fried rice with chicken" will often be just as good and often in bigger quantity than "Le Coq au Vin du Chef". Foreign words and country of origin are a big red flag you are buying dreams and not quality + quantity food.

[1] http://www.vanseodesign.com/blog/wp-content/uploads/2011/02/writf-pattern.png

TL;DR: Pick the thing that looks good but "meh". Fancy restaurants have chefs that will make everything flavourful. The only reason it has a "meh" description is because the profit margin is lower.

I would have tried to rotate both of those handles. You want to know a great user interface that is universally understood?

PUSH: http://www.vanseodesign.com/blog/wp-content/uploads/2010/08/door-push-bar.jpg

PULL: http://www.artfactory.com/images/Door-Handle-HH199.jpg

The door handle sacrifices usability for aesthetics.