The Role of Wireframes in Enhancing User Interface Design

Amirah AlmaniCollege of Computer and Information Sciences, King Saud University, Riyadh, Saudi ArabiaOmer AlrwaisCollege of Computer and Information Sciences, King Saud University, Riyadh, Saudi Arabia

Vol 8 No 12 (2024): Volume 8, Issue 12, December 2024 | Pages: 134-140

International Research Journal of Innovations in Engineering and Technology

OPEN ACCESS | Research Article | Published Date: 25-12-2024

doi Logo doi.org/10.47001/IRJIET/2024.812020

Abstract

Good user experience (UX) design is critical for the success of websites and applications. However, translating user needs into functional UI designs poses challenges for many development teams, often resulting in misinterpretations, discrepancies in objectives, and increased costs. According to the Nielsen Norman Group, poor usability can result in the loss of up to 50% of potential users, highlighting the paramount importance of effective design practices.

A wireframe serves as a crucial visual blueprint that conveys a UI's hierarchy, structure, and functionality, emphasizing usability and fostering alignment and communication among stakeholders. Despite their significance, wireframes are often underutilized or poorly executed, leading to design inefficiencies. While wireframes have long been employed as a design method, this research will focus on their role in the design process, examining whether they truly facilitate collaboration and enhance user experience.

Keywords

Wireframes, Systems Analysis, Systems Design, SDLC, User Experience


Citation of this Article

Amirah Almani, & Omer Alrwais. (2024). The Role of Wireframes in Enhancing User Interface Design. International Research Journal of Innovations in Engineering and Technology - IRJIET, 8(12), 134-140. Article DOI https://doi.org/10.47001/IRJIET/2024.812020

References
  1. GeeksforGeeks, “Purpose of Wireframing in Web Design Process,” GeeksforGeeks, Oct. 05, 2023. https://www.geeksforgeeks.org/purpose-of-wireframing-in-web-design-process/  .
  2. Mokkup.ai, “How Wireframing Can Improve Your UX Design? - Mokkup.ai - Medium,” Medium, Jan. 29, 2024. https://medium.com/@mokkup/how-wireframing-can-improve-your-ux-design-ade7a9776f81.
  3. Tutorialspoint, “System Analysis and Design - Quick Guide - Tutorialspoint,” Tutorialspoint.com, 2020. https://www.tutorialspoint.com/system_analysis_and_design/system_analysis_and_design_quick_guide.htm.
  4. H. Team, “The Seven Phases of the Software Development Life Cycle,” Harness.io, Aug. 02, 2024. https://www.harness.io/blog/software-development-life-cycle-phases.
  5. Interaction Design Foundation, “What is Wireframing?,” The Interaction Design Foundation, Sep. 25, 2016. https://www.interaction-design.org/literature/topics/wireframe.
  6. “What is a wireframe? | Miro,” https://miro.com/. https://miro.com/wireframe/what-is-a-wireframe/.
  7. P. Guilizzoni, “What Are Wireframes? | Wireframing Academy | Balsamiq,” balsamiq.com, 2020. https://balsamiq.com/learn/articles/what-are-wireframes/.
  8. M. A, “Collaborative Wireframing: Strategies for Effective Team Communication,” MockFlow - Blog, Jul. 17, 2024. https://mockflow.com/blog/Collaborative-Wireframing-Strategies-for-Effective-Team-Communication.
  9. Claritee, “Enhancing Collaboration Between Designers and Developers: Best Practices - Team collaboration, UX & Functionality,” Team collaboration, UX & Functionality - Blog by Claritee.io, Oct. 30, 2024. https://claritee.io/blog/enhancing-collaboration-between-designers-and-developers-best-practices/.
  10. “LinkedIn,” Linkedin.com, 2024. https://www.linkedin.com/pulse/uiux-wireframing-enhancing-user-experience-through-effective-r-mryic/.
  11. “What is User Centered Design (UCD)?,” The Interaction Design Foundation, Jun. 05, 2016. https://www.interaction-design.org/literature/topics/user-centered-design?srsltid=AfmBOoqGmG7gmcMc__4hnNeb43a_D3SVZ3dQyM9YkeBW910MDQMAjh3t.
  12. “11 Inspiring UX Case Studies That Every Designer Should Study | Uxcel,” uxcel.com. https://uxcel.com/blog/11-inspiring-ux-case-studies-that-every-designer-should-study.
  13. M. A, “10 Wireframing Mistakes That Can Derail Your Project,” MockFlow - Blog, Mar. 19, 2023. https://mockflow.com/blog/wireframing-mistakes-that-can-derail-your-design-project
  14. Claritee, “10 Best Practices for Creating Effective Wireframes - Team collaboration, UX & Functionality,” Team collaboration, UX & Functionality - Blog by Claritee.io, Sep. 30, 2024. https://claritee.io/blog/creating-effective-wireframes/.
  15. M. Hellmuth, “10 best practices for creating effective wireframes,” Design with Figma, Mar. 10, 2023. https://medium.com/design-with-figma/10-best-practices-for-creating-effective-wireframes-a7e1dc94125e.
  16. S. Cohen, “10 Tips for Better Wireframing – i creatives,” Icreatives.com, Oct. 30, 2020. https://www.icreatives.com/iblog/how-to-wireframe/.
  17. W. C. on February 1 and 2011, “The Benefits of Wireframing a Design,” WebFX Blog, Feb. 01, 2011. https://www.webfx.com/blog/web-design/wireframing-benefits/.
  18. Claritee, “5 Reasons Why Wireframes are Important in the Design Process - Team collaboration, UX & Functionality,” Team collaboration, UX & Functionality - Blog by Claritee.io, Oct. 22, 2024. https://claritee.io/blog/why-wireframes-are-important/.