The Graphic Design Process

What is the graphic design process?

“THE” ultimate guide to the graphic design process – like I’m the one who wrote the book. Actually the term graphic design is defined as “the process” of visual communication and problem-solving through the use of typography, photography, iconography and illustration and the first book that had “Graphic Design” written in its title was written by W.G. Raffe in 1927. The topic has been covered over and over by industry experts and newbies alike. So, what makes my version of the graphic design process more credible than any other creative professional’s version?  True craftsmanship is subjective and open to interpretation.

What are the steps to the graphic design process?

I’ve seen many variations of the graphic design process printed in books and posted all over the internet. I think narrowing the graphic design process down to 7 steps is easier to digest than trying to memorize the actual 84 steps of the creative process. Just kidding. My interpretation of the 7 steps of the graphic design process is listed below and I will further elaborate on each of the steps as you continue reading further into the article.

For the sake of clarity and consistency, I’ll use a new website design project as an example for the remainder of this article.

<h2>Phase 1: Discovery

The discovery phase of the graphic design process is essentially information gathering. This is where you define the overall goal of your project and plan how the work will be delivered. It’s a data collection exercise that can be conducted via interviews or questionnaires and presented via a design brief. Some of the questions you might ask during the discovery phase of the design process are similar to the questions you would see in a design brief or creative brief.

I’ve outlined the elements of a design brief below that you can use as a worksheet to help you evaluate the information for your design brief. Keep in mind the most important information a designer is going to need are your objectives, target audience, timeline and budget.

Company Overview What is your company about?
Objective/Goals What are you trying to accomplish?
Budget How much money do you have allocated for your project?
Timeline What milestones do you need completed and by when?
Target Audience Who are you trying to reach?
Brand Image What image are you trying to portray?
Challenges What obstacles do you foresee in obtaining your goals?
Materials What do you have and what do you need to complete your project?
Deliverables What is being delivered by the designer?

 

<h2>Phase 2: Research

The Research phase of the graphic design process is where you conduct market research, competitor analysis, and is a critical phase of the design strategy. The Discovery and Research phases go hand-in-hand and are about gathering information. The discovery phase is more internal information gathering; where the research phase is more about obtaining information about external influences and how they impact the planning and overall outcome and results of your project.

Market Research

Market research is the process of gathering information about your target audience, customers, and company’s buyer personas to determine how successful your product or service will be in the market. It’s the important insight that is comprised of the Who, What, Why, Where, and How of the things that impact your bottom line. A few methods used to gather information in your research include focus groups, surveys, interviews, observation, analytics, etc. You can find some common market research questions below:

  • Where are your customers conducting research when looking for products or services that your business offers?
  • What’s trending and what’s going on in your industry?
  • Who makes up your market and what are their challenges?
  • What influences the purchasing decisions of your market?
  • Which of your competitors does your target market go to for expert advice, product or service options, or make purchases?

Competitor Analysis

Competitor analysis is the process of identifying major competitors and researching their Brand, product and service offerings, sales and marketing strategies, and evaluating their strengths and weaknesses. Competitor research provides insight into offensive and defensive strategic standpoints to identify opportunities and threats. Competitive research (or competitive intelligence) is an essential tactic for finding out what your rivals are doing and whether or not they pose a threat or if they contribute to the success of your company. Below are a few things to consider when conducting a competitive analysis.

  • Who are your top ten competitors?
  • What type of content are they publishing?
  • What kind of engagement are they getting on social media?
  • Are they consistent with their visual Brand and messaging?
  • What types of fonts, colors and images are they using?
  • What are the areas for improvement?

The questions above are a good exercise in not only identifying areas where your competitors can improve, but it will help you take a closer look at key areas where you can improve to gain a competitive advantage in an already crowded marketplace.

<h2>Phase 3: Design

