5 ms·

How to Become a UX Designer

75 points by kylejlarson 10y ago

alexgotoi 10y ago
Recommend any tool for wireframing? (for beginners)
- redorb 10y ago
  I have found https://balsamiq.com/ https://balsamiq.com/ to be a great way to move fast; I prefer to work at first in the 'cartoony' mode of crooked lines etc.. then present straight edged wire frames to the stake holders.
- darushimo 10y ago
  check out balsamiq. and perhaps go through their tutorial: http://www.uxapprentice.com http://www.uxapprentice.com. Sketch is a more powerful tool (i use it most of the time now), but balsamiq is a great place to start.
- 6DM 10y ago
  I really love Precursor, you don't need an account to get started and it's simplicity makes it really quick to throw something together. https://precursorapp.com/ https://precursorapp.com/
- diggan 10y ago
  Nothing beats pen and paper. Probably you already have it available, it lends itself to be low-fidelity (and high-fidelity if you have an artistic side) and very easy and fast to use.
  - pault 10y ago
    There's also this: http://www.uistencils.com/ http://www.uistencils.com/ Full disclosure: founded by an ex-coworker.
- harkmylord 10y ago
  Sketch / Omnigraffle.
- RickS 10y ago
  Sketch is my personal favorite. Balsamiq can work and is commonly recommended, but IMO turn off the "hand drawn" effects. They're great for demoing rough things to clients in a way that says "this isn't final", but if you're actually trying to lay out a page at 100% resolution they're going to give you a wildly wrong sense of what things are what size.
  - bigtunacan 10y ago
    I see Sketch put out there a lot for this and this is probably just my lack of knowledge (full disclaimer - not a UX designer), but I just have never understood how people are using Sketch for this? My understanding of Sketch is that it is an alternative to Photoshop for hi-fidelity designs. I don't understand is how are people using Sketch as an efficient wireframing tool in the early prototype phase as an alternative to something like Axure or Balsamiq?
    - RickS 10y ago
      Sketch is less like photoshop and more like illustrator, with all the non-UI stuff shaved off. Sketch doesn't do nearly any of the advanced photo retouching stuff. It's mostly vector, mostly shapes. As flat UI gets more popular, sketch can increasingly do all the lifting on a hi-fi design, but depending on how crazy you get, photoshop is still king for that (anything involving texture, noise, pattern fills, etc has to be photoshop) If you don't feel like learning a "real" workflow, balsamiq is quick because it comes with things like libraries of premade UI elements that you can just drop in without much of a learning curve. If you're willing to learn sketch as a serious piece of software, it's very fast. Every design project I've worked on in the last 3 years or so has been 90% sketch. I drop back into photoshop for photo editing, or illustrator for advanced illustration (things with really complex paths or layer orders). If you've got the interest, revisit sketch and try to put comparisons to photoshop out of your mind - sketch is UI first like photoshop is photo first, and it makes a big difference.
      - bigtunacan 10y ago
        Thanks for the feedback. I'll have to give the trial version a spin and give it more of a chance. I mostly use Balsamiq for mocking things up since it's fast, but often I would like something that doesn't look so rough.
- macandcheese 10y ago
  You should ideally be able to skip using these tools if you are proficient enough in basic html/css. It's easier to share a deployed static website with stakeholders, easier to immediately see media queries in action, you can use partials, etc. I personally use Middleman as it's dead quick to get up and running. Once you establish a library of components you can plug and play in real code just like you could with these tools - with a little head start on building it out. Once you get in the habit of building static sites as wireframe prototypes it's hard to go back to "wireframe only" tool.
- kylejlarson 10y ago
  I usually start with pen/paper because I find it the fastest to get a bunch of ideas out. Then from there I'd go with whatever tool you think will be most efficient. I personally use Balsamiq because it's really quick & easy (drag/drop) and then if my first wireframes need drastic changes it's still quick to change. I'm then taking these wireframes to clients or teammates to review and improve before focusing on design. If you're going to end up using a design tool for a high-fidelity version you can use Sketch or Illustrator for wireframes, the only downside is getting too focused on pixel perfection at an early stage. I like keeping the process pretty flexible, sometimes you can pass a wireframe to a front-end dev if you've got a solid style guide, other times you want a high-fidelity design or a prototype.
- TACIXAT 10y ago
  Webflow - Really easy for mocking a site up, as well as more advanced design. Outputs the best code I've seen, so it could be used in production. https://webflow.com/ https://webflow.com/ Pop - iOS app. Draw on paper, take photos, mock up the page interaction. Nice for early demos. https://popapp.in/ https://popapp.in/
- arstin 10y ago
  Atomic is has been my choice for a long time now and they keep making it better. It's best used as the UI flow tool, complemented with something like Pixelmator and Sketch for asset creation and visual detail work. If I have to show other people very early stage ideas I still use Balsamiq for the artificial lo-fi effect, but with other designers who have more control over their imaginations I'll just throw something together in Atomic.
