Today’s post highlights the design of Shihabs.com. It’s a memorable single page site that has a nice twist on showcasing the rather large portfolio, arranging it in an attractively styled accordion. Clicking on a small thumbnail shows a larger screenshot, with arrows to move back and forward. Here, i’d prefer seeing a fixed-size window that makes clicking the arrows possible without moving the mouse – perhaps at the expense of cutting some of the content and showing the screenshots at the original resolution.
The “Read all” button in the footer uses a scrolling lightbox with a nicely styled close button in the top-right corner. Note how the lightbox smoothly grows out of the button, and – when dismissed – shrinks back, guiding the eye throughout this short transition. In general, i like the overall styling of the site – from the fine graffiti textures surrounding the designer’s portrait to beveled accordion separators to the drop shadows that help separate different content sections. My favorite element would have to be the consistent use of desaturated gold and red colors throughout the site – on the icons, texts, separators and the intricate shirt in the header section.
Today’s post highlights the design of TheDesignKoop.com. The eye is immediately drawn to a catchy graphic in the header, reminiscent of the popular illustration style from 1950-60s as seen on this blog last week (also see the design of 204Beech.com). The deep red color is employed consistently throughout the sire, from section headers to bullet points to the main contact button in the footer section. However, the design seems to focus on the big elements and does not spend enough time on polishing the pixel-level details.
The static navigation strip has rather grotesque gradient along the top and bottom edges, with menu texts placed too close to the top edge. The overlapping curled appearance of the main logo is hindered by the fading gray element in its top left corner, with no outline to support the physical shape of the ribbon. The bullet points are aligned with the text baseline, and the typography in general can benefit from using a smaller set of sizes and weights. In addition, given how much the design relies on text sections, it would be interesting to see a better web font employed for the navigation menu and section headers – Bebas Neue seems rather bland and boring.
In general, the difference between “good enough” and “great” lies in the fine details – making sure that all elements are perfectly aligned, spaced and weighed. In this case, the site can definitely benefit from the extra work of polishing all the visuals and making it into a truly beautiful experience.
Today’s post highlights the design of Ideaware.co. The overall vertical flow follows a popular three-section nature-themed illustration style, with starry cloudy sky in the header, mountain ridges in the middle and underground in the footer. Note the nice transitions between the sections, with a tweeter bird integrated into the tree line, and a stylized skeleton “buried” in the ground. In addition, if you’re running a modern browser, you will see the clouds move in the header section, with an occasional rocket “launching” into the sky. The design consistently employs a few key elements – translucent overlapping layers, double-stitch dashed separator lines and hyperlink styling. I particularly like the peach red ribbon overlay in the navigation menu that shows the current location; muted per-section background textures are a definite plus as well.