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.
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.
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.
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 resources 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.
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 :)
Where can I learn and improve my Photoshop skills and how can I start working on a concept?
Like @plainclothes said, never focus on the tools.
Mastering Photoshop will not make you a web designer. Just like mastering how to use an oven will not make you a chef.
Photoshop, Illustrator, Sketch, etc. These tools help you create high-fidelity prototypes.
Apps with high-fidelity output give you too many options to play with in the first place. They dilute your focus and overwhelm you.
Having more tools than you need available will only slow your understanding of the thinking process that makes up the design of a website.
Obsessing over “pixel perfect” positioning, colours or typefaces at this point will only distract you from the thinking phase.
This is not design.
This is “playing design”, a game that besides being a fun way to procrastinate also wastes tremendous amounts of your time every time you play it.
When you're just starting out, your focus should be on making it as easy as possible for you to learn the basic building blocks of a website. And then get to use them.
Which brings me to the answer of your other question:
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.
What if I told you there is a quick and easy way to get all of these references out of your head?
It's called sketching.
Lets try something together, shall we?
Pick a pen and a piece of paper now.
Actually, pens are for sissies. Go ahead and pick a marker. A fat one.
Now draw a very quick sketch of the website layout you wanted to explore.
Then compare it with that other layout you were thinking of.
Like so:
These are low-fidelity prototypes.
At the stage of exploring ideas, that's enough.
As opposed to the apps for high-fidelity prototype creation (Photoshop and the likes), low-fidelity website sketches make it harder for you to obsess with the details. The goal is to get your ideas out of your head so that you can think about them and compare different options. The permanence of paper and lack of inherent precision of the marker is what limits you.
Your tool boxes you in. And this is not as bad as you may think. This boxing limits the degree of complexity in the design process.
In other words, marker sketching brings you closer to the actual “design” and keeps details, that you would otherwise fidget with, out of your way. For now.
Hope that I helped you.
The text above is an excerpt of a post I published here.
As for coming up with a design concept / layout:
Start with deciding what kind of feel you want your layout to have:
Then decide where your main elements will be positioned.
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.
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.
UI design is a fascinating area and there's a ton to learn. First of all, welcome! Don't get daunted if things aren't 100% perfect from the get go, it's a constantly evolving field, and I think any UI designers will tell you it took at least 2 years before they were producing work they were really proud of. For me it was even longer.
I'll break it down into 5 different areas:
I'm going to just make the assumption this is a web application of some sort (responsive or not, doesn't matter). A lot of the same steps are prevalent in both mobile and desktop application design, as well as marketing websites.
This one is pretty simple. You mentioned "I know what good design and good UI is." Great! Start making mental notes of what pieces you like about your favorite UI's and best designed websites. What makes them so effective? What are the pieces they use (reusable components)? What do they do that just makes sense?
Start saving this as notes, websites, and designs. For instance, I have a huge "inspiration" bookmark folder, I jot things down with evernote, and I liking snippets on Dribbble.
Don't just identity good design, ask yourself WHY it's good design and start thinking about how you'd make similar decisions and ideas work in your own design. I honestly believe just appreciating a lot of different design work, asking yourself a lot of questions, and thinking about design gets you about 50% of the way there. The rest is just execution.
On any project, product, or design you're working on, there's a reason behind it. Each person that uses or interacts with that design has a reason for being there--whether it's writing a blog post, searching for something, gathering information, engaging with other users. Figure out what a user is doing and build everything around that.
Work with product managers, stakeholders, clients, other developers or designers, whoever you can talk to.
A great example of this in practice is ghost. They wanted to simplify blogging and make a powerful UI. Here's a sample of their backend editor . Some assumptions they could have made: most time will be spent writing/editing blog posts. The focus is on content. Clutter-free workspace. Bringing in external assets (such as images) is a common task. Most will be familiar with basic Markdown (but, hey, let's show a live preview for those who aren't).
These assumptions were likely discussed and known before any "design" took place. The content for building design is very important.
The point is: you need to know what you're building, who the users are, and you should write these down before you sketch anything. Clients or other people on the project appreciate this approach, because it's less about what you want, and more about what a user would want.
This is the first time you should be asking: what should it look like?
This is where things start getting highly subjective. A lot of designers forego wireframes and sketches and start in Photoshop. A lot skip Photoshop or any desktop application and start designing in the browser. There is no correct next steps.
For the sake of argument, I do recommend sketching ideas and working on some sort of wireframe, especially if you're just learning. You don't have to, though. You can sketch ideas on a notepad or maybe Balsamiq. Maybe put together some style tiles. Maybe a mood board. Maybe hop on Dribbble and dump a bunch of items into a "bucket." Maybe search competitor sites and sketch out a few ideas based on what they're doing.
At this point, just start building out your ideas in a visual way. Layout, color, typography, imagery, branding, repeatable UI components, and even animations are all important -- what's more important is how they all fit together in your goal of building a great UI for your users.
One final point is I very much agree with the concept behind Atomic Design. Basically, the idea is building repeatable, consistent elements throughout your site, and then the idea is you're just organizing the components on each page you design. Definitely something worth reading about, it's a very useful way to start conceptualizing your interfaces.
You've got the users and the basics down. Hopefully you have some wireframes and style ideas ready to go. Now comes the easy part: bringing it all together.
I use Photoshop, Sketch, Illustrator, and in-browser design, all depending on the project. The tool is not important, as has been driven home a dozen times already.
What is important is you like the tool you use. You should honestly be having fun with it, and if it feels like a tool is hard to use or limiting your ideas, try something else. If you like Photoshop, there is absolutely nothing wrong with just using Photoshop. Do what's right for you -- you can always look into and consider other software and tools down the road.
An important step in building the UI is gathering feedback. Clients, team members, or actual users. Try to avoid launching any design without getting feedback from a variety of people. Iterate, test assumptions, and don't be afraid to scratch design and start again.
Here's an example of a well-executed high-fidelity mockup.
A few takeaways: good typography, clear use of colors, bright and large button, and good layout (the light background with the white-colored "boxes" help draw the idea to the forms). More specifically: custom states on form elements, branded illustrations (the line-art style on the document illustration), and the custom look for the "coded" elements using a monospace font. Even little UX considerations such as a "Verify later" option or a "recommended" option are a great touch.
In creating a mockup like this, the idea is most of the elements were already designed or thought-out. Things like colors, typography, form treatments, button styles, branded elements or illustrations, etc. should have had some thought or consideration put into it before piecing together the entire UI.
At this point, you've gotten some final design work done, and now it's time to implement. I'm not sure if you plan on doing implementation work or simply working on graphic-only mockups. But, even if you aren't implementing your UI, you should have an understanding of what is and isn't possible in the world of HTML and CSS.
Generally, this stage requires you to work with a front-end developer to build out your templates in a way he can make sense of it. Communicate with your developers early and often with how they'd like the UI delivered.
A few quick points on implementation:
Photoshop tip: use the copy CSS feature to help with implementation! Seriously useful tool for beginners, but please never use this code as final. Look at it as more of a learning tool (helps bridge the gap between mockup and implementation).
Good luck out there!