- cobalt 10y ago
  Not sure if i'd call it a beginners tool but I much prefer just building things out in HTML. I prefer to have exacting measurements (something is 50% wid or whatever) and it's very easy to update man items from say a list after first iteration. A front end templating system helps a lot w/ this.
- goertzen 10y ago
  https://quant-ux.com/ https://quant-ux.com/ is very promising . It allows for input fields and some basic logic, which can be pretty painful/impossible in other tools (e.g. invision, marvel,etc)
jordache 10y ago
Out of the UX skillset listed: conducting user research, site architecture, wireframing, prototyping, user testing, UI designing Other than research and site architecture, those are the same things a good broadly skilled front end developer would/could/like to do as well.
- macandcheese 10y ago
  Or a good broadly skilled designer ;)
  - wmeredith 10y ago
    Yep. That's how I got here (UX Manager).
clavalle 10y ago
"you may not have to code for a UX job, but it really helps you get a broader perspective and can improve your work" If you are a UX designer and cannot code up your ideas it is like being an architect that knows nothing about materials and construction.
- arstin 10y ago
  I like the analogy, but I'm not sure how you intended it since I think it can reasonably make different points. It can surely help if an architect knows about material and construction (see, for example, the work of Christopher Alexander's group who relied on knowledge of materials and construction to wildly reduce costs while increasing quality). But it's also plainly true that any architect is going to be dependent on skilled contractors. Might be fun to read or write an article exploring all the nuances of the analogy. Speaking as a UX designer by title and inclination who has to spend most of his time as a full stack dev by economic necessity, I've come to the view that in an ideal world most designers ought not have to code. It works well for me, since I'd personally get bored only implementing or only designing. But every week I feel the tension between very different demands on my limited energy, ability, and time. I feel how I almost subconsciously compromise my design work to get it to something I can implement in a realistic time, how the fact I've invested effort into the implementation very subtly pressures me to not make serious design changes, how my figuring out a cool coding trick or library encourages me to add it to my design when it's actually a superfluous distraction (see the vast majority of products by UI engineers who care about design). To be honest, I'm hard pressed to say how being able to build essentially whatever I want has helped my design work, especially now that there are pretty good, quick to use prototyping tools like Atomic. Maybe it has in such a deep way that I don't even notice it, but I'm skeptical! :) That said, I do personally agree with the author that, all else equal, some coding knowledge is a good thing if only to help in communicating with and empathizing with developers.
  - clavalle 10y ago
    Having hired a UX designer that had never coded, it was a very frustrating experience. I enjoyed the high-touch with customers approach that they brought to the table but when it actually came to implementation it was as if I brought an astrologer to an astronomy meeting -- a lot of the same words were said but neither knew what the other was talking about. There was just no sense of proportion on the UX side. I am not saying a UX designer needs to code in the course of doing their UX work, but I do think they need to know how and have had some experience in it. Otherwise, the distance between saying something and doing it is too great.
