Today’s post highlights the design of LigatureLoopAndStem.com. With finely-grained background texture, plenty of white space, excellent typography and splash of red color to offset the monochrome color scheme it is a perfect example of minimalistic web design. The main page provides a few visual clues to use horizontal navigation. The clues include the explanation text on the navigation bar, cut-off screenshot of the first poster and the small arrow icons in the top-left and top-right corners.
Today’s post highlights the design of CarolRivello.com. The site features intricate hand-drawn illustrations in the header and footer sections, using the primary dark brown, dark orange and desaturated bottle green colors. Hand-drawn illustrations are pervasive throughout the site – used as leading artwork for all blog entries, self-portrait in the “about me” section, section header icons and felt-tip backgrounds for the buttons. The same desaturated bottle green is used for all the links, with the exception of footer section headers which are not clickable. Dark orange is used when the mouse is hovering over the links, and for the footer section sub-headers. The hand-drawn theme is further reinforced by custom typography and unusual ligatures in the main site logo and all section headers. When you visit the site, move the mouse over the navigation menu (both header and footer) for nice animated rollover effects.
Today’s post highlights the design of Jen.gs, the personal website of Jen Germann. An interesting color scheme uses dark melanzane for background, light gray for main text, light blue for section headers and sunset orange for links; the orange color is also used in the main logo and two separators. The main section uses Cufon for precise and clean typography.
An excellent semi-random dotted background grid pattern is unnecessarily broken by too many horizontal separators – especially in the links / tweets section. Not only do the separators break the background grid lines, they also are not horizontally aligned between the two bottom sections. In addition, item numbers can be better aligned with item texts. The “Visit the library” / “Read the rest” links are not vertically aligned, and use different amount of white space between the text and double arrows.
I’ve spend the last few days pushing a few pixels improving the alignment of ribbon band controls in the latest Flamingo 5.0dev. This is how it looked before:
And this is how it looks now:
Main improvements:
- Equal amount of horizontal white space around the controls
- Equal amount of vertical white space between the buttons
- Aligning bottom edges of controls across columns
The change is in Flamingo 5.0dev only, so you can still use the final 6.0 releases of Substance core and Substance Flamingo plugin. There’s also a matching test case using the excellent FEST library. Thanks to Ivan for pointing this out and testing the fixes.
