Today’s post highlights the design of ShannonMoeller.com. Clean typography, simple grid and precise visual balance are combined with a pastel color scheme and light graphical elements to create an inviting and humane experience.
The playful tone is set by a dashed path of a paper airplane that circles the current location in the navigation menu (click on different menu items to see how this element anchors the top of the page). Directly below we find a portfolio arranged in a slightly uneven grid of faux-3D paper notes. A repeating muted pattern of salamanders and a stylized illustration of an oversized green refrigerator complete the header section. The refrigerator illustration creates a certain visual perspective mismatch – it is positioned as a three-dimensional object with shadows between its stands that match the edge highlights. However, the wooden pattern behind it and the rather flat flow of portfolio thumbnails negate this perceived depth and create a certain unease the more you analyze the scene.
The bottom half highlights the internet activity of the designer – blog entries, tweets, pictures and music. Move the mouse over the subsection header to see the rollover effects (color and captions). Note how the uneven grid of the portfolio thumbnails is repeated in the layout of picture and album thumbnails. A consistent muted palette of sand yellow and desaturated blue completes this part. One suggestion would be to lose the colors of the section header icons and make them monochromatic.
Finally, the footer completes the design, bringing back the salamander background pattern, sketch outline of the refrigerator and the muted sand yellow foreground color.
Today’s post highlights the design of EncourageOthers.com. The site features a unique and attractive layout that arranges recent blog entries in two main sections. The light-on-dark top half highlights the most recent blog entry using large fonts and a big arrow icon that indicates the forward motion in exploring the site. Category headers with numbers that indicate the total count of entries are placed directly below, transitioning to the scrollable timeline of other entries. Note the precise typographic arrangement of each entry summary, featuring the category, title, perfectly weighted description and publishing date. Each summary part is set in a different style, with varying font size, style, weight and color – preserving the balance inside each column and across the columns as well. Note that the muted ruler between the category label and the description contains a draggable slider that can be used to quickly scroll to older entries, all without leaving the main page and without putting too much text at the same time. Overall, an enjoyable specimen of precise typography and perfect visual balance.
Today’s post highlights the design of IvanaSetiawan.com. The site combines a grungy background with washed out retro palette of yellows, purples and blues. The retro look is reinforced with large background swirls and curvy faux-handwritten font used in the navigation menu, section headers and the main header. While purple is only used in the top part of the site, the yellow and blue are featured strongly and consistently throughout all the sections. My favorite part if the layout and styling of the oversized footer, and especially the archive sections that uses custom coding of the entry types (note the usage of the same vintage font in the legend icons). The social section features attractively styled logotypes of Twitter, Facebook and YouTube – move the mouse to see yellow-tinted versions. Also move the mouse over the monochrome picture in the embedded tweet to see a full-color version.
Today’s post highlights the design of SecondAndPark.com by Tiffani Jones Brown. A slightly playful tone set by the large photo of a woman “lost” in the woods and and an illustration of an angry horned monster is kept open and friendly with a monochrome welcoming picture of Tiffani herself (further down the page). Carefully crafted text sections aim to convey the skills and prior experience, but the unfortunate mix of too many font styles, weights and colors break the message flow. In addition, the serifs feel too heavy, especially on larger subsection headers and add too much weight to a rather cluttered middle part of the page.
The bottom half is themed with a light teal that borrows its hue from the main logo and the oversized earrings in the header thumbnail picture. This creates a nice separation for placing a large contact form and a nicely spartan footer. Move the focus between the different text fields to see darker teal highlights. On a less positive side, this section can use a little bit more alignment of the contact form fields and the customer quotes, as well as better baseline alignment of form controls on the “phone number” line.
