10 Questions With Nicole Gavrilles on Custom Code and Craft

Source: Squarespace•

10 Questions With Nicole Gavrilles on Custom Code and Craft

Editor's note 10 Questions With a Squarespace Designer goes behind the portfolio to talk with the people who design at Squarespace every day. In this series, we ask the same 10 questions of a different designer: how they got into the craft, the sites and interfaces that shaped their eye, and the…

Nicole Gavrilles taught herself to code the hard way: by breaking things. As a teenager hosting her own blog on Angelfire, she'd tweak the HTML until the layout looked right, and when it didn't, she wouldn't move on until she figured out why. That instinct for digging into the code instead of around it followed her into a career as a product designer, where she can now sit shoulder to shoulder with engineers and make real-time adjustments herself.

Nicole is a staff product designer at Squarespace, based in New York City, where she works across the company's Websites and Commerce product areas. Outside of Squarespace, she's produced and designed One Magazine since 2010, a non-profit, biennial fashion journal focused on regenerative fashion and reinvestment in climate and community work.

We asked her 10 questions about her design philosophy and the early internet that influenced her, including the MySpace page she obsessively customized and a hotel website she still thinks about for its sense of surprise.

Growing up online and discovering design

What websites do you remember spending a lot of time on as a kid?

I was spending a lot of time on Angelfire hosting my own blogging websites and while doing so, learning how to code with HTML. I’d reference built templates, add it to Angelfire, and tweak the code to adjust colors, images, or padding. It definitely became an obsession when I would try to edit some code and it would break, which resulted in me spending as much time as needed to learn why it broke and how to fix it. Other than learning about the web in that context, I spent time perfecting the design of my MySpace and writing teenage nonsense on my LiveJournal.

What got you interested in design?

As the daughter of an auctioneer, I’ve always been surrounded by artisanal hand-crafted pieces of art, so I knew I wanted to do something creative. Playing around with HTML as a kid was the first introduction into something that felt complicated but rewarding when tinkering with it, but at that time, I didn’t really know what I was doing and what that would lead to.

In high school, I studied web design and took photography classes on the weekends, which led me to take a graphic design summer program at RISD pre-college. That’s when I knew graphic design was what I wanted to do and from there I fell in love with the craft.

I believe the one thing that has stuck with me from RISD pre-college was the relationship between image and text can be so beautiful. And making booklets with your hands, something I still love doing today.

What shaped her design philosophy

Looking across the websites you've named, what specific design choices have found their way into your own work?

Looking outside the box and seeing what’s possible. I harness custom CSS a lot in my work today and I tap into that so much from first learning at such a young age.

Understanding a bit of code is helpful when working on new features as a product designer. It helps me collaborate better with the engineering team. I can read the code, jump in to make quick adjustments, and offer practical feedback. My coding days as a kid definitely led me down the path I’m on now. I guess I was definitely meant to be designing for the web all along!

Is there an older website whose influence you still see in web design today?

Sometimes I love to browse the Web Design Museum to reminisce on the good old days. I typically love to look back at the evolution of Apple’s website and how much personality websites had in the early 2010s when I first began my career. I was a sucker for Interview Magazine, and my old agency designed their website twice.

Building a well-designed website

Did you ever build a website for yourself or a friend? What do you remember about it?

Yes! I love helping my friends with their websites. I first started on Squarespace in 2013 for my own hobby turned side-business One Magazine (still on Squarespace), a print and online journal dedicated to regenerative fashion while reinvesting in climate and community.

I eventually evolved into helping friends or family with their small ideas turned into full-time businesses, one being Pilates with Abs, and the other, my long time freelance client Jillian Turecki. Squarespace was a massive early inspiration for me. Designing on it just feels playful, and it’s constantly pushing me to see how far I can explore. And experimenting on Squarespace totally reignited my love for learning how to code.

If I'm starting to build a website, what are some good tips to keep in mind?

Make a moodboard, either on Pinterest, Canva, or by printing out images and collaging them together! Gather some ideas of what you’re looking for, some snippets of images, favorite websites, fonts, and colors.

Also, the first version you launch with will never be your last. You can always keep iterating and updating along the way, so never get fixated in the beginning thinking it needs to be perfect at first publish.

You design websites at Squarespace. Why is design so central to the company's approach to websites?

Design is at the core of what we do. When designing websites, design is the center of what makes a website legible, playful, on brand, trusting, for visitors to emotionally connect or resonate with, and in the end help sellers grow their business.

When we design websites for Squarespace, our perspective is very intentional. We spend hours researching and understanding our customers' likes and dislikes, the way they set up and organize their website content, and how they offer services or market their brand. When we design store templates, we step right into the shoes of the person using them. A website is what brings the whole concept to life, and that’s how we know we’ve hit the mark.

What are some other websites that you think are well designed today?

Any website that brings a slight delight to my experience. That can be helpful context to something I need more information about. For example, when booking an experience on Airbnb, they let you know how far it is by different transit options from your booked Airbnb stay, paired with a nicely designed graphic to illustrate that information. That was super helpful to know when booking! Or it can be something that has unexpected movement or design flair. While looking for a hotel to stay for a trip to Italy, I came across Rhinoceros Rome and their website is super playful and unexpected for a hotel, I love it.

On designing with AI and what's next

AI tools promise to make design accessible to more people. What role should AI play in the design process at Squarespace?

To me, AI plays a role in experimentation and prototyping, but it will never replace design. The iteration and design phase should be kept for designers to flex their creative muscles to create, play, and explore. AI comes in for us to experiment how prototypes make the designs connect and move.

Any design projects you have kicking around outside of Squarespace?

One Magazine takes up all my creative free time, but I love it. We have a lot of fun interviews, editorials, and upcoming projects in the works. Follow along on Instagram @one_magazine.

What this article says