Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Newbie here. I like the web and UI design, and I know what good UI and good design is, but I lack Photoshop skills.

Sometimes when I try to do design work my mind goes blank or gets mixed up because there are too many references that I like and it's hard for me to determine which design I prefer.

Where can I learn and improve my Photoshop skills and how can I start working on a concept?

Until now, I've been paying a designer to do what's in my mind, but I really want to be able to design.

share|improve this question
    
You need to use vectors, not raster. So Photoshop is not the best tool. –  Rafael Feb 3 at 20:38
1  
@Rafael Photoshop does both, and it does pixel snapped vectors extremely well. Photoshop should absolutely be considered when talking about UI design. And, in terms of rendering quality, not much else comes close. –  Marc Edwards Feb 4 at 11:23

5 Answers 5

Never start with the tool. Learn the fundamentals of layout, color theory, UX (user experience) and HCI (human-computer interaction). When you understand how to manipulate the data to control the experience then you can create killer interfaces.

Then find the tool that works for you. I do all my mock-ups in Illustrator. There is plenty of disagreement on this point but Photoshop is really an image editor. Illustrator, Inkscape or Fireworks are all better designed for layout.

UPDATE > I'm also experimenting with Sketch now. It's more intuitive and much less expensive than Illustrator. Not as mature, but it's getting there.

UPDATE TO THE UPDATE > I'm all in with Sketch. For pure interface design, it's the best thing going right now. It has it's limitations, but with the JSTalk plug-in platform I think it will catch up quickly. At version 3.2 it's already improved my workflow considerably. Since Illy was my main Adobe tool, I've also ditched Pshop for the simpler Pixelmator. Sketch + Pixelmator has been a powerful duo.

share|improve this answer

welcome to GD.SE!

To be honest, I don't think you really need to be a Photoshop guru to design your UIs. Especially if you are doing web, and you will end up coding everything anyway, the skills you will need to present some mockups and wireframes shouldn't take long to learn. Photoshop is quite intuitive, but this of course doesn't mean it won't have a certain learning curve. The thing is, if you are designing for web, you should probably do it in the browser and just use Photoshop for some graphics and for trying things in the layout.

You could start with some basic tutorials, just to understand how the program works (layers, text effects, shapes, things like that). Once you get it, you can follow the tutorials that guide you through a process and help you achieve a result, as they usually cover some of the techniques you will be using later on. Some tuts like these, focused one web, could be very useful.

Now about the concept, I always do mine in pencil and paper. Photoshop is great for certain things, but not for everything. There are much better tools for prototyping, such as Balsamiq (premium) or Pencil (free and open-source). They are faster and easier to use.

share|improve this answer

As mentioned by plainclothes, learning the basics of design is important. There are many good resources listed here on GraphicDesign to get you started which you can find easily by checking out the tag and sorting it by votes. You should give many of the resources provided a read if you're wanting to become a good designer of anything.


As for UI specific resources, I've found this UX course to be a good start. It goes into detail of most aspects of UI design, though there's always more you could learn. The important thing is to follow proven rules, Erik Kennedy came up with some good basics (part two here), and to create a lot of work. Practice implementing the rules you learn to reinforce them in your mind and to see what works and what doesn't first hand. Having others use your interface after each big iteration is quite useful as well, getting feedback before the product is "finished".

Keeping up to date and keeping UX on your mind is also important. UIGifs sends an email once a week with some lovely UI designs, I highly recommend subscribing. Muzli also puts out a monthly list which is longer but not 100% dealing with UI. UserFlowPaterns is a great site to see delightful examples of good practices put into applications in a concise way. UserInterface.io posts some great gifs as well. There are many others, but these are my favorites at the moment.


In modern times, like Yisela suggests, we don't have to work in PS but can start designing directly in the browser (or an editor for whatever platform you're working in). While it might not be best to always do this, there are many advantages. This article goes into a bit more detail as to when and how to do so.

I created a list of resources to help beginners get started with web development that is hopefully very useful to you if you end up doing your work in code. The advantage to doing your design in code (or some other in between way of doing it like WebFlow) is that you have a majority of your next stage already done, quickening the entire process. It's not required, of course, but it also helps your thinking in terms of what's possible and best practice by implementing it as you design.

Assuming what you're designing is responsive, meaning it looks good regardless of the screen it's being viewed on, you should design in a mobile-first way. Mobile-first should never be thought of as mobile-most-important, which would imply that so long as we get it working on phones and tablets we’ll be okay. Instead, think of it as smaller-first, or smaller-then-larger in temporal order of consideration. By beginning with the smallest screen size that we plan to support, we know we’re giving attention to the most vital aspects of our site or app, and the rest is gravy. If you'd like more information about how to develop in this way, I wrote about it on my personal blog.


The most important thing you can do to get better at UI design is to create UIs and have users give feedback on them - and to do so a lot.

Helping users is the entire goal, so do it! Applying rules as you learn them is great as it helps reinforce them in your mind and makes your design better at the same time. Most likely your designs will stink for a while but that's okay! This video gives a good explanation of why - in essence it's because it happens to all of us, but you'll make it if you keep trying :)

share|improve this answer
1  
One minor adjustment to your bottom line: The most important thing is to watch real users interact with UIs. Develop an empathy for how people interact with UI patterns and operate within their environment, design lots of UIs, then watch people use your UIs. Repeat that a few dozen times and it'll start to click :) –  plainclothes Feb 3 at 22:28
    
@plainclothes Good catch! I updated it to (hopefully) better convey that thought –  Zach Saucier Feb 3 at 23:31

As for coming up with a design concept / layout:

Start with deciding what kind of feel you want your layout to have:

  • Lighter or darker theme
  • Clean (corporate, typographic or layouts with many icons) or busy with many graphical elements
  • Usage of photo's? Perhaps the background will be 1 huge image which will affect the entire design

Then decide where your main elements will be positioned.

  • Will your menu be vertical or horizontal? Will it be on the top of the page or at the bottom?
  • What space do you want to reserve for your header? Where and how big will it be? What will be inside the header: a banner, a logo, your menu? Will the header have clear borders or does it run through behind the content?
  • Will there be a footer? How big and how important is it?
  • etc...

This will all depend on what kind of feel you are aiming for. Browse a collection of good webdesign sites for inspiration.

After you have decided on the feel of the layout and positioning of your elements, you can start designing the specific elements.

share|improve this answer
2  
I have to fundamentally disagree. For UI work (and most forms of design) never start with the visual approach, start with the information. Decide what you need to communicate and what you need the user to do. Map that out somehow (I diagram) then layout wireframes. If the visual brand isn't defined you'll have to build that as well, but it's not part of the UI design until the info architecture and UX are defined. –  plainclothes Aug 8 '13 at 16:53
    
@plainclothes: Ah yes, the information needs to come first ofcourse, otherwhise you can't possibly know which pages you will be layouting or how your content will be placed. However I believe OP is only having trouble with the visual part and thus I only explained the visual approach. –  Dark Ashelin Aug 8 '13 at 18:57

You are asking two separate, and not all that related questions.

Where can I learn and improve my photoshop skills?

I'd start with Google and books. There is so much information written on using PhotoShop online and in book form.

How can I start working on a concept?

This, essentially, is more about creative thinking. There are, of course, many books and web sites that can help with this. But this is a broad subject in and of itself.

What might help is you just picking up a pencil and getting a sketchpad. If you need to work on an idea, sketch, sketch, sketch and sketch some more.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.