Brief: As a designer herself Lauren Berry delivers a strong perspective on the minimalist design she wants for her website. In turn, the solutions that I provide are not always obvious when the aesthetic is “less is more”.

Here I’ve chose to share in 3 steps a recent redesign of the press page and individual press article presentation. You will see in Step 3 the final presentation.

STEP 1: Streamline the press page.

Problem: The firm wanted redesign the press page after specific example they loved. The press portfolio would be reorganized, with each publications's logo shown on the main page (as seen on the right-side image below) rather than having each individual article cluttering the page (as seen on the left-side image below).

It was a good idea that came with typical challenges.

Solution: Precisely recreating the portfolio example required upgrading the platform from Squarespace 7.0 to Squarespace 7.1 and writing a small bit of custom CSS to change the default number of rows displayed on the portfolio.

See Step 2 BEFORE-AFTER example below. LEFT=BEFORE. RIGHT= AFTER.

STEP 2: Elevate the online press articles

Problem: A number of the firm’s high-profile press articles were from online sources. Linking to the press articles was visually and experientially problematic for at least 3 reasons:

(A) The links led the user away from the firm’s website to third-party landing pages. We wanted them to stay on the proprietary site.

(B) The third-party landing pages had unwanted and unpredictable pop-ups and ads obscuring the experience

(C) On the third-party landing pages, the user was forced to look at other interior design firm’s content before scrolling down to locate the desired content. We didn’t want to promote the competition.

Solution: I created clean images from targeted screenshots (often in mobile view) of the online press articles and hosted these on the proprietary portfolio. I gave the firm an elegant, minimal experience that resembled print publication layouts, as well a quick, repeatable process for presenting online press going forward. The two-page spreads in web-view can be clicked to get a closer look at the images, and they re-align themselves for maximum visibility in mobile-view.

See Step 1 BEFORE-AFTER example below. LEFT=BEFORE. RIGHT= AFTER.

STEP 3: Experience consistency

Problem: Some of the firm’s print press was in PDF format. By default, Squarespace launches those a new window off-site. As common as it is for interior designer’s to link to those large format pdf’s, the goal here was to have each single logo on the press page link directly to one single page with all of the press from that publication immediately available on the page. If we allowed those pdf’s to open in a new page, the experience would be broken, but there was no simple way to embed pdf’s in the page.

Solution: The solution here was simply to convert the pdf’s to high-resolution jpg’s or png’s so they could be hosted on-site along side the press images that were created in step 1.

Watch the final seamless press experience in the example below.