Design Focus

Design Focus: Tidy Grid Portfolios

Grids are an absolute must when building any design, but this week’s featured sites apply the rhythm of an even grid to lay out their portfolios, becoming the first and pretty much only thing you see when you come visit them. The result is a very neat look—or perhaps stark to other pairs of eyes—but very honest.

Designs of the Week

Pagelines lets you build WordPress websites and it’s as easy as drag and drop, go check it out!

Ben Quinn's website

Ben Quinn

I like the little detail of the fixed header and footer on a layer above the scrolling content. The portfolio items all look similar but they don’t have the same form factor, so there’s an interesting play between uniformity (in the look) and diversity (in the shapes), but still not chaotic. Only question I have is if the white text is readable enough on that shade of gray.

Lanzart website


I find extremely interesting and delightful that animations and icons are used in the portfolio grid instead of the usual thumbnails. Makes you curious enough to see what they are a part of while standing alone as ideas of their own. Fixed elements at the four corners of the screen are at play here, too.

OCAD U Illustration website

OCAD U Illustration

Beautifully responsive and AJAXy, with a little animation applied to the background pattern of the info box in the bottom. GIFs are making a comeback with designy sites. Also expectedly loses the circles and the layout in the inner pages.

Social Media Weekly

Create unique, extraordinary websites with Squarespace. No experience necessary!

Responsive Web DesignViewport Resizer
“The smartest way to share your defined environment of devices and breakpoints directly with your team and client.”

Responsive Web DesignResponsive Menu Concepts
“Three of them are made with pure CSS and one uses a single line of JavaScript.”

CSS, Debugging20 Mobile/Desktop Browser bugs and tricks any Senior Frontend Web Developer should know
“This article is recommended for ADVANCED developers.”

JavaScript, DebuggingYou Really Should Log Client-Side Errors
“Too few websites log JavaScript errors. Let’s build a simple system to track client-side errors.”

Interaction Design, User ExperienceHover States
“New & interesting examples of movement in interaction design, curated by Chambers Judd.”

Typography, CSS, User ExperiencePlease Stop “Fixing” Font Smoothing
“The antialiasing mode is not a “fix” for subpixel rendering — in most cases it’s a handicap.”

  1. By Alice posted on December 1, 2012 at 3:08 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Wow!!! Beautiful and special!!!

  2. Trackback