Bplans Homepage

The primary goal for the design of the homepage for Bplans was to present key content in a way that encouraged interaction. The secondary goal was to provide a longer page that had a variety of content for a visitor to browse through and explore.

Above the Fold

The top section has a bolder, dark background section to call attention to our most important items. Below that is a lighter section with a fun graphic to lead to newsletter signups. This also has the effect of smoothly transition to a white background.

Below the Fold

The bulk of the page features cards in horizontal sections. Those sections have a section header with an icon and a button to take the visitor to a more filtered page.

Bonus Sections

Interspersed down the page are sections that stand out. The feature a gray background and some vector art to call attention to this area, and elevate the content found there beyond what’s in the white background. It also serves to make the overall page less responsive.

Figma Structure

I’m a big fan of Figma’s auto-layout feature, and use it to construct just about everything on the page. In addition to that, virtually 100% of the content itself is made from design system components. I use a layout grid with 8px horizontal rows that everything aligns to.

Responsive Sizes

I always make a few mockups representing the 5 key breakpoints of the responsive system we use (Bootstrap 4). The design system, which has responsive variants for components, made laying this out rather effortless.