7 ms·

How to use Photoshop to design interfaces

84 points by nathanbarry 13y ago

harwoodleon 13y ago
Don't use photoshop to design interfaces, use css, html, illustrator and photoshop to design interfaces. Interfaces are not two dimensional and static, they are three dimensional (time) in the sense that hey have to be interactive. Flat graphics are not interactive. If you are going to just use photoshop, use a pencil, it's cheaper and easier.
- coldcode 13y ago
  Yes, the world has changed and interactivity and animation are just as important as pretty pictures.
- nathanbarry 13y ago
  I agree many interactions should be designed directly in the browser, but even the designers I know that champion designing in the browser (Ryan Singer, etc) take a screenshot and move into Photoshop when they have something complicated to design.
  - harwoodleon 13y ago
    Yes, that's why I said use it as part of a set of tools. It is useful of course, but over reliance on it as a tool for designing is a continuing issue for development teams all over the world, right now. People waste a lot of time iterating over pretty pictures and then pass all the hard work to front end engineers to sort out the cruft. Worse still is when you then get a PM that wants the whole pixel perfect thing to jump through HTML5 hoops. With very little consideration to the time element of design, you are left with a lot of pretty images that you may as well start again with. In browser designing is not an optional path to take. If it is going to end up in the browser it will have to be designed at some point in the browser, so designers should dump pixel perfect tools like photoshop as their main iterating tool. Photoshop is still a pixel tool and getting old, Illustrator is now better for interface improvement IMO as it has pixel preview and can output svg too :).
- raverbashing 13y ago
  And that's why a lot of people design using Flash CSS and HTML? A Designer does not need to know that to produce a design.
  - seivan 13y ago
    That's one useless designer.. if the designer does can't produce their own fucking design. That's where we get photoshop monkeys. 30 mb PSD vs someone who can code their design. Your pick.
    - nathanbarry 13y ago
      Agreed. That is one useless designer. When I hired designers I would only hire people who could write front-end code as well as they designed.
      - raverbashing 13y ago
        I understand that there may be a need of that in small projects I've did both: having a design than translation to HTML and people that could do both There's an advantage to someone that will focus only on the design and another that will focus on only translating that to HTML/CSS/JS namely, that someone that can do both very well is rare But of course, if they can do the design and a basic html/css of it usually can move the project faster. You will not have the greatest design or greatest html/css but it will usually arrive at a good solution
  - harwoodleon 13y ago
    You mean a web designer? or just a designer? If you are going to design for the web and you DON'T know HTML and CSS then you are pretty fucked.
  - nelmaven 13y ago
    A designer needs to know the medium he's working with and it's limitations to produce a good design.
rhgraysonii 13y ago
This is useful if one has NEVER touched photoshop, but I already have a reasonably solid grasp on even intermediate features of Photoshop. Does anyone have some resources on best practices for getting a mockup done if you already know these things but know little of 'good design' other than 'make it responsive and minimalistic'?
- nathanbarry 13y ago
  I'm working on putting out more tutorials on the topic. I just wanted to get the absolute basics out there first. My course will cover these basics, but also some pretty advanced techniques. Stay tuned. More are coming!
  - rhgraysonii 13y ago
    Will do! Thanks. If you have an email list or something, feel free to send a link to it to me. My email is in my profile.
- DavidWanjiru 13y ago
  I've always thought that "good design" has nothing to do with software. As in you'll have to nail the art elsewhere, then bring those lessons to your software.
mpweiher 13y ago
Not. See the NoPSD movement: http://thoughtworks.github.io/p2/issue02/continuous-design/ http://thoughtworks.github.io/p2/issue02/continuous-design/
- seivan 13y ago
  +1. I'm getting up to speed with Cocoa to the point where I might be faster than a designer with Photoshop... as long as we don't venture into wooden textures. :)
  - platz 13y ago
    I think there's a difference between using Photoshop for exploratory purposes, and using Photoshop to produce a deliverable. I know Chris Coyier is a fan of using photoshop to explore a little bit, before you get into the mode of writing code, which he thinks can interfere with your creative process.
