Today’s post highlights the design of Xbition-Art.fr by Julie Franck. The top part sets the visual tone, complementing the main beige color with muted sand yellow, pink and light blue. The dark purple bar running along the top edge is the only occurrence of this color and provides a nice separation between the browser chrome and the site content (also note the muted appearance of the entries and simple rollover effects). A three-column grid of thumbnails takes the center stage, with nice rollover effects and two-step transition when the specific thumbnail is clicked. I particularly like the pulsating desaturated main icon displayed in a smaller overlay window while the full-size screenshot is loaded. On a much less positive side, the embedded navigation is not very usable. The screenshots have significantly different sizes, and you have to move the mouse to flip through the entries. Even worse than that, the overlay window seems to provide support for keyboard arrow navigation – which results in severe resize artifacts, incorrect flipping and an overall very jarring experience.
The bottom half shows two additional – and much smaller – sections. There’s a lot of vertical white space between each section, primarily to link the multiple navigation menus into the mouse-click-based navigation. This works quite well on the first two sections, with smooth scrolling of the content and precise vertical alignment along the top viewport edge. However, this brings a number of UX problems. The contact section is rather small, and clicking on the matching navigation icon does not align the last menu with the top viewport edge. The last of the four icons leads outside the main page altogether, and using light gray color on it is certainly not enough to highlight this – especially given consistent replication, distance from other icons and floating tooltips. Finally, if you’re scrolling the page manually (with the mouse or the keyboard), the extra vertical white space breaks the visual flow, especially around the middle section that is very light on content.
On a more positive note, i really like the icon styling in the contact section – borrowing the visual style from the navigation icons and arranging the seemingly clashing colors in an attractive way. Furthermore, the accompanying blog addresses most of the navigation and layout issues mentioned above. With much tighter positioning of content, delegation of the main navigation to the header, consistent application of the four main colors and paper texture with faint drop shadows it’s quite a feast.
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.