byandyphillips 10y ago
No matter what tool you use for UX Design, just remember it's not the application knowledge - it's your thinking, reasoning, decision making, and attention to detail that makes a great UX Designer. Axure RP is my favorite application for wireframing, prototyping, and documenting UX decisions.
- awesomerobot 10y ago
  During Q&A sessions at conferences someone will inevitably ask: "Which applications do you use for your work?" — which is probably the least helpful question you can ever ask if you want to improve as a designer. There seems to be a segment of beginners in many professions that perceives the competency gap as purely a software solution.
  - mruniverse 10y ago
    Questions about tools are usually innocuous. It gives some insight. Experienced devs do it too. Is that team using React? Are you using Go? Gives you an idea of where people are going. What other tools are available, how easy it will be to get help, etc.
  - Steeeve 10y ago
    I always ask people because the tools I have discovered are not quite what I'm hoping for. e.g. I haven't seen a rapid prototyping tool yet that bridges the gap between powerpoint and coding well. (I hadn't actually found Axure yet, but it looks promising)
    - ethanbond 10y ago
      I think I agree with this sentiment. I'm really tired of the prototyping tools oriented around making ridiculous little micro interactions with just the amount of bounce or spring. That should be built by understanding spring physics and going and sitting next to your implementing engineer. The hard stuff to prototype is what I think you're alluding to, larger navigational or IA types of hypothesis testing. I also haven't found much there...
amelius 10y ago
And remember: "good artists copy, great artists steal".
deleted 10y ago
[deleted]
artur_makly 10y ago
Balsamiq -> Invision. done
mch82 10y ago
What are UX designers for IoT or devices (hardware + software) called?
mch82 10y ago
Industrial engineers are trained to study how people work and then design efficient workflows and tools to perform that work. How come IEs don't seem to be bigger players in UX?

75 points by kylejlarson 10y ago

alexgotoi 10y ago

Recommend any tool for wireframing? (for beginners)

redorb 10y ago
I have found https://balsamiq.com/ https://balsamiq.com/ to be a great way to move fast; I prefer to work at first in the 'cartoony' mode of crooked lines etc.. then present straight edged wire frames to the stake holders.
darushimo 10y ago
check out balsamiq. and perhaps go through their tutorial: http://www.uxapprentice.com http://www.uxapprentice.com. Sketch is a more powerful tool (i use it most of the time now), but balsamiq is a great place to start.
6DM 10y ago
I really love Precursor, you don't need an account to get started and it's simplicity makes it really quick to throw something together. https://precursorapp.com/ https://precursorapp.com/
diggan 10y ago
Nothing beats pen and paper. Probably you already have it available, it lends itself to be low-fidelity (and high-fidelity if you have an artistic side) and very easy and fast to use.
- pault 10y ago
  There's also this: http://www.uistencils.com/ http://www.uistencils.com/ Full disclosure: founded by an ex-coworker.
harkmylord 10y ago
Sketch / Omnigraffle.
RickS 10y ago
Sketch is my personal favorite. Balsamiq can work and is commonly recommended, but IMO turn off the "hand drawn" effects. They're great for demoing rough things to clients in a way that says "this isn't final", but if you're actually trying to lay out a page at 100% resolution they're going to give you a wildly wrong sense of what things are what size.
- bigtunacan 10y ago
  I see Sketch put out there a lot for this and this is probably just my lack of knowledge (full disclaimer - not a UX designer), but I just have never understood how people are using Sketch for this? My understanding of Sketch is that it is an alternative to Photoshop for hi-fidelity designs. I don't understand is how are people using Sketch as an efficient wireframing tool in the early prototype phase as an alternative to something like Axure or Balsamiq?
  - RickS 10y ago
    Sketch is less like photoshop and more like illustrator, with all the non-UI stuff shaved off. Sketch doesn't do nearly any of the advanced photo retouching stuff. It's mostly vector, mostly shapes. As flat UI gets more popular, sketch can increasingly do all the lifting on a hi-fi design, but depending on how crazy you get, photoshop is still king for that (anything involving texture, noise, pattern fills, etc has to be photoshop) If you don't feel like learning a "real" workflow, balsamiq is quick because it comes with things like libraries of premade UI elements that you can just drop in without much of a learning curve. If you're willing to learn sketch as a serious piece of software, it's very fast. Every design project I've worked on in the last 3 years or so has been 90% sketch. I drop back into photoshop for photo editing, or illustrator for advanced illustration (things with really complex paths or layer orders). If you've got the interest, revisit sketch and try to put comparisons to photoshop out of your mind - sketch is UI first like photoshop is photo first, and it makes a big difference.
    - bigtunacan 10y ago
      Thanks for the feedback. I'll have to give the trial version a spin and give it more of a chance. I mostly use Balsamiq for mocking things up since it's fast, but often I would like something that doesn't look so rough.
macandcheese 10y ago
You should ideally be able to skip using these tools if you are proficient enough in basic html/css. It's easier to share a deployed static website with stakeholders, easier to immediately see media queries in action, you can use partials, etc. I personally use Middleman as it's dead quick to get up and running. Once you establish a library of components you can plug and play in real code just like you could with these tools - with a little head start on building it out. Once you get in the habit of building static sites as wireframe prototypes it's hard to go back to "wireframe only" tool.
kylejlarson 10y ago
I usually start with pen/paper because I find it the fastest to get a bunch of ideas out. Then from there I'd go with whatever tool you think will be most efficient. I personally use Balsamiq because it's really quick & easy (drag/drop) and then if my first wireframes need drastic changes it's still quick to change. I'm then taking these wireframes to clients or teammates to review and improve before focusing on design. If you're going to end up using a design tool for a high-fidelity version you can use Sketch or Illustrator for wireframes, the only downside is getting too focused on pixel perfection at an early stage. I like keeping the process pretty flexible, sometimes you can pass a wireframe to a front-end dev if you've got a solid style guide, other times you want a high-fidelity design or a prototype.
TACIXAT 10y ago
Webflow - Really easy for mocking a site up, as well as more advanced design. Outputs the best code I've seen, so it could be used in production. https://webflow.com/ https://webflow.com/ Pop - iOS app. Draw on paper, take photos, mock up the page interaction. Nice for early demos. https://popapp.in/ https://popapp.in/
arstin 10y ago
Atomic is has been my choice for a long time now and they keep making it better. It's best used as the UI flow tool, complemented with something like Pixelmator and Sketch for asset creation and visual detail work. If I have to show other people very early stage ideas I still use Balsamiq for the artificial lo-fi effect, but with other designers who have more control over their imaginations I'll just throw something together in Atomic.
cobalt 10y ago
Not sure if i'd call it a beginners tool but I much prefer just building things out in HTML. I prefer to have exacting measurements (something is 50% wid or whatever) and it's very easy to update man items from say a list after first iteration. A front end templating system helps a lot w/ this.
goertzen 10y ago
https://quant-ux.com/ https://quant-ux.com/ is very promising . It allows for input fields and some basic logic, which can be pretty painful/impossible in other tools (e.g. invision, marvel,etc)

jordache 10y ago

Out of the UX skillset listed: conducting user research, site architecture, wireframing, prototyping, user testing, UI designing Other than research and site architecture, those are the same things a good broadly skilled front end developer would/could/like to do as well.

macandcheese 10y ago
Or a good broadly skilled designer ;)
- wmeredith 10y ago
  Yep. That's how I got here (UX Manager).

