Got you!

Designing with Sketch

Ali Spittel ・ Feb 3 '18 ・ 4 min read

#design #frontend

A Web Design Crash Course: From one non-designer to another

Ali Spittel ・ Aug 20 '18 ・ 9 min read

#css #design #beginners #webdev

Also, Refactoring UI in all its formats is incredible.

Something I saw on Twitter the other day that is pretty cool for playing with color palettes: palettte.app/

+1 on Refactoring UI. Probably the best design resource I've seen online.

Atomic Design is also a good read. Don't feel like you need to be dogmatic about it's principles though. It's just a useful way to think about design systems.

This is a great article about using color in UI design by Erik Kennedy, who also has a course called Learn UI Design. I can't vouch for the course as I haven't taken it, but his blog posts are high quality so it's probably good.

Sketch and Figma both have really good docs so for learning the tools themselves that's where I would start.

As far as fundamentals go, most of the web is text so Butterick's Practical Typography is super helpful. And while there are obviously differences (such as designing for multiple screen sizes) between print and web design, the fundamentals (typography, hierarchy, color theory, etc.) all carry over so feel free to read design books and tutorials for print as well.

Don't sweat becoming a Figma/Sketch/Photoshop wizard if you're not looking to switch careers. Knowing shortcuts and in-depth features is great to be more efficient but if you're learning to broaden your skill set it's more important to know why a design works than how to use Sketch symbols. Everyone will probably be using something else in 5 years anyway.

At the end of the day learning design is like learning development, the more you actually make stuff the better you'll get. Learning by reading is great but practice is key.

Hi!
Figma has great videos on their Youtube channel
And Design for hackers designforhackers.com/ is a great newsletter for us as well

As developer, designing from scratch has been hard for me always. What worked for me when I wanted to learn about some new design software is to start getting some existing work from some designer. You can download some templates and start discovering how people use this softwares. You can have some design and start playing with it. Changing properties to elements, changing sizes, colors, borders, adding your own elements based on another ones, ...
I recently updated my tools. I was on Fireworks CS5 for a loooong time. This software worked for me very well, simple, easy and very effective. Recently tryied Figma and Adobe XD and definitely, XD is my favourite one. It seems very simple for me and fits my needs very well having just the necessary features. I find easy to move from my mockup to a real web. If you are on MAC, I think Sketch is the more generalised option.

Regarding resources, Refactoring UI is a great guide to improve designing skills for developers non designers.

Don't start with learning apps. You will learn apps, but not how to design a product.

Learn to see, first. Learn the fundamentals.

Drawing

You don't need to be awesome at drawing, but doing so trains your eye better than anything else.

My professor from Uni-Days wrote a thing to get started:

A quick beginner’s guide to drawing
medium.com/personal-growth/a-quick...

He also did a TEDx-Talk on a related topic:

How drawing helps you think
youtube.com/watch?v=ZqlTSCvP-Z0

Typography

Get any book on typography-basics and learn what makes a readable experience, a good composition and layout. Most websites, apps, digital products boil down to typography.

Related:
Gestalt-Principles
creativebloq.com/graphic-design/ge...

Product-Design

Modern apps and websites are closer to product-design, than to graphic-design. Learn what makes a product enjoyable and usable.

Do you know why you want to design things?

Sarah Drasner's Design For Developers course on Front End Masters!

Asking for resources for learning design is kind of a broad question.
If you want to focus on designing landing pages, or this is your point of entry, you should just get right into it.

Download a trial of Photoshop, or Sketch, tools are not really that relevant. It just depends on how much time you want to spend expanding your skill set.

Get inspired a lot, browse a lot of websites, and copy whatever you feel like fits.

Some great examples of landing pages for frameworks etc.:
mustard-ui.com/
atom.io/

Frameworks are usually a really good place to get inspired in regards to how the pages are designed - what my tool does, how it can help you - remember, most people are drawn to vision, not the exact content of it.

Get inspired with these as well (it's what I use all the time):
theperfectgrid.tumblr.com/
happywebdesign.tumblr.com/
creativeboom.com/inspiration/graph...
httpster.net/2018/sep/
graphicgraphic.club/

Not all of these are web design focused, but sometimes (I find, anyway) even a single image or a color can get me going with a project.

Also, what is extremely important, learn a bit about colors and how users respond to different combinations of them.
A great resource for color paletes that, again, I use all the time:
medium.com/weekly-color-inspiratio...

(last) Also, if you have a colour that you'd like to focus on and expand, check these to help you gather complementary colors:

hihayk.github.io/scale/#4/6/50/80/...
coolors.co/

If you need any help with regards to these tools or otherwise, don't hesitate to message or reach out on Twitter.