16

Ask DN: Typefaces for low-fidelity prototyping?

over 6 years ago from , Helping startups w/ product design @ Directed Works

We're putting together some low-fi prototypes in Sketch for some new FarmLogs concept work today. We've used Helvetica in the past for low-fidelity, but I want to try a typeface that makes it obvious our mockups are NOT the final type/spacing etc--without making them hard to read. Comic Sans is working pretty well actually (I know, I know).

What type/font do you use for low-fi?

EDIT: Thanks for not crucifying me for suggesting Comic Sans y'all

27 comments

  • Bevan StephensBevan Stephens, over 6 years ago

    I would say if clients are mistaking your lo-fi wireframes/prototypes for a finished product then you aren't making them lo-fi enough generally. The typeface shouldn't be that much of an issue.

    I would just use Arial, but make sure you are communicating the purpose of this stage of your design process clearly.

    6 points
    • Sam Pierce LollaSam Pierce Lolla, over 6 years ago (edited over 6 years ago )

      Yup, fair point.

      For me, one reason to try a "bad" typeface for prototyping is that it actually helps me focus on the macro-level as I work. If I'm using a typeface that might end up in production (our web app is Helvetica), I find myself tweaking sizes and spacing instead of going broad and building as many different kinds of workflows as I can.

      2 points
      • Bevan StephensBevan Stephens, over 6 years ago

        I can relate, I've been through this before. I find it best to use a pen and paper to explore all the possible directions before using a computer to flesh them out. That way there are far fewer distractions.

        And then you need to just be very disciplined with not tweaking the type, stick to just one two font sizes one heading size and one body size, in one colour, and it will be easier.

        1 point
        • Sam Pierce LollaSam Pierce Lolla, over 6 years ago

          Huge fan of sketching an paper--all the stuff we're prototyping now is coming from loose sketch sessions.

          Learning to sketch first was a huge eye-opener for me early on, but as I've gained experience making low-fidelity stuff, I've started doing more wireframing in Sketch. A lot of complicated interactions that worked well on paper didn't really "fit" on a screen, and I tend to set type much larger by hand than digitally. Could do another sketch round with graph/dot paper I suppose, but I'd just as soon pull out my laptop... there's just something about building it at the right scale that helps my layout process.

          0 points
  • Kilian Valkhof, over 6 years ago

    I'm a fan of using Redacted (particularly Script): https://github.com/christiannaths/Redacted-Font and BLOKK: http://blokkfont.com/ as it completely forgoes people reading, which is where confusion often happens.

    5 points
    • Sam Pierce LollaSam Pierce Lolla, over 6 years ago

      Ha, pretty cool!

      One issue I can see--a lot of the text I'm using is used for navigation and showing data in an interactive prototype. While the way the text looks isn't important, what it says often matters a lot. Obviously blokk and redacted aren't very readable :) Might be less of an issue if you're designing a theme for a website and the content is up to an author on some later date... but for product work it might work less well.

      1 point
      • Yitong ZhangYitong Zhang, over 6 years ago

        I'm a big fan of Redacted instead of Lorem Ipsum, which I find often trips up testers who are not familiar with it.

        For a navigation element font, I like Balsamiq Sans, which is just a slightly nicer comic sans.

        2 points
        • Sam Pierce LollaSam Pierce Lolla, over 6 years ago

          Balsamiq Sans, which is just a slightly nicer comic sans

          Ha, exactly. Someone else just pointed me to this too... seems like an ideal option. Thank you :)

          1 point
  • Account deleted over 6 years ago

    I think basic typography is essential to drafting layouts, especially at low fidelity. It’s the most effective tool you have to work with.

    Perhaps you’re better off sticking with something invisible like Helvetica or Times, and work on better communicating expectations with the client. I have found using greyscale is the simplest way to communicate low fidelity.

    3 points
    • Sam Pierce LollaSam Pierce Lolla, over 6 years ago

      Agree about basic type being SO important early--if you're doing it right, a lot of your design is words! https://ia.net/know-how/the-web-is-all-about-typography-period

      FWIW this is for internal stakeholders, not clients. Still, grayscale or not, I think people tend to tune out those explanations ("Show not Tell" etc). Especially important since we don't like doing stakeholder critique sessions in meetings, so we don't have a big "here it is" speech. We've found async feedback in threaded convos (like in Invision) yields much better feedback.

      0 points
    • Nelson TarucNelson Taruc, over 6 years ago

      Totally agree with Tim: If your client is mistaking wires for hi-fis, you're not educating them about your process adequately enough.

      We do a lot of usability testing with our wires, so "real fonts" (and real text data blocks) really forces us to have our information hierarchy polished enough to test with. Like Tim said, basic typography goes a long way toward seeing whether your information hierarchy is balanced or out of whack.

      Since I mainly work on mobile apps, I always wireframe with SF or Roboto or whatever the client is supplying if a custom font. Everything is grayscale as well. No images unless necessary, and if so, those are also grayscale.

      The other advantage of starting with the real app fonts is that when we start the high-fidelity process, both the visual designers and our clients have some sense of continuity between the wires and hi-fis so that it "feels" a bit continuous as you walk them through the design process. The mental leap isn't so wide.

      That said, at the end of the day it's really whatever works best for your process. Good luck!

      1 point
      • Sam Pierce LollaSam Pierce Lolla, over 6 years ago

        Totally agree re: the importance of type early on. That's why I was so interested in hearing from DN--I want to find something with proper x-height etc so we can drop in the real typeface w/o much changing.

        Interesting to hear so many suggestions for client expectation-setting. We're an internal product team, so are no clients, just "stakeholders".

        These are early concepts that might be shown to everyone in the org (~60, incl, engineers, sales people, etc) and a bunch of users too! Since we work with a very specific user (farmers) we need all the expert feedback we can get.

        We do quite a bit of education before distributing prototypes, but I've found people inexperienced with designers tend to ignore it no matter what you say. I'd rather make it stupid obvious so that more people can see and comment without instructions (just like the hi-fi work we do!)

        0 points
  • Sumul Shah, over 6 years ago

    I've had good luck with Tekton Pro for what you're describing. It has a ton of variants, so you can ballpark basic typography (see Tim's comment). And it looks obviously placeholderish without being unprofessional.

    2 points
  • Janis VegisJanis Vegis, over 6 years ago

    I don't know about the fonts, but one trick works good for me – I use a blue background and white text and lines. This makes the wireframes look like a blueprint although this one time client said that we should keep the blue background

    ¯\(ツ)/¯

    1 point
    • Sam Pierce LollaSam Pierce Lolla, over 6 years ago

      A nod to blueprints is a really cool idea--everyone knows what they look like, and they know they're just a "plan". Plus it shows the designer's role as more "architect" and less "interior designer"...

      Getting meta-design now, I like it!

      0 points
  • A CerveraA Cervera, over 6 years ago

    If you intend to use a geometric sans later, there's also Futura Handwritten

    1 point
  • Rolando MurilloRolando Murillo, over 6 years ago

    Noteworthy?

    1 point
  • Edgaras BenediktaviciusEdgaras Benediktavicius, over 6 years ago

    What about using a hand-drawn looking font together with sketchy vector lines and shapes for low-fidelity prototypes? What are your experiences on that? In that case, the overall prototype would feel like a sketch rather than a final product.

    1 point
    • Sam Pierce LollaSam Pierce Lolla, over 6 years ago

      I dig it. Any suggestions for hand-drawn typefaces?

      The sketchy vector lines styles is an interesting idea, any idea how that might work in Sketch? Currently constraining ourselves to black & white (no grayscale), uniform line widths, and just a few type sizes--works pretty well.

      We love Sketch for wireframes, esp since we can convert our low-fi to high-fi mocks without redoing a lot of work. Not really interested in Balsalmiq etc.

      0 points
    • florian fangohrflorian fangohr, over 6 years ago

      I made a quick finger drawn version of Helvetica (Handvetica ;) for that purpose. If you want it, get it here: http://2ttf.com/MUFzWAw2

      2 points
  • Tyler RenfroTyler Renfro, over 6 years ago

    Helvetica is great for low-fidelity prototypes.

    You could use Verdana also if it's screen based, Avenir is good too. I usually try to use something neutral or system fonts initially. That way i can focus on the type setting itself and hierarchy of information.

    Please stop using comic sans.

    1 point
  • Lauren GolembiewskiLauren Golembiewski, over 6 years ago

    I usually pick out a set of fonts that I really like to work with that are fairly generic - a serif and sans serif. And if it's a web project, I stick to google fonts. This site has some great combos.

    Usually with clients/stakeholders, I concentrate on the content and not discussing the font at all, and make it clear that it's really not useful to discuss "fonts & colors" at this time. And I always use real text, because I always write the initial interface and give clients guidance about how to critique and edit the content.

    I think if you are sketching digitally, redacted font makes sense, just like sketching on paper. If a stakeholder wants to see/approve sketches, I try to schedule a meeting to quickly whiteboard ideas with them. I find it's more effective way to share ideas, in low fidelity. Plus, it involves them so they feel ownership.

    0 points