As a designer, I never know what I might be working on from day to day. I might find myself working on logos, flyers, brochures, website mockups, social media banners, or anything in between.
However, my process is basically the same across the board, no matter what I’m working on.
I perfected my process for graphic design and web design projects while I was at Texas Woman’s University.
I have about seven steps:
- Research
- Inspiration
- Brainstorming
- Thumbnail Sketches
- Digital Roughs
- Tight Comps and Deliverables
- Final Deliverables
But let me go into a little more detail.
Research
First I research—I learn as much as I can about my client and their industry. I try to ask as many questions as I can—here’s a few of them:
- Summarize your business—what services do you offer?
- Who is your target market?
- What are they trying to accomplish by using this website—what is their objective?
- What do you want your website to say about you—what type of personality do you want it to convey to the user?
- What are your competitors doing?
- What solution are your customers looking for when they visit your site?
- Do you have a particular design aesthetic you like?
- What information is most important to you?
Once I can understand the reasoning behind the design (and get to know the client better) I can do a much better job creating a mockup.
Inspiration
Now the fun part—searching for visuals to inspire my design!
I start by looking at competitor’s sites or logos to get a feel for what’s popular in that specific industry. It’s always a good idea to take a look at what’s out there so you can compare color palettes, fonts, imagery, and layouts commonly used.
Depending on what the client wants, I can choose to reflect what I see around me or go in the complete opposite direction and come up with something unique.
Here are a few of the websites I visit regularly for inspiration:
- pinterest.com
- dribble.com
- behance.net
- awwwards.com
- color.adobe.com
- theinspirationgrid.com
- thedieline.com
Of course, you can go just about anywhere—where do you go for inspiration?
Brainstorming
Now it’s time to take pencil to paper. I start jotting down random words to help get my creative juices flowing.
I like to use flow charts and word association lists. Maybe a random word pops into your head that sparks an idea. It’s a good way to step back and consider ideas that don’t immediately appear in the forefront of your mind.
Thumbnail Sketches
This is the most crucial part of my personal design process.
After gathering information and brainstorming ideas, I start to create rough sketches of logos or layouts (for website mockups).
Specifically for web design, I start by roughly sketching layouts for each landing page, starting with the homepage. I’ll mix and match sketches from different layouts until i narrow it down to two to three layout concepts.
This is also where I can sketch ideas for button styles, horizontal rules, or imagery.
The thumbnails guide me throughout the rest of the design process, and they’re a place I return to incase a client doesn’t like a draft. Because they’re small and undetailed, I can come up with a lot of different ideas very quickly.
Digital Roughs
Now it’s time to really start creating!
When I’ve got a thumbnail that I really like, I use it to create a digital rough, which is basically a scaled, detailed design of a web page or logo. It looks very close to what the actual web page or logo would look like and gives clients a much better idea of what they’re buying.
I prefer to use Adobe Illustrator when creating website mockups because of the clear vector graphics (graphics that can be scaled to any size without losing resolution).
One nice thing about creating a vector graphic is our web developer can directly take visual elements from the file itself and upload them to the live site.
First I will set up a basic wireframe, using shapes to act as placeholders for images and content. I always try to fill empty text boxes with the actual content we’re going to be using (because you’ve already got the content done, right?)—we always let content drive design.
As I progress, I fill the mockup with the photos and colors that we’ve already determined through our previous meetings with clients, getting as close to a representation of a final project as possible.
Tight Comps and Deliverables
Tight comps are the final or completed design file.
During this stage, I check for type detailing, uniform spacing, spelling errors, and consistent use of color. Afterwards, I create deliverables in any file formats the client may need.
This could include .png, .jpg, .eps, a packaged .ai file, or a PDF.
And if the client loves it (and why wouldn’t they?), our developer starts putting the pieces into place!
What’s YOUR Next Project?
Hopefully, by giving you a general overview of my design process, you’ll be inspired to perfect you own.
By creating (and sticking to) a design process, you can take the guesswork out of anything you may be working on and boost your productivity.
Don’t just wait for inspiration—work your way into it.
I’d love to hear your suggestions or your own personal methods for completing your projects. What’s your process?
