0

I'm someone that's been following the industry and reading up on web design/development for a good few years, and only now making the leap into studying it properly in order to go freelance. From what I gather of the industry and designers/developers in it, there's an increasing push to move towards designing in the browser.

In the informed opinion of the developers and designers on here, as someone with the privilege of starting anew at this time, should I teach myself from the outset to design in the browser, leaving PSD mockups behind as a relic of the past, or should I still be open to creating websites from PSD mockups? What are the advantages or disadvantages of each route?

Thanks.

Improve this question
2

4 Answers 4

Reset to default
3

I would definitely learn to mockup in a graphics program. I would not choose Photoshop (sketch, illustrator, Figma, Affinity, all these seem better alternatives to me), but that's a minor issue.

It is a useful skill to be able to use a graphics program to create mockups and the graphics you will need in your final design.

That doesn't mean you always need to start with static mockups. Many times you will be able to design directly in HTML, but it's a useful skill to have.

I find that when I design static mockups I have to think out how everything will be pieced together, how everything will look, and when I design in html I let the document structure guide my design decisions. Both approaches are valid, but one might be preferrable to the other in some ocassions. Usually, for a new project I'll design the first 1-2 pages in sketch and then the rest I'll do direcly in html, when I have extablished general layouts and styles.

Improve this answer
2
  • I agree to this, I prefer to do some general pages in Sketch, discuss these with the client and do the rest in code.
    – Summer
    Oct 4, 2016 at 8:28
  • This is very similar to my usual approach. I always start on paper. I don't know why, but it's so much easier for me to throw out design and layout ideas with a good pen in my hand. After that, I usually digitize the mockup in a graphics program (using Photoshop currently) so I know exactly how many pixels I want things to be etc. Then I move to HTML. But everyone is different. Do what feels right to you. Whatever helps you design better!
    – Ashlee Palka
    Oct 7, 2016 at 17:45
2

Photoshop can be a fantastic tool. Manipulating images is something a web designer will find him/herself doing very frequently. Knowing how to use Photoshop will hold you in good stead.

If there's a style that you want to achieve, having a reference is extremely useful. You (or someone else) can use it for measurements, colour sampling and inspiration. Recreating your design in code could be non-trivial with potential cross browser issues and unforeseen challenges.

Developing in-browser is an indispensable development tool. You will end up using it to design elements regardless of whether or not you can use Photoshop. It allows you to immediately see the changes in the rendering of your code as you type. If you lean heavier on the coding side of web development you might enjoy this stage of development more.

When working as part of a team (even as a freelancer), it is essential that everyone is working to the same goal. You might find yourself creating or using a lot of style guides, having a detailed plan is sometimes necessary. Being able to convey your intentions to clients is also something not to be overlooked.

I personally find it easier to create the layout and graphical mock-ups in Illustrator (the program is not important unless you need to use the file collaboratively). Getting your ideas down and being able to communicate them is what's important. Layout and Prototyping are now often handled with tools such as Adobe XD, Sketch and Figma.

'Web design and development' encompasses a lot of knowledge and makes use of many tools. All of which you will pick up as you begin creating web sites and applications. Anything that makes your life as a freelancer easier is worth learning.

Improve this answer
0

Another tool is Adobe Muse. It's new, but a slick solution. You can do a lot of the design in it, and export to html.

Improve this answer
0

Hum. Design is a process.

You could need, if the case, Photoshop to give your photos a style, Ilustrator or Corel to make your logo, your icon set, or inclusive a totally new font, or making a totally new style of web design.

There's an increasing push to move towards designing in the browser.

For some of us this "tendency" has about 20 years, so nothing new here. But I am not sure about the concept "designing" in the browser. The design process is on the paper, on the mind.

The tendency is to "assamble" in a html editor, and viewing directly in the browser. Assamble because there are framweorks that you only put an instruction and it does some for you. This part could be called design, but it is more specific. Coding.

Web design is moving more to a more specific coding, not nice shadows or glossy buttons, which now are given by the coding itself.

But still there is room to use a graphic program to explore new ideas. Note the word "new". If the idea is just using the tools a framework provide, go directly to the coding.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.