The design phase is where we take all the valuable information we got from the design brief and the competitor analysis and start generating design ideas. You can start with just pen and paper or even a napkin if you’re sitting in a coffee shop and that’s all you have available to sketch out the brilliant design idea you just had. The design phase includes mood boards, storyboards, style guides, color palettes, sketches, typography, images, icons, layout, prototypes, mockups, and more.

  • Mood Boards: Mood boards are my favorite part of the creative process because it reminds me of going through the motions of creating vision boards for all the wonderful things I want to manifest in my life. Essentially, mood boards are mixed media collages of various items like photographs, drawings, typography, magazine cutouts, textures, color swatches, and mementos used to evoke a certain feeling or ambiance. Experiment with different styles and tones until you figure out what works for your Brand and how it fits with and stands out against the competition and other players in the marketplace. If you don’t have everything you need to create your mood board, a digital version should work just as well.

  • Storyboards and Wireframes: Both storyboards and wireframes act as an outline to organize your project details. The difference between wireframes and storyboards is wireframes are basic structural guidelines and framework for a project – in this case, a website layout. Storyboards are a more visually detailed explanation of how the audience will react and engage with your website or other deliverables of your project.

  • Style Guides: A style guide is a manual that contains an established of standards and guidelines that sets the foundation and rules for a company’s Brand identity. It covers everything from the size and placement of the logo to typography, Brand colors, and types of images and advertising copy used in their marketing materials.

  • Color Palettes: Traditionally, a color palette meant a palette of different colors of paint on a rigid flat surface in which an artist arranges and mixes a range of selected colors. In the modern digital world, a color palette refers to the full range of colors that can be displayed on a device screen or other interface, or in some cases, a collection of colors and tools for use in paint and illustration programs.

 

Color Wheel and Color Theory: The color wheel becomes a central reference when developing the color palette for your Brand. Typically there are three different color combinations that can be formed with your primary and secondary colors. (I’m feeling nostalgic about taking and teaching color theory.) Sometimes going back to the basics gets the creative juices flowing.

  • Primary Colors: Red, green, and blue are the primary colors of light and can be combined in different proportions or variations to form all other colors.
    • Secondary Colors: Secondary colors are created by mixing two primary colors and is the complimentary color of the primary color whose wavelength it doesn’t contain.
      • Red + Blue = Purple
      • Yellow + Blue = Green
      • Red + Yellow = Orange
    • Tertiary Colors: Tertiary colors or intermediate colors are created by mixing a primary color with and adjacent secondary color on the color wheel. The children of each pair of these color combinations are known as tertiary colors.
      • Red + Orange = Vermilion (red-orange)
      • Orange + Yellow = Amber (yellow-orange)
      • Yellow + Green = Chartreuse (yellow-green)
      • Green + Blue = Teal (blue-green)
      • Blue + Purple = Violet (blue-purple)
      • Purple + Red = Magenta (red-purple)
    • Analogous Colors: Analogous colors are groups of 3 colors that are adjacent on the color wheel. Red, orange, and red-orange is an Analogous color group sample of deep, warm, and rich hues.
    • Complementary Colors: Complimentary colors are any two colors that are exactly the opposite on the color wheel and the do just that – they complement each other. For example, red is on the opposite side of the color wheel, making them opposites or Complementary Colors. More examples of complementary color pairs would be blue and orange or red-orange and blue-green.
    • Monochromatic Colors: Mono means one, hence monochromatic means one color – but different variations of one hue or color by changing its shade, tint, or tone. For example, different variations of red would be pink and maroon by mixing the main color with black and/or white.
    • Split Complementary: A split complimentary color scheme is as the name describes. It is when one of the colors of the complimentary pair gets split into the two colors on either side of it. For example, Red and Green would become Red, Teal (green-blue), and Chartreuse (yellow-green).
    • Triad Color Scheme: A triad color scheme is a variation of the split complementary color scheme by adding a third variable. All three colors should be evenly distributed around the color wheel with equal distance between all the colors – forming a perfect triangle.
    • Color Variants: Variations of colors created by mixing original hues with black and white to produce brighter, darker, lighter, softer, etc.
      • Hue: Pure Color (or just color)
      • Tint: Hue + White = Lighter variation of the hue (color)
      • Tone: Hue + White and Black = Variations in saturation of the hue (color)
      • Shade: Hue + Black = Darker variations of the hue (color)
  • Typography: Typography is the use of type as part of a design. Good typography is the foundation of great design. It’s the careful, thought out, and deliberate selection font, size, color, layout, alignment, and other factors that affect the design.
  • Images: During the design phase you should determine the types of images and illustrations to use to enhance and maintain your Brand identity as well as the sources of the imagery.
  • Sketches: Sketching is an excellent way to quickly put your ideas onto paper and explore and experiment with various concepts. This is one of the most important steps in the design process before you move onto the computer. Too many designers lock themselves into a box of what they know how to do on a computer, limiting their creativity.
  • Layout: Layout in graphic design is the logical, coherent, and aesthetically pleasing way to arrange elements on a page while ensuring that important information stands out.
  • Mockup: In the world of graphic and web design, a mock-up is a simulation of what the final deliverable will look. Website mockups logically combine the structure of wireframes, imagery, typography, and UI in a high fidelity representation of the final product.

The design phase of the graphic design process is where the visuals come together and start taking shape and form.

<h2>Phase 4: Build

