Create Rule “graphic-vs-ui-ux-design/rule” (#9364)

* Create Rule “graphic-vs-ui-ux-design/rule”

* Updated Author

* Update Rule “graphic-vs-ui-ux-design/rule”

* upload files for examples

* Added examples

* Update rule.md

* Added URL

rules/graphic-vs-ui-ux-design/rule.md

@@ -0,0 +1,56 @@
+---
+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.
+uri: graphic-vs-ui-ux-design
+authors:
+  - title: Betty Bondoc
+    url: https://www.ssw.com.au/people/betty-bondoc/
+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.
+
+<!--endintro-->
+
+### 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
+
+<img src="tina-graphics.png" alt="TinaCMS Pull up Banner graphics" /><br/>
+<strong>Figure: TinaCMS Graphics - Pull up Banner Design</strong>
+
+### 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. 
+
+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.
+
+**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)
+
+<img src="tina-mockup.png" alt="TinaCMS Website Mockup" /><br/>
+<strong>Figure: TinaCMS UI/UX - Website Mockups</strong>
+
+### 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.
+
+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.