Hacker News Reader

Hacker News

Comment by InGodsName | Hacker News Reader

Full thread

InGodsName

Hey UI/UX experts, I am wondering how should you go about mastering UI/UX of mobile app/web app.

I've a girlfriend who wants to start in this area but is pretty clueless. Can anyone please provide a path to follow?

Is this good:

1. Learn UI design in Paint.net/MS Paint

2. Read book on color theory, typography, whitespace

3. Design in dragdrop software like photoshop/illustrator

4. Learn CSS and recreate your design in CSS.

5. Lean some JavaScript for animation and visualization/charts etc...

Is this a decent path? What software tools/books do you recommend for a new self learning student?

View on HN

My advice is to skip 1 and 2.

She should learn Photoshop/Illustrator (or equivalent software) and recreate famous interfaces. (Facebook, Google Docs, Gmail, etc.) If she can get them to be pixel perfect, she has enough technical skill and can start exploring.

She should work on industry tools right away. She should skip theory - she'll learn more from doing. She can go back to theory if she feels like she's missing something.

I'd actually advise #2, but I'd do it at the same time as the others. Why? Because I did a lot of design classes and studying and I really, really wish I had taken typography.

The designers that works with fonts well make the nicest and most pleasing designs. Just copying others will ensure you can copy well. Understanding the theory behind those designs will allow you to make anything you want, and do it well.

100% not MS Paint or Paint.net...

Tell her to download Adobe XD, it's free right now and that's the standard in the industry.

#3, I wouldn't call that dragdrop but at this point, it'd make more sense for her to learn a vector program for the things that Adobe XD can't do. That would require Illustrator and would be a better use of her time.

For #4 you will have to have a good understanding of HTML to be able to do anything with CSS- that has to be the foundation before she learns CSS.

There isn't really a standard at the moment in my opinion, though from personal experience Sketch + InVision are the most commonly used. Figma is picking up a lot of interest. I've never seen a UI designer use Adobe XD.

Skills learnt in one tool should be fairly transferable, so it doesn't matter too much. Just don't use photoshop.

1. Don't use anything Microsoft, use Figma or XD. Figma is free for individuals, and XD is part of Creative Cloud.

2. This is a good start, but if she wants to get into UX she should start by reading articles at Neilsen Norman[0], UX Planet[1], or Interaction Design

3. See #1, although frankly it pays to do wireframes on paper before even touching a mouse/trackpad.

4. I would say at this point that HTML/CSS is a "nice to have" skill. I believe that Figma now contains a basic interaction design suite (i.e. tap, swipe, scroll) that lets you go between different screens.

5. I'd say to stick with learning how/when different charts should be used rather than trying to jump into something like HighCharts or D3.

[0] https://www.nngroup.com/articles/

[1] https://uxplanet.org/

[2] https://www.interaction-design.org/literature

XD is also free.

There are two aspects, the tools and the knowledge. What people recommend above will just teach UI (How to build), but not UX (why to build it this way and how to approach the problem).

For the tools, it's like in software engineering, you need pick the your "stack" (which wil depends on the goals and deliverable). Do NOT use Paint / Photoshop to build mockups, you will waste your time and hate your job. Get a Sketch License, find a good tutorial online (Udemy and co).

To master the field, study the fundamentals: cognitive sciences, human factors, cognitive ergonomics and design patterns, the goal is to understand how the brain works, perception, memory, decision making, limits...

Basic computer science is going to give an edge.

Basic knowledge in experiment design will be necessary to test your design with rigor (UX Researcher).

Would suggest learning some usability as well. Don't Make Me Think is a good one. Also, read up on Nielsen Group's publications

I'd say skip step 1, there is lots of cheap and better UI design tools out there (see Sketch, Figma, et al), and they are very easy to learn.

Start by trying to replicate UI designs in the wild, it is incredible helpful! It helps you develop your taste and understanding of relationship between different elements, spacing, layout, grids… soon enough you start to see patterns emerge, which you can use when working on your own designs.

Focus on learning typography: it’s no secret that UI is mostly typography, if you get it right that is the job! Get a good book such as “The Elements of Typographic Style” by Robert Bringhurst – although is focused on print design, the core principles are transferable to digital.

Hope that helps!

She could probably do #1 on paper or in step #3. I'm using Figma in step #3 recently and like it a lot. Step #2 is critical and ongoing and would be a much longer list of books, I'd think.

1. Jump straight to Figma.

2. Yes, and also grids and Google's Material Design. The MD spec is the most coherent document on a design language I have ever read. While it's not necessary to follow it to the letter, studying it would be definitely helpful.

3. Figma is better (and free for a single user).

Reply on news.ycombinator.com