The build phase of the graphic design process in a web design project is where the product is under development. Front end designs are finalized so the UI designers can program the visuals and developers and coders can begin working on the back-end of the website. The backend of a website is where programmers work on the functionality of the website. During the build phase is where most of the content like website copy, images, and icons are developed according to the mockups and wireframes, sitemaps, and style guides created during the design phase.

  • Languages used by web designers
    • HTMLHTML stands for Hyper Text Markup Language and is a standardized system for creating and describing the structure of a webpage.
    • CSS CSS is the acronym for “Cascading Style Sheets” and is a computer language for laying out and structuring web pages. CSS is used to define styles on your webpages including the design, layout and variations of visual elements like colors, fonts, and placement of design elements. CSS has gotten so advanced that it is now used in animation and interactivity.
    • JavaScript JavaScript is a dynamic and lightweight web programming language that can update and change both HTML and CSS.

Wireframes and sitemaps go hand-in-hand. A sitemap is a document, usually and XML file that lists the pages and other content on your website. Sitemaps can also act as an outline of the content on your website. It’s predominately a way for webmasters to communicate with search engines like Google and Bing more intelligently – telling search engine robots how to crawl and index the pages of your website. Sitemaps also provide information about pages relevant to the other pages of your website.

<h2>Phase 5: Test

The purpose of the testing phase is to make sure everything looks great and is working properly. If your site isn’t too complex, you can have internal team members proof, edit, and test everything to make sure there aren’t any errors or bugs. The most important things to focus on are readability, browser compatibility, mobile friendliness, and will your users know what to do?

Most of this should be done in the staging environment before going live on the internet. For more complex projects usability testing allows you to evaluate the functionality and design of your website by observing how people behave and interact as the complete tasks on your website or a simulation environment. There are several software and user testing companies out there to aid in your testing and research. If you’re strapped for cash, user testing can also be a good side gig or side hustle.

<h2>Phase 6: Refine

Refine. Once you’ve tested everything, it’s time to refine and get the kinks and bugs out before launching your website live. This will help prevent major embarrassment or loss of revenue. If you’re depending on your website as a source of income, unforeseen or overlooked errors could put a big dent in your wallet. Make sure to have editors and proofers go through your content with a fine tooth comb.

It’s always a good idea to always have at least 3 sets of eyes on everything before it goes public because not everyone is coming from the same perspective and there will be less problems with cases of tunnel vision. Getting feedback from your peers and business network with different backgrounds is a good way to get diverse perspectives. Try a test market to see how people respond. You ultimately want to please and engage your end users – your customers.

Pre-Launch Checklist – There are a few things to check for before launching. Make sure everyone who has a responsible role in the launch of the project is aware of what they are responsible for. Set a launch date and stick with it.

  • Hosting – Make sure to choose a secure and reputable hosting company with maximum uptime and multiple server locations. Reliability, security, and uptime are of utmost importance.
  • Design – Make sure design elements are within established Brand guidelines. For example if you have a style guide, make sure the correct colors, fonts, imagery, and layout of elements are within standards.
  • Content – Check copy for spelling and grammar errors. Ensure image sizes are optimized and matches content.
  • Functionality – Ensure all technical aspects are functioning properly across all major devices and browsers.
  • Optimization – Test the speed and load time of your website. If you are implementing SEO, you want to ensure your pages are optimized. You also want to limit the number of and sizes of server requests, so combining and optimizing all website elements will speed things up and help with ranking factors.
  • mobile friendliness – You want to test everything on mobile devices. Mobile accounts for over 50% of web traffic today.
  • Security – If you are collecting personal information from users on your website, be sure to have an SSL certificate to establish trust with your customers – especially if you’re making financial transactions on your website.

 

<h2>Phase 7: Launch

The build-up and anticipation of finally launching your website. It’s like a kid with a new toy. You just can’t wait. Pick a day. It’s a special event. You’ve invested thousands of dollars and months creating this website, let the world know. Staying silent and humble is really a wasted marketing opportunity. Send out an email to everyone on that list you’ve been building and a press release to all your industry’s major publications. It’s okay to toot your own horn after you’ve put a lot of effort into something.

<h2>Conclusion

There are several variations and interpretations of the graphic design process. My interpretation of the graphic design process can be broken down into 7 steps: Discovery, Research, Design, Build, Test, Refine, and Launch. The common themes and outcomes of the graphic design process is pretty consistent across the board. It’s about defining a problem, collecting information, brainstorming ideas, developing and creating solutions, and improving. Don’t worry about perfection. You’ll never reach it.


Annette C. Sage / CEO at Sage Design Group