: How to create great interfaces in PhotoShop, etc 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,

@Alves908

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;
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 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:
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.

Vote Up Vote Down

@Rivera981

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.

Vote Up Vote Down