Jump to content
Killersites Community
ayano32

Using Photoshop to plan website UI?

Recommended Posts

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 by ayano32

Share this post


Link to post
Share on other sites

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. 

  • Like 1

Share this post


Link to post
Share on other sites

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.


 

Share this post


Link to post
Share on other sites
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. 

  • Like 1

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×