Search

Art

Portrait of a Website Redesign by Jennifer Puno

The following post is brought to you by Squarespace. Our partners are hand picked by the Design Milk team because they represent the best in design.

We’ve undergone the painful process of web redesigns in the past, design that involved many, many frustrating hours of trying to get things “just right.” However, Squarespace has come to the rescue to help ease the design process. You’ve probably already heard us talk about how Squarespace makes it easy for anyone to create a beautiful website using one of their templates, but what if you want to truly customize your website and don’t know how? If you’re not familiar with programming, code or web design, it can still be a frustrating experience if you attempt it yourself. Did you know that there are designers who specialize in web design using Squarespace? We got in touch with one of those designers, LA-based Jennifer Puno, and asked her to share a recent experience designing a Squarespace site for one of her clients. Here’s Jennifer:

05.09.16 | By
Portrait of a Website Redesign by Jennifer Puno

Last year, I decided to exclusively work with Squarespace for any freelance web design project. As a designer, I get instant gratification using their WYSIWYG (What You See Is What You Get) editor vs. coding. It’s what Dreamweaver always wanted to be! Combine that with their well-curated selection of design-forward templates, you’ve got a great base to begin making a website that would have taken 3x longer to build.

shapeshift-Bebas

As a freelancer, I’ve found that it has helped me filter “in” the type of clients and projects I want to work on. Previously, I would work on projects that would take months to finish. You would need to involve a developer and there would be rounds and rounds of iterations. Nowadays, most of my clients are small businesses with scrappy teams. Typically, I’m working with one person who can quickly make decisions and has the drive to learn how to use the platform so they can manage their own content. This is huge for me! In general, people’s expectations are realistic and their demands are bound by the template so they don’t get trapped working with a developer for every little change. Let me tell you, we don’t want to do that work either. :)

Although Squarespace is incredibly intuitive, sometimes you don’t have the design chops to get it where you want it…like tomorrow. It’s the little things like typography, layout, spacing, curation of photos, and familiarity with Squarespace, that will save a lot of time.

The super creative folks at Matte Black approached me about designing a website for their new digital trend publication, The Shape/Shift Report. They are dream clients. They have amazing taste and always want to push the boundaries, plus they have incredible photography and content to work with.

Before I start, I always ask my client to send me a 2-3 images for design inspiration. When Matte Black sent over a few images, I noticed that most designs had a bold sans serif. I’ve had Neusa in my bookmarks for a while, but never found the right site for it. I started playing around with it in Photoshop and came up with a few design directions.

shapeshift-Neusa1

Since the product is a report, I wanted to make the overall site feel like a magazine layout. I used Thorne, so I could design a more complex layout and overlay it with a parallaxed image. This is definitely an upgrade from the original template Shift that was being used.

I wanted to add a sidebar on the left that would be fixed as you scroll down. Luckily, I already did this on another website (ilovecreatives.com) so it would be an easy copy/paste.

shapeshift-Neusa2

The second design was less about the big header images and more about typography and layout. Matte Black had sent me an example of an all black background and I thought it would be fun to try that out. For this design, I would use one of the blog templates like Farro and link out to the different articles. I love how Squarespace added Related Posts to each post page.

shapeshift-Avenir

The third design, I wanted to have a bit more fun with the typography. I used Mercer’s template for inspiration. If we were to move forward with this design direction, I would have definitely wanted to play with an animated GIF to give the text some movement.

Matte Black ended up going with the first design. That was my favorite design direction as well. The layout is more versatile and is flexible around their content.

shapeshift-Neusa1b

I took their current content page and added a few more design elements. If they begin adding more video content, I think it would be super fun to tease them here with GIFs or the video itself! We want the content to feel clickable and fun. We are still deciding on the final UX, but the idea is to put all of the content on the website, rather than a downloadable PDF.

shapeshift-Neusa1c

With a few space modules, you can really make the website look like a print magazine. I took a lot of cues from magazines and was very liberal with white space. I’ll be designing a few more layouts based on their upcoming content.

shapeshift-Neusa1d

And then of course, the footer. Whenever possible, I like to add html glyphs and incorporating it into their text. It’s a super easy way to incorporate graphics without having to code anything in.

Watch this video to check out the final design:

Sign up for Squarespace with a free trial and get 10% off your first purchase using offer code DESIGNMILK.

Jaime Derringer, Founder + Executive Editor of Design Milk, is a Jersey girl living in SoCal. She dreams about funky, artistic jewelry + having enough free time to enjoy some of her favorite things—running, reading, making music, and drawing.