Jump to content
Stef's Coding 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

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. ;) 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...