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(Article Submission)
It is a process of submitting an article related to your website. you continue reading further into the article.

For the sake of clarity and consistency, I’ll use a new website design project as(Article Submission)
It is a process of submitting an article related to your website. an example for the remainder of this article.

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(Article Submission)
It is a process of submitting an article related to your website. 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.

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 brandA brand is a name, term, design, symbol or any other feature that identifies one seller’s good or se…, 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 brandA brand is a name, term, design, symbol or any other feature that identifies one seller’s good or se… 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.

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, typographyTypography is the art and technique of arranging letters to make written language legible, readable …, 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, typographyTypography is the art and technique of arranging letters to make written language legible, readable …, 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 brandA brand is a name, term, design, symbol or any other feature that identifies one seller’s good or se… 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 boardA mood board is collage of ideas used to convey a general idea or feeling about a particular project…, a digital version should work just as(Article Submission)
  It is a process of submitting an article related to your website. well.

• Storyboards and Wireframes: Both storyboards and wireframes act as(Article Submission)
  It is a process of submitting an article related to your website. 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 brandA brand is a name, term, design, symbol or any other feature that identifies one seller’s good or se… identity. It covers everything from the size and placement of the logo to typographyTypography is the art and technique of arranging letters to make written language legible, readable …, brandA brand is a name, term, design, symbol or any other feature that identifies one seller’s good or se… colors, and types of images and advertising copy used in their marketing materials.

• Color Palettes: Traditionally, a color palette• A palette is the color scheme of a specific design or brand – making up part of a brand’s styl… meant a palette• A palette is the color scheme of a specific design or brand – making up part of a brand’s styl… 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• A palette is the color scheme of a specific design or brand – making up part of a brand’s styl… 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 TheoryColor theory encompasses both the art and science of color use. It explains how humans perceive colo…: The color wheel becomes a central reference when developing the color palette• A palette is the color scheme of a specific design or brand – making up part of a brand’s styl… for your brandA brand is a name, term, design, symbol or any other feature that identifies one seller’s good or se…. 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 theoryColor theory encompasses both the art and science of color use. It explains how humans perceive colo….) 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(Article Submission)
    It is a process of submitting an article related to your website. 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)
  • AnalogousAnalogous colors are groups of three colors that are next to each other on the color wheel, and a te… Colors: AnalogousAnalogous colors are groups of three colors that are next to each other on the color wheel, and a te… colors are groups of 3 colors that are adjacent on the color wheel. Red, orange, and red-orange is an analogousAnalogous colors are groups of three colors that are next to each other on the color wheel, and a te… color group sample of deep, warm, and rich hues.
  • Complementary ColorsComplementary colors are pairs of colors which, when combined or mixed, cancel each other out by pro…: 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 colorsComplementary colors are pairs of colors which, when combined or mixed, cancel each other out by pro…. 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 hueThe word hue literally means “color.” The standard set of colors as they appear on the color spectru… or color by changing its shadeShade is a variation of a color or hue produced by adding black to create a darker or deeper version…, tintTint is a variation of a color or hue created by adding white to produce a lighter or less saturated…, or toneTone is a color or hue variation created by adding gray or tint and shade variations to create a mor…. 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(Article Submission)
    It is a process of submitting an article related to your website. 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.
    • HueThe word hue literally means “color.” The standard set of colors as they appear on the color spectru…: Pure Color (or just color)
    • TintTint is a variation of a color or hue created by adding white to produce a lighter or less saturated…: HueThe word hue literally means “color.” The standard set of colors as they appear on the color spectru… + White = Lighter variation of the hueThe word hue literally means “color.” The standard set of colors as they appear on the color spectru… (color)
    • ToneTone is a color or hue variation created by adding gray or tint and shade variations to create a mor…: HueThe word hue literally means “color.” The standard set of colors as they appear on the color spectru… + White and Black = Variations in saturationColor saturation describes how vivid, rich, or intense a color is. It refers to the color’s hue domi… of the hueThe word hue literally means “color.” The standard set of colors as they appear on the color spectru… (color)
    • ShadeShade is a variation of a color or hue produced by adding black to create a darker or deeper version…: HueThe word hue literally means “color.” The standard set of colors as they appear on the color spectru… + Black = Darker variations of the hueThe word hue literally means “color.” The standard set of colors as they appear on the color spectru… (color)
