6

How do you create wireframes?

almost 3 years ago from , UX Designer for Fintech and B2B

I'm interested in how you design new projects and if you start with wireframes, how do you create them? Do you create create them only for yourself or for a team? Do you create them on pen and paper or do you use some kind of tool? Thanks for the answers!

13 comments

  • Cale Dooper, almost 3 years ago

    I start with pen and paper or a whiteboard for the initial sketches. Review them with the team and when we get to something a bit more defined I'll use omnigraffle or sketch to turn it into a digital wireframe. Another designer on my team uses Balsamiq for his wireframes.

    4 points
    • Dirk HCM van BoxtelDirk HCM van Boxtel, almost 3 years ago

      Whiteboard ♥

      I wanna highlight that.

      Cannot understate the importance of just a giant white wall and some non-perma markers. Dear lord I love analogue when it comes to brainstorming.

      Then a day later, I'll do the same thing all over.

      John Cleese has a good point in his talk about creativity: you need TIME to solve a problem in the best possible way.

      So while not in front of a white-board, I'll run through apps in my head, or scribble on paper. Little bits and pieces here and there over the course of however long I have. Then try and put it all together in a whiteboard session.

      From there, whatever tool I have access to really. Depends on the team I'm working with, or what I want the wireframe to do (or who it needs to talk to). Sometimes Photoshop, sometimes Axure, Balsamiq, etc. Sometimes for other designers, sometimes devs, sometimes for off-site clients, sometimes for the CEO. So whatever gets it across!

      1 point
  • Parvez SParvez S, almost 3 years ago

    If the flow is simple then I print out these papers and start sketching. I don't really spend much time on it, Just enough to make the flow clear.

    If the project is complex, First I sketch out the basic flow then I use Axure to create High Fidelity Wireframes.

    3 points
  • Nathan NNathan N, almost 3 years ago

    I've switched to using Balsamiq for wireframes. Previously I used Axure or Sketch but I hated wasted time creating detailed throw away deliverables. Balsamiq is super quick and easily understood by the developers I work with.

    3 points
  • Tom ReinertTom Reinert, almost 3 years ago

    Always start with pen & paper.

    For digital wireframes, I created a little Sketch-Library with the most common elements (Boxes& Buttons mostly) that gets the job done in most cases. It forces you to use very rudimentary elements and not get lost in details. Also, when working in teams, a consitent style is maintained, which can be changed easily via the master symbols.

    Happy to share it, if anyone is interested.

    https://image.ibb.co/fb3WPb/Artboard.png

    2 points
  • Andrew Washuta, almost 3 years ago

    So, I used to not wireframe at all actually. I was so quick at iterating through ideas that I'd just build in Sketch / PS / whatever tool was necessary.

    I've since made quite a shift to wireframing quite often. I used Balsamiq for a while, but I actually don't like it very much, and I'll tell you why, but first, here's a bit of a backstory:

    The company I currently work for creates analytics and insights products for consumer packaged goods companies, so as I'm sure you can guess, the products themselves are incredibly complex. There are a number of components that are reused x amount of times, and there are continual changes. It's easiest for me to wireframe in Sketch so that I'm able to control my library of nested symbols — even though we're currently living in lo-fi/wireframe land. It's just so much quicker than Balsamiq, plus, I can quickly and iteratively move into hi-fidelity mockups if necessary. It's just so much more efficient in my workflow.

    2 points
  • Eduardo Tello, almost 3 years ago

    At my company UX designers use Axure to prototype, UI use Sketch (some use Photoshop).

    0 points
  • Youri RoggevenYouri Roggeven, almost 3 years ago

    starting with small sketches like 3-4 per a4. I sketch small to force myself not to dive into details. After the sketches i mostly use adobe XD for wireframing, also because it had build in prototyping so i can test my wireframes with users or the client

    0 points
  • Dennis Schmidt, almost 3 years ago

    Personally I use either pen and paper (but then I don't really share them or refine them digitally) or Sketch for more hi-fi versions. I also tried tools like Balsamiq in the past but always felt uncomfortable.

    Unfortunately, I also made the experience that showing/testing wireframes often leads to confusion because it looks distracting. In cases like these I prefer having a ready-to-use UI set which I can quickly build interfaces with.

    0 points
  • Jason CJason C, almost 3 years ago

    That really depends on what and who your wireframes are for. If you're building websites and have stakeholders, like me, my team has fully switched over to Adobe XD. You can wireframe and get a clickable prototype in front of your stakeholders very quickly for your early phases, then you can iterate over that same wireframe with higher fidelity as the design comes together. You can even take a prototype and generate a public-facing URL that you can share with others, and they can drop comments on it. XD functionality is somewhat early days still; their commenting features are nowhere near as streamlined as InVision, but you can push changes up to the same URL for iteration. XD served us well rebuilding wpengine.com, and I'm sticking with it moving forward.

    I'll agree with other suggestions, also. I interact with my stakeholders in person, and a whiteboard or piece of paper is irreplaceable for ideating together during those brainstorming sessions.

    0 points
  • Jan ZhengJan Zheng, almost 3 years ago

    This is what I do for larger/more complex projects: I start on paper or more likely on Notes, notepad or similar software. I create lists, each list is a page with core features and necessary copy (based on conversation, research, or business requirements).

    This super rough list of requirements sets the basis for my initial wireframes (which are just boxes with each list written inside them, but I use Axure or Sketch bc it's easy to copy, paste, and move things around) which also show hierarchy (usually lines to other boxes or another list that says where the box could lead to). This relationship wireframe shows the relationships between all the pages of the site—this sets the basis for a rough site architecture. I then take a look all the feature requirements that exist across the boxes, like search, navigation, directions & hours open, sitemap links, etc. which I group into other boxes that would exist across the wireframe boxes (these are essentially your components, and usually end up as header, footer, nav bar, etc.).

    What I now have is groups of features and their relationships, and I would now have the confidence to create more detailed wireframes

    Hope that helps

    0 points
  • Rory Smyth, almost 3 years ago

    Pen and paper usually. Or if its a complex flow, some basic blockframing (much better than wireframing) in Sketch and click through in invision. If it s a complex interaction, same deal except in principle or Flinto. Share them early to give people an idea.

    0 points