10 Tips For Creating Website Mockups In Photoshop
blog.plasticmind.com
10 Tips For Creating Website Mockups In Photoshop
1–10 of 18 posts
Re: 10 Tips For Creating Website Mockups In Photoshop
#20. Do not mock up webpages in Photoshop.
Re: 10 Tips For Creating Website Mockups In Photoshop
#30. Do not mock up webpages in Photoshop.
Why not?
Re: 10 Tips For Creating Website Mockups In Photoshop
#4Re: 10 Tips For Creating Website Mockups In Photoshop
#5Re: 10 Tips For Creating Website Mockups In Photoshop
#6Earlier quoted context omitted.
Because the web is not print.
Photoshop's not 'for' print, either. I think you'll be hard pressed to find a better program to use for doing graphic design, especially for things that are to remain digital.
Good point.
A possible argument against Photshop (and similar tools) is that they lead you to create a look that you will never ever get quite correct in a Web page. Assorted fonts, kerning, leading, and so on may not be reproducible in CSS.
On the other hand, if you are mindful of these things, it's a big help to have multiple layers and such that you can easily move, swap around, etc.
Re: 10 Tips For Creating Website Mockups In Photoshop
#7Earlier quoted context omitted.
Photoshop's not 'for' print, either. I think you'll be hard pressed to find a better program to use for doing graphic design, especially for things that are to remain digital.
Good point. A possible argument against Photshop (and similar tools) is that they lead you to create a look that you will never ever get quite correct in a Web page. Assorted fonts, kerning, leading, and so on may not be reproducible in CSS. On the other hand, if you are mindful of these things, it's a big help to have multiple layers and such that you can easily move, swap around, etc.
Like any powerful tool, if wielded by the untrained or inexperienced, it can lead to bad results.
Re: 10 Tips For Creating Website Mockups In Photoshop
#8Earlier quoted context omitted.
Because the web is not print.
Photoshop's not 'for' print, either. I think you'll be hard pressed to find a better program to use for doing graphic design, especially for things that are to remain digital.
Photoshop is a terrific tool for manipulating absolute raster images.
But the web is fluid interpretive hypertext, not PDF! There is a massive impedance mismatch -- if your starting point when you approach the web is an image, you are totally fucked.
Start with hypertextual substance, and add style slowly where appropriate.
Re: 10 Tips For Creating Website Mockups In Photoshop
#90. Do not mock up webpages in Photoshop.
I disagree. Because of my background as a programmer, it never even occurred to me to mock up websites using Photoshop when I started--it was 100% CSS+HTML, all the time. But, a few times I was designing something and had to to show a colleague a draft in a hurry, so I did a screenshot of the incomplete page, pasted into MS Paint, and embellished it there. When they made suggestions, I just went back into MS paint and re-arranged things again in a few seconds and resent. It was amazingly productive compared to writing all the code. And, I didn't even have layers--it was MS Paint!
After a few experiences like that, I switched to a hybrid, iterative approach where I would mock stuff a few aspects of the page in a real image editor and then code it when I found the correct look. It really saves a lot of time when I am doing anything that requires non-trivial CSS and HTML.
It saves time because I end up throwing away the majority of my designs after I see them--they look better in my head than they do on the screen. If I just did it in HTML+CSS then I'd waste more time just doing the coding and I've have less time to experiment with different looks.
The thing to keep in mind is that it isn't necessary to spend hours and hours getting everything (e.g. font anti-aliasing, color shades, spacing) pixel-perfect in Photoshop. You just need to get it good enough where you can tell that the design is going to work. Then you can code it up as a HTML+CSS mockup. No matter what you do, the Photoshop mock-up and the final version aren't going to look the same anyway (especially when you consider browser differences).
Re: 10 Tips For Creating Website Mockups In Photoshop
#100. Do not mock up webpages in Photoshop.
I disagree. Because of my background as a programmer, it never even occurred to me to mock up websites using Photoshop when I started--it was 100% CSS+HTML, all the time. But, a few times I was designing something and had to to show a colleague a draft in a hurry, so I did a screenshot of the incomplete page, pasted into MS Paint, and embellished it there. When they made suggestions, I just went back into MS paint an…
Photoshop completely obscures the base reality of the medium of hypertext -- the document -- and directs all the focus onto surface concerns. I find that if you start by building pages like it's 1994 (but with div+span & class+id), and thinking about how to logically structure your document, the CSS can slowly fall into place iteratively.
Photoshop has all sorts of clever tools for pixel-perfection, and it's very easy to go overboard. The biggest problem is the easy delusion that the mockup is the object being designed, and the subsequent divorce from reality.
That's why I believe that if you're going to do anything outside a text-editor/browser/inspector, it should be in an unreal medium: dry-erase, crayons, cut-out construction paper, post-its, watercolors, FINGERPAINTS!