- nathanbarry 13y ago
  For the vast majority of professional designers Photoshop is critical to creating design elements. Not everyone creates a final, pixel-perfect mockup in Photoshop, but those who don't use Photoshop for smaller parts of the design. It is very common to screenshot your rendered HTML/CSS, take that into Photoshop, design one portion of the interface, then take that back to code.
  - mpweiher 13y ago
    And why is this a good thing?
    - rfnslyr 13y ago
      Why do you ask silly snide questions? Tell me what is fundamentally wrong with screenshotting an interface, playing with it a bit, coming up with something you like then turning it into code?
artursapek 13y ago
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.
daemonk 13y ago
I find illustrator to be better for designing interfaces.
- oulipian 13y ago
  I've used Illustrator to draft website designs for years, and drawing in vector is especially useful now that I often find myself needing larger versions of graphics for hi-res screens.
daledavies 13y ago
Oh how I will miss Fireworks, I always feel Photoshop for interface design and mockups is very much a square peg in a round hole :-(
- nathanbarry 13y ago
  I think now that Fireworks is gone Adobe will add more of those features directly into Photoshop. I think their live shape tools for editing the radius on rounded rectangles are just the start.
- teleclimber 13y ago
  I don't know how I'll manage without FW. I use it for design exploration and exporting image assets but it works so well for that. What are the replacements on the horizon? Anybody found anything good?
  - daledavies 13y ago
    I tried using Inkscape after the news broke about Adobe not continuing with Fireworks but couldn't get used to it. Maybe I need to try it again, or get a Mac (I currently use Windows) as there seem to be more options for iOS.
    - teleclimber 13y ago
      I used to use Inkscape but switched to FW a few years ago because Inkscape was buggy and slow. Maybe it's better now. I'm hoping for a Win+Mac solution because I switch from one to the other regularly. I'll have to try Sketch sometime even though it's Mac only. http://www.bohemiancoding.com/sketch/ http://www.bohemiancoding.com/sketch/
- DavidWanjiru 13y ago
  I thought Fireworks is still in the building? At least before adobe went to the cloud...
  - 13y ago
ateevchopra 13y ago
Thanks ! Really needed this !
jacobsimon 13y ago
This is a good start but leaves out some really useful features of Photoshop. One of my favorite newly discovered features is layer comps! If you're addicted to photoshop but also want to display your designs somewhat interactively and minimize layer clutter, open photoshop and go to Window > Layer Comps. It lets you create multiple states within the same document, including layer positioning and layer styles. Great for button states or for preserving an entire flow through an interface in the same document. Have fun!
- nathanbarry 13y ago
  Yep, Layer Comps are awesome. I'll cover them in more detail in the course. That tutorial was starting to get longer than I originally planned.
tomelders 13y ago
I'm a fan of Sketch for UI design, primarily because it offers a more accurate representation of what will actually come out in code. However, I've had little luck in getting the designers i work with to adopt it. With Sketch there is a strong correlation between how things are designed and how they're built that designers find inhibiting and offensive. That said I strongly encourage designers give Sketch a serous look. As always however, the best tool for UI deign will always be pencil and paper. Sketch is simply a good tool to flesh out those concepts.
hmottestad 13y ago
Just don't actually add your text to the button in photoshop, and don't use jpeg for the final image as you'll get jpeg artifacts especially around text. Text should superimposed by the system you are using in the end. Akin to using css backgrounds. This way you will support the wave of hi-dpi displays, be able to easily support other languages and will make correcting text or labels so much easier in the future.
- nathanbarry 13y ago
  Both the button and text should, if possible, be recreated in CSS without any images at all. But if you have to use an image, you are right that the text shouldn't be a part of it.
bane 13y ago
You can also do some interesting design work in Powerpoint. Change the slide size to something bigger and screen shaped, toss down a rough sketch of a page on a slide. You can even hyperlink buttons and objects on the slide to go to other slides to simulate partial flows through the interface. Use animations for things sliding/fading in-out, etc. triggered by mouse events.
- wil421 13y ago
  No. I am tired of managers asking me to design mockups or create process flows in Powerpoint because they dont want to take money out of their budget. Adobe CS6 and Visio do it much better and the level of detail you can obtain is much greater.
  - bane 13y ago
    Yes. Independent developers without the money to fork out for several hundred dollars of software just to rough out some flows for their small site can get more mileage out of something they probably already own.
- bane 13y ago
  I guess the downvote means that you can't do these things?
dapatil 13y ago
I prefer using Inkscape to do this. It's more accessible (ie. Free) and the SVG generated easily translates to css.
pirateking 13y ago
I prefer using my interface to design my interface, using a continuous feedback loop. Paper, pencil, and Scheme are high level tools I use to plan and lay out the interface. Objective-C/C, HTML/CSS/JavaScript, Illustrator/Photoshop/After Effects are low level tools I use just to get the details that support the interface in place. At least that is how I like to imagine my workflow to ideally be laid out - it is not always so clearly defined in practice sadly.
chestnut-tree 13y ago
I agree with some of the othe posters here - using a vector drawing tool such as Illustrator for designing an interface is much easier than using a bitmap tool like Photoshop (although Photoshop has some vector drawing tools). The main difference comes from the ease with which you can simply select, drag and re-size elements on your screen compared to Photoshop. This will definitely help you work faster if you are experimenting with layout. You can use a vector drawing app for wireframes, for mapping out screen flows and interaction behaviour, and finally for creating the finished visuals for the app. Photoshop is only really suitable for the last of these tasks. There are some visual effects that only Photoshop can achieve, so you may find you have to use both. But I would always recommend starting with a vector drawing app. If you don't want to use Illustrator (which has a clunky UI in my view) there are plenty of cheaper vector alternatives . Here are a few Inkscape (open source and capable of professional results) http://www.inkscape.org/en/ http://www.inkscape.org/en/ Sketch (Mac only, praised for its ease-of-use) http://www.bohemiancoding.com/sketch/ http://www.bohemiancoding.com/sketch/ Serif DrawPlus (Windows only, low-cost but very capable) http://www.serif.com/drawplus/ http://www.serif.com/drawplus/ (no trial version, but they are selling the previous version for £10 (approx $16 usd): http://www.serif.com/promo/ http://www.serif.com/promo/ Xara Photo and Graphic Designer (Windows only, again low-cost but very fast, capable and an excellent interface) http://www.xara.com/uk/photo-graphic-designer/ http://www.xara.com/uk/photo-graphic-designer/ Edit: just to add, the apps above do not have anywhere near the amount of tutorials for learning as Illustrator (or the industry recognition), so factor that in when choosing a vector app if that's important to you.
- virgil_disgr4ce 13y ago
  THANK YOU. I cannot stand using a raster tool to design UIs. It's insane to me, and it absolutely boggles my mind that it's considered 'standard' practice (other than just going to html/css directly).
  - actionscripted 13y ago
    Let me just re-size this button with rounded corners in Photoshop...
grey-area 13y ago
Photoshop CC certainly isn't cheaper to rent than CS was to upgrade, if you're using it for longer than a few months. Over a couple of years it's clearly more expensive. I'm not really convinced design should atart or end in Photoshop either - design needs to start without preconceptions or limits imposed by the tools (often pencil and paper is beat) and also to consider the medium (in this case the API and GUI toolkits. Something is definitely lost when you split it into separate domains of how things look versus how things work.
gfodor 13y ago
never again. you can take Sketch from my cold, dead hands.
ChikkaChiChi 13y ago
Unless you have absolute control over the form factor in use, using rasterized graphics is a terrible idea.
zyb09 13y ago
As a programmer with very little design talent, but basic Photoshop skills, this is exaclty what I do when I have to make something! Layer styles let you come up with something quite good looking, even if you don't really know what you are doing :)
3stripe 13y ago
Photoshop remains the industry standard program for web/interface design, for now. Yes, there are alternatives approaching maturity, but if you are hired to design a website by a client or third party, they will most likely expect the design to be delivered as a PSD. I've been freelancing at studios across London for the past year and was never once asked if I could use Photoshop — it is assumed. PS. I'm also working on my own guide to designing websites in Photoshop, which concentrates more on ways to improve and speed up your workflow: http://greig.cc/photoshop-webdesign/ http://greig.cc/photoshop-webdesign/
bbx 13y ago
This article could be titled "How to use Photoshop to draw interfaces". I've been looking for a true alternative to Photoshop. Sketch looks neat but requires Mac OS 10.7 at least (my iMac is stuck at 10.6, my MBA isn't suited for graphic design) and seems to suffer from numerous bugs. Macaw looks promising but is too much focused on code. And Fireworks is discontinued. I use Illustrator from time to time, but only for assets: icon fonts, logos, or print-quality jobs. It's not suited for layouts: there's no grid, it's difficult to export background images, you need to calculate a lot even for simple adjustments... Photoshop actually carries interesting vector capbilities, which I use for example to design icons that are both infinitely scalable and pixel-perfect (start small, expand appropriately). Why is Photoshop still considered the n°1 web design tool? - Web designers are mostly graphic designers first: they focus on the UI, and don't know or care about the UX. They want to create Dribbble shots, not experiences. - The community and online resources are huge, from simple forum signature tutorials to advanced realistic drawing techniques. - Air-brushed billboard model? Funny image manipulation? Fake celebrity picture? Done with Photoshop. Everyone knows about it. It's even a verb. - Eye-candy sells. Clients don't care about how their website will perform. They care about the "Wow!" effect. It's something they can have an opinion on. And it's not in the web designer's interest to point out this fallacy. I guess the article's purpose can be summarized by its last paragraph, where it displays the drawing of an eye, made with only one Photoshop layer. What's the purpose of this self-imposed constraint? The answer lies in the appended link's destination: a Dribbble shot. You can design interfaces in Photoshop, but most people (including me probably) only draw interfaces.
harwoodleon 13y ago
Every time you write the title "Finishing with an inner shadow" a front end developer dies.

84 points by nathanbarry 13y ago

Don't use photoshop to design interfaces, use css, html, illustrator and photoshop to design interfaces. Interfaces are not two dimensional and static, they are three dimensional (time) in the sense that hey have to be interactive. Flat graphics are not interactive. If you are going to just use photoshop, use a pencil, it's cheaper and easier.

coldcode 13y ago
Yes, the world has changed and interactivity and animation are just as important as pretty pictures.
nathanbarry 13y ago
I agree many interactions should be designed directly in the browser, but even the designers I know that champion designing in the browser (Ryan Singer, etc) take a screenshot and move into Photoshop when they have something complicated to design.
- harwoodleon 13y ago
  Yes, that's why I said use it as part of a set of tools. It is useful of course, but over reliance on it as a tool for designing is a continuing issue for development teams all over the world, right now. People waste a lot of time iterating over pretty pictures and then pass all the hard work to front end engineers to sort out the cruft. Worse still is when you then get a PM that wants the whole pixel perfect thing to jump through HTML5 hoops. With very little consideration to the time element of design, you are left with a lot of pretty images that you may as well start again with. In browser designing is not an optional path to take. If it is going to end up in the browser it will have to be designed at some point in the browser, so designers should dump pixel perfect tools like photoshop as their main iterating tool. Photoshop is still a pixel tool and getting old, Illustrator is now better for interface improvement IMO as it has pixel preview and can output svg too :).
raverbashing 13y ago
And that's why a lot of people design using Flash CSS and HTML? A Designer does not need to know that to produce a design.
- seivan 13y ago
  That's one useless designer.. if the designer does can't produce their own fucking design. That's where we get photoshop monkeys. 30 mb PSD vs someone who can code their design. Your pick.
  - nathanbarry 13y ago
    Agreed. That is one useless designer. When I hired designers I would only hire people who could write front-end code as well as they designed.
    - raverbashing 13y ago
      I understand that there may be a need of that in small projects I've did both: having a design than translation to HTML and people that could do both There's an advantage to someone that will focus only on the design and another that will focus on only translating that to HTML/CSS/JS namely, that someone that can do both very well is rare But of course, if they can do the design and a basic html/css of it usually can move the project faster. You will not have the greatest design or greatest html/css but it will usually arrive at a good solution
- harwoodleon 13y ago
  You mean a web designer? or just a designer? If you are going to design for the web and you DON'T know HTML and CSS then you are pretty fucked.
- nelmaven 13y ago
  A designer needs to know the medium he's working with and it's limitations to produce a good design.

rhgraysonii 13y ago

This is useful if one has NEVER touched photoshop, but I already have a reasonably solid grasp on even intermediate features of Photoshop. Does anyone have some resources on best practices for getting a mockup done if you already know these things but know little of 'good design' other than 'make it responsive and minimalistic'?

nathanbarry 13y ago
I'm working on putting out more tutorials on the topic. I just wanted to get the absolute basics out there first. My course will cover these basics, but also some pretty advanced techniques. Stay tuned. More are coming!
- rhgraysonii 13y ago
  Will do! Thanks. If you have an email list or something, feel free to send a link to it to me. My email is in my profile.
DavidWanjiru 13y ago
I've always thought that "good design" has nothing to do with software. As in you'll have to nail the art elsewhere, then bring those lessons to your software.

mpweiher 13y ago

Not. See the NoPSD movement: http://thoughtworks.github.io/p2/issue02/continuous-design/ http://thoughtworks.github.io/p2/issue02/continuous-design/

seivan 13y ago
+1. I'm getting up to speed with Cocoa to the point where I might be faster than a designer with Photoshop... as long as we don't venture into wooden textures. :)
- platz 13y ago
  I think there's a difference between using Photoshop for exploratory purposes, and using Photoshop to produce a deliverable. I know Chris Coyier is a fan of using photoshop to explore a little bit, before you get into the mode of writing code, which he thinks can interfere with your creative process.
