The Livetyping Blog

  • The UX Designer's HTML Cheat Sheet

    While I was creating my Livetyping course, I realized that HTML5 might look a bit intimidating to some. It has over 120 different tags, which is a lot to get your head round. But in practice, when making interactive HTML prototypes, I only ever use a small subset of these.

    So I made a cheatsheet containing just these commonly-used elements. Enjoy!


    image



    If you've got any suggestions for improving this cheat sheet, I'm @martinpolley on Twitter.



    Livetyping is an online course that teaches UX designers how to make interactive, clickable prototypes using HTML, CSS, and Javascript.

  • Should Designers Be Able to Code?—Cennydd Bowles

    In my recent post about why UXers should learn to prototype in HTML, CSS, and Javascript, I missed out the one person whose opinion prompted me to write the post in the first place.

    In April, Andrew Travers and Matthew Solle interviewed Cennydd Bowles for the London IA podcast. They asked him whether he is "a unicorn that codes" and whether he thinks that it is something that's important. Here are the edited highlights of his reply. (In the original audio, this bit is from 17:44–20:18.)

    I firmly believe that it's a strong benefit to a designer who is working on the web to know HTML and CSS. They're not difficult, they really aren't. Javascript optional. If you know the basics of Javascript, if you know how to, you know, thrash around a bit of jQuery, then that's definitely going to be helpful for prototyping and so on.

    There are two reasons, I think, why I think it's useful to be able to code as a designer in our domain. The first is it gives you an understanding or an appreciation of what's possible. And equally, what might be possible in six months' time, or what might be possible if you're able to kind of poke the developers hard enough and say "Go on—you can do it! Let's find an innovative solution."

    The flipside of that is also that you know enough to call a developer's bullshit. I love developers and I miss working with them as closely as I used to. But I think they would admit that occasionally they can be a bit obstructive, if they feel they've been left out of the loop or if they're being forced to, you know, do something unreasonable in a silly timescale. And there can be sometimes a strain of the developer community that says "No—can't do that. Nope, not possible. Have to go away and do it again."

    If you know your stuff, and you say "Well, actually, I've got a jQuery plugin here or something that can do that for you," I've already saved you half the effort, then sometimes that can help realize your design—get past that kind of resistance.

    The second reason why I think it's desirable to be able to code is simply just because it helps the design process. Particularly for interaction design, I'm a big fan of trying to design within the medium. Now I don't mean design in the browser—that's maybe something we could talk about later—but I'm not a big fan of that, in terms of visual design and layout and so on. But I am a big fan of it in terms of the interaction design—how things respond to input.

    And I think the sooner you can get that kind of design into its native state, be that on an iPhone, or on a telly, or in a web browser, then you can get a better understanding for whether it feels right, because so much of interaction design is about feel and rhythm and flow. The only way really to get that in front of people is to try and prototype it yourself. And I find HTML prototyping really adds something to what I can do. It helps me make the right design decisions, because I can get those interactions out, I can get them tested, and then I can iterate on those quickly.



    Livetyping is an online course that teaches UX designers how to make interactive, clickable prototypes using HTML, CSS, and Javascript.

« Page 14 / 18 »