If I needed a quick 5-minute lesson on how to vector properly,

>>313252
http://bezier.method.ac/

>>313254
This game is pretty hard, I don't even know what I'm doing.

File: Screen Shot 2017-07-01 at 15.17.05.png (39KB, 407x298px) Image search: [Google]

39KB, 407x298px

If I need a quick 5-hour lesson on UI design, where would I find it?

I'm tired of designing stuff using CSS, I want to draw sketches using wacom, but I have no idea where to start.

>>313252
Pffff. Depends on what you want to do.

>>313258
I want to vector screenshots of an anime with text over it.

File: Screenshot-1498917036.png (2MB, 1920x1040px) Image search: [Google]

2MB, 1920x1040px

>>313257
you use illustrator (or maybe sketch if apple homosex) to make layouts, export svg assets etc

in AI use symbols and graphic styles to maintain assets that repeat a lot

use global swatches so you can quickly change color scheme of the entire page / ui, even shit like details in background patterns

figure out how to make a typical 1170px 12col twitter bootstrap grid for using as guides

use clipping masks to insert raster images

for previews export PNG files as artwork instead of type so the raster stuff and gradients don't look like shit

enable snapping to pixels, change illustrator grid density to 1px and make sure that the strokes are inside of the shapes

i've never used my wacom for work in illustrator, especially web design though

File: Screen Shot 2017-07-01 at 16.10.03.png (74KB, 775x623px) Image search: [Google]

74KB, 775x623px

>>313261
Thanks for the tips, but you are talking about making real "production-ready" design.
What I need is quick layout sketching — shitty pictures like this. I lack both drawing skills and UI knowledge, so my apps look pretty terrible. Re-designing them by rewriting CSS and templates takes a lot of time.

File: 1498744661702.gif (1MB, 400x225px) Image search: [Google]

1MB, 400x225px

>>313262
for most part i do the "sketching" of layouts in illustrator

if i'm going for something weird that i can't quite conceive in my mind i use wacom + photoshop with like 3000x3000px artboard, 50% gray background and a 1-2px white brush

or just a regular pen and a4 paper

another really important principle of planning UI is to not attempt completely reinventing the wheel. your stuff probably looks and works weird because you are trying to plan out everything yourself, even though there are good established practices and existing layouts out there.

use pajeetware office onenote to collect screen clippings of as many as you can website or app UI section designs that you like (it has a built in screen shot taking feature)

then arrange those pictures the way you want so they structurally form something like the final UI

then go for something more production ready in AI

File: f5e3a9fcd2f1a1170d748c6fb4b27f2982a32421d635bb45590a36afe93c250f.png (822KB, 559x577px) Image search: [Google]

822KB, 559x577px

>>313265
also, you can learn a few things regarding good UI practices from here:

https://www.nngroup.com/articles/

this page isn't too bad either:

https://www.usability.gov

File: 1492045839008.jpg (8KB, 240x237px) Image search: [Google]

8KB, 240x237px

>>313268
also, GNOME design wiki give a good insight of how new UI designs come to life

https://wiki.gnome.org/Design/

>>313265
>>313268
>>313269
Thank you, plenty of stuff to read.
>usability.gov
That one surprised me. Never thought they even care about usability.

>>313252
there are some channels on youtube that do stuff in illustrator.
mostly logos. But you can learn how they do stuff.

https://www.youtube.com/channel/UCDUBN0Zeou0FVaoaAlqgHQA

https://www.youtube.com/channel/UCIp9sEZiv36cDG7cEnrVU7Q

>>313270
gov gives mountains of fucks about baseline usability, because they have a legal mandate to make all services and requirements accessible to all citizens. if you have a client who can't figure out your site, it's one lost sale. if the government has an illiterate deaf sri lankan green card holder who can't figure out the 1040, it's either find a tamil sign language interpreter in his area with accounting certs, get roasted by the /pol/-beerfart REEEE BROWN IMMIGRANT NOT PAYING TAXES brigade, or go through a multi-year horrendously complex lawsuit with the ruing inevitably to be "either make it comprehensible to him or he doesn't have to pay".

this is distinct from efficient, pleasant usability for your average user. but it's still definitely something that a lot can be learned from, because more of your "normal" users in fact have issues than you think.

>>313259

I use flash, and the line or pen tool.
Import image, lock layer, new layer, start tracing.

>>313255
1 click for creating node, then press alt for editing the controler while keeping firs click pressed, you will want to keep controllers parallel to next path

youtube