• TypographyTypography is the art and technique of arranging letters to make written language legible, readable …: TypographyTypography is the art and technique of arranging letters to make written language legible, readable … is the use of type as(Article Submission)
  It is a process of submitting an article related to your website. part of a design. Good typographyTypography is the art and technique of arranging letters to make written language legible, readable … is the foundation of great design. It’s the careful, thought out, and deliberate selection fontA font is a set of printable or displayable text character s in a specific style and size. The type…, size, color, layout, alignmentThe way different elements in a design are arranged, usually in relation to a page or document. In t…, 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 brandA brand is a name, term, design, symbol or any other feature that identifies one seller’s good or se… identity as(Article Submission)
  It is a process of submitting an article related to your website. well as(Article Submission)
  It is a process of submitting an article related to your website. 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.
• MockupA mockup or mock-up is a scaled model or replica of something showing users and stakeholders how som…: In the world of graphic and web design, a mock-upIn manufacturing and design, a mockup, or mock-up, is a scale or full-size model of a design or dev… is a simulation of what the final deliverable will look. Website mockups logically combine the structure of wireframes, imagery, typographyTypography is the art and technique of arranging letters to make written language legible, readable …, and UI(User Interface)
  The way a user interacts with an application or a website. The user interface… 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.

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(User Interface)
The way a user interacts with an application or a website. The user interface… designers can program the visuals and developers and coders can begin working on the back-end of the website. The backendThe server, application and database that work behind the scenes to deliver information to the use… 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
  • HTMLHypertext Markup Language – The coding language used to build almost all websites. HTML is the found… – HTMLHypertext Markup Language – The coding language used to build almost all websites. HTML is the found… stands for Hyper Text Markup Language and is a standardized system for creating and describing the structure of a webpage.
  • CSS(Cascading Style Sheet)
    Code used to style a web document. Cascading Style Sheets is a style shee… – CSS(Cascading Style Sheet)
    Code used to style a web document. Cascading Style Sheets is a style shee… is the acronym for “Cascading Style Sheets” and is a computer language for laying out and structuring web pages. CSS(Cascading Style Sheet)
    Code used to style a web document. Cascading Style Sheets is a style shee… 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(Cascading Style Sheet)
    Code used to style a web document. Cascading Style Sheets is a style shee… has gotten so advanced that it is now used in animation and interactivity.
  • JavaScriptJavaScript is among the most popular, powerful and flexible text-based programming languages used… – JavaScriptJavaScript is among the most popular, powerful and flexible text-based programming languages used… is a dynamic and lightweight web programming language that can update and change both HTMLHypertext Markup Language – The coding language used to build almost all websites. HTML is the found… and CSS(Cascading Style Sheet)
    Code used to style a web document. Cascading Style Sheets is a style shee….

Wireframes and sitemaps go hand-in-hand. A sitemapA file in a specific format used to provide information to search engines about the content on a web… is a document, usually and XML file that lists the pages and other content on your website. Sitemaps can also act as(Article Submission)
It is a process of submitting an article related to your website. 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.

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 friendlinessA measure of how easy a website is to use and access on mobile devices., 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(Article Submission)
It is a process of submitting an article related to your website. the complete tasks on your website or a simulation environment. There are several software and userA person that uses a product. testing companies out there to aid in your testing and research. If you’re strapped for cash, userA person that uses a product. testing can also be a good side gig or side hustle.

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(Article Submission)
It is a process of submitting an article related to your website. a sourceThe origin of your traffic, such as a search engine or website. Medium: the general category of the … 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 serverA server is a computer or system that provides resources, data, services, or programs to other comp… locations. Reliability, security, and uptime are of utmost importance.
• Design – Make sure design elements are within established brandA brand is a name, term, design, symbol or any other feature that identifies one seller’s good or se… 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(Search Engine Optimization)
  The process of improving the quality and quantity of website traffic…, you want to ensure your pages are optimized. You also want to limit the number of and sizes of serverA server is a computer or system that provides resources, data, services, or programs to other comp… requests, so combining and optimizing all website elements will speed things up and help with ranking factorsThese are items that are used in search algorithms and impact how and where a webpage appears on sea….
• Mobile friendlinessA measure of how easy a website is to use and access on mobile devices. – 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 certificateA digital certificate that authenticates a website’s identity and enables an encrypted connection. S… to establish trust with your customers – especially if you’re making financial transactions on your website.

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 eventA specific action or occurrence on a website. Events may be automatically tracked or a business may …. 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 releaseA press release is an official statement delivered to members of the news media for the purpose of p… 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.

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 reachA display advertising metric which counts the number of users who have seen your ad. Video, display,… it.

Annette C. Sage / CEO at Sage Design GroupCreative Solutions to Grow Your Business.™  Our VISION: Sage Design Group wants to be the go-t… More