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.
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.
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.
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