Sometimes I get asked, “How do you work? How did you create that?” Basically, they’re wanting to know what my design process is like.
It’s rather a simple answer—but ironically, it comes with deep underlying layers and complexities. Every project is different; but first and foremost, you design for the content. The content drives the design—not the other way around. So most of what I do is predicated by the content given to me, as well as, the project’s objectives. However, for simplicity sake, my process looks like this:
•  Discover  research, education, information
•  Define  strategy, concept, planning
•  Design  aesthetics, form, interface
•  Develop  coding, editing, production
•  Deliver  publish, go live, print
Throughout the process, you’re always (re)evaluating everything that you do, and why you did it. You will need to step away, take breaks from it, and sleep on things. Look at it again with fresh eyes. Ultimately, you’re asking yourself, “What does it do for the brand and user experience?” 
Sometimes you have to repeat steps. The scale or degree to which each one of the phases happens will vary from project to project. But the process is the same for everything, whether it's designing a billboard ad or a B2B mobile app.
“Wait a second. User experience, you say—even for print?!?”
Yes. The term user experience seems to be one of those hot buzzwords thrown around a lot these days with anything involving interactive media. But user experience unequivocally drives ALL design—whether it’s interaction, graphic, interior, industrial, fashion… or even wedding cakes. In business, for the end product, all roads fundamentally lead to branding and user experience.
So with that said, I’ve pulled three projects from my work to show an overview of my process. There’s one from each of my core areas of focus: Interaction (UI/UX) design, Creative Marketing (Marcom) design, and Presentation (Keynote) design.
​​​​​​​Keep in mind that these are very streamlined, higher-level snapshots of each project. It’d be extremely tough to discuss and show the countless files and intermediate steps, and have it all make much sense. And things such as notes and sketches on paper, whiteboard, or anything else not on the computer screen aren’t shown. I typically don’t hang on to that stuff after I finish the project.
​​​​​​​Enjoy!
Note: Pressed for time right now? You can always scroll down to each image, which visually summarize the story behind each project.
Aircover Communications website
Once the planning (e.g., concept, messaging, content, strategy) is established, there is always some preliminary sketching and drafting on paper and/or whiteboard. We’re visualizing the pages and the flow. Often diagramming software like Visio or Draw.io is used for a final render of the sitemap.
The Blueprint
Based on the sitemap, wireframes are created in an application, such as InDesign or XD, to visualize the architecture of the website. There are no cosmetics such as the actual colors, fonts or images in wireframes. They only show skeletal structure and functionality, and how it pertains to content. Basically, wireframes to a designer are like the blueprints to an architect.
After the wireframes are created, a lot goes into sourcing the right imagery. We’re looking for a cohesive style and point of view that speaks to the brand. In this case, there was also some post-production Photoshop retouch and styling work to pull off.
The Simulation
The next phase might include a prototyping tool such as XD or Sketch to test the preliminary designs, sequences and functionality against actual device platforms. These steps allow us to simulate the product interaction and user experience before investing any time and efforts into the actual build.
We then begin to create a mockup with the content. If all of the content isn’t ready, then I just use placeholders. I will create the key pages in Photoshop or Illustrator. This way the client can see what my vision, design and specs look like. If I’m working with a dev team, then I’ll hand off the layered PSD or AI files to them to reference and build out.
Depending on the size and complexity of the site, as well as the needs and time constraints of the client, I might skip the prototyping and page comps. Then I would just go straight to a website editor/builder and begin to create the pages, since I have the creative vision in my head and know what is needed. Having at least the wireframes allows us to have a reference point while we build the framework of the site. The visuals and UI design are created based on my art and design direction as the site comes together.
The Construction
In Aircover’s case, we’re using WordPress tools to build their website. But in the past I’ve used Dreamweaver and GoLive. WP seems to be a viable solution for most of my clients’ needs. It’s a modern platform, and we won't have to worry as much about the site being responsive for mobile.
On more complex websites like database-driven sites, I have developers on my team. Their preference might be something like TextWrangler to hand code all of the pages. The extent of my coding skill is limited to basic HTML/CSS, and a bit of PHP. I’m strictly a visual designer and I specialize on the front end. Anything more than that, I have to use a site builder or a web developer to handle the backend.
Now I start with the foundations of any site, such as the CSS, header, footer, menu. Once the static and template pages are created, then we add in the rest of the functionality and any dynamic content. Finally, the refining details are looked at once again, such as spacing, alignment, as well as the parallax and actionables’ speed and timing. We want to clean and tighten things up for a final review and QA.
The Timeline
Once I have the client’s approval, we publish and go live. Depending on the size and complexity of the site, as well as the client’s responsiveness, a smaller website can take maybe a month or two to finish. Some of the larger scale sites have taken me several months to even a year.
Water&Gold logotype
I was provided a background to design the new corporate logo for Water&Gold. I always want to listen first to what the client has to say, and see their ideas, as well. My goal is always to satisfy the client’s wishes, and provide value and ROI in what I do. However, as a professional, I am paid to evaluate the problem, come up with the optimal working solution based on the parameters and constraints of the project, and bring in my own point of view or design aesthetics.
The Exploration
The client’s ideas are shown below. Ultimately, the collaboration and strategy led us towards a logotype. Like most things, creating a logo (or logotype) usually begins from sketching on paper. These might be rough, quick drawings that get my ideas flowing and imprinted on something tangible, and not on the computer screen. 
Although, I must confess, over the years I’ve learned to use the computer a lot more as a drawing a tool. There’s nothing like ⌘+C/⌘+V and multiple ⌘+Z’s. But there’s still something to be said about hand drawing on a piece of paper and viewing it off-screen that still resonates with me. 
Next I translate the sketches I like onto the computer using Illustrator. And the tweaks and refinements continue now from this point. Once I identify a group that I like, the concepts and potential designs, color palette, and typeface selection are presented to the client.
The Refinements
Now the client provides feedback on what they like, what they don't like. What’s working, what’s not working for them. But more importantly, I want to know WHY. Just saying you don’t—or do—like something doesn’t really help anyone to learn and grow from it.
And then, l come back with another round and revisions based on their feedback. We basically continue this process of refinement until the final logo is completed. In this case, it took about four rounds to complete.
Once the final design is approved, I create the logos in the necessary color and file formats. I choose to create all logos in vector because I want them to be in a resolution-independent format so you can scale the logos to any size without loss of quality—sorry, Photoshop, this is where Illustrator is far more flexible and superior.
The Timeline
The Water&Gold logotype took maybe a week and a half to design. Depending on the client’s responsiveness, I’ve had some identity design projects take perhaps a month or longer to develop.
Credo Higher Education presentation
When it comes to presentations, I believe that more than any other medium, people feel the most empowered to unleash their “inner designer” within. Although, creating their own logo might take the cake—see above. After all, it’s their baby and they’re the ones presenting it.
PowerPoint seems to be what the vast majority of my clients prefer to use these days. The software is intuitive enough so that most people can figure out the basics to create some really… eh hem… poorly crafted presentations, much to their surprise and chagrin. I mean, who can resist all of those preset shapes, smart objects and styles at their disposal? 
Whereas, others haven’t a clue on how to use PowerPoint other than typing out a long list of bullet points that fill the entire screen. And wait, now you want me to add in some graphics as well to the slide—somewhere, somehow?!
The Approach
Again, the content drives the design. So when I get a presentation, each deck and slide within is often its own experience. And each may require a different strategy. But to varying degrees, it seems that each slide or deck usually falls into one of two categories—or maybe a little of both:
1.  The fundamental concept, message and artwork are there. I just need to make it all look better.
2.  The core concept or message is there. I just need to visually convey that.
And then the all-encompassing challenge is how to make the entire deck look and feel cohesive, unified in design aesthetic and flow—while aligning with the company’s brand. All of this is part of what makes presentation design such a challenge and a unique beast on its own.
The Vision
So with the Credo master presentation deck, there’s a lot of both happening here—see ➊ and ➋ above. But let’s start with the overall presentation template and design direction. First, I want to bring in other strong brand elements that are used in their website or print collateral. For example, a couple of the things I identify and want to use are the gradient texture in the website footer and the infographic/icon style on the home page.
It’s all about cross-media and brand integration. I don’t have to “recreate the wheel” if I see that they already have a working solution elsewhere. It’s my job to find the strongest touch points of their brand and leverage them since time is also a factor. We don’t have the time or budget to recreate everything across the deck.
The Nitty-Gritty
Once the master elements and design system evolves to a point that works well, I begin to tackle each slide one at a time. As you can probably tell, the original slides are very amateurish with a lot of cheesy clipart and beginner-type of PowerPoint usage going on. 
The tools within PowerPoint are really rudimentary relative to Adobe products or Apple Keynote. But that doesn’t mean you can’t create visually compelling slides. You just have to learn to work within PowerPoint’s—or any tool’s—parameters and limitations. More importantly, you have to learn to think and extract what the actual core message is, then visually interpret that.
So this might mean removing all of that on-screen text and moving it to speaking points. Instead, perhaps a simple image or visual metaphor that speaks to the concept or message is more appropriate. Or it might mean splitting the slide into multiple slides to break things up, so that only one concept at a time is being shown and discussed—rather than too many concepts all crammed into one slide. 
Animation and builds can be a great asset within a presentation, too. After all, it’s just another tool in the toolbox, like anything else. But they can become a crutch and get overused a lot, and can actually end up being more of a distraction—as well as, be very time consuming on both ends. However, with the right technique, having a bit of motion and actionables in the deck can break up monotony, help focus in on one thing at a time, or be an added dimension or layer when trying to visualize more complex concepts. But mostly, they’re best used sparingly.
Ultimately, it’s about striving for a better transference of information and providing a better viewing experience for the audience. This in turn, hopefully helps to yield the level of ROI the company is wanting from their conference or event.
The Timeline
The amount of time I get to work on a deck varies. It seems like the lion’s share of time is always consumed on the front end—or the messaging, authoring the talk track, and preliminary slide drafts. So the amount of time left for design is usually very minimal. For a typical 10-20 slide presentation, I might have anywhere from a day to a week.
This project took under three weeks. Due to budget constraints, I was only able to get through about 90 slides (70%) in the master deck. It was actually quite an accelerated turn around time for the amount of work 130+ slides is to overhaul. They will have to use what I created as a basis to redesign the remaining slides on their own. Part of the original objective was to create a visual design system from which they could work to create new slide content themselves.​​​​​​​
I hope seeing an overview of my creative and design process gives you a glimpse into how I work and think. If you have any available design opportunities, feel free to contact me. I'd love to discuss it with you!
Back to Top