A common misconception is that "simple" is easy to do. Instead, it's often as hard if not more difficult. Solid design is a battle won in the detail and with simple designs you have fewer details that each must be perfect.
For example: The left part of DedaSys
- The fonts are sized as to have an ambiguous hierarchy
- The shadows are not consistent and thus break the illusion of layered paper
- (especially important is that the shadow on the yellow bar at the top
doesn't match the shadow in the menu block)
- The current location box is larger than the others once
again breaking the illusion of layered paper
- The grey line surrounding the whole thing crosses layers
On your personal site
- The text grids are not equal or obviously intentionally unequal
- The navigation headers are almost randomly arranged
- The picture doesn't fit well into the gridlines formed by your text
- Your text doesn't have a visual flow
Each of these criticisms is a tiny fix in and of itself, but they build an emotional reaction in a viewer. It's an unfortunate circumstance that your designs are judged by all viewers on the same level as those done by professionals. No matter how hard you try, nothing looks "good" unless it's close enough to perfect that people can't tell it isn't.
---
So, what are you going to do?
Simple designs are a good place to start: you can iterate them much more quickly, and, just like all design, you definitely are going to be iterating.
Graphic design can be thought of as the unification of a message with a design metaphor. Simple designs should have simple messages and simple metaphors. Interestingly, your sites provide a great comparison. DedaSys has a simple message (a shallow hierarchy) but a complex metaphor (stacked, multicolored paper in hard lighting). Your personal site has a simple metaphor (text blocks in white void) but a complex message (highly nested hierarchy with many levels of equal importance makes it difficult to skim).
So pick a simple metaphor and craft a simple message and then keep iterating.
- single sheet of brilliant plain paper with two columns
- a sheet of nice, lined paper lain on textured wall paint
- Two sheets of paper, laid atop one another, with shadows between them
(these all involve paper because it's easy to visualize, but it's possible
to get more exotic while still being simple)
- a pane of glass with big bold letters stuck to it, held over interesting scenes
which are wildly out of focus in the background
Visualizations of your message and metaphor drive the "simple" details which build your design, but you should always be moving in a positive direction. There are three focuses I like to use:
1. intent: make it clear that even your accidents were thought out
2. consistency: if you've made an intentional decision, defer to
it throughout the design
3. illusion: let a realistic design metaphor guide your decisions
---
So with that theory in mind, there are also a few pretty common design tricks that help you to be effective. All sorts of comments have already covered these, but I'll reiterate
1. Pick a grid, both horizontal *and vertical* and stick to it
2. Study other designs, especially classic and powerful ones like
Coca-cola's logo or a newspaper, and understand what makes them
attractive. Steal it.
3. Study the shape and appearance of real things. If you can physically
build what you want your website to look like, you have a wonderful
guide for how to design it.
4. Study a little typography. It's a very old art which has strong traditions.
Some of them are important and necessary, some of them are simply important
because of consistency. We're all expert consumers of type design, whether
we know it or not.
and finally
5. Break any and all of these rules when you think you should, but know when
you're doing it and DO IT INTENTIONALLY. Breaking a rule shyly looks
terrible. Breaking one with panaché makes something striking and phenomenal.
---
Graphic design is a fun thing, but it takes just as much effort and skill as programming. With that in mind, good luck on your journey.
Comments
A common misconception is that "simple" is easy to do. Instead, it's often as hard if not more difficult. Solid design is a battle won in the detail and with simple designs you have fewer details that each must be perfect.
For example: The left part of DedaSys - The fonts are sized as to have an ambiguous hierarchy - The shadows are not consistent and thus break the illusion of layered paper - (especially important is that the shadow on the yellow bar at the top doesn't match the shadow in the menu block) - The current location box is larger than the others once again breaking the illusion of layered paper - The grey line surrounding the whole thing crosses layers
On your personal site - The text grids are not equal or obviously intentionally unequal - The navigation headers are almost randomly arranged - The picture doesn't fit well into the gridlines formed by your text - Your text doesn't have a visual flow
Each of these criticisms is a tiny fix in and of itself, but they build an emotional reaction in a viewer. It's an unfortunate circumstance that your designs are judged by all viewers on the same level as those done by professionals. No matter how hard you try, nothing looks "good" unless it's close enough to perfect that people can't tell it isn't.
So, what are you going to do?Simple designs are a good place to start: you can iterate them much more quickly, and, just like all design, you definitely are going to be iterating.
Graphic design can be thought of as the unification of a message with a design metaphor. Simple designs should have simple messages and simple metaphors. Interestingly, your sites provide a great comparison. DedaSys has a simple message (a shallow hierarchy) but a complex metaphor (stacked, multicolored paper in hard lighting). Your personal site has a simple metaphor (text blocks in white void) but a complex message (highly nested hierarchy with many levels of equal importance makes it difficult to skim).
So pick a simple metaphor and craft a simple message and then keep iterating.
Visualizations of your message and metaphor drive the "simple" details which build your design, but you should always be moving in a positive direction. There are three focuses I like to use: So with that theory in mind, there are also a few pretty common design tricks that help you to be effective. All sorts of comments have already covered these, but I'll reiterate Graphic design is a fun thing, but it takes just as much effort and skill as programming. With that in mind, good luck on your journey.