Design and UX March 24, 2020

Do I have to learn Photoshop / Sketch to learn design?

Ali @aliakhtar

I'm a backend developer, trying to learn enough design that I can start to design my own projects. I'm following along on a course called Design for Developers: https://frontendmasters.com/courses/design-for-developers/

In it, she uses a lot of Photoshop. Now, I'm fine w/ learning CSS, and learning the basics of design (color theory, layouts, etc), buut I don't want to have to learn Photoshop or Gimp or another such tool. It seems like it'd take me a loong time to learn them.

Do most designers recommend learning them? Or is it possible to use another / easier graphics tool for mocking out things, then converting them to CSS?

  1. 4

    Don't use Photoshop for UX/UI design, it was never meant for this, just used because no other solutions were good enough at the time.
    Figma or Sketch are your go-to tools. I personally use Figma and love it with all my heart but that's me (plus it's free).

    On designing itself, I would recommend at least a rough version of your mockups before going to the front-end itself. Hardcoding things is going to cost you time (in my experience), and will almost never be worth it in my experience. Figma also offers a lot of plugins and features to speed up designing process and ease the design-to-dev transition, especially Styleguides and Components. Plus, you can start easily using already-existing design systems that should be enough to kickstart you on your way to design.

    Lmk if you need more infos!

  2. 4

    First of all, I found using Affinity Designing more natural than any Adobe products.

    Besides that, most of my design right now happens on the fly. Write a bit of front end code, evaluate, trash it, start over and make something great. I doubt I would work faster when I would create a design beforehand as the risk of overdesigning things which I would be unable to implement on the backend is too real.

    1. 1

      I can agree on a that. Even though I’m coming from the UI/UX side of things and initially started most projects with mockups, I do now mostly follow a similar approach with personal projects.
      Especially with design systems such as React Material UI it’s easy to come up with a nice looking front end on the fly.

      +1 on affinity though

      ...and if I have to do mockups (client work, or stuff where I’m not in charge of development) I use Figma (before that Sketch), which has always been more than enough

  3. 3

    I design my own products and I am mostly using Figma. There are hundreds of add-ons like Wordpress has but for design.

    Definitely not gonna learn photoshop right now. But if you wanna learn Adobe I would rather recommend Adobe XD and Adobe InDesign. They are easier to learn and you will be productive right away.

    1. 2

      +1 for Figma. It's free for personal use and arguably the best interface design tool available.

    2. 2

      Also addding Figma and Adobe XD are free.

  4. 2

    I would recomend a course by designcode.io.

    I follow the same process.
    I recomend you Figma..

  5. 1

    No neee just an pencils are enough to learn design, just start draw anywhere, thae walls paper etc❤ have a great day buddy

  6. 1

    I watched that course, it's fantastic.

    The reason why she uses Photoshop it's because she learned before better alternatives existed.

    Photoshop is meant to be used to edit photos.

    Give Figma a try, I found it extremely easy to start (of course as any other tool it takes some time to be an expert)

    The reason why these tools are used it's because it's way faster to create and modify a design there then with html/css

  7. 1

    Not exactly related to your question, but I'm also a backend developer and I found WebFlow to be very useful for learning and understanding CSS. I've always shied away from website builders as I wanted to learn how to write proper CSS and HTML myself, but Webflow has helped me be more productive and improve my CSS skills.

  8. 1

    Primary Figma. Secondary PS. Sketch is dead. XD is useless.

  9. 1

    As some already pointed out, Photoshop is not the best tool for the task. I'm using Sketch for everyday UI work, but Figma might also be a good alternative as both of these tools are pretty straightforward.

    To stretch your creativity in the ideation phase, I would recommend to first use some design tool, before diving in the code. It will allow you to explore more and not put your mind on thinking about restrictions right away.

    One technique on learning the design best practices is to find some nicely designed website and try to recreate it pixel-perfect yourself. It will teach you, what works well together and will train you to stick to the design system. Good luck with learning and don't forget to have fun!

  10. 1

    As @nickdaniels suggested, I also think Sketch is better for UI/UX Design. Sketch is much easier to pick up than Photoshop or Illustrator. Plus it has art boards that the common web and device dimensions built in, so there really is no guess work. I personally use Sketch for anything UI, but use Illustrator and Photoshop at my day job in publishing as they are better suited for print in my opinion.

  11. 1

    Agreed, I wouldn't worry about learning Photoshop for UI/UX design as it's overkill for most projects. Sketch or Figma (free and arguably slightly better these days) are really easy to pick up and get started with and as a bonus they also include the option to export CSS styling from elements and have basic UX prototyping features.

    These days most modern UI's are essentially simple geometric shapes with text, icons, images and a few simple effects like drop shadows, gradients and background blurs and you can do all of that really easily in Sketch/Figma.