0

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?

Improve this question
3
  • Apps like Sketch exist because using them is better than paper and pencil, and using them is less expensive than writing the actual program. Sometimes you need a wireframe or sketch before you start programming, and making one in an electronic tool is always better because you can share it electronically with others. You can, of course, use a whiteboard and take a picture of it with your cell phone and pass that around, I suppose. In any case, the lack of usable HTML output does not diminish the need for sketches or the usefulness of sketching tools.
    – Robert Harvey
    Commented Nov 3, 2018 at 16:25
  • I see. I guess I recognize their importance now when designing a website for a large enterprise. But, they probably aren't of much use to a student trying to design a basic website for a class project. Just wanted to see if I should bothering purchasing it at this point but I'll hold off. Thanks!
    – DylanG1991
    Commented Nov 3, 2018 at 16:31
  • There are sketching tools online that you can use for free. Try those!
    – Robert Harvey
    Commented Nov 3, 2018 at 16:32

1 Answer 1

Reset to default
3

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

Improve this answer
3
  • "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." - This is not correct. It is still done today and it does not prevent responsive design.
    – Bent
    Commented Nov 3, 2018 at 20:22
  • @Bent yes, kinda, but the age of 760px fixed width layouts is definitively over. A PSD can serve as a reference or a mockup but cannot reasonably describe the design in its entirety. The web developer will usually try translating the look and feel of the design to the CSS, not merely transcribe it.
    – amon
    Commented Nov 3, 2018 at 20:35
  • 1
    the 760px days are over, I agree with you on that. But you underestimate the abilities of good graphic designers. It is true that bad graphic designers will make you translate the design, the good you'll only need to transcribe to use your distinction. They may not understand how html and css works, but they understand how the end product is supposed to be and how it should change based on screen width etc.
    – Bent
    Commented Nov 3, 2018 at 20:52

Your Answer

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

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