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

The Problem

The Client was redoing their website and needed two pages completely reimagined. Their brand guidelines were very vague and we were told that just about anything goes as far as color and illustration style. The reason for a redesign was to fall more in-line with the hip, cutting-edge web design solutions they offer.

My roles

Graphic designer

Web designer

"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

Behind-the-scenes

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.

Peek some mocks

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.

Mock of design one
Mock of design two

Layers

Yes, I'm even going to show you my layers. I have them grouped by section of the site. Nested deeper are my containers and div blocks

Related Projects