What are the points of apps like Sketch and Photosbhop when it comes to Web Development?

Question

This may be an obvious question but I really don't understand this so if someone can help me that'd be great.

Basically, I am in the middle of developing an e-commerce app for my database management class and I downloaded a free trial of the web design app Sketch. After playing around with it for a bit (having no clue beforehand what it does or how it works), I realized that the app does not convert your creations to HTML/CSS code. Rather, you can export only and image or pdf of your creation.

If I'm correct here, then what is the point of these apps? Are they seriously only for people who have no clue how to code to design a website and then hand off the design to a front-end developer to actually code your creation in HTML/CSS? And are there any apps that allow you to create a website with a GUI like this and convert it to code at the same time?

Answer 1

Web design consists of two aspects: designing a site, and implementing it. You are used doing both together, but it can often be sensible to separate them. For example, you might use a wireframe to discuss requirements with a stakeholder, or to discuss user stories with other developers. Or you might want to have someone who understands design and UX design the appearance of the site, even though they do not know front-end development like CSS and JavaScript. I believe some division of labor can be absolutely sensible here.

Before responsive web design, many websites were literally designed in Photoshop, where all backgrounds and buttons etc. would be rendered. The web developer would then try to translate the PSD into a pixel-perfect reproduction using HTML. That is no longer the case, and a lot of design decisions necessarily happen during development (in particular, how the layout differs across sizes and browsers).