I am typically a mobile/static web developer, and I fully admit that I am not a designer. If you give me a mockup, I can pretty well create a website or Android app to match, but ask me to make the mockup and I don't even know where to start. But I want to be able to do design, even at just a basic level.
Does anyone have any good resources for learning design? I'm wanting to learn Figma, but I've never used these kinds of design tools and I don't even really know what the different buttons do and how to actually use them, so some tutorials on design tools, in general, would be great. And then, of course, articles on the fundamentals of design.
Specifically, my main goal is to create a new landing page for Orchid and revamp its documentation theme, so resources more focused on responsive web and landing pages are appreciated. Thanks!
Top comments (11)
Hi!
Figma has great videos on their Youtube channel
And
Design for hackersdesignforhackers.com/ is a great newsletter for us as wellGot you!
Designing with Sketch
Ali Spittel ・ Feb 3 '18 ・ 4 min read
A Web Design Crash Course: From one non-designer to another
Ali Spittel ・ Aug 20 '18 ・ 9 min read
Also, Refactoring UI in all its formats is incredible.
Thanks for the posts, they look really helpful!
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.
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.
+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.
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.
Sarah Drasner's Design For Developers course on Front End Masters!
Something I saw on Twitter the other day that is pretty cool for playing with color palettes: palettte.app/
Do you know why you want to design things?
I'm primarily a mobile and front-end web developer, and I really like my stuff to look nice. I would say that I've got an eye for design, I know and really appreciate well-designed apps and websites, but I really struggle making my own stuff look nice if I don't have exact wireframes to work from.
I really want to be able to sit down, plan out a design for my projects, and build out a good final product rather than relying entirely on wireframes and CSS frameworks that all look the same.