Using Photoshop to plan website UI?

[ayano32]

Hi! 

I am new to the community and I've only recently started with learning web development. I am currently doing the CSS course. 
However, I couldn't notice that the process of creating an appealing web page is quite slow. That is to say, code, view, adjust, code, view, adjust, repeat. 
Has anyone thought about an alternative workflow?

I am thinking myself of planning everything in photoshop visually where I can make pedantic adjustments
to anything related to UI and general aesthetics. And so after that is done, to recreate the photoshop design with HTML and CSS and make it functional. 

Meaning that I won't be worrying about whether the size of the font looks right, or the colour of something looks okay. Everything will be planned out. 
Then it will become a matter of coding.

Has anyone thought of this or tried this? Or are there other and better alternative methods of design-planning you employ?  

 

 

Edited January 1, 2019 by ayano32

[administrator]

Hi,

Every web designer has their own preferred method of doing things. Some use Photoshop while others who are more comfortable with code, will start with some web template, and then tweak the structure and design from there. 

[DavidCampbell]

With photoshop don't get too attached to the details, as once you start coding, things tend to look different. Especially once you start accounting for the way different browsers interpret your beautifully crafted design. Being pedantic about pixel perfect design will just lead you to despair. You need to think of design as fluid, it's not like graphic design for print. Not at all. 

Don't be scared of using CSS, the work flow can be very fast once you know what you're doing. Just as fast as fumbling around in photoshop or illustrator.

I'm in the camp of preferring to dive straight in with the code. UX problems i'll just sketch out with pencil and paper roughly, then go code it. I use photoshop to appease people who need to see some eye candy. But I manage expectations by stating that what you see in photoshop is not necessarily how the final implementation will look.


 

[ayano32]

18 hours ago, administrator said:

Hi,

Every web designer has their own preferred method of doing things. Some use Photoshop while others who are more comfortable with code, will start with some web template, and then tweak the structure and design from there. 

Thanks for the reply. I should have been more patient since the box model of CSS was my favourite part of the course, exactly what I was looking for. 

[ayano32]

16 hours ago, DavidCampbell said:

With photoshop don't get too attached to the details, as once you start coding, things tend to look different. Especially once you start accounting for the way different browsers interpret your beautifully crafted design. Being pedantic about pixel perfect design will just lead you to despair. You need to think of design as fluid, it's not like graphic design for print. Not at all. 

Don't be scared of using CSS, the work flow can be very fast once you know what you're doing. Just as fast as fumbling around in photoshop or illustrator.

I'm in the camp of preferring to dive straight in with the code. UX problems i'll just sketch out with pencil and paper roughly, then go code it. I use photoshop to appease people who need to see some eye candy. But I manage expectations by stating that what you see in photoshop is not necessarily how the final implementation will look.


 

Very useful reply, thanks!

[theasilayro]

This product design dilemma sure seems to still be happening a lot these days. However, I would say it's a tad breathtaking to see that some startups are trying to change this redundancy problem.

Take for example Uizard, which identifies itself as a prototyping tool -- but is something that I think can quite contribute to alleviating the issue.

In this tool, you can essentially take photos of your wireframes and wait a few seconds before they're being transformed to UI designs (where you can fine-tune and make interactions). All of these reflect in ready-to-use, understandable code in real time.

Sure, there may be some limitations to the tool, but I think that tools like this shows us that there definitely is a problem with the current workflow, and that luckily, a bunch of developers and scientists are out there working on it.