{"id":5088,"date":"2021-04-08T00:00:00","date_gmt":"2021-04-07T22:00:00","guid":{"rendered":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/uncategorized\/how-to-create-your-first-wireframe\/"},"modified":"2023-05-10T20:10:32","modified_gmt":"2023-05-10T18:10:32","slug":"how-to-create-your-first-wireframe","status":"publish","type":"post","link":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ux-design\/how-to-create-your-first-wireframe\/","title":{"rendered":"The Definitive Guide: How To Make Your First Wireframe"},"content":{"rendered":"

If you\u2019re already versed in the vocabulary of UX design<\/a>, you\u2019ll have a rough idea of what a wireframe is<\/a> and the purpose it serves. The next question is how you go about creating one. So, how do you make a wireframe? Let’s find out.<\/p>\n

I\u2019ve split this article into three sections. First, there\u2019s a general introduction to wireframes and wireframing tools, then there\u2019s a step-by-step guide, followed by a few key principles to keep in mind when you’re wireframing.<\/p>\n

An introduction to wireframing<\/h3>\n
    \n
  1. What is a wireframe?<\/a><\/li>\n
  2. Wireframe examples<\/a><\/li>\n
  3. Things to consider before you start wireframing<\/a><\/li>\n
  4. The best tools for wireframing<\/a><\/li>\n<\/ol>\n

    6 Steps to make a wireframe<\/h3>\n
      \n
    1. Do your research<\/a><\/li>\n
    2. Prepare your research for reference<\/a><\/li>\n
    3. Make sure you have your user flow mapped out<\/a><\/li>\n
    4. Draft, don\u2019t draw. Sketch, don\u2019t illustrate<\/a><\/li>\n
    5. Add some detail and get testing<\/a><\/li>\n
    6. Start turning your wireframes into prototypes<\/a><\/li>\n<\/ol>\n

      How to make your wireframe good: Three key principles<\/h3>\n
        \n
      1. Maintain clarity<\/a><\/li>\n
      2. Gain user confidence<\/a><\/li>\n
      3. Simplicity is key<\/a><\/li>\n<\/ol>\n

        \"A<\/h2>\n

        An introduction to wireframing<\/h2>\n

        1. What is a wireframe?<\/h3>\n

        Wireframing is a practice used by UX designers<\/a> which allows them to define and plan the information hierarchy of their design for a website, app, or product. This process focuses on how the designer or client wants the user to process information on a site, based on the user research<\/a> already performed by the UX design team.<\/p>\n

        When designing for the screen you need to know where all the information is going to go in plain black and white diagrams before building anything with code\u2014<\/em>whether that’s a developer coding it, or you the designer<\/a>. Wireframing is also a great way of getting to know how a user interacts with your interface, through the positioning of buttons and menus on the diagrams.<\/p>\n

        Without the distractions of colors, typeface choices or text, wireframing lets you plan the layout and interaction of your interface. A commonly-used argument for wireframing is that if a user doesn\u2019t know where to go on a plain hand-drawn diagram of your site page, then it is irrelevant what colors or fancy text eventually get used. A button or call to action needs to be clear to the user even it\u2019s not brightly colored and flashing.<\/p>\n

        2. Wireframe examples<\/h3>\n

        Before you start designing the wireframes of your own app or product, take a look at some examples of wireframes. This will give you some inspiration for your own wireframes, as well as giving you an idea of the variety of ways of creating them. Some people like to draw their wireframes by hand, others feel more comfortable using software like Invision<\/a>, or Balsamiq<\/a> to create theirs. We\u2019ll go through some of the tools you can use to create wireframes shortly, but it\u2019s important to emphasize that how you make yours is up to you: some people feel more creative when sat at their computer, while others prefer to have a pen and paper in hand.<\/p>\n

        That said, for complete beginners, bear in mind the following when deciding on your wireframe creation process:<\/p>\n