nathanbarry 13y ago
For the vast majority of professional designers Photoshop is critical to creating design elements. Not everyone creates a final, pixel-perfect mockup in Photoshop, but those who don't use Photoshop for smaller parts of the design. It is very common to screenshot your rendered HTML/CSS, take that into Photoshop, design one portion of the interface, then take that back to code.
- mpweiher 13y ago
  And why is this a good thing?
  - rfnslyr 13y ago
    Why do you ask silly snide questions? Tell me what is fundamentally wrong with screenshotting an interface, playing with it a bit, coming up with something you like then turning it into code?

artursapek 13y ago

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.

daemonk 13y ago

I find illustrator to be better for designing interfaces.

oulipian 13y ago
I've used Illustrator to draft website designs for years, and drawing in vector is especially useful now that I often find myself needing larger versions of graphics for hi-res screens.

daledavies 13y ago

Oh how I will miss Fireworks, I always feel Photoshop for interface design and mockups is very much a square peg in a round hole :-(

nathanbarry 13y ago
I think now that Fireworks is gone Adobe will add more of those features directly into Photoshop. I think their live shape tools for editing the radius on rounded rectangles are just the start.
teleclimber 13y ago
I don't know how I'll manage without FW. I use it for design exploration and exporting image assets but it works so well for that. What are the replacements on the horizon? Anybody found anything good?
- daledavies 13y ago
  I tried using Inkscape after the news broke about Adobe not continuing with Fireworks but couldn't get used to it. Maybe I need to try it again, or get a Mac (I currently use Windows) as there seem to be more options for iOS.
  - teleclimber 13y ago
    I used to use Inkscape but switched to FW a few years ago because Inkscape was buggy and slow. Maybe it's better now. I'm hoping for a Win+Mac solution because I switch from one to the other regularly. I'll have to try Sketch sometime even though it's Mac only. http://www.bohemiancoding.com/sketch/ http://www.bohemiancoding.com/sketch/
DavidWanjiru 13y ago
I thought Fireworks is still in the building? At least before adobe went to the cloud...
- 13y ago

ateevchopra 13y ago

Thanks ! Really needed this !

jacobsimon 13y ago

This is a good start but leaves out some really useful features of Photoshop. One of my favorite newly discovered features is layer comps! If you're addicted to photoshop but also want to display your designs somewhat interactively and minimize layer clutter, open photoshop and go to Window > Layer Comps. It lets you create multiple states within the same document, including layer positioning and layer styles. Great for button states or for preserving an entire flow through an interface in the same document. Have fun!

nathanbarry 13y ago
Yep, Layer Comps are awesome. I'll cover them in more detail in the course. That tutorial was starting to get longer than I originally planned.

tomelders 13y ago

I'm a fan of Sketch for UI design, primarily because it offers a more accurate representation of what will actually come out in code. However, I've had little luck in getting the designers i work with to adopt it. With Sketch there is a strong correlation between how things are designed and how they're built that designers find inhibiting and offensive. That said I strongly encourage designers give Sketch a serous look. As always however, the best tool for UI deign will always be pencil and paper. Sketch is simply a good tool to flesh out those concepts.

hmottestad 13y ago

Just don't actually add your text to the button in photoshop, and don't use jpeg for the final image as you'll get jpeg artifacts especially around text. Text should superimposed by the system you are using in the end. Akin to using css backgrounds. This way you will support the wave of hi-dpi displays, be able to easily support other languages and will make correcting text or labels so much easier in the future.

nathanbarry 13y ago
Both the button and text should, if possible, be recreated in CSS without any images at all. But if you have to use an image, you are right that the text shouldn't be a part of it.

bane 13y ago

You can also do some interesting design work in Powerpoint. Change the slide size to something bigger and screen shaped, toss down a rough sketch of a page on a slide. You can even hyperlink buttons and objects on the slide to go to other slides to simulate partial flows through the interface. Use animations for things sliding/fading in-out, etc. triggered by mouse events.

wil421 13y ago
No. I am tired of managers asking me to design mockups or create process flows in Powerpoint because they dont want to take money out of their budget. Adobe CS6 and Visio do it much better and the level of detail you can obtain is much greater.
- bane 13y ago
  Yes. Independent developers without the money to fork out for several hundred dollars of software just to rough out some flows for their small site can get more mileage out of something they probably already own.
bane 13y ago
I guess the downvote means that you can't do these things?

dapatil 13y ago

I prefer using Inkscape to do this. It's more accessible (ie. Free) and the SVG generated easily translates to css.

pirateking 13y ago

I prefer using my interface to design my interface, using a continuous feedback loop. Paper, pencil, and Scheme are high level tools I use to plan and lay out the interface. Objective-C/C, HTML/CSS/JavaScript, Illustrator/Photoshop/After Effects are low level tools I use just to get the details that support the interface in place. At least that is how I like to imagine my workflow to ideally be laid out - it is not always so clearly defined in practice sadly.

chestnut-tree 13y ago

I agree with some of the othe posters here - using a vector drawing tool such as Illustrator for designing an interface is much easier than using a bitmap tool like Photoshop (although Photoshop has some vector drawing tools). The main difference comes from the ease with which you can simply select, drag and re-size elements on your screen compared to Photoshop. This will definitely help you work faster if you are experimenting with layout. You can use a vector drawing app for wireframes, for mapping out screen flows and interaction behaviour, and finally for creating the finished visuals for the app. Photoshop is only really suitable for the last of these tasks. There are some visual effects that only Photoshop can achieve, so you may find you have to use both. But I would always recommend starting with a vector drawing app. If you don't want to use Illustrator (which has a clunky UI in my view) there are plenty of cheaper vector alternatives . Here are a few Inkscape (open source and capable of professional results) http://www.inkscape.org/en/ http://www.inkscape.org/en/ Sketch (Mac only, praised for its ease-of-use) http://www.bohemiancoding.com/sketch/ http://www.bohemiancoding.com/sketch/ Serif DrawPlus (Windows only, low-cost but very capable) http://www.serif.com/drawplus/ http://www.serif.com/drawplus/ (no trial version, but they are selling the previous version for £10 (approx $16 usd): http://www.serif.com/promo/ http://www.serif.com/promo/ Xara Photo and Graphic Designer (Windows only, again low-cost but very fast, capable and an excellent interface) http://www.xara.com/uk/photo-graphic-designer/ http://www.xara.com/uk/photo-graphic-designer/ Edit: just to add, the apps above do not have anywhere near the amount of tutorials for learning as Illustrator (or the industry recognition), so factor that in when choosing a vector app if that's important to you.

virgil_disgr4ce 13y ago
THANK YOU. I cannot stand using a raster tool to design UIs. It's insane to me, and it absolutely boggles my mind that it's considered 'standard' practice (other than just going to html/css directly).
- actionscripted 13y ago
  Let me just re-size this button with rounded corners in Photoshop...

grey-area 13y ago

Photoshop CC certainly isn't cheaper to rent than CS was to upgrade, if you're using it for longer than a few months. Over a couple of years it's clearly more expensive. I'm not really convinced design should atart or end in Photoshop either - design needs to start without preconceptions or limits imposed by the tools (often pencil and paper is beat) and also to consider the medium (in this case the API and GUI toolkits. Something is definitely lost when you split it into separate domains of how things look versus how things work.

gfodor 13y ago

never again. you can take Sketch from my cold, dead hands.

ChikkaChiChi 13y ago

Unless you have absolute control over the form factor in use, using rasterized graphics is a terrible idea.

zyb09 13y ago

As a programmer with very little design talent, but basic Photoshop skills, this is exaclty what I do when I have to make something! Layer styles let you come up with something quite good looking, even if you don't really know what you are doing :)

3stripe 13y ago

Photoshop remains the industry standard program for web/interface design, for now. Yes, there are alternatives approaching maturity, but if you are hired to design a website by a client or third party, they will most likely expect the design to be delivered as a PSD. I've been freelancing at studios across London for the past year and was never once asked if I could use Photoshop — it is assumed. PS. I'm also working on my own guide to designing websites in Photoshop, which concentrates more on ways to improve and speed up your workflow: http://greig.cc/photoshop-webdesign/ http://greig.cc/photoshop-webdesign/

bbx 13y ago

This article could be titled "How to use Photoshop to draw interfaces". I've been looking for a true alternative to Photoshop. Sketch looks neat but requires Mac OS 10.7 at least (my iMac is stuck at 10.6, my MBA isn't suited for graphic design) and seems to suffer from numerous bugs. Macaw looks promising but is too much focused on code. And Fireworks is discontinued. I use Illustrator from time to time, but only for assets: icon fonts, logos, or print-quality jobs. It's not suited for layouts: there's no grid, it's difficult to export background images, you need to calculate a lot even for simple adjustments... Photoshop actually carries interesting vector capbilities, which I use for example to design icons that are both infinitely scalable and pixel-perfect (start small, expand appropriately). Why is Photoshop still considered the n°1 web design tool? - Web designers are mostly graphic designers first: they focus on the UI, and don't know or care about the UX. They want to create Dribbble shots, not experiences. - The community and online resources are huge, from simple forum signature tutorials to advanced realistic drawing techniques. - Air-brushed billboard model? Funny image manipulation? Fake celebrity picture? Done with Photoshop. Everyone knows about it. It's even a verb. - Eye-candy sells. Clients don't care about how their website will perform. They care about the "Wow!" effect. It's something they can have an opinion on. And it's not in the web designer's interest to point out this fallacy. I guess the article's purpose can be summarized by its last paragraph, where it displays the drawing of an eye, made with only one Photoshop layer. What's the purpose of this self-imposed constraint? The answer lies in the appended link's destination: a Dribbble shot. You can design interfaces in Photoshop, but most people (including me probably) only draw interfaces.

harwoodleon 13y ago

Every time you write the title "Finishing with an inner shadow" a front end developer dies.