Designing for a Web Design Agency

The project is under NDA. While I can't share who this was for or a full design showcase since it bears the client's copy and logo, I can walk you through my process and what I learned. I worked under my peer, Martin, who sourced this client for us. He crafted content as I executed on design.

Scroll

Project details

The project is under NDA. While I can't share who this was for or a full design showcase since it bears the client's copy and logo, I can walk you through my process and what I learned. I worked under my peer, Martin, who sourced this client for us. He crafted content as I executed on design.

Tools used:
My roles:
Branding
Illustration
Web Design
Creative Direction
Illustration
Web design
"It's nice to be able to bring draft copy and crude layout recommendations to a designer and count on them to create super clean wireframes both modern and up to spec. Kate collaborated with me, asked questions, and found just the right way to situate messaging, layout, and design for these web pages. Our client—an agency with its own web designers and creative team, mind you—was quite pleased with the result."
—Martin Ceisel

Let's talk layers

please name them

While I unfortunately can't display my final prototypes at high resolution, I can give you a glimpse at some behind the scene stuff. I like to organize my layers similarly to a development heirarchy—sections, containers, divs, and content. This makes hand-off to a developer much easier, too.

Kate, why is there nothing on that phone screen?

Well, dearest reader, that's because this project is under a Non-Disclosure Agreement (NDA), and the absence of the logo on this phone screen is my way of visualizing that to you. While I cannot disclose who the client is, I workied under Martin Ceisel, as he crafted content while I created high-fidelity prototypes. Here's some quick legal talk you can scroll past, and then let's jump right in.

Due to this project being under an NDA, the client has been given an alias of, simply, The Client. Any usage of The Client's logo will be removed or blurred out. Respect of their privacy is of upmost importance to me; this case study is solely to give you, the reader, a glimpse into what my workflow looks like.

Communication

Whether it be through email, phone calls, or getting face-to-face time (if possible!) I think most can agree that communication can make or break a project. In this case, I was subcontracted under my coworker and friend Martin—known for his illustrious work as copymartin—and would be working directly under him as he was in communication with The Client.Martin handled webpage copy and direction as I executed on page design. Hand off of copy was handled through Google Docs, and other communication was handled between Slack and email.

I can't show you high-res designs with the Client's logo—but let's check out my design files. I might as well use the opportunity to break down my file and give you a glimpse of what was created.

Note: There are areas where the client's logo was removed for this sake. Please pardon any weird spacing issues because of it.

Adobe XD files

Yes, I primarily use Adobe XD for my design mocks. To the right, you'll see that I have my colors set as universal swatches (to make editing down the line much easier) and my character styles saved universally, as well.

Next, you'll notice that I use a 12pt grid. This is because 12 is a much more versatile number to use for columns. For mobile, I kept it simple with 4.

Last, I have some groups saved as components. This means I can universally edit these groups and easy drag-and-drop them onto my canvas.