Being a developer wanting to be a designer, I'm really interested in learning how to create top notch UI for websites, mobile apps, etc. However, I know nothing about Photoshop or anything related to design, my main skills being HTML and CSS.
Where should I start? How do I learn how to create beautiful websites and interfaces?
As a former developer who has become a designer, there's a few things I'd suggest. First and foremost, start working on designs! If you have the ability, find a mentor who is already a UI/UX designer and start working with them on projects. I found I learned more by actually working on projects and absorbing knowledge from people who have been doing this for years than I ever did from reading a book.
That being said, if you do want to read up on UI/UX/etc., I'd take a look at this excellent thread:Must-read User Interface Book? I think my personal favourite is Steve Krug's "Don't Make Me Think" - but I'm sure you'll find your own favourite eventually.
Lastly, with respect to tools like Photoshop, Illustrator, etc... don't worry about it! Ultimately you'll find the tools that work best for you. Personally, I start with pencil and paper mockups, then depending on the project I'll either move to something in Balsamiq, or Axure, or sometimes straight HTML and CSS - it really depends on the project's size, scope, etc. Use whatever is most comfortable for you. At the end of the day all that matters is that you clearly communicate your vision for your design, not what tool you used to do it.
I've been mixing design & development for a long time. But in the early days I spent more time learning the editing tools than what makes a good design. There are plenty of tutorials to be found to learn how to use Photoshop, Illustrator, Fireworks, etc. But it's nice to have some design sense & direction. This is something I still want to become better at.
One of my inspirations is a guy named Robby Ingebretsen, because he does both development and design extremely well. His website is at nerdplusart.com.
There are a few things I'd take a look at from him...
As he talks about in all his presentations, I think it's critical to find inspiration for your designs. Even the best designers don't simply come up with this stuff out of thin air. One of my bookmarks is a collection of "New Graphic Design", mostly seen in print work. Most of them are very simple, often using the typography itself as the main graphic elements. As simple as it seems, just browsing through stuff like this can help you shape your design.
Just like learning Visual Studio does not make one a good software developer, neither will just learning Photoshop make one a good UI designer.
If you want to go the formal route, an education in Art/Graphic Design, Human Factors, Psychology, Information Artchitecture/library sciences would all be places to look.
Informally, get to work! ;) Best way to learn is just do it.
I'm a formally trained graphic designer who has picked up software development skills on the job. I started out of pure necessity.
Personally, I think the best UX team members are those that have a mix of both skills. So, I think you are on the right track.
I'd start with reading the book "Head First Web Design" by Watrall & Siarto (published by O'Reilly). It's pretty no-nonsense, easy to digest, and walks you through everything that a designer has to consider. It's not an in-depth study, but gets you started to know what questions you need to answer next. It does cover navigation, organization, layout, writing, color, and accessibility.
Also, before you jump into Photoshop, Adobe Illustrator, or whatever, wireframe your design to make sure everything is in the right place before you commit the extra time to making it look pretty. You can sketch it out on paper or whiteboard, or you can use a tool. A tool that I found really helps in this step is Balsamiq Mockups. It lets you think about the site organization and layout first.
I actually took the opposite approach from UX Designer to UI Developer, however, when picking up on Design, would recommend a couple areas to start:
I would take a look at the book "Don't Make Me Think!" by Steve Krug, which I think is a great book on designing for designing on the web.
There are tons of great web resources including SmashingMagazine.com and PSDTuts.com, which give great current articles in the world of design and web tech.
I would also take a look at understanding the principals of HCI if you are looking specifically on becoming a UX Designer.
Good luck and happy designing!
I'm really interested in learning how to create top notch UI for websites, mobile apps, etc.
Okay, that's a broad topic. You want to create "beautiful", "top notch", professional looking" websites. So, you need to know what makes people perceive something as "beautiful", right? Luckily for you, beauty isn't really subjective.
One of the keys to a beautiful visual design is harmony.
The lack of harmony is what makes your designs look amateurish.
And, the best thing is that visual harmony comes down to maths. It's not about having a gut feeling.
Like others have pointed out, I'd recommend designing websites on your own. Try to apply the design principles you learn about instead of using a ready framework. It might be hard at the beginning, but it will help you become better.
How to embed harmony in a website design
Following is a practical example and a funny little exercise you can do now.
One way that I personally prefer is to use a modular scale to size the website elements in harmonious proportions. A website that can help you generate a modular scale is this one: modularscale.com
The benefit of using a modular scale is that it can make sizing decisions as easy as picking a number from the scale.
For example, let's size a website's headings (to communicate visual hierarchy).
Let's say we have this modular scale based on the 19px body font size that I chose (19px because it looked best with the font I was using, but you can skip this step and go with the default 16px size) and the ratio 1.412 (No need to go into details why I chose this ratio. Just any ratio will do better than no ratio for your projects.):
Looking at it, I’d pick the H1 to be 2.815em, the H2 to be 1.994em and the H3 to be 1.412em. First 3 numbers bigger than the body font size. Easy-peasy, right? The body text would be 1em (in my case 19px). Then, I’d size the H4-H6 at 1em and use contrast (different font weight or style) to differentiate them from the body text.
So, try this now:
That's just a small step towards better designs, but I hope that it will help you.
If you found this helpful, you can read my other list of 7 tips for beginner web designers who know HTML and CSS
P.S.: You really have a lot of reading to do
Like others have said, read:
Also, here a huge list of online resources like blogs and communities to keep an eye on: enboard.co/webdesign/
