New in Portfolio : Squarespace design for The Society Darlings

Squarespace web design process for The Society Darlings by Pinkpot Studio. Click here to learn all about it and see the website>>

Who has a freelance design business and has not updated her portfolio the whole of last year! This girl, right here! I am not whining, but seriously the last time I shared my design work was in July 2016 - whaaat? I have had the pleasure of working with some ah-mazing clients recently and I cannot wait to share the work with you. So many more to come, but I am excited to kick this off with The Society Darlings - a fashion and lifestyle business run by the lovely Alexa Walrond.

Alexa got in touch with me in September last year for a website redesign. Alexa’s business has two parts: one that focuses on her fashion and lifestyle tips and the other that helps other fashion bloggers build their businesses. She had the brand identity ready to go but was looking for custom Squarespace site that represented her and her business. Her clarity on what she wanted for her brand and business made it a joy to work with her on this website redesign project.

Web Design

Web Strategy:

We first started off with a long Skype date where we dug into every corner of the business - the goals, the target audience and the user experience. We came up with a sitemap that defined the pages, their requirements and the flow of the website. One of the main focus in alignment with her goals was her product page and so we discussed the different integrations that were required for the product page development on Squarespace. Once we had pinned down the web strategy after analyzing the goals - it was time to put pen to the paper and start the work!

Web style guide:

With all her brand identity elements ready to go, I sat down to whip up a detailed style guide for the website. We worked on expanding her color and type palettes to work for the web. We tweaked the font weights and letter spacing and defined every single detail (i.e forms, buttons, icon design etc.) down to a tee until we felt everything is in line the direction of the business.Here’s how the web design style guide turned out:

Squarespace web design process for The Society Darlings by Pinkpot Studio. Click here to learn all about it and see the website>>

I also designed a set of icons for the website design to use on the blog and shop pages to signify the categories:

Squarespace web design process for The Society Darlings by Pinkpot Studio. Click here to learn all about it and see the website>>

Designing Wireframes and mockups:

Wireframes: With the style guide in place, I began designing the wireframes for every page of the site. Wireframes are basically the skeletal layout of the pages that define the exact placement of images, graphics and text. This helps visualize the user experience and flow of the entire website. However I like making the wireframes a little more interesting by adding brand colors so the client gets an overall feel of how the colors and type are going to play together in the website.Here’s a quick shot of the wireframes for the product pages:

Squarespace web design process for The Society Darlings by Pinkpot Studio. Click here to learn all about it and see the website>>

Mockups: Once we got a handle on the wireframes, I dressed them up to create the mockups. Mockups are basically dresses up wireframes (as I like to call it) - they have the exact copy + photos + graphics all in place to give the exact feel of how the page would look like on the LIVE website. With Alexa’s beautiful photography and ready-to-go copy, it wasn’t long before we had the mockups ready to go!Here’s a quick shot of the mockups for the home and about pages:

Squarespace web design process for The Society Darlings by Pinkpot Studio. Click here to learn all about it and see the website>>

Web Development:

I often don’t talk too much about website platforms ‘cuz I work on projects on all kinds of platforms - Wordpress, Squarespace, Shopify - you name it. Depending on the requirements of the business, one works better than the other and we make the choice accordingly and move ahead. However in the recent times, I have seen a big surge in Squarespace clients in my roost. During the last quarter of 2017 I worked with 5 clients and they were all on Squarespace (whaaat?) which makes me curious about this trend in the future.Anyhow needless to say, we designed Alexa’s website on Squarespace. We went with one of the templates from the Brine family (the best!), but with a lot of customization. Thank you CSS + Javascript 😉Here are some of my favorite features and layouts on the website:1. The vertical floating social menu on the nav bar:

Squarespace web design process for The Society Darlings by Pinkpot Studio. Click here to learn all about it and see the website>>

2. The blog page top section:

Squarespace web design process for The Society Darlings by Pinkpot Studio. Click here to learn all about it and see the website>>

3. The blog + shop sneak peek section on the home page:

Squarespace web design process for The Society Darlings by Pinkpot Studio. Click here to learn all about it and see the website>>

4. The product page with Shop Style integration:

Squarespace web design process for The Society Darlings by Pinkpot Studio. Click here to learn all about it and see the website>>

Wrapping up:

I was thrilled with how the project turned out and couldn't be more grateful to Alexa for making this project so fun and smooth! Here’s what Alexa had to say about working with me:

My site looks unbelievable and I am without question thrilled for all my readers to see the new automated and totally responsive layout! Your patience, professionalism, and passion for this project and my brand throughout the design process and beyond was remarkable. This will definitely not be the last time we collaborate together and I am thankful that this is just the beginning of a long-term journey for both our businesses.

Click here to check out her LIVE website >> I hope you enjoyed a peek into the behind-the-scenes of my website design process. If you are looking for a new website design to propel your business, I am here for ya! Click here to see how we can work together!

What are your thoughts about this website design project?