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:
- Gathering your thoughts
- Building with context
- Getting started
- Building the UI
- Implementing the UI
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.
1. Gathering your thoughts
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.
2. Building with context
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.
3. Getting started
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.
4. Building the UI
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.
5. Implementing the 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:
- Learn to use a compiled CSS language such as Sass, SCSS, or LESS. Definitely worth the time.
- Build each reusable component as a reusable component in your CSS. Bring in as many variables and reusable pieces as you can.
- Build a style guide for your developers that show all the reusables components. Super useful when a page needs built out quickly, and they have the pieces they need to throw something together.
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).
- Start gathering thoughts on what's good UI and good design. Make notes, save bookmarks, etc. This "catalogue of thought" is what drives a lot of decisions that designer make.
- Really dig into what you're designing and who the users are. Start discussions, write down objectives and assumptions, and make sure everyone is on the same page.
- Start working on low-fidelity mockups and wireframes as well as early attempts at style guides and outlining reusable components. A lot of designers will say there's a particular order to these items, but honestly, any order works.
- Build high-fidelity mockups. Use Photoshop, Illustrator, Sketch, build in the browser, whatever feels best for you. You can use all the tools, or just one.
- Implement it. Since every product/project is different, there's not too much to say. I would suggest always writing your own CSS whenever possible--it's great learning.
- Have fun and be inspired. Don't get hung-up on tools or best practices. You'll figure out what you like in time, right now the most important step is to create, build, and constantly look to improve.
Good luck out there!