Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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 except for HTML and CSS.

Where should I start? How do I learn how to create beautiful designed websites and interfaceS?

Is there a book, tutorial, etc that you recommend?

Thanks!

share|improve this question

2 Answers 2

You're in luck. Many people have come into the world of Web Design asking the same question. Often times, you'll see a team of people, consisting of atleast one coder and one graphic designer. Good choice with Photoshop - that's what I stick with.

With Adobe Photoshop's newest version, CS5, it has become intensely advanced - able to perform complex tasks with simple tools, or even more complex tasks with complex tools. But I warn you, learning all of the cool features of Photoshop can lead to lack of nutrients. :)

Here is a tutorial that covers the basics so you can get the swing of things:

Once you get all of that down, I found a bunch of sites on Google that have some really innovative design tutorials.

There are some techniques that you might have to learn. A tip, shiny is usually a good step these days. To get a truly unique design, find features that you like from any website template, then use it in your own way.

I hope that helped. Leave a comment if you need more information.

share|improve this answer
    
Thank you. One question: what do you mean by "shiny"? thanks –  donald Feb 11 '11 at 16:16
    
Making things look shiny - buttons, navigation bars, headers, etc. boonage.pjss2.net/2007/04/15/perfect-shine-button-or-icon –  Christopher Feb 12 '11 at 7:41

For UI, I recommend using Fireworks over Photoshop. Photoshop is great for creative and complex artwork (print or web), but in my opinion an overly complex tool for web related UI.

Fireworks is specifically designed as a web-orientated authoring tool where Photoshop is not. The tool-set for Fireworks is geared towards building web UI, not the complex creative work that is offered by Photoshop.

Fireworks uses a very similar tool set to Photoshop, minus the bloat, so you can do everything you would need to create web UI.

Fireworks is also part of the Adobe Creative Suite, so if you have Photoshop you should have it as well.

Reference material, not specific to Fireworks but UI in general;

http://www.jankoatwarpspeed.com/

I would highly recommend reading his articles and looking at his work for inspiration. There are 2 sides to UI which he covers very well: The interface and the experience of using the interface. Also referred to as UI and UX.

Learning how to use the application can be found through tutorials online. Envato has a great tutorial network http://tutsplus.com/, granted their main Tutorial site for web is Photoshop orientated, but most of what they do in Photoshop is done in the same, or similar method, in Fireworks.

I also find myself quite often bookmarking sites that have unique design traits or UI elements that would under some future scenario work well for a project. For example a unique tab structure, accordian style, or even a pager.

Design UI on a basic level is broken down in to areas of data display. Since you have a developer background, you know how to present data from a logic perspective (Menu's, accordions, tabs etc). Now it's really just building that UI using those controls or modules from a visual perspective.

Some additional reading on UX:

http://uxmovement.com/

Having a developer background as well, I can tell you that when I build my apps, the first step is to create the UI which in turn defines the apps functionality. My created artwork serves as both the artistic value for the app but also it's function definition. I always build my logic around the completed artwork, never the other way around. This always means that i put the user first.

I hope this gives you at least a starting point.

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.