clavalle 10y ago

"you may not have to code for a UX job, but it really helps you get a broader perspective and can improve your work" If you are a UX designer and cannot code up your ideas it is like being an architect that knows nothing about materials and construction.

arstin 10y ago
I like the analogy, but I'm not sure how you intended it since I think it can reasonably make different points. It can surely help if an architect knows about material and construction (see, for example, the work of Christopher Alexander's group who relied on knowledge of materials and construction to wildly reduce costs while increasing quality). But it's also plainly true that any architect is going to be dependent on skilled contractors. Might be fun to read or write an article exploring all the nuances of the analogy. Speaking as a UX designer by title and inclination who has to spend most of his time as a full stack dev by economic necessity, I've come to the view that in an ideal world most designers ought not have to code. It works well for me, since I'd personally get bored only implementing or only designing. But every week I feel the tension between very different demands on my limited energy, ability, and time. I feel how I almost subconsciously compromise my design work to get it to something I can implement in a realistic time, how the fact I've invested effort into the implementation very subtly pressures me to not make serious design changes, how my figuring out a cool coding trick or library encourages me to add it to my design when it's actually a superfluous distraction (see the vast majority of products by UI engineers who care about design). To be honest, I'm hard pressed to say how being able to build essentially whatever I want has helped my design work, especially now that there are pretty good, quick to use prototyping tools like Atomic. Maybe it has in such a deep way that I don't even notice it, but I'm skeptical! :) That said, I do personally agree with the author that, all else equal, some coding knowledge is a good thing if only to help in communicating with and empathizing with developers.
- clavalle 10y ago
  Having hired a UX designer that had never coded, it was a very frustrating experience. I enjoyed the high-touch with customers approach that they brought to the table but when it actually came to implementation it was as if I brought an astrologer to an astronomy meeting -- a lot of the same words were said but neither knew what the other was talking about. There was just no sense of proportion on the UX side. I am not saying a UX designer needs to code in the course of doing their UX work, but I do think they need to know how and have had some experience in it. Otherwise, the distance between saying something and doing it is too great.

byandyphillips 10y ago

No matter what tool you use for UX Design, just remember it's not the application knowledge - it's your thinking, reasoning, decision making, and attention to detail that makes a great UX Designer. Axure RP is my favorite application for wireframing, prototyping, and documenting UX decisions.

awesomerobot 10y ago
During Q&A sessions at conferences someone will inevitably ask: "Which applications do you use for your work?" — which is probably the least helpful question you can ever ask if you want to improve as a designer. There seems to be a segment of beginners in many professions that perceives the competency gap as purely a software solution.
- mruniverse 10y ago
  Questions about tools are usually innocuous. It gives some insight. Experienced devs do it too. Is that team using React? Are you using Go? Gives you an idea of where people are going. What other tools are available, how easy it will be to get help, etc.
- Steeeve 10y ago
  I always ask people because the tools I have discovered are not quite what I'm hoping for. e.g. I haven't seen a rapid prototyping tool yet that bridges the gap between powerpoint and coding well. (I hadn't actually found Axure yet, but it looks promising)
  - ethanbond 10y ago
    I think I agree with this sentiment. I'm really tired of the prototyping tools oriented around making ridiculous little micro interactions with just the amount of bounce or spring. That should be built by understanding spring physics and going and sitting next to your implementing engineer. The hard stuff to prototype is what I think you're alluding to, larger navigational or IA types of hypothesis testing. I also haven't found much there...

amelius 10y ago

And remember: "good artists copy, great artists steal".

deleted 10y ago

[deleted]

artur_makly 10y ago

Balsamiq -> Invision. done

mch82 10y ago

What are UX designers for IoT or devices (hardware + software) called?

mch82 10y ago

Industrial engineers are trained to study how people work and then design efficient workflows and tools to perform that work. How come IEs don't seem to be bigger players in UX?