Today’s post highlights the design of DesignDisease.com. A rich pastel color scheme, a wide array of geometrical patterns, a string two-column grid and consistent use of rollover animations make it a memorable experience.

My favorite part is the usage of the color palette for transitioning between different sections on the main page. The color palette consists of three primary and two secondary colors. Pastel yellow, light blue and brownish gray are used for solid background fills, as well as for section headers and texts. Brick orange and dark purple are used in a few places for the subsection headers. The main page has four sections: the header, the latest project, the main section and the footer. Each section has its own combination of the primary colors for background and foreground, with an intricate bleeding of colors at the seams between the sections.

While other designs feature either an immediate or a smooth color transition between sections with different background, the designers opted out to use semi-random patterns of extruding rectangular blocks that borrow and mix the background colors from both sections at the seams. Color mixing is done in both saturation and value, creating a jagged yet pleasing visual effect along the transition seams. In addition, note how the transition from the header to the latest project uses all five palette colors, with heavy emphasis on orange and purple hues.

The main page features a strong two-column grid. Note how the content in each section is divided in two columns, with perfect inter-section alignment further emphasized by guider line segments and small vertical rectangles along the left edge of the right column. One can even see a “phantom” third column in between the two, containing stylized themed icons corresponding to the subsection headers in the rightmost column.

Finally, the animations. If you move the mouse over the navigation menu, you will see a fading sequence in which the main element (under the mouse) becomes more saturated, while all the other elements gradually fade out. The same effect is applied on other sections – move the mouse over the thumbnail strips in the main section, and over the link lists in the right column. The same effect is applied consistently throughout the site – for example on “With love” and “Portfolio” pages. The only thing i would change would be to make the transition to use saturated colors a gradual process instead of an immediate switch.