diff --git a/rules/graphic-vs-ui-ux-design/rule.md b/rules/graphic-vs-ui-ux-design/rule.md
index e9cd02895e..1f65857c1d 100644
--- a/rules/graphic-vs-ui-ux-design/rule.md
+++ b/rules/graphic-vs-ui-ux-design/rule.md
@@ -1,56 +1,71 @@
---
type: rule
tips: ""
-title: Do you know the difference between graphic design vs. UI/UX design?
-seoDescription: Learn the key differences between graphic design and UI/UX
- design, including their roles, focus, and practical examples of each
- discipline.
+title: Do you know the difference between graphic design and UI/UX design?
+seoDescription: Learn the key differences between graphic design and UI/UX design, including their roles, focus, and practical examples of each discipline.
uri: graphic-vs-ui-ux-design
authors:
- title: Betty Bondoc
- url: https://www.ssw.com.au/people/betty-bondoc/
+ url: https://www.ssw.com.au/people/betty-bondoc
+ - title: Tiago Araujo
+ url: https://www.ssw.com.au/people/tiago-araujo
related:
- when-do-you-need-a-ux-designer
created: 2024-10-08T17:21:00.000Z
guid: e03357e7-f9f6-44a3-bf73-7e6d2b1972ef
---
-Many people confuse graphic design with UI/UX design, thinking they serve the same purpose. In fact, these are entirely different areas of expertise, each requiring specialized skills. Confusing the two can lead to design inefficiencies or poor user experiences, as each discipline brings distinct value to a project.
+Many people confuse graphic design with UI/UX design, thinking they serve the same purpose. In fact, these are entirely different areas of expertise, each requiring specialized skills. Confusing the disciplines can lead to design inefficiencies or poor user experiences, as each field brings distinct value to a project.
-### Graphic Design: Focus on Visual Appeal
+* **Graphic design** is about how things look and ensuring they capture attention and evoke emotion
+* **UI design** focuses on the interactive elements users engage with, aiming to create an intuitive and efficient user interface
+* **UX design** considers the entire experience a user has with a product, ensuring it is smooth and satisfying
+
+::: info
+UI and UX are combined since they work together to create a cohesive experience that is both visually appealing and easy to use, ensuring the design not only attracts users but also guides them through intuitive interactions.
+:::
+
+### Graphic design - focus on visual appeal
Graphic design emphasizes the **visual** aspects of a product or communication. It is concerned with creating print-ready or digital assets that are aesthetically pleasing and convey the brand's message effectively. A graphic designer has expertise in areas such as typography, color theory, and layout. They are also skilled in creating print-ready files and ensuring that designs are suitable for various formats, whether for digital screens or physical prints.
-**Examples of Graphic Design Tasks**:
-- Creating a logo and visual identity for a brand
-- Designing a business card or brochure, ensuring print specifications like color profiles and bleed margins are correct
-- Crafting digital advertisements or social media graphics
-- Choosing typography and creating cohesive color palettes
+**Examples of graphic design Tasks:**
+
+* Creating a logo and visual identity for a brand
+* Designing a business card or brochure, ensuring print specifications like color profiles and bleed margins are correct
+* Crafting digital advertisements or social media graphics
+* Choosing typography and creating cohesive color palettes
-
-Figure: TinaCMS Graphics - Pull up Banner Design
+
-### UI/UX Design: Focus on User Interaction and Experience
+### UI/UX design - focus on user interaction and experience
-UI/UX design focuses on how users interact with a product, balancing form and function. **User Interface (UI)** design ensures that the product’s interface is visually consistent and intuitive, while **User Experience (UX)** design ensures that the product is functional, easy to navigate, and aligned with user needs.
+UI/UX design focuses on how users interact with a product, balancing form and function. **User Interface (UI)** design ensures that the product’s interface is visually consistent and intuitive, while **User Experience (UX)** design ensures that the product is functional, easy to navigate, and aligned with user needs.
-A UI/UX designer often has knowledge of user-centered design principles, wireframing, and prototyping. They may even conduct usability testing to gather user feedback or collaborate with developers to implement designs in code. Some UI/UX designers are capable of writing front-end code themselves, further blurring the line between design and development.
+A UI/UX designer often has knowledge of user-centered design principles, wireframing, and prototyping. They may even conduct usability testing to gather user feedback or collaborate with developers to implement designs in code.
-**Examples of UI/UX Design Tasks**:
-- Conducting usability testing to identify user pain points and refine the product’s functionality (UX)
-- Designing a website or app interface, ensuring that interactive elements like buttons and menus are easy to use and visually cohesive (UI)
-- Creating wireframes and interactive prototypes to map out user flows (UX/UI)
-- Writing HTML/CSS code to ensure design integrity during implementation (UI)
+::: info
+Some UI/UX designers are capable of writing front-end code themselves, further blurring the line between design and development.
+:::
-
-Figure: TinaCMS UI/UX - Website Mockups
+**Examples of UI/UX design tasks:**
+* Conducting usability testing to identify user pain points and refine the product’s functionality (UX)
+* Designing a website or app interface, ensuring that interactive elements like buttons and menus are easy to use and visually cohesive (UI)
+* Creating wireframes and interactive prototypes to map out user flows (UX/UI)
+* Writing HTML/CSS code to ensure design integrity during implementation (UI)
-### Key Differences
+
-- **Expertise**: A graphic designer’s expertise lies in creating *visually compelling* designs and preparing files for print or digital media. A UI/UX designer’s expertise revolves around *user interaction* and *usability*, which may include tasks like conducting usability tests, creating wireframes, or even writing front-end code.
-- **Focus**: Graphic design focuses on *visual aesthetics*, while UI design emphasizes *interactive elements*, and UX design focuses on *functionality* and *user flow*.
-- **Tools**: Graphic designers typically use tools like Adobe Illustrator or Photoshop for creating static visuals. UI/UX designers rely on tools like Figma, Sketch, or Adobe XD for interactive design, wireframes, and prototypes.
-- **Process**: UI/UX design often precedes graphic design in product development. First, the user flows and interfaces are mapped out, and then visual branding elements are applied.
+### Key differences
Understanding these key differences ensures that each role contributes its expertise at the right stage of the project, resulting in a product that is both visually appealing and highly functional.
+
+| | **Graphic Design** | **UI/UX Design** |
+|---------------|---------------------------------------------------------------------------|------------------------------------------------------------------------------|
+| Expertise | Creates **visually compelling** designs and prepares files for print or digital media | Focuses on **user interaction** and **usability**, including tasks like usability tests, wireframes, or front-end code |
+| Focus | Prioritizes **visual aesthetics** | UI emphasizes **interactive elements**; UX focuses on **functionality** and **user flow** |
+| Tools | Adobe Illustrator or Photoshop for static visuals | Figma, Sketch, or Adobe XD for interactive design, wireframes, and prototypes |
+| Process | Follows UI/UX design in product development | Precedes graphic design by mapping user flows and interfaces before adding visual elements |
+
+While graphic designers aim to create visually appealing designs, UI/UX designers prioritize how users interact with those designs, ensuring functionality and ease of use. Understanding these differences is crucial for creating effective digital products that are both visually engaging and user-friendly.