4 ms·

Great Photoshop tutorial, but this is not interface design. It's interface skinning. It's rendering. It's fashion. The reason it's important to make that disti

Great Photoshop tutorial, but this is not interface design. It's interface skinning. It's rendering. It's fashion. The reason it's important to make that distinction is that otherwise you imply that to design an interface, one starts in Photoshop. Too many people design like this, and skip important steps that challenge the fundamentals of what they're implementing because they get caught up in making their layer styles look pretty.

nathanbarry 13y ago
I've always referred to designing how things function as "user experience design." I agree that the terms aren't perfect. The skinning or rendering stage as you call it is still very important. Most of what we point to as good design (on the surface) is because it is well skinned. I've written two books (http://nathanbarry.com/webapps http://nathanbarry.com/webapps and http://nathanbarry.com/app-design-handbook http://nathanbarry.com/app-design-handbook) on end to end process, so now I'm working on teaching the practical skills to create the end result all new designers are looking for. I think we agree about the process though. I always start on paper before moving to Photoshop and code.
jchendy 13y ago
I'm in somewhat of the opposite situation. I feel like I've got a fairly good grasp of user research, workflow definition, feature prioritization, et cetera, et cetera, but I often struggle with translating that work into an actual UI. Does anybody have suggestions for how to get better at this? I'm sure that learning Photoshop will help, but what should I do for practice once I'm comfortable with the tools?
- terabytest 13y ago
  Try observing other people's work and emulating it into your own compositions. Deconstruct what they did ant try to understand what they were thinking of when they did it. That's a good way to improve.
- sveron 13y ago
  I'd suggest books and classes in graphic design, if you can. There are a lot of suggested books here: https://news.layervault.com/stories/11494-i-compiled-a-list-of-books-for-designers https://news.layervault.com/stories/11494-i-compiled-a-list-... You'll really start to appreciate the difference between knowing design principles and knowing how to use design tools. Tutorials that teach skills or techniques in software will get you about as far as applying a specific technique. Without knowing basic design principles your work is going to look cluttered, samey, not-quite-where-you-want-it-but-you-don't-know-why. I'd also say that jumping straight into UI design is premature for someone beginning a design education. Learning the fundamentals of graphic design is essential, even if at first it seems irrelevant and too print-oriented. A good design background will help you solve design problems. Right now there's a lot of 'designy' stuff--especially on the web--that's nothing more than the mindless application of a solution to someone else's design problem. There are a lot of missed opportunities to actually communicate, or to make a better tool; all because of groupthink and notions of good taste. Learning about design will help you get out of that rut.
  - rXoX 13y ago
    Bingo. Design principles first, then tools. There's far too many poorly conceived tutorials on how to use design tools and far too few good tutorials on design fundamentals.
justinph 13y ago
This is absolutely not true at all. Wireframing is nice and can be important, but it's not design, it's architecture. It tells you the ballpark of what you might want to achieve and how a app/site might be structured. You need to sit down and put real-world pixels to the screen to see if the thing you're making works and fits. Rendering is not fashion. It's every bit as much function as the code on which an app/site sits. No wireframe tool I've ever seen will let you know how much text you can or should fit on a particular sized canvas.

nathanbarry 13y ago

I've always referred to designing how things function as "user experience design." I agree that the terms aren't perfect. The skinning or rendering stage as you call it is still very important. Most of what we point to as good design (on the surface) is because it is well skinned. I've written two books (http://nathanbarry.com/webapps http://nathanbarry.com/webapps and http://nathanbarry.com/app-design-handbook http://nathanbarry.com/app-design-handbook) on end to end process, so now I'm working on teaching the practical skills to create the end result all new designers are looking for. I think we agree about the process though. I always start on paper before moving to Photoshop and code.

jchendy 13y ago

I'm in somewhat of the opposite situation. I feel like I've got a fairly good grasp of user research, workflow definition, feature prioritization, et cetera, et cetera, but I often struggle with translating that work into an actual UI. Does anybody have suggestions for how to get better at this? I'm sure that learning Photoshop will help, but what should I do for practice once I'm comfortable with the tools?

terabytest 13y ago
Try observing other people's work and emulating it into your own compositions. Deconstruct what they did ant try to understand what they were thinking of when they did it. That's a good way to improve.
sveron 13y ago
I'd suggest books and classes in graphic design, if you can. There are a lot of suggested books here: https://news.layervault.com/stories/11494-i-compiled-a-list-of-books-for-designers https://news.layervault.com/stories/11494-i-compiled-a-list-... You'll really start to appreciate the difference between knowing design principles and knowing how to use design tools. Tutorials that teach skills or techniques in software will get you about as far as applying a specific technique. Without knowing basic design principles your work is going to look cluttered, samey, not-quite-where-you-want-it-but-you-don't-know-why. I'd also say that jumping straight into UI design is premature for someone beginning a design education. Learning the fundamentals of graphic design is essential, even if at first it seems irrelevant and too print-oriented. A good design background will help you solve design problems. Right now there's a lot of 'designy' stuff--especially on the web--that's nothing more than the mindless application of a solution to someone else's design problem. There are a lot of missed opportunities to actually communicate, or to make a better tool; all because of groupthink and notions of good taste. Learning about design will help you get out of that rut.
- rXoX 13y ago
  Bingo. Design principles first, then tools. There's far too many poorly conceived tutorials on how to use design tools and far too few good tutorials on design fundamentals.

justinph 13y ago

This is absolutely not true at all. Wireframing is nice and can be important, but it's not design, it's architecture. It tells you the ballpark of what you might want to achieve and how a app/site might be structured. You need to sit down and put real-world pixels to the screen to see if the thing you're making works and fits. Rendering is not fashion. It's every bit as much function as the code on which an app/site sits. No wireframe tool I've ever seen will let you know how much text you can or should fit on a particular sized canvas.