Today’s post highlights the design of KyleMKramer.com by @MrKyleKramer. The landing page has a nice vertical symmetry that mirrors the beige and slate gray sections around the large orange strip that highlights the designer’s portfolio. Note the visual rhythm that switches between intricate textures and flat beige fills, great typography that mixes embedded fonts with image-based oversizes text sections, and the consistent usage of double separator lines with variable stroke width.

And this is what i particularly like about this site – picking a very few elements and employing them consistently everywhere. You can see this in the three-color palette and the way it is used for styling the social icons and switching between light and dark text colors in the header and footer sections. You can see this in the grainy texture used in the portfolio section and the two round orange badges. You can see this in the edge patterns of the portfolio section and the badges – with the same thick slightly depressed outer edge and the lighter dashed seam running along the inner edge. You can see it in the layout and font styles employed in the three poster-style text blurbs in the beige sections – with exactly the same color treatment, text effects and the styling of the separators. And finally, you can see it in the visual treatment of social icons and the “hobby” icons in the two bottom sections – outer shape, icon styling and rollover effects. And while i’m talking about the last icon strip – this is definitely a unique flavor to the “about me” section, with single line snippets on Kyle’s hobbies, all nicely packaged and neatly tucked away, with simple and yet very effective jquery-based toggle effects.