6 ms·

I always use Photoshop for my mockups for clients, but I'm still pretty new to web design. I've only been at it about 5-6 months, with 1-2 years experience in

I always use Photoshop for my mockups for clients, but I'm still pretty new to web design. I've only been at it about 5-6 months, with 1-2 years experience in graphic design. Any advice?

sushi 14y ago
I think getting better at CSS would be my only advice. I got better at it by doing tutorials on https://css-tricks.com/ https://css-tricks.com/. One other thing I do is try to make sure I complete my web design without having to use any image or Javascript. When you limit yourself in this way, you find ways to accomplish in CSS/CSS3 and get better at it eventually.
SkyMarshal 14y ago
http://24ways.org/2009/make-your-mockup-in-markup http://24ways.org/2009/make-your-mockup-in-markup
josefresco 14y ago
Two things from someone with 12 years in professional web design: Switch to Adobe Fireworks now before you get too used to Photoshop. And ignore all of the engineering advice here about jumping straight to CSS/HTML. Good web design begins much earlier than Photoshop/Fireworks, and doesn't even move to the graphics/proof stage until you've made dozens of decisions beforehand that will influence your design (think business goals, marketing messaging, platform, audience etc.) HTML/CSS is almost one of the last steps in a complete web project.
- gilrain 14y ago
  Can you expand on why you recommend Fireworks over Photoshop, please?
  - robszumski 14y ago
    1. an Illustrator-style object selection engine so you don't have to do that "right-click > pick layer from list" BS. 2. Multiple versions of one screen in a single file. Think collapsed/uncollapsed states of a form or all of the tabs of a form. 3. Small file sizes because it uses PNGs. 4. Ability to import PSDs and use style from PSD layers. Same with Illustrator files. 5. Customizable patterns UI so you can drag and drop custom buttons, etc. 6. Built in prototyping. Just click-through stuff using hotspots, but it's a good way to see if an interaction is going to be worth pursuing further or not.
    - AhtiK 14y ago
      > 1. an Illustrator-style object selection engine so you don't have to do that "right-click > pick layer from list" BS. Ctrl/Cmd+click with Photoshop move tool automatically selects the layer that is under your mouse cursor raster. Not 100% Illustrator-style but less BS than selecting from lists.
- joshmlewis 14y ago
  Yeah, I would take this as a grain of salt like any other advice. Fireworks isn't necessarily better, either. I would definitely create buttons or icons in Illustrator (but you still don't have to do that), and do a lot of everything else in Photoshop. You can try Fireworks and see if it's your cup of tea, but Photoshop definitely isn't going anywhere as far as standard practice for awhile, at least from what I've seen. I've worked with startups all over the country and top web development firms and still all I see is Photoshop/Illustrator. Not to say Fireworks is bad or you shouldn't use it, but take it as a grain of salt and see what works best for you. It never hurts to learn new things.

I always use Photoshop for my mockups for clients, but I'm still pretty new to web design. I've only been at it about 5-6 months, with 1-2 years experience in graphic design. Any advice?

sushi 14y ago

I think getting better at CSS would be my only advice. I got better at it by doing tutorials on https://css-tricks.com/ https://css-tricks.com/. One other thing I do is try to make sure I complete my web design without having to use any image or Javascript. When you limit yourself in this way, you find ways to accomplish in CSS/CSS3 and get better at it eventually.

SkyMarshal 14y ago

http://24ways.org/2009/make-your-mockup-in-markup http://24ways.org/2009/make-your-mockup-in-markup

josefresco 14y ago

Two things from someone with 12 years in professional web design: Switch to Adobe Fireworks now before you get too used to Photoshop. And ignore all of the engineering advice here about jumping straight to CSS/HTML. Good web design begins much earlier than Photoshop/Fireworks, and doesn't even move to the graphics/proof stage until you've made dozens of decisions beforehand that will influence your design (think business goals, marketing messaging, platform, audience etc.) HTML/CSS is almost one of the last steps in a complete web project.

gilrain 14y ago
Can you expand on why you recommend Fireworks over Photoshop, please?
- robszumski 14y ago
  1. an Illustrator-style object selection engine so you don't have to do that "right-click > pick layer from list" BS. 2. Multiple versions of one screen in a single file. Think collapsed/uncollapsed states of a form or all of the tabs of a form. 3. Small file sizes because it uses PNGs. 4. Ability to import PSDs and use style from PSD layers. Same with Illustrator files. 5. Customizable patterns UI so you can drag and drop custom buttons, etc. 6. Built in prototyping. Just click-through stuff using hotspots, but it's a good way to see if an interaction is going to be worth pursuing further or not.
  - AhtiK 14y ago
    > 1. an Illustrator-style object selection engine so you don't have to do that "right-click > pick layer from list" BS. Ctrl/Cmd+click with Photoshop move tool automatically selects the layer that is under your mouse cursor raster. Not 100% Illustrator-style but less BS than selecting from lists.
joshmlewis 14y ago
Yeah, I would take this as a grain of salt like any other advice. Fireworks isn't necessarily better, either. I would definitely create buttons or icons in Illustrator (but you still don't have to do that), and do a lot of everything else in Photoshop. You can try Fireworks and see if it's your cup of tea, but Photoshop definitely isn't going anywhere as far as standard practice for awhile, at least from what I've seen. I've worked with startups all over the country and top web development firms and still all I see is Photoshop/Illustrator. Not to say Fireworks is bad or you shouldn't use it, but take it as a grain of salt and see what works best for you. It never hurts to learn new things.