{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/Aq3sN6a4K3GpQTbdcj90/AVQ6HDEZelvLRPQzUvdV/bCrnAFrXo.js"],
  "sourcesContent": ["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { addPropertyControls, ControlType, Link } from \"framer\";\nimport * as React from \"react\";\nconst addImageAlt = (image, alt) => {\n  if (!image || typeof image !== \"object\") {\n    return;\n  }\n  return {\n    ...image,\n    alt\n  };\n}; /**\n   * @framerRecordIdKey id\n   * @framerSlug NiC7e4LKq\n   * @framerEnumToDisplayNameUtils 2\n   * @framerData\n   */\nconst data = [{\n  cyK5El4GA: \"Kickstart your career with our essential guide to crafting a standout UI/UX design portfolio.\",\n  GhLX8yBxU: \"2023-09-18T00:00:00.000Z\",\n  H99ImQ0k1: \"Boost Your Career as a UI/UX Designer: Learn How to Build an Outstanding Portfolio\",\n  id: \"iJgS8MDEa\",\n  iRupPxypK: \"John Iseghohi\",\n  IxZKmK_ti: addImageAlt(undefined, \"\"),\n  NiC7e4LKq: \"boost-your-career-as-a-ui-ux-designer-learn-how-to-build-an-outstanding-portfolio\",\n  njCINTTep: \"https://small.dev\",\n  nRliio48H: \"\",\n  pOVMMf8bX: /*#__PURE__*/_jsxs(React.Fragment, {\n    children: [/*#__PURE__*/_jsx(\"p\", {\n      children: \"Welcome to this comprehensive guide on how to build an outstanding portfolio as a UI/UX designer.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Whether you're an amateur or a beginner, a well-structured portfolio can be your passport to greater opportunities.\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"It can help you illustrate your skills, showcase your creativity, and affirm your understanding of the UI/UX \", /*#__PURE__*/_jsx(Link, {\n        href: \"https://wireframes.com/blog/tips-for-efficient-collaboration-in-ux-ui-design\",\n        openInNewTab: false,\n        smoothScroll: false,\n        children: /*#__PURE__*/_jsx(\"a\", {\n          children: \"design process\"\n        })\n      }), \".\"]\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"You might be thinking,\\xa0\", /*#__PURE__*/_jsx(\"em\", {\n        children: '\"How do I\\xa0create a\\xa0portfolio?'\n      })]\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"em\", {\n        children: \"What should I include in it? What tools do I need\"\n      }), '?\"']\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Don't worry; we're here to guide you through every step of the way.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: /*#__PURE__*/_jsx(\"em\", {\n        children: '\"A portfolio is not just a collection of your work; it is a window into your abilities and thought process as a designer.\"'\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"In this guide, we'll cover:\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"ol\", {\n      children: [/*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: /*#__PURE__*/_jsx(\"strong\", {\n            children: \"The fundamentals of building a UI/UX portfolio - Showcasing your style and skills\"\n          })\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: /*#__PURE__*/_jsx(\"strong\", {\n            children: \"What to include in your portfolio - Choosing the right project and polishing your presentation.\"\n          })\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: /*#__PURE__*/_jsx(\"strong\", {\n            children: \"The tools you will need to create your portfolio\\xa0\"\n          })\n        })\n      })]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"By the end of this guide, you'll possess the knowledge and confidence to create a portfolio that not only showcases your best work but also reveals the unique designer you are.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Let's get started!\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"Introduction: The Importance of a Strong Portfolio\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"When it comes to launching a successful career in UI/UX design, there's one thing you can't overlook - a strong, well-curated portfolio.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"This isn't just a collection of your best works; it's your professional calling card, your visual resume, and a reflection of your design thinking.\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(Link, {\n        href: \"https://uxplanet.org/heres-what-hiring-managers-look-for-in-ux-design-candidates-90a144d21c2e\",\n        openInNewTab: false,\n        smoothScroll: false,\n        children: /*#__PURE__*/_jsx(\"a\", {\n          children: \"90% of hiring managers consider a strong portfolio as the most important factor when evaluating a UI/UX designer candidate\"\n        })\n      }), \".\"]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"It's how potential clients or employers get to know your capabilities and see the evidence of your skills, creativity, and experience.\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: ['You might be thinking, \"', /*#__PURE__*/_jsx(\"em\", {\n        children: \"But my resume is up to date; isn't that enough\"\n      }), '?\"']\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"While a resume is important, it doesn't paint the full picture. On the other hand, a portfolio allows you to showcase your process, problem-solving skills, and, crucially, creativity - all elements that a resume alone can't capture. Understanding this, you realize the importance of having a solid portfolio that can sell your skills effectively.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"However, building a UI/UX design portfolio can be daunting, especially if you're just starting out.\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"You might have questions like 'W\", /*#__PURE__*/_jsx(\"em\", {\n        children: \"hat should I\\xa0include?', 'How do I\\xa0present my work effectively?\"\n      }), \"' or '\", /*#__PURE__*/_jsx(\"em\", {\n        children: \"What tools do I\\xa0need?\"\n      }), \"'.\"]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"But don't worry; I'm here to guide you every step of the way.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"In this article, you'll discover how to build a compelling portfolio that showcases your design skills and tells a story about who you are as a designer.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"So, let's dive right in and explore the steps to building your portfolio, the tools you'll need, and the key elements that every strong UI/UX design portfolio should include. Remember, your portfolio is your opportunity to shine -\\xa0it's time to make the most of it.\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"Defining Your Unique Style: Developing Your Design Aesthetic\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"As a\\xa0budding UI/UX designer, nailing down your unique style is crucial. It's not just about being able to create stunning visuals or user-friendly designs\u2014it's about developing an aesthetic that carries your personal branding, something that sets you apart from the crowd. Here, we'll delve into what you can do to define that unique style.\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"The Exploration Phase\"\n      }), \"\\xa0\"]\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"Start by exploring various design styles. Look into the works of other UI/UX designers, especially those you admire. Note the elements that catch your eye\u2014\", /*#__PURE__*/_jsx(Link, {\n        href: \"https://framer.com/projects/520502\",\n        openInNewTab: false,\n        smoothScroll: false,\n        children: /*#__PURE__*/_jsx(\"a\", {\n          children: \"the use of color, typography, shapes\"\n        })\n      }), \", etc. Don't limit yourself to one category or style. This is your opportunity to be adventurous and open-minded.\\xa0\"]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Remember, the goal isn't to imitate, but to draw inspiration and understand what resonates with you.\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"Self-Reflection and Experimentation\"\n      }), \"\\xa0\"]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Once you've gathered enough inspiration, reflect on what you've observed.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Ask yourself: What are the common themes or elements that attract you?\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Do they align with your personal taste? This self-reflection process is crucial in determining your design aesthetic.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Don't be afraid to experiment. Try integrating the elements you've identified into your designs. Test different combinations, tweak them, and see what works best for you.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Again, there's no right or wrong here\u2014only discovery and growth.\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"Consistency is Key\"\n      }), \"\\xa0\"]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"After you've found what works for you, aim for consistency. Your unique style should be recognizable across all your designs. Whether it's the way you use colors, the shapes you choose, or the typography style you prefer\u2014consistency helps to establish your brand identity.\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"Revise and Update\"\n      }), \"\\xa0\"]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Defining your style isn't a\\xa0one-off task. It's a\\xa0continuous process.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Your style may also change as a designer as you grow and evolve.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"So, make sure to revisit your aesthetic occasionally, revise it, and keep it updated. Just like in the design world, adaptability is crucial.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"Showcasing Your Process: Documenting Design Thinking and Problem Solving\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"If you're a\\xa0budding UI/UX designer, the best way to demonstrate your skills isn't just about showing the finished product\u2014it's equally about revealing the thought process that got you there. Documenting your design thinking and problem-solving methods within your portfolio can prove to be an invaluable asset. Let's dive deeper into understanding why this is crucial and how you can effectively showcase your process.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: /*#__PURE__*/_jsx(Link, {\n        href: \"https://uxplanet.org/why-your-ux-portfolio-is-not-landing-you-a-job-5f75ab9fe94c\",\n        openInNewTab: false,\n        smoothScroll: false,\n        children: /*#__PURE__*/_jsx(\"a\", {\n          children: \"75% of UI/UX designers include a brief description of their design decisions and problem-solving approach in their portfolio\"\n        })\n      })\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"The Importance of Documenting Your Process\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"When you document your journey from an idea's conception to its final execution, you provide prospective employers with a\\xa0glimpse into your problem-solving prowess. It demonstrates your systematic approach to tackling complex design challenges and your ability to think critically. But more than that\u2014it reveals your creative journey and the unique insights you bring to the table.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"How to Document Your Design Process\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Now that you comprehend the value of showcasing your process, let's discover how to do it effectively. This involves several steps, which I've highlighted below:\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"ol\", {\n      children: [/*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Problem Definition:\"\n          }), \" Start by outlining the design problem you faced. What were the client's needs? What challenges did you anticipate?\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Research:\"\n          }), \" Detail the research you conducted. This could encompass user interviews, surveys, or competitor analysis. It's important to show that you base your design decisions on solid data.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Ideation:\"\n          }), \" Here, you should discuss the brainstorming sessions and the various ideas you considered. Feel free to include sketches, mind maps, or any other materials that illustrate your creative process.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Prototyping:\"\n          }), \" Showcase the prototypes you designed and the iterations they went through based on user testing feedback.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Final Design:\"\n          }), \" Lastly, present the final design solution and explain how it addresses the problem you initially stated.\"]\n        })\n      })]\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Tools for Documenting Your Process\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"There are numerous tools available to help you document your process effectively. You might consider using a\\xa0combination of text, images, GIFs, and even video clips to bring your process to life.\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"ul\", {\n      children: [/*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Text:\"\n          }), \" Use clear, concise language to explain your thought process. Don't be afraid to delve into your decision-making process and the reasons behind your design choices.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Images and GIFs:\"\n          }), \" Utilizing visuals can help illustrate your process more vividly. Whether it's screenshots of your work in progress, sketches, or wireframes\u2014images and GIFs can tell a story that words alone may not capture.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Videos:\"\n          }), \" A short video clip can serve as a dynamic way to demonstrate user testing or to walk viewers through a prototype.\"]\n        })\n      })]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Remember, the goal isn't just to showcase your final product, but to illustrate how you arrived there. The journey is often as important as the destination, and your portfolio should reflect that. So, take your audience on that journey, share your thought process, and show them the problem-solving skills that make you a\\xa0competent UI/UX designer.\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"Creating a Solid Foundation: Building a Strong Skill Set\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Creating a\\xa0solid foundation for your career as a\\xa0UI/UX designer means building a\\xa0strong skill set that goes beyond merely understanding the basics of design. There's a\\xa0vast array of skills you need to work on and this segment will guide you through what they are and how you can develop them.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Technical Skills\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"As a\\xa0UI/UX designer, your technical know-how is crucial. This includes familiarity with design software such as Adobe XD, Sketch, Figma, and others. Here's a\\xa0short list of some vital technical skills:\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"ul\", {\n      children: [/*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(Link, {\n            href: \"https://framer.com/projects/545022\",\n            openInNewTab: false,\n            smoothScroll: false,\n            children: /*#__PURE__*/_jsx(\"a\", {\n              children: /*#__PURE__*/_jsx(\"strong\", {\n                children: \"Wireframing and Prototyping\"\n              })\n            })\n          }), /*#__PURE__*/_jsx(\"strong\", {\n            children: \": \"\n          }), \"These are essential tools in a UI/UX designer's toolbox. They allow you to visualize and test your design concepts before full implementation.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Graphic Design: \"\n          }), \"Although UI/UX design is not purely graphic design, having a solid understanding of basic design principles such as color theory, typography, and layout is essential.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Interaction Design: \"\n          }), \"Understanding how a user interacts with your design is important. This can be anything from how a button behaves when clicked, to the flow of pages in a web application.\"]\n        })\n      })]\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Cognitive Skills\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"While mastering technical skills is important, don't forget about cognitive skills. These are equally vital in this field. Here are a\\xa0few to consider:\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"ul\", {\n      children: [/*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"User Empathy: \"\n          }), \"Being able to understand and empathize with the user's needs, hopes, and problems is crucial. This understanding will inform every design decision you make.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Problem-Solving: \"\n          }), \"UI/UX design is essentially about solving problems. Honing this skill will make you an invaluable asset to any team.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Critical Thinking: \"\n          }), \"Being able to analyze and evaluate your designs objectively is key. This will help you make the necessary adjustments for an optimal user experience.\"]\n        })\n      })]\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Communication Skills\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Lastly, the ability to effectively communicate your design ideas and decisions is a\\xa0must-have skill. Not only will this ensure you're on the same page with your team, but it will also help when presenting your designs to stakeholders.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Building a\\xa0strong skill set is a\\xa0continuous process. As you grow and evolve in your career, you should constantly be looking to learn new skills and improve on existing ones. Remember, your portfolio is a\\xa0reflection of your skills and abilities as a\\xa0UI/UX designer. The stronger your skill set, the more impressive your portfolio will be.\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"Crafting a Compelling About Me Section: Letting Your Personality Shine\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Building an impressive portfolio is not just about showcasing your work, but also about giving a\\xa0glimpse of who you are as a\\xa0designer -\\xa0and a\\xa0person. The 'About Me' section is your chance to shine and make a\\xa0memorable impression on potential employers or clients. It's more than just a\\xa0brief biography; it's your opportunity to share your passion for UI/UX design, your philosophy, your working style, and what sets you apart from others in the field.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Highlight Your Passion and Personality\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Your 'About Me' section should tell a\\xa0story about you. It should illustrate what drives you, what you love about UI/UX design, and what fuels your creativity. This is your chance to showcase your personality and make a\\xa0personal connection with your audience. Remember: clients and employers are not just buying services; they're buying into people. So, let them see the real, passionate designer behind the portfolio.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Communicate Your Design Philosophy\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Every designer has unique design principles and beliefs that guide their work. This is your design philosophy. Whether you're an advocate for minimalistic design, or if you believe in using bold, vibrant colors to command attention, share these insights. This helps your audience understand the reasoning behind your design choices and can create a\\xa0deeper connection between them and your work.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Present Your Approach to Work\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"How you tackle design challenges and collaborate with others is just as important as your final design output. Hence, include your approach to problem-solving, your preferred working style, and your attitude toward feedback and collaboration. This can reassure potential clients or employers about the working relationship they can expect when they engage with you.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Set Yourself Apart\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"What makes you different? Why should a\\xa0client or employer choose you over another designer? Think about the unique qualities or experiences you bring to the table and highlight them in your 'About Me' section. This could be anything from your past work experiences, your educational background, your ability to work across different mediums or platforms, or unique life experiences that have shaped your perspective as a\\xa0designer.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"In essence, your 'About Me' section should be a\\xa0blend of professionalism and personality. It should let your character shine through while maintaining a\\xa0focus on your skills and experiences as a\\xa0UI/UX designer. Remember, the goal is to create a\\xa0compelling narrative that not only showcases your design talents but also makes you relatable and memorable as a\\xa0person.\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"Choosing the Right Projects: Selecting the Ideal Pieces for your Portfolio\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"As you embark on the journey of building your portfolio, one of the most crucial steps is selecting the right projects to showcase. This step is often a\\xa0daunting task, as it involves a\\xa0careful evaluation of your work and a\\xa0strategic selection of projects that best demonstrate your design skills, style, and problem-solving abilities. But fear not, as we're here to guide you through this process.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Firstly, it's essential to note that quality trumps quantity. Rather than trying to include every project you've ever worked on, focus on selecting a handful of your best works. These should be projects that you're proud of and that demonstrate a diverse range of skills and experiences. Whether it's a mobile app you designed from scratch, a website you revamped, or a challenging design problem you solved, each project should tell a unique story about your abilities as a UI/UX designer.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Consider the Variety of Your Projects\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"When selecting projects, make sure they reflect a\\xa0variety of design experiences. For example, include projects that demonstrate your ability to generate user personas, create wireframes, design interfaces, and test usability. It's also beneficial to showcase projects from different industries, as it shows your versatility and adaptability to different types of design challenges.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Include Collaborative Projects\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Collaboration is a\\xa0vital part of UI/UX design. Therefore, it's a\\xa0good idea to include projects that show your ability to work as part of a\\xa0team. Highlight your role in the project and how you contributed to the final outcome. Demonstrating your teamwork skills can make you more appealing to potential employers who value collaboration.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Detail Your Design Process\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Remember, your portfolio isn't just about showcasing your final designs\u2014it's about showing your thought process and how you approach design problems. For each project, consider detailing your design process, from the initial idea and research phase, through to the sketching and prototyping stages, and finally, the testing and iteration phase. This gives potential employers an insight into how you work and your problem-solving skills.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Choosing the right projects for your portfolio is a thoughtful process. It requires you to critically assess your work, select projects that demonstrate a range of skills and experiences, and articulate your design process. With these steps in mind, you're well on your way to building a portfolio that stands out and gets you noticed in the competitive world of UI/UX design.\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"Polishing Your Presentation: Designing and Tips for a Professional and Eye-Catching Portfolio\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Once you've gathered all your content, it's time to polish your presentation. The way you present your work can make a\\xa0huge difference in how others perceive your skills and professionalism. An eye-catching, well-designed portfolio can set you apart from the competition and showcase your attention to detail.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Layout and Design\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Your portfolio should not only showcase your work but should also be an example of your design skills. Think of it as an extension of your CV or resume\u2014another piece of work that shows off your abilities. Use a\\xa0clean, clear, and visually appealing layout to present your work. Make sure that your design aesthetic shines through, but don't let it overshadow the work you're showcasing. Remember, subtlety is key.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"User Experience\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Consider the user experience of your portfolio. Remember, you're a\\xa0UI/UX designer, so your portfolio should reflect that. Make sure it's easy to navigate, with clear headings, intuitive menus, and a\\xa0logical flow. Use your UX skills to craft an engaging and enjoyable experience that will keep visitors on your site and interested in your work.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Attention to Detail\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Don't forget the little things. Attention to detail is extremely important in UI/UX design, and your portfolio is no exception. Make sure all links work, images load correctly, and there are no typos or grammatical errors. Also, don't forget to optimize your portfolio for mobile. Many recruiters and hiring managers will view your portfolio on their phones or tablets, so make sure it looks and works just as well on small screens.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Feedback and Iteration\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"After you've polished your portfolio, get feedback from others. Ask fellow designers, mentors, or even friends and family to review your portfolio and provide constructive criticism. Use their feedback to improve and iterate on your design. Remember, like any other design project, your portfolio is a\\xa0work in progress. It's okay to make changes and improvements over time.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Building a\\xa0professional and eye-catching portfolio is a\\xa0continuous process. It might take some time to get it exactly right, but it's worth it. Your portfolio is your passport to new opportunities and challenges in the UI/UX design world. So, take your time, polish your presentation, and showcase your work in the best possible light.\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"Tools You Need: Tools and software are commonly used by UI/UX designers to create portfolio projects\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"The Essential Tools for UI/UX Designers\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Being a UI/UX designer requires a blend of creativity and technical proficiency. Certain tools and software are quintessential in designing, prototyping, and testing your ideas, thereby enriching your portfolio. Let's dive into some of the industry-standard tools that you should familiarize yourself with.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Design and Prototyping Tools\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"As a\\xa0budding UI/UX designer, the mastery of design and prototyping tools is a\\xa0critical aspect of building your portfolio. Whether you're sketching out wireframes, creating high-fidelity prototypes, or crafting beautiful user interfaces, the right tools can turn your vision into a\\xa0reality and showcase your skills in the best light.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: /*#__PURE__*/_jsx(Link, {\n        href: \"https://designlab.com/blog/figma-vs-adobe-xd\",\n        openInNewTab: false,\n        smoothScroll: false,\n        children: /*#__PURE__*/_jsx(\"a\", {\n          children: \"Over 50% of UI/UX designers use prototyping tools like Sketch, Figma, or Adobe XD to create their portfolio projects\"\n        })\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"The high usage percentage signifies the importance of these tools in the industry. Here are some of the most popular ones:\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"ul\", {\n      children: [/*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Sketch:\"\n          }), \" This vector-based design tool is very popular among UX designers for its simplicity and efficiency.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Adobe XD:\"\n          }), \" A powerful tool that allows you to design, prototype, and collaborate with teams.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Figma:\"\n          }), \" It is a cloud-based tool that facilitates real-time collaboration among design teams.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"InVision:\"\n          }), \" This tool is used for creating interactive and animated prototypes.\"]\n        })\n      })]\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Graphic Design Tools\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"While UI/UX design goes beyond creating visually appealing interfaces, having a\\xa0good grasp of graphic design principles and tools can add value to your portfolio. Here are a\\xa0few tools that can assist you:\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"ul\", {\n      children: [/*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Adobe Illustrator:\"\n          }), \" This vector graphics software is perfect for creating logos, icons, typography, and complex illustrations for print, web, interactive, video, and mobile.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Adobe Photoshop:\"\n          }), \" Photoshop is a must-have tool for manipulating photos and creating raster images. It's also useful for designing web pages and mobile apps.\"]\n        })\n      })]\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"User Testing and Feedback Tools\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"To validate your designs and improve usability, user testing tools are a\\xa0must. They help you understand your users, gather feedback, and make data-driven design decisions.\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"ul\", {\n      children: [/*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"UsabilityHub:\"\n          }), \" This platform lets you conduct quick and simple user tests on design concepts. You can gather feedback from real users to make informed design decisions.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"UserTesting:\"\n          }), \" This is an on-demand human insights platform that helps you understand user behaviors, needs, and motivations through observing real-time interactions and receiving direct feedback.\"]\n        })\n      })]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Remember, tools are just instruments to aid your design process. They do not replace the necessity for creativity, problem-solving skills, and an understanding of good design principles. Keep exploring, and mastering these tools, and remember to include them in your portfolio to showcase your proficiency and versatility as a\\xa0UI/UX designer.\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"Conclusion: Taking the Next Steps toward a Successful UI/UX Design Career\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"There you have it, the building blocks to create a robust, compelling, and professional portfolio that truly captures your talent as a budding UI/UX designer. Remember, your portfolio is not just a collection of your works but a testament to your skills, thought process, and unique style. It speaks volumes about who you are as a professional and what you bring to the table. Don't be afraid to let your personality shine through and show potential employers or clients exactly why you're the right person for the job.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"As you embark on this journey, always bear in mind that the world of UI/UX design is constantly evolving. It's crucial to stay updated with the latest trends and tools, continue learning, and adapt your skillset to meet the industry's ever-changing demands. Remember to refresh your portfolio with your latest and greatest projects. Remember, it's a dynamic showcase of your growth and evolution as a designer.\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"Seek feedback\"\n      }), \" on your portfolio from peers, mentors, and online communities. Their insights can help you refine your presentation and make your portfolio even more compelling. Participate in UI/UX challenges and hackathons -\\xa0these provide excellent opportunities to hone your skills, learn from others, and add interesting projects to your portfolio.\\xa0\"]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Don't rush the process. Building a strong portfolio takes time, effort, and a whole lot of creativity. Be patient, stay dedicated, and above all, enjoy the journey. In the world of UI/UX, the process is just as important as the final product.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"In conclusion, building your UI/UX design portfolio is a significant step towards a successful career in the industry.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"It's your calling card, visual resume, and a chance to make a lasting impression.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Make it count.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Remember, a thousand-mile journey begins with a single step, and you've just taken the first one. Here's to a successful and fulfilling career in UI/UX design!\"\n    })]\n  }),\n  RmZI22YIP: \"15 minutes\",\n  rUQIyYADy: \"https://unsplash.com/@benkolde\",\n  Sh4r9OkMI: addImageAlt({\n    src: new URL(\"https://framerusercontent.com/images/tWtU0ZIG5P4MdOGXj8ki9nPBYM.jpg?scale-down-to=4096\").href,\n    srcSet: `${new URL(\"https://framerusercontent.com/images/tWtU0ZIG5P4MdOGXj8ki9nPBYM.jpg?scale-down-to=512\").href} 401w, ${new URL(\"https://framerusercontent.com/images/tWtU0ZIG5P4MdOGXj8ki9nPBYM.jpg?scale-down-to=1024\").href} 802w, ${new URL(\"https://framerusercontent.com/images/tWtU0ZIG5P4MdOGXj8ki9nPBYM.jpg?scale-down-to=2048\").href} 1605w, ${new URL(\"https://framerusercontent.com/images/tWtU0ZIG5P4MdOGXj8ki9nPBYM.jpg?scale-down-to=4096\").href} 3211w, ${new URL(\"https://framerusercontent.com/images/tWtU0ZIG5P4MdOGXj8ki9nPBYM.jpg\").href} 3456w`\n  }, \"\"),\n  udYJM_z4a: \"Unlock the secrets to a standout UI/UX portfolio with our friendly guide, setting the stage for a thriving design career and making a lasting impression in the industry.\",\n  veRNv0aTZ: \"Ben Kolde\",\n  w1e0DEkho: \"Small.dev\",\n  yGIW9yAaD: false\n}, {\n  cyK5El4GA: \"Discover key skills that are essential to becoming a successful UX designer in today's rapidly evolving digital landscape.\",\n  GhLX8yBxU: \"2023-09-13T00:00:00.000Z\",\n  H99ImQ0k1: \"10 Essential Skills Every UX Designer Should Master\",\n  id: \"rh52R8kVQ\",\n  iRupPxypK: \"John Iseghohi\",\n  IxZKmK_ti: addImageAlt(undefined, \"\"),\n  NiC7e4LKq: \"10-essential-skills-every-ux-designer-should-master\",\n  njCINTTep: \"https://small.dev\",\n  nRliio48H: \"Learn\",\n  pOVMMf8bX: /*#__PURE__*/_jsxs(React.Fragment, {\n    children: [/*#__PURE__*/_jsx(\"p\", {\n      children: \"In the rapidly evolving world of digital design, the role of a UX designer has never been more vital. As businesses across the globe recognize the importance of user experience in driving conversions and customer satisfaction, UX designers are in high demand. Yet, to truly excel in this field and access the best job opportunities, there are several essential skills one must master.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"If you're looking to advance your career or wondering which abilities are crucial for intermediate and expert levels, read on.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Here's our comprehensive list of the top ten skills every UX designer should cultivate.\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"1. User-Centered Design\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"The first essential skill that you, as an aspiring UX designer, must master is \", /*#__PURE__*/_jsx(\"strong\", {\n        children: \"User-Centered Design (UCD)\"\n      }), \".\"]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"This skill is like the compass of a lost voyager, guiding you to create designs that resonate with your users. It's not merely about applying colors and shapes or making things look pretty. It's about empathy, understanding, and a deep-rooted commitment to your users.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Imagine you are a\\xa0chef, preparing a\\xa0feast for a\\xa0group of discerning food critics. You wouldn't just whip up any dish that strikes your fancy, would you? Instead, you'd painstakingly research their palate, their likes and dislikes, and the culinary experiences they cherish.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"UCD is similar. It implores you to step into your users' shoes, explore their world, understand their needs and wants, and create a digital solution that satisfies their appetites.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Mastering User-Centered Design\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"So, how do you master this essential skill? The process can be broken down into four key stages:\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"ol\", {\n      children: [/*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Understanding:\"\n          }), \" This is where you conduct user research, develop personas, and define user stories. It's all about understanding your users and their needs.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Designing:\"\n          }), \" Next, you translate your understanding into design. You sketch ideas, create wireframes, and prototype solutions.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Evaluating:\"\n          }), \" This is where user testing comes into play. You expose your designs to users and gather feedback, using this to refine and improve your designs.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Implementing:\"\n          }), \" Finally, you oversee the implementation of your design, ensuring it meets user needs and aligns with business goals.\"]\n        })\n      })]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"As you journey through these stages, remember that UCD is not a linear process. It's more akin to a dance, where you swing from understanding to designing, from evaluating to implementing, and then back again. It's a rhythm you'll need to learn, a melody you'll need to internalize.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Mastering UCD is like learning to create a\\xa0symphony, where each note is a\\xa0user need, and each instrument is a\\xa0design element. And when you conduct this symphony with finesse, you create an experience that resonates with your users and leaves them yearning for an encore.\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"Key Takeaway:\"\n      }), \" Place your users at the heart of your design process. Dive into \", /*#__PURE__*/_jsx(Link, {\n        href: \"https://www.nngroup.com/topic/user-centered-design/\",\n        openInNewTab: true,\n        smoothScroll: false,\n        children: /*#__PURE__*/_jsx(\"a\", {\n          children: \"Nielsen Norman Group\u2019s overview\"\n        })\n      }), \" for a deeper understanding of UCD.\"]\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"2. Interactive Design\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Interactive design is akin to being a choreographer.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Just as the choreographer precisely charts every movement and step, a UX designer orchestrates the user\u2019s journey through the interface.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"The dance of a user interacting with your design should be as fluid as a waltz, not akin to wrestling with a bear.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"From the first interaction to the last, every click, swipe, and scroll should feel intuitive and responsive. You should predict the user's needs and design interfaces that are easy to navigate.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"This is where the knowledge of human-computer interaction principles comes in handy.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"You're not just creating pretty pictures; you're engineering experiences.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Consider a\\xa0navigation menu.\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"em\", {\n        children: \"The simpler, the better\"\n      }), \", right?\"]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Well, not always.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"It's a matter of balance. Too few options can lead to confusion; too many can be overwhelming. Your task is to hit the sweet spot between simplicity and complexity.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Mastering interactive design is all about understanding your users - their habits, preferences, and behaviors.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"The goal is to minimize friction and create a seamless experience for the user. It\u2019s the subtle touches, the transitions, and the animations that often make the difference between a forgettable experience and one that waltzes users effortlessly to their destination.\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"Recommended Reading:\"\n      }), \" Explore Smashing Magazine\u2019s article on \", /*#__PURE__*/_jsx(Link, {\n        href: \"https://www.smashingmagazine.com/category/interaction-design/\",\n        openInNewTab: true,\n        smoothScroll: false,\n        children: /*#__PURE__*/_jsx(\"a\", {\n          children: \"interactive design principles\"\n        })\n      }), \".\"]\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"3. Wireframing & Prototyping\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Delving into the intricate art of wireframing and prototyping can substantially differentiate a competent UX designer from a truly exceptional one. At their core, wireframes and prototypes serve as the blueprint for the digital experience, shaping how users navigate and interact with a website or application.\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"Understanding Wireframing:\"\n      }), \" Wireframes are the skeletal outlines of a product, showcasing layout and placement of elements without detailed design or final images.\"]\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"Think of wireframes as the bare bones \u2013 a place where you and your team can experiment with the placement of elements, the general flow, and the overall logic of the user journey. \", /*#__PURE__*/_jsx(Link, {\n        href: \"https://www.uxpin.com/studio/ebooks/guide-to-prototyping/#:~:text=There%20is%20no%20single%20%E2%80%9Cbest,to%20know%20your%20target%20audience.\",\n        openInNewTab: false,\n        smoothScroll: false,\n        children: /*#__PURE__*/_jsx(\"a\", {\n          children: \"UXPin\u2019s comprehensive guide\"\n        })\n      }), \"\\xa0offers deep insights into the nuances of wireframing.\"]\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"The Power of Prototyping:\"\n      }), \" Prototypes bring wireframes to life.\"]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"They provide a tangible or visual representation of the user's journey through a product, allowing for interactive testing and validation of the design concept.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Whether it's a low-fidelity prototype, mainly for understanding flow, or a high-fidelity prototype that's nearly identical to the final product, prototyping is a key phase in the UX design process.\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"Tools like\\xa0\", /*#__PURE__*/_jsx(Link, {\n        href: \"https://www.invisionapp.com/\",\n        openInNewTab: false,\n        smoothScroll: false,\n        children: /*#__PURE__*/_jsx(\"a\", {\n          children: \"InVision\"\n        })\n      }), \" and \", /*#__PURE__*/_jsx(Link, {\n        href: \"https://www.protopie.io/\",\n        openInNewTab: true,\n        smoothScroll: false,\n        children: /*#__PURE__*/_jsx(\"a\", {\n          children: \"Protopie\"\n        })\n      }), \" are renowned for their prototyping capabilities.\\xa0\"]\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"Benefits and Significance:\"\n      }), \" Wireframing and prototyping are not just steps in the design process; they're powerful communication tools. They help align team members, stakeholders, and even users, ensuring everyone understands and agrees on the proposed design direction. It reduces the risk of costly changes at later stages and ensures a user-centric design approach.\\xa0\"]\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"Continuous Refinement:\"\n      }), \" One of the most valuable aspects of this skill set is its iterative nature.\"]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"You can sketch, test, refine, and repeat. Every iteration, informed by feedback, ensures a design that resonates with the users and meets their needs.\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"For those eager to refine their prototyping prowess, \", /*#__PURE__*/_jsx(Link, {\n        href: \"https://prototypr.io/\",\n        openInNewTab: true,\n        smoothScroll: false,\n        children: /*#__PURE__*/_jsx(\"a\", {\n          children: \"Prototypr.io\"\n        })\n      }), \"\\xa0offers an array of tutorials and insights.\"]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"By deeply understanding and skillfully implementing wireframing and prototyping, a UX designer not only visualizes the user's path but also constructs a solid foundation upon which the final product is built. It\u2019s the stage where creativity meets logic, ensuring every design decision is deliberate, meaningful, and user-focused.\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"4. Visual Design\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Picture this: You're on a road trip, and you've just spotted a quaint little diner on the side of the road.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"You can see through the window that it's full of charm - from the retro checkered floor to the shiny chrome bar stools. Intrigued by the aesthetics, you decide to step in for a meal.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"This, dear reader, is the power of visual design. It invites, entices, and spells the difference between a glance and a lingering look.\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"Visual design is the \", /*#__PURE__*/_jsx(\"strong\", {\n        children: \"diner\"\n      }), \" on this road trip we call the user journey.\"]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"It's the alluring exterior that encourages users to step in and see what your product has to offer. The design's aesthetic appeal can create a lasting first impression, compelling users to stick around, explore, and eventually become loyal patrons.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"As a UX designer, it's crucial to remember that your product isn't just a utility but also an experience. An experience that should be as pleasing to the eye as it is to use.\"\n    }), /*#__PURE__*/_jsxs(\"ul\", {\n      children: [/*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"em\", {\n            children: \"Typography\"\n          }), \": Master the art of text arrangement. Your choice of font, size, and spacing can drastically affect readability and user engagement.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"em\", {\n            children: \"Color Theory\"\n          }), \": Colors evoke emotions. Use them wisely to guide users and communicate your brand's personality.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"em\", {\n            children: \"Imagery\"\n          }), \": Images can speak volumes. They can simplify complex concepts, evoke emotions, and enhance user engagement. And remember, quality matters as much as content.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"em\", {\n            children: \"Consistency\"\n          }), \": A consistent visual design leads to a coherent user experience. It helps build familiarity and trust with your users.\"]\n        })\n      })]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: /*#__PURE__*/_jsx(Link, {\n        href: \"https://www.interaction-design.org/literature/topics/visual-design\",\n        openInNewTab: false,\n        smoothScroll: false,\n        children: /*#__PURE__*/_jsx(\"a\", {\n          children: \"Visual design is responsible for creating aesthetically pleasing and visually consistent interfaces.\"\n        })\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Visual design, in essence, is like a silent guide, subtle yet impactful. It navigates the user through the product, highlighting important features, capturing attention, and creating a memorable user journey. So, go on, take that extra step to make your product not just usable, but also visually delightful.\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"5. User Testing & Feedback\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"If \", /*#__PURE__*/_jsx(Link, {\n        href: \"https://wireframes.com/blog/tips-for-efficient-collaboration-in-ux-ui-design\",\n        openInNewTab: false,\n        smoothScroll: false,\n        children: /*#__PURE__*/_jsx(\"a\", {\n          children: \"User Experience\"\n        })\n      }), \" Design were a\\xa0theatrical performance, think of user testing and feedback as the crucial dress rehearsals before the curtain call.\"]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"The audience - in this case, your users - are the critics whose feedback you seek. It's not just about understanding how they interact with your design, but also why they react the way they do.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"By conducting user testing, you're venturing into their minds, perceiving the world from their perspective.\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"And how do you morph this perception into actionable insights? Through feedback. This is your golden ticket, the raw, unfiltered truth that shapes your design, making it more relatable, more intuitive, and more user-centric. Remember, \", /*#__PURE__*/_jsx(\"strong\", {\n        children: \"feedback is not an attack but an opportunity.\"\n      }), \" It's a\\xa0chance to refine, iterate, and polish your design until it shines with a\\xa0user-friendly glow.\\xa0\"]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Mastering the art of user testing and feedback is like learning a\\xa0new language. It\u2019s not just about asking the right questions\u2014it\u2019s about listening, understanding, and responding in a\\xa0way that fosters improvement.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"6. Information Architecture\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Imagine entering a\\xa0colossal library with no organization, no signs, books scattered everywhere\u2014sounds daunting, right? This chaos is precisely what a\\xa0website or app feels like without a\\xa0robust information architecture. As a\\xa0UX designer, you are the architect, and your blueprint is information architecture.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Information architecture is the backbone of any digital product. It relies on organizing and labeling information in a\\xa0clear, intuitive way and designing effective navigational systems so users can easily find what they're looking for. It's about making the complex simple, transforming that chaotic library into an orderly, welcoming space.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Mastering Information Architecture\\xa0\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"But how do you master the art of information architecture?\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Like a maestro conducting a symphony, you weave together disparate elements\u2014content, context, and users\u2014to create a harmonious user experience.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"You balance aesthetics with functionality, ensuring each element serves a purpose and enhances the user journey.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"This is not a task for the faint of heart, but it's a skill that can set you apart as a UX designer.\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"7. Accessibility & Inclusive Design\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"As a\\xa0UX designer, your canvas isn't confined to the able-bodied nor those who can effortlessly interact with your design. Inclusivity is the palette you must master. \", /*#__PURE__*/_jsx(\"em\", {\n        children: \"Accessibility and inclusive design\"\n      }), \" are about breaking barriers, removing obstacles, and paving pathways for everyone to access and enjoy your creation.\\xa0\"]\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"Remember this:\"\n      }), \" your design is a\\xa0bustling city, and you're the architect. Imagine erecting skyscrapers with no elevators or designing roads with no sidewalks. It's unthinkable, right? The same principle applies to UX design. Designing inaccessible products is akin to constructing a\\xa0city that alienates its inhabitants.\\xa0\"]\n    }), /*#__PURE__*/_jsxs(\"ol\", {\n      children: [/*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Understand Disabilities: \"\n          }), \"Disabilities can be physical, cognitive, or sensory. As a UX designer, recognizing these nuances can help you create an inclusive design. It's like understanding different languages to create a universal translator.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Follow Guidelines: \"\n          }), \"Resources like the Web Content Accessibility Guidelines (WCAG) provide a roadmap for creating accessible designs. They are the traffic rules that ensure the bustling city you're building doesn\u2019t descend into chaos.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Design for All: \"\n          }), \"Designing for one doesn't mean excluding others. It's an art of balance and harmony, much like a symphony where every note contributes to the melody without overpowering it.\"]\n        })\n      })]\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"em\", {\n        children: \"Accessible and inclusive design\"\n      }), \" is not just a\\xa0'nice-to-have'; it's a\\xa0'must-have'. It\u2019s the cornerstone that ensures your design isn't just a\\xa0beautiful sculpture in an art museum but a\\xa0functional tool that enhances the quality of life for all its users.\\xa0\"]\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"Read More:\"\n      }), \" \", /*#__PURE__*/_jsx(Link, {\n        href: \"https://www.w3.org/WAI/\",\n        openInNewTab: true,\n        smoothScroll: false,\n        children: /*#__PURE__*/_jsx(\"a\", {\n          children: \"Web Accessibility Initiative\"\n        })\n      }), \" offers guidelines.\"]\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"8. Collaboration & Communication\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"Now, you've designed your city, following all the rules and catering to everyone's needs. But it's not just about blueprinting and building. It's also about communicating your vision and collaborating with others to bring it to life. That's where your \", /*#__PURE__*/_jsx(\"em\", {\n        children: \"collaboration and communication skills\"\n      }), \" come into play.\\xa0\"]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Just as a\\xa0movie director coordinates with actors, cinematographers, and music directors to create a\\xa0cinematic masterpiece, a\\xa0UX designer collaborates with developers, product managers, and stakeholders to create a\\xa0user experience that captivates and retains users.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"The power of collaboration is that it aids in bringing diverse perspectives to the table, resulting in a refined, well-rounded product.\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"Equally important is your ability to \", /*#__PURE__*/_jsx(\"em\", {\n        children: \"communicate your design decisions\"\n      }), \" effectively. Much like a\\xa0composer explaining the intricate details of their symphony to the orchestra, you must articulate the 'why' behind your design decisions to your team. It's a\\xa0compelling narrative that weaves the journey from 'idea' to 'implementation'.\\xa0\"]\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"When you master collaboration and communication, you create harmony in your team, just like an orchestra playing in perfect symphony under the conductor\u2019s baton.\", /*#__PURE__*/_jsx(\"br\", {}), /*#__PURE__*/_jsx(\"br\", {}), /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Skill Boost:\\xa0\"\n      }), /*#__PURE__*/_jsx(Link, {\n        href: \"https://creately.com/blog/brainstorming/your-guide-to-collaborative-design/\",\n        openInNewTab: true,\n        smoothScroll: false,\n        children: /*#__PURE__*/_jsx(\"a\", {\n          children: \"Collaborative Design Techniques \"\n        })\n      }), \"can optimize team dynamics.\"]\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"9. Continuous Learning & Adaptability\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"In the lightning-paced realm of technology, stagnation is the antithesis of growth.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"UX design, situated at the nexus of tech, art, and human behavior, is particularly susceptible to rapid evolutions.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Whether it's a new design tool, a shifting trend in user behavior, or the emergence of an entirely new platform, the UX landscape is in perpetual motion.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"What sets the leading UX designers apart isn't just their prowess in current tools or methods; it's their unwavering commitment to staying ahead of the curve.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"They recognize that mastery isn't a final destination\u2014it's an ongoing journey.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Every project, user feedback, and design iteration provides an invaluable learning opportunity, and the most successful designers are those who consistently seize these moments to refine their craft.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Moreover, adaptability is about more than just acquiring new knowledge. It's about cultivating a resilient mindset in the face of change, one that views new challenges as opportunities rather than obstacles. An adaptable designer is agile, pivoting seamlessly between projects and approaches, unafraid to discard outdated paradigms in favor of innovative solutions.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"In practical terms, continuous learning might mean dedicating a few hours each week to exploring new design blogs, attending webinars, or experimenting with a newly released tool.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"It's the habit of regularly seeking feedback, not just from peers, but from the users themselves\u2014after all, they're the ultimate judges of effective UX.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"In a world where the only constant is change, adaptability, coupled with an unquenchable thirst for knowledge, becomes the linchpin of a flourishing UX career.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Embrace the fluidity of the tech world, and let it propel you to new heights of design excellence.\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"10. Business & Strategy Acumen\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"In the intertwined world of UX design, one cannot afford to view design in isolation. It's not merely about aesthetics or even functionality; at its core, design serves as a conduit between a company's mission and its audience. That's where a keen sense of business and strategy acumen comes into play for UX designers.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"To create designs that resonate and provide value, designers must first grasp the bigger picture: the business goals, market positioning, target audience, and the overarching strategy steering a company's journey. By gaining insights into these dimensions, a designer can craft experiences that not only delight users but also drive business metrics, from user engagement to conversions and brand loyalty.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Let's break this down further:\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"Goal Alignment: \"\n      }), \"A design, no matter how innovative, loses its essence if it doesn't align with the company's objectives. Whether the goal is to increase sales, boost user engagement, or build brand awareness, every design decision should work in tandem with these targets.\"]\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"Target Audience Understanding: \"\n      }), \"Every business caters to a specific demographic. By comprehending the nuances of this target audience - their preferences, pain points, and aspirations - designers can create tailored experiences that resonate on a personal level.\"]\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"Market Dynamics:\"\n      }), \" In today's competitive digital landscape, understanding market dynamics, competitors' strategies, and emerging trends is crucial. This knowledge enables designers to position their designs strategically, ensuring they stand out and remain relevant.\"]\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"ROI-Focused Design:\"\n      }), \" At the end of the day, businesses operate with profitability in mind. Designers with business acumen can strike a balance between user-centric design and designs that drive tangible returns on investment.\"]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"By immersing oneself in the business aspect, a UX designer transcends the traditional boundaries of their role. They evolve into strategic partners, helping businesses navigate the complex maze of today's digital world. In doing so, they don't just enhance user satisfaction but also cement their position as invaluable assets in the corporate ecosystem.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: /*#__PURE__*/_jsx(\"br\", {\n        className: \"trailing-break\"\n      })\n    }), /*#__PURE__*/_jsx(\"h1\", {\n      children: \"Conclusion\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Mastering these ten skills can pave the way for numerous job opportunities and career advancement in the UX domain.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"As you refine these capabilities, remember that the essence of UX design lies in empathy and understanding.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Whether you're just beginning or are at an intermediate level, investing in these essential skills will set you on a trajectory for success.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Remember, every great UX designer always learns, adapts, and grows.\"\n    })]\n  }),\n  RmZI22YIP: \"12 minutes\",\n  rUQIyYADy: \"\",\n  Sh4r9OkMI: addImageAlt({\n    src: new URL(\"https://framerusercontent.com/images/BTi4jvx4aGXbRX70aE22du4whtE.png\").href,\n    srcSet: `${new URL(\"https://framerusercontent.com/images/BTi4jvx4aGXbRX70aE22du4whtE.png?scale-down-to=512\").href} 512w, ${new URL(\"https://framerusercontent.com/images/BTi4jvx4aGXbRX70aE22du4whtE.png\").href} 1024w`\n  }, \"\"),\n  udYJM_z4a: \"Learn the top ten must-have skills for UX designers, including user-centered design, interactive design, wireframing, prototyping, visual design, and more, to create engaging and user-friendly designs.\",\n  veRNv0aTZ: \"\",\n  w1e0DEkho: \"Small.dev\",\n  yGIW9yAaD: false\n}, {\n  cyK5El4GA: \"Embarking on your UX/UI design journey? Let's unravel the secret to effective team collaboration and discover how Figma can be your go-to tool for seamless teamwork.\",\n  GhLX8yBxU: \"2023-07-22T00:00:00.000Z\",\n  H99ImQ0k1: \"Tips for Efficient Collaboration in UX/UI Design\",\n  id: \"ItGbYkwyG\",\n  iRupPxypK: \"John Iseghohi\",\n  IxZKmK_ti: addImageAlt(undefined, \"\"),\n  NiC7e4LKq: \"tips-for-efficient-collaboration-in-ux-ui-design\",\n  njCINTTep: \"https://visual.so\",\n  nRliio48H: \"\",\n  pOVMMf8bX: /*#__PURE__*/_jsxs(React.Fragment, {\n    children: [/*#__PURE__*/_jsx(\"p\", {\n      children: \"Collaboration is the cornerstone of any successful design process, especially in the field of User Experience (UX) and User Interface (UI) design.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"As a beginner, you may find the journey of coordinating with diverse teams a little daunting.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Here, we'll break down some actionable tips for improving collaboration in design, and how Figma can be your ally in this journey.\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"1. Clearly Define Roles and Responsibilities\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"When everyone in the team knows their role and what's expected of them, it leads to more efficient workflows. In a UX/UI project, you may work with project managers, content strategists, designers, and developers. Clear delineation of responsibilities minimizes confusion and helps everyone stay on track.\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"For instance, the \", /*#__PURE__*/_jsx(\"strong\", {\n        children: \"project manager\"\n      }), \" might oversee the entire project, ensuring that everyone is on track and that deadlines are met. The \", /*#__PURE__*/_jsx(\"strong\", {\n        children: \"content strategist\"\n      }), \" could be responsible for researching and understanding user needs, crafting user personas, and developing a\\xa0content strategy. The \", /*#__PURE__*/_jsx(\"strong\", {\n        children: \"designer\"\n      }), \" would then take those user needs and personas, and transform them into a\\xa0user-friendly and visually appealing interface design. And finally, the \", /*#__PURE__*/_jsx(\"strong\", {\n        children: \"developer\"\n      }), \" would bring the design to life, ensuring it functions as intended.\"]\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"2. Emphasize on Communication\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Effective communication is crucial in ensuring all team members are aligned on project goals. Regular meetings, status updates, and constructive feedback are essential. Figma features an integrated comments section where team members can leave feedback directly on the design, making communication seamless and contextual.\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Regular Meetings\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Meetings are a\\xa0crucial part of the UX/UI design process. They provide a\\xa0platform for your team to discuss ideas, plan strategies, and address issues. However, they need to be efficient and goal-oriented. Meetings that drag on without clear outcomes can be counterproductive. Ensure each meeting has an agenda, stick to it, and encourage everyone to participate.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Status Updates\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"One of the key aspects of efficient collaboration is to keep the entire team updated on the progress of the project. Everyone should know what has been accomplished, what is currently being worked on, and what needs to be done next. This promotes transparency and ensures that everyone is working towards the same goal.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Constructive Feedback\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Feedback is a\\xa0two-way street. It's not just about pointing out what's wrong, but also about acknowledging what's right. Ensure that your team is open to feedback and views it as a\\xa0tool for improvement rather than criticism. Remember, the goal is to improve the design, not to judge individuals.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Utilizing Figma for Seamless Communication\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Figma, a\\xa0collaborative design tool, brings all these elements together and makes communication effortless. With its integrated comments section, team members can leave feedback directly on the design. This feature ensures that feedback is contextual and relevant, making the process of incorporating changes much smoother.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: '\"Figma offers a collaborative environment that simplifies communication and promotes effective teamwork in UX/UI design.\"'\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"So, start embracing these practices and use tools like Figma to facilitate efficient collaboration. Remember, a well-coordinated team is the secret to delivering top-notch UX/UI designs.\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"3. Use Collaboration Tools\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Leverage tools designed to facilitate collaboration.\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Maximize Your Use of Tools\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"In the realm of UX/UI design, efficient collaboration is key and the right tools can make all the difference. \", /*#__PURE__*/_jsx(\"strong\", {\n        children: \"Figma\"\n      }), \" is one such tool that is designed to facilitate seamless teamwork. It\u2019s a\\xa0shared workspace where all team members can work together in real-time, making collaborative design a\\xa0breeze.\\xa0\"]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"With Figma, changes made by one designer are instantly visible to others. This immediate visibility allows for instant feedback and iterative design, which is a\\xa0crucial part of creating an effective UX/UI design. It also saves plenty of time that would otherwise be spent on lengthy email threads or unnecessary meetings.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Embrace Real-time Collaboration\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"As a\\xa0UX/UI designer, you know that feedback is the cornerstone of design improvement. However, waiting for email responses or scheduling meetings for feedback can be a\\xa0drag on your design process. This is where real-time collaboration comes into play.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"In Figma, everyone can see the changes as they happen. You don't have to wait for progress updates or approvals. You can get instant feedback right on your design. You can also make adjustments as you go, based on that feedback. This real-time collaboration fosters a\\xa0more dynamic and responsive design environment.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Iterate, Iterate, Iterate\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"The beauty of UX/UI design is in its iterative nature. \", /*#__PURE__*/_jsx(\"em\", {\n        children: \"Design is never final; it continually evolves based on user feedback and changing user needs.\"\n      }), \" Figma supports this iterative process beautifully by allowing team members to see and respond to changes in real-time.\\xa0\"]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"The ability to see immediate changes allows for a\\xa0faster, more fluid design process. It encourages designers to experiment, iterate and refine their designs until they achieve the best user experience. So, embrace the iterative process, and let your designs evolve.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"As you embark on your UX/UI design journey, keep these tips in mind. They can help you foster a more efficient and effective collaboration with your team. And remember, it\u2019s not just about the tools you use, but how you use them.\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"4. Foster a Culture of Respect\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"The Importance of a\\xa0Supportive and Inclusive Environment for Collaboration\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"Creating an environment where all ideas are welcome and every voice is heard is integral to promoting efficient collaboration in UX/UI design. This setting not only \", /*#__PURE__*/_jsx(\"strong\", {\n        children: \"fosters creativity\"\n      }), \" but also helps in \", /*#__PURE__*/_jsx(\"em\", {\n        children: \"uncovering innovative solutions\"\n      }), \" that might otherwise be overlooked. When team members feel their input is valued, it cultivates a\\xa0sense of belonging and motivates them to contribute more actively.\\xa0\"]\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Tips for Encouraging Junior Designers to Share Their Ideas\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"ol\", {\n      children: [/*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Empower them:\"\n          }), \" Assure your junior designers that their ideas are valued. Encourage them to take the initiative and put forward their thoughts.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Provide Constructive Feedback:\"\n          }), \" Instead of dismissing an idea outright, provide constructive feedback. This can help them refine their ideas and improve their design skills.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Mentorship:\"\n          }), \" Establish a mentorship program where senior designers can guide junior designers, fostering a learning environment and giving them the confidence to share their ideas.\"]\n        })\n      })]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Remember, a diverse team brings diverse ideas. By encouraging everyone, from junior to senior designers, to contribute, you can create a more dynamic and inclusive design process.\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"5. Consistency is Key\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Design consistency is a\\xa0critical aspect in UX/UI design. It's not just about aesthetics; it also significantly impacts the user experience. A\\xa0consistent design allows users to learn how your product works more easily, helping them to use it efficiently and effectively. Moreover, maintaining design consistency can be a\\xa0challenging task, especially when multiple designers are involved.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Why is design consistency important?\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Design consistency is important for three main reasons:\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"ol\", {\n      children: [/*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Usability:\"\n          }), \" When the design is consistent, users can predict how to interact with the interface. This allows them to quickly learn how to use the product, and reduces the risk of user errors.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Brand Identity:\"\n          }), \" Consistency in design also reinforces your brand identity. The repeated use of colors, shapes, layouts, and typography helps your product to become instantly recognizable to your users.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Trust:\"\n          }), \" Consistent interfaces are seen as more professional, which helps to build trust with users. This is particularly important in industries such as finance or healthcare, where user trust is paramount.\"]\n        })\n      })]\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Strategies for maintaining design consistency\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"There are several strategies you can use to maintain design consistency, such as:\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"ul\", {\n      children: [/*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"em\", {\n            children: \"Using a design system:\"\n          }), \" A design system is a set of standards for design and code along with components that combine those standards. It allows designers to reuse components, ensuring consistency and efficiency.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"em\", {\n            children: \"Implementing a style guide:\"\n          }), \" A style guide is a document that outlines the visual and sometimes the writing style of a brand. It serves as a reference that helps maintain consistency in what a brand looks, feels and sounds like.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"em\", {\n            children: \"Creating a component library:\"\n          }), \" A component library is a collection of reusable design elements, including typography, colors, buttons, and forms. This ensures that every element of your user interface is consistent, no matter who is designing it.\"]\n        })\n      })]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Tools like Figma can help you create, share and implement these. Figma allows you to create and share design libraries, promoting a\\xa0unified design language across your team.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Remember, achieving design consistency is a continuous process. It's about making sure that the design stays consistent as the product grows and evolves. Regular reviews and updates to your design systems and style guides will help ensure this.\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"6. Prioritize User Feedback\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"It's vital to \", /*#__PURE__*/_jsx(\"strong\", {\n        children: \"incorporate user feedback\"\n      }), \" on a\\xa0regular basis to validate your designs and ensure they are user-centric. Tools like Figma facilitate this process by allowing you to share interactive prototypes with users and stakeholders, gather feedback, and iterate designs based on the insights gathered. But, there's more to user feedback than just that. Let's delve into some key strategies that can make your user feedback process more effective.\\xa0\"]\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Conducting User Testing\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"User testing is a\\xa0powerful way to get direct input on how real users interact with your designs. This can provide invaluable insights that you might not have thought of.\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"ol\", {\n      children: [/*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Plan Your Test:\"\n          }), \" Determine what you want to learn from the user testing session. This will guide the creation of tasks and scenarios for the test.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Recruit Participants:\"\n          }), \" Find users who represent your target audience. This will ensure that the feedback you get is relevant to your user base.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Conduct the Test:\"\n          }), \" During the testing session, observe how users interact with your design. Take note of any areas where users seem to struggle or feel confused.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Analyze Results and Iterate:\"\n          }), \" After the test, analyze the results and identify areas for improvement. Then, iterate your designs based on these findings.\"]\n        })\n      })]\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Utilizing Feedback Tools\\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Feedback tools can help you gather user feedback in an organized and efficient way. They can be especially helpful for remote teams.\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"ul\", {\n      children: [/*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"em\", {\n            children: \"Survey Tools:\"\n          }), \" Tools like SurveyMonkey or Google Forms can help you collect feedback from a larger user base. They allow you to ask specific questions and collect quantitative data.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"em\", {\n            children: \"Feedback Widgets:\"\n          }), \" These tools, such as UserVoice or Usabilla, can be installed on your website or app and allow users to leave feedback at their convenience.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"em\", {\n            children: \"Heatmap Tools:\"\n          }), \" Tools such as Hotjar or Crazy Egg provide visual representations of how users are interacting with your designs, helping you to understand user behavior.\"]\n        })\n      })]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Remember, the goal isn't to collect as much feedback as possible, but to gather useful, actionable insights that can guide your design decisions. So, always approach user feedback with a clear goal and open mind.\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"7. Document and Share\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"Building on the significance of \", /*#__PURE__*/_jsx(\"strong\", {\n        children: \"documenting decisions, changes, and feedback\"\n      }), \", it's important to realize that documentation serves as a\\xa0\", /*#__PURE__*/_jsx(\"em\", {\n        children: \"source of truth\"\n      }), \" in the course of the project. It gives a\\xa0historical account of actions taken, offering a\\xa0comprehensive view of the project's journey. This not only aids in keeping everyone \", /*#__PURE__*/_jsx(\"strong\", {\n        children: \"aligned\"\n      }), \" but also acts as a\\xa0learning resource for future projects.\\xa0\"]\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"The Power of Centralized Documentation\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"Centralizing documentation is a\\xa0great way to enhance team collaboration. It involves creating a\\xa0\", /*#__PURE__*/_jsx(\"strong\", {\n        children: \"repository\"\n      }), \" where all documents relating to a\\xa0project are stored. This could be a\\xa0shared drive or a\\xa0cloud-based platform like Google Drive or Dropbox. With centralized documentation, everyone has access to the same information, eliminating inconsistencies and confusion. It's a\\xa0living, breathing documentation system that grows and evolves with the project, ensuring everyone stays updated.\\xa0\"]\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Embracing Project Management Tools\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"Project Management tools like \", /*#__PURE__*/_jsx(\"em\", {\n        children: \"Jira\"\n      }), \", \", /*#__PURE__*/_jsx(\"em\", {\n        children: \"Asana\"\n      }), \", or \", /*#__PURE__*/_jsx(\"em\", {\n        children: \"Trello\"\n      }), \" can also serve as effective platforms for maintaining project documentation. They offer features like task tracking, time tracking, and progress reports, providing a\\xa0snapshot of the project at any given time. They also support file attachments, making it easy to link relevant documents directly to tasks. This way, team members can promptly access required documentation, promoting efficient collaboration.\\xa0\"]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Remember, a well-documented project isn't an option; it's a necessity for successful collaboration. Documentation helps to keep everyone on the same page, reducing misunderstandings and promoting a collaborative approach to problem-solving.\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Standardizing Documentation\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"Finally, it's worth stressing the importance of \", /*#__PURE__*/_jsx(\"strong\", {\n        children: \"standardizing\"\n      }), \" your documentation. This means creating a\\xa0common format or template that all team members use when documenting their work. A\\xa0standardized format ensures consistency, making it easy for anyone to understand and follow the documentation. This can be particularly useful in larger teams or when new members join mid-project.\\xa0\"]\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"8. Embrace Flexibility\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Consider the modifications and iterations in your design journey as stumbling blocks, but as stepping stones towards refinement. Embracing flexibility in the design process is key. This approach fosters adaptability, encourages creativity, and ultimately leads to the development of a\\xa0more robust and user-focused product. With Figma's user-friendly interface, making swift iterations becomes a\\xa0breeze, enabling your team to tweak and enhance designs with unrivaled efficiency.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Benefits of Flexibility in Design\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"ul\", {\n      children: [/*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Adaptability:\"\n          }), \" Design requirements can change swiftly. Being flexible allows you to quickly adapt to these changes without significant setbacks.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Creativity:\"\n          }), \" Flexibility encourages dynamic thinking and idea generation - pushing the boundaries of what is possible.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Robustness:\"\n          }), \" A flexible approach allows for the incorporation of diverse viewpoints, leading to a more comprehensive and user-centric design.\"]\n        })\n      })]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Remember, the essence of collaboration extends beyond simply working in tandem. It's about synergizing your efforts to yield the most effective results.\\xa0\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Strategies for Embracing Flexibility\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"ol\", {\n      children: [/*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"em\", {\n            children: \"Regular Feedback:\"\n          }), \" Regularly obtaining feedback from your team members and stakeholders can provide fresh perspectives, highlighting areas for improvement.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"em\", {\n            children: \"Open Communication:\"\n          }), \" Maintain open channels of communication. This promotes transparency and ensures everyone is on the same page when changes occur.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"em\", {\n            children: \"Embrace Change:\"\n          }), \" Rather than resisting changes, see them as opportunities for growth and improvements in your design.\"]\n        })\n      })]\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"Summary\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Effective collaboration in UX/UI design hinges on several key points:\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"ol\", {\n      children: [/*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"strong\", {\n            children: \"Adopting insightful tips\"\n          }), \" to navigate the complexities of design processes.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [/*#__PURE__*/_jsx(\"em\", {\n            children: \"Using powerful tools\"\n          }), \" such as Figma to streamline these processes.\"]\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        children: /*#__PURE__*/_jsxs(\"p\", {\n          children: [\"Creating a productive and \", /*#__PURE__*/_jsx(\"em\", {\n            children: \"delightful experience\"\n          }), \" for all team members.\"]\n        })\n      })]\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"strong\", {\n        children: \"Efficient collaboration\"\n      }), \" not only enhances the productivity of the design process but also fosters a\\xa0positive and enjoyable environment for the team. And in the world of UX/UI design, a\\xa0harmonious blend of productivity and enjoyment is a\\xa0key ingredient for success.\\xa0\"]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"So, whether you are a\\xa0novice or seasoned professional in UX/UI design, embracing the value of collaboration will undoubtedly elevate your work and the overall team dynamics. In essence, it's about working together creatively to deliver exceptional user experiences.\\xa0\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [/*#__PURE__*/_jsx(\"em\", {\n        children: \"Happy collaborating!\"\n      }), \"\\xa0\"]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: 'Remember: \"Great design is born out of great collaboration.\"'\n    })]\n  }),\n  RmZI22YIP: \"3 minutes\",\n  rUQIyYADy: \"https://unsplash.com/@mariogogh\",\n  Sh4r9OkMI: addImageAlt({\n    src: new URL(\"https://framerusercontent.com/images/2kH2iMRk3oVfKwfaTZ5hmaE2aR8.jpg\").href,\n    srcSet: `${new URL(\"https://framerusercontent.com/images/2kH2iMRk3oVfKwfaTZ5hmaE2aR8.jpg?scale-down-to=512\").href} 512w, ${new URL(\"https://framerusercontent.com/images/2kH2iMRk3oVfKwfaTZ5hmaE2aR8.jpg?scale-down-to=1024\").href} 1024w, ${new URL(\"https://framerusercontent.com/images/2kH2iMRk3oVfKwfaTZ5hmaE2aR8.jpg?scale-down-to=2048\").href} 2048w, ${new URL(\"https://framerusercontent.com/images/2kH2iMRk3oVfKwfaTZ5hmaE2aR8.jpg\").href} 3000w`\n  }, \"\"),\n  udYJM_z4a: \"Discover actionable tips to improve team collaboration in UX/UI design. Learn how Figma enhances efficient teamwork, boosting productivity and innovation in your design process.\",\n  veRNv0aTZ: \"Mario Gogh\",\n  w1e0DEkho: \"Visual.so\",\n  yGIW9yAaD: false\n}, {\n  cyK5El4GA: \"Explore the significance of wireframing in UX design and how it can improve website and app design through user testing and refinement.\",\n  GhLX8yBxU: \"2022-03-15T00:00:00.000Z\",\n  H99ImQ0k1: \"What is a Wireframe?\",\n  id: \"f52iS6ArX\",\n  iRupPxypK: \"John Iseghohi\",\n  IxZKmK_ti: addImageAlt(undefined, \"\"),\n  NiC7e4LKq: \"what-is-a-wireframe\",\n  njCINTTep: \"https://visual.so\",\n  nRliio48H: \"Learn\",\n  pOVMMf8bX: /*#__PURE__*/_jsxs(React.Fragment, {\n    children: [/*#__PURE__*/_jsx(\"p\", {\n      children: \"To those reading this, let me officially welcome you to the exciting world of UX Design! and introduce you to Wireframing.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: 'As a beginner, you may have heard the term \"wireframing\" thrown around but may not be quite sure what it means.'\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"Definition\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Simply put, wireframing is the process of creating a visual representation of a website or app's layout and functionality before any actual design elements are added.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Think of it like building a blueprint for a house - wireframes are the skeletal structure that outlines where each component of a website or app will go, from buttons and menus to text and images.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"By creating wireframes, UX designers can test and refine the user flow and experience before spending time and resources on actual design work.\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"Why bother about Wireframing?\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Because it helps you to communicate your ideas clearly, and ensure everyone is on the same page before starting work on the final design. It also saves time and money in the long run, avoiding costly changes later.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Think of it as a map that you can use to plan your journey from point A to point B. By starting with a wireframe; you can explore different options and find the most efficient route to your goal.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Wireframing allows designers to easily mock up ideas and test user experience strategies before committing to producing final designs. With wireframing, UX designers can determine user flows and identify potential usability issues early.\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"There are three types of Wireframes:\"\n    }), /*#__PURE__*/_jsxs(\"ul\", {\n      children: [/*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        style: {\n          \"--framer-text-alignment\": \"left\"\n        },\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: \"Low-fidelity wireframes: These are simple, black-and-white representations of a website or app's layout. They typically show only the most essential components and functionality, such as navigation menus, content blocks, and call-to-action buttons.\"\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        style: {\n          \"--framer-text-alignment\": \"left\"\n        },\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: \"High-fidelity wireframes: These are more detailed wireframes that include additional design elements, such as colour schemes, typography, and imagery. They give a more accurate representation of the final product's appearance without actually adding any visual design.\"\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        style: {\n          \"--framer-text-alignment\": \"left\"\n        },\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: \"Interactive wireframes: These are wireframes that include clickable elements, allowing the user to simulate actual user flow and experience. They can be especially useful for testing out complex functionality or user journeys.\"\n        })\n      })]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: /*#__PURE__*/_jsx(\"br\", {\n        className: \"trailing-break\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Remember, wireframes are an essential part of the UX design process and can save you time and resources in the long run.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: /*#__PURE__*/_jsx(\"br\", {\n        className: \"trailing-break\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Happy wireframing!\"\n    })]\n  }),\n  RmZI22YIP: \"5 minutes\",\n  rUQIyYADy: \"\",\n  Sh4r9OkMI: addImageAlt({\n    src: new URL(\"https://framerusercontent.com/images/bxc1Q4niPpuKWDgjfNwVxdjY3Xg.jpg?scale-down-to=4096\").href,\n    srcSet: `${new URL(\"https://framerusercontent.com/images/bxc1Q4niPpuKWDgjfNwVxdjY3Xg.jpg?scale-down-to=512\").href} 512w, ${new URL(\"https://framerusercontent.com/images/bxc1Q4niPpuKWDgjfNwVxdjY3Xg.jpg?scale-down-to=1024\").href} 1024w, ${new URL(\"https://framerusercontent.com/images/bxc1Q4niPpuKWDgjfNwVxdjY3Xg.jpg?scale-down-to=2048\").href} 2048w, ${new URL(\"https://framerusercontent.com/images/bxc1Q4niPpuKWDgjfNwVxdjY3Xg.jpg?scale-down-to=4096\").href} 4096w, ${new URL(\"https://framerusercontent.com/images/bxc1Q4niPpuKWDgjfNwVxdjY3Xg.jpg\").href} 5184w`\n  }, \"\"),\n  udYJM_z4a: \"Discover the world of wireframing and its importance in the UX design process. Learn how wireframes provide a visual structure for website or app layouts, allowing testing and refinement of user experience. Improve your design process and avoid costly changes with wireframes.\",\n  veRNv0aTZ: \"\",\n  w1e0DEkho: \"Visual.so\",\n  yGIW9yAaD: false\n}, {\n  cyK5El4GA: \"Unleash the full potential of product design and development by discovering the importance of wireframing, the process, and the best tools.\",\n  GhLX8yBxU: \"2022-04-08T00:00:00.000Z\",\n  H99ImQ0k1: \"The Definitive Guide to Wireframes\",\n  id: \"S9ttlka_B\",\n  iRupPxypK: \"John Iseghohi\",\n  IxZKmK_ti: addImageAlt(undefined, \"\"),\n  NiC7e4LKq: \"definitive-guide-to-wireframes\",\n  njCINTTep: \"https://visual.so\",\n  nRliio48H: \"Learn\",\n  pOVMMf8bX: /*#__PURE__*/_jsxs(React.Fragment, {\n    children: [/*#__PURE__*/_jsx(\"p\", {\n      children: \"Wireframing is one of the most important aspects of product design and development, yet it's often misunderstood or overlooked.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"This comprehensive guide will cover everything you need to know about wireframing, what it is, why we create wireframes, how to create one and what tool to use.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Wireframing is essential to the product design and development process, helping designers and stakeholders visualize a product's user interface (UI) before it is brought to life. It enables teams to collaborate in the early planning stages and quickly identify potential issues with a user experience (UX).\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"In its simplest form, a wireframe is an outline or blueprint that helps designers, PMs, and developers visualize how a product should look and function.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"I call it the skeleton of a product; it's the skeletal representation of the final product, allowing for quick and easy experimentation with different page layouts.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"In short, wireframing helps designers quickly iterate on UX/UI-related issues so they can begin to flesh out their ideas faster. The ultimate purpose of wireframes is to facilitate better communication between stakeholders while ensuring all parties involved have a shared understanding of how the app or website should look and work.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"There are different types of wireframes, such as:\"\n    }), /*#__PURE__*/_jsxs(\"ul\", {\n      children: [/*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        style: {\n          \"--framer-text-alignment\": \"left\"\n        },\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: \"Low-fidelity wireframes using basic shapes for quick ideations.\"\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        style: {\n          \"--framer-text-alignment\": \"left\"\n        },\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: \"Medium-fidelity wireframes include a variety of text styles and colours to represent the visual hierarchy.\"\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        style: {\n          \"--framer-text-alignment\": \"left\"\n        },\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: \"High-fidelity wireframes are realistic renderings that mimic the look and feel of the final product.\"\n        })\n      })]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"No matter the wireframe type used, each one can help shape an intuitive and effective UX design by informing content strategy, visual design elements, and user flows throughout.\"\n    }), /*#__PURE__*/_jsx(\"h3\", {\n      children: \"So when do we create Wireframes?\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"The earlier they are developed during the UX design process, the more time you get to save. Stakeholders have to explore and test various user experience (UX) scenarios before investing further resources into development. Wireframing aims to identify any potential issues with the UX and enable teams to fix these issues before committing.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Wireframes also serve as a valuable tool for product managers, who need to articulate their vision of the product to get stakeholder buy-in. The suitable wireframes can help build consensus among stakeholders, ensuring that everyone is on the same page and understands how the app or website should look (high-fidelity) and work.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"If you're new to wireframing, these step-by-step processes can help you create your wireframe:\"\n    }), /*#__PURE__*/_jsxs(\"ol\", {\n      children: [/*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        style: {\n          \"--framer-text-alignment\": \"left\"\n        },\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: \"Research: Before creating a wireframe, it's crucial to understand the project's requirements and user needs clearly. The research includes analyzing user data, reviewing similar products, and conducting surveys or interviews with potential users.\"\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        style: {\n          \"--framer-text-alignment\": \"left\"\n        },\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: \"Define the user flow: Once you clearly understand the project's requirements and user needs, you can start defining the user flow. The user flow outlines how the user will navigate through the product and helps you identify the critical components of the design.\"\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        style: {\n          \"--framer-text-alignment\": \"left\"\n        },\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: \"Sketch: With the user flow in mind, it's time to start sketching the wireframe. You can use pen and paper, a whiteboard, or a digital sketching tool. The goal is to create a low-fidelity wireframe that outlines the basic structure of the design.\"\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        style: {\n          \"--framer-text-alignment\": \"left\"\n        },\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: \"Refine: After sketching, it's time to refine the wireframe. This involves adding more detail and structure to the wireframe to make it more functional. You can use a digital wireframing tool to create a high-fidelity wireframe or continue with pen and paper.\"\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        style: {\n          \"--framer-text-alignment\": \"left\"\n        },\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: \"Test: Once the wireframe is complete, it's time to test it. You can conduct usability testing to see if the wireframe meets the user's needs and is easy to use. Based on the test results, you can make adjustments to the wireframe.\"\n        })\n      }), /*#__PURE__*/_jsx(\"li\", {\n        \"data-preset-tag\": \"p\",\n        style: {\n          \"--framer-text-alignment\": \"left\"\n        },\n        children: /*#__PURE__*/_jsx(\"p\", {\n          children: \"Share and Collaborate: Finally, it's time to share the wireframe with the project team and stakeholders for feedback and collaboration. Use their feedback to refine the wireframe further and move on to the design phase.\"\n        })\n      })]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"The wireframing process involves research, defining the user flow, sketching, refining, testing, and collaboration.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"A well-designed wireframe is crucial to creating a successful final product that meets the needs of its users. The right tips, tricks, and wise use of wireframes can revolutionize your design process and take it to the next level!\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"With today's technology, it's easier to create wireframes than ever! There are numerous online tools you can use which allow you to quickly and efficiently create stunning visuals that translate your ideas into tangible forms.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Whether you're an app designer or web developer, wireframing is essential to any project. Not only does it ensure that everyone involved has a clear idea of the goals at hand, but it also helps keeps everyone organized and on track. So take the first step in your projects today and explore the wide range of online wireframe creation tools available to help create unique products!\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"There is a wide range of wireframing tools available to suit any budget and project needs. Popular tools like:\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"- Sketch\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"- InVision\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"- Octopus\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"- Figjam\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"- Balsamiq Mockups\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"- Lucidchart\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"- UXPin\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"- JustInMind\"\n    }), /*#__PURE__*/_jsxs(\"p\", {\n      children: [\"- \", /*#__PURE__*/_jsx(Link, {\n        href: \"http://wireframes.com/\",\n        openInNewTab: false,\n        smoothScroll: false,\n        children: /*#__PURE__*/_jsx(\"a\", {\n          children: \"Wireframes.com\"\n        })\n      }), \" [ Coming soon sign up here ]\"]\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"- Proto.io\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Over time, wireframes have evolved from simple sketches on paper to sophisticated digital tools used by UX professionals around the world.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Today's wireframing tools enable teams to collaborate in real time while designing user interfaces for websites and apps.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"As I did recently, you can use the different types of wireframes for any company or personal project, whether it's an app, website or even a logo design.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Plus, keep in mind all these tips for how to use a wireframe throughout the entire process.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"What do you think of this blog post on designing with wireframes?\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Has it sparked your interest in learning more about it?\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"What tool do you use to wireframe?\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Let me know in the comment area to chat more about this valuable resource. I hope anyone looking to add a professional level to their design and development project found this blog post helpful!\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Happy wireframing\"\n    })]\n  }),\n  RmZI22YIP: \"5 minutes\",\n  rUQIyYADy: \"\",\n  Sh4r9OkMI: addImageAlt({\n    src: new URL(\"https://framerusercontent.com/images/dgLGox2Bfy7yAF6ABkmqR9YrDY.jpg\").href,\n    srcSet: `${new URL(\"https://framerusercontent.com/images/dgLGox2Bfy7yAF6ABkmqR9YrDY.jpg?scale-down-to=512\").href} 288w, ${new URL(\"https://framerusercontent.com/images/dgLGox2Bfy7yAF6ABkmqR9YrDY.jpg?scale-down-to=1024\").href} 576w, ${new URL(\"https://framerusercontent.com/images/dgLGox2Bfy7yAF6ABkmqR9YrDY.jpg?scale-down-to=2048\").href} 1152w, ${new URL(\"https://framerusercontent.com/images/dgLGox2Bfy7yAF6ABkmqR9YrDY.jpg\").href} 2268w`\n  }, \"\"),\n  udYJM_z4a: \"Discover the importance of wireframing and master its secrets to enhance your product design journey. Learn the process and explore top tools to create optimal designs.\",\n  veRNv0aTZ: \"\",\n  w1e0DEkho: \"Visual.so\",\n  yGIW9yAaD: false\n}, {\n  cyK5El4GA: \"Learn how to create effective wireframes as a beginner UX designer with this step-by-step guide.\",\n  GhLX8yBxU: \"2022-02-28T00:00:00.000Z\",\n  H99ImQ0k1: \"A Step-by-Step Guide to Wireframing\",\n  id: \"Ccs8buNco\",\n  iRupPxypK: \"John Iseghohi\",\n  IxZKmK_ti: addImageAlt(undefined, \"\"),\n  NiC7e4LKq: \"step-by-step-guide-to-wireframing\",\n  njCINTTep: \"https://visual.so\",\n  nRliio48H: \"Learn\",\n  pOVMMf8bX: /*#__PURE__*/_jsxs(React.Fragment, {\n    children: [/*#__PURE__*/_jsx(\"p\", {\n      children: \"If you're a beginner UX designer looking to create wireframes, this blog post is for you.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Wireframes are an important tool when it comes to designing any interface, as they allow designers to layout the foundation and present their ideas in a clear and organized manner.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"This step-by-step guide will outline the different elements needed to construct a solid wireframe so that even beginners can become masters of effective design techniques.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"So let\u2019s get started!\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"Understand the purpose of wireframing for UX Design.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Wireframing is an essential component for any UX designer, allowing them to streamline the design process and create a plan for the actual implementation of their project.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"By wireframing, UX designers can focus on the user flow, layout of content, and the overall structure of the User Experience (UX) design before creating a more detailed prototype.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"With wireframes, UX designers are able to focus on refining overall themes and functionalities while ensuring they provide users with consistent visuals while accomplishing their tasks.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"When done correctly, wireframing creates a blueprint that any UX designer can use when creating meaningful digital experiences.\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"Familiarize yourself with best practices for wireframing.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"As a beginner UX designer, it's important to become familiar with the best practices for wireframing.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Before jumping into tools like figma or figjam, start by taking the time to understand why wireframes are important tools in UX design and what the most effective UX tools have in common.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Familiarizing yourself with best practices for wireframing is the best way to create clear expectations, achieve success as a UX designer and ensure your projects stay on track.\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"Create a sitemap to outline the structure of your website or app.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Creating a sitemap is an essential information architecture task of any UX design project and helps you organize the information on your website or app in a logical fashion.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Beginner UX designers should familiarize themselves with tools such as Balsamiq, UXPin, or Sketch to create wireframes that represent the information and structure of their web pages.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Having a clear understanding of what the product will look like - and how all information is connected - are crucial steps for each step of the design process.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Ensure to create wireframes early in the process to streamline development, save time, avoid costly mistakes from unexpected surprises later on, and ensure successful implementation.\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"Analyze user flows and use cases to determine how users will interact with your design.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"It\u2019s essential to consider user flows and use cases when developing a wireframe.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"This includes analyzing how users will move through your design, from their initial point of contact to completing the task. Think about all of the steps that need to be taken for each use case and where a user may get stuck or have questions.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Identifying potential issues early in the process is key to creating an effective design and helping ensure usability.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Finally, be mindful that use case scenarios and user flow paths can vary depending on the context. So while designing a wireframe, always make sure you're considering every possible angle.\"\n    }), /*#__PURE__*/_jsx(\"h2\", {\n      children: \"Build low-fidelity wireframes to map out page layouts and interactions.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Low-fidelity wireframes are essential for UX designers when starting out with a project.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"They are used to create an initial mockup of the layout and design, setting up an overall framework to help move towards a final product.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"As such, they provide vital guidance in mapping out page layouts and interactions. Developing effective low-fidelity wireframes featuring all the necessary components is key, as this allows designers to further iterate upon their ideas by building off the existing frameworks.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Building low-fidelity wireframes should be done carefully and thoroughly to serve as a well-established guide for creating a better end product.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Wireframing is an important step in the user experience design process.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"It's a way to map out your website or app's structure, layout, and interactions. By understanding the purpose of wireframing and familiarizing yourself with best practices for creating wireframes, you can create low-fidelity wireframes that effectively represent your design ideas.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Plus, the more time you spend analyzing user flows and use cases to determine how users will interact with your design, the better equipped you are to make decisions about content hierarchy and page layouts. \\xa0\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Now that we have been through a step-by-step guide on designing a wireframe for beginner UX designers, it\u2019s time for you to get started!\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Research some of these tips mentioned earlier in this post and explore some of the tools available for wireframing.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Once you are comfortable with wireframing fundamentals, don\u2019t be afraid to add artistic flair and show off your creativity.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"What tool do you use to wireframe? Let me know in the comment area.\"\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: /*#__PURE__*/_jsx(\"br\", {\n        className: \"trailing-break\"\n      })\n    }), /*#__PURE__*/_jsx(\"p\", {\n      children: \"Happy Wireframing!\"\n    })]\n  }),\n  RmZI22YIP: \"5 minutes\",\n  rUQIyYADy: \"\",\n  Sh4r9OkMI: addImageAlt({\n    src: new URL(\"https://framerusercontent.com/images/A0qOKodYBpY045M9INXnqIQh71c.jpg\").href,\n    srcSet: `${new URL(\"https://framerusercontent.com/images/A0qOKodYBpY045M9INXnqIQh71c.jpg?scale-down-to=512\").href} 512w, ${new URL(\"https://framerusercontent.com/images/A0qOKodYBpY045M9INXnqIQh71c.jpg?scale-down-to=1024\").href} 1024w, ${new URL(\"https://framerusercontent.com/images/A0qOKodYBpY045M9INXnqIQh71c.jpg?scale-down-to=2048\").href} 2048w, ${new URL(\"https://framerusercontent.com/images/A0qOKodYBpY045M9INXnqIQh71c.jpg\").href} 4032w`\n  }, \"\"),\n  udYJM_z4a: \"Learn the essentials of wireframing for beginner UX designers with this step-by-step guide. Discover the purpose and best practices of wireframing, as well as how to create a sitemap, analyze user flows, and build low-fidelity wireframes. Get started on your wireframing journey today!\",\n  veRNv0aTZ: \"\",\n  w1e0DEkho: \"Visual.so\",\n  yGIW9yAaD: false\n}];\nfor (const item of data) {\n  Object.freeze(item);\n}\naddPropertyControls(data, {\n  H99ImQ0k1: {\n    defaultValue: \"\",\n    title: \"Title\",\n    type: ControlType.String\n  },\n  cyK5El4GA: {\n    defaultValue: \"\",\n    displayTextArea: true,\n    title: \"Short Introduction\",\n    type: ControlType.String\n  },\n  udYJM_z4a: {\n    defaultValue: \"\",\n    displayTextArea: true,\n    title: \"SEO - Meta Description\",\n    type: ControlType.String\n  },\n  NiC7e4LKq: {\n    title: \"Slug\",\n    type: ControlType.String\n  },\n  GhLX8yBxU: {\n    defaultValue: \"\",\n    title: \"Date\",\n    type: ControlType.Date\n  },\n  Sh4r9OkMI: {\n    __defaultAssetReference: \"data:framer/asset-reference,j3MKK5DtNyp5nA0i3O3leCl0IQ.webp?originalFilename=oo2szro9QKG2RtmNLANgNnBU.webp&preferredSize=auto\",\n    title: \"Image\",\n    type: ControlType.ResponsiveImage\n  },\n  veRNv0aTZ: {\n    defaultValue: \"\",\n    title: \"Image Creator\",\n    type: ControlType.String\n  },\n  rUQIyYADy: {\n    defaultValue: \"\",\n    title: \"Image Creator Link\",\n    type: ControlType.String\n  },\n  iRupPxypK: {\n    defaultValue: \"\",\n    title: \"Author Name\",\n    type: ControlType.String\n  },\n  w1e0DEkho: {\n    defaultValue: \"Framer\",\n    title: \"Sponsor Name\",\n    type: ControlType.String\n  },\n  IxZKmK_ti: {\n    title: \"Sponsor Logo\",\n    type: ControlType.ResponsiveImage\n  },\n  njCINTTep: {\n    title: \"Sponsor Link\",\n    type: ControlType.Link\n  },\n  nRliio48H: {\n    defaultValue: \"\",\n    title: \"Post Tag\",\n    type: ControlType.String\n  },\n  yGIW9yAaD: {\n    defaultValue: false,\n    title: \"Featured\",\n    type: ControlType.Boolean\n  },\n  RmZI22YIP: {\n    defaultValue: \"5 minutes\",\n    title: \"Avg Reading Time\",\n    type: ControlType.String\n  },\n  pOVMMf8bX: {\n    defaultValue: \"\",\n    title: \"Content\",\n    type: ControlType.RichText\n  }\n});\ndata[\"displayName\"] = \"Blog\";\nexport default data;\nexport const enumToDisplayNameFunctions = {};\nexport const __FramerMetadata__ = {\n  \"exports\": {\n    \"enumToDisplayNameFunctions\": {\n      \"type\": \"variable\",\n      \"annotations\": {\n        \"framerContractVersion\": \"1\"\n      }\n    },\n    \"default\": {\n      \"type\": \"data\",\n      \"name\": \"data\",\n      \"annotations\": {\n        \"framerContractVersion\": \"1\",\n        \"framerRecordIdKey\": \"id\",\n        \"framerEnumToDisplayNameUtils\": \"2\",\n        \"framerData\": \"\",\n        \"framerSlug\": \"NiC7e4LKq\"\n      }\n    },\n    \"__FramerMetadata__\": {\n      \"type\": \"variable\"\n    }\n  }\n};"],
  "mappings": "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",
  "names": ["addImageAlt", "image", "alt", "data", "u", "x", "p", "Link", "item", "addPropertyControls", "ControlType", "bCrnAFrXo_default", "enumToDisplayNameFunctions", "__FramerMetadata__"]
}