Wireframes and prototypes
Making a polished, finished version of a website or app right off the bat is almost never a good idea. The first attempt is rarely the best attempt. But once you've invested a lot of time and energy into a design, you'll be reluctant to abandon it, and users will be reluctant to provide an honest critique. That's why we follow an iterative design process where we begin with low-effort, very rough visual representations of a design - what are typically called wireframes (if they're very rough) or prototypes (if they're a little less rough). After getting some feedback from users, the design is revised, and polished a little more. We typically recommend at least three rounds of this - first a wireframe, then a functioning prototype (everything works, but little effort has been put into fonts, colors, images, etc.), and then a polished version of the site.
We were designing a web app to help college students plan out how they will meet academic requirements. Before we did any coding, we generated multiple ideas for how the tool might work, and created wireframes for each one:
After getting some feedback from students on which design they preferred, we built a functioning prototype:
After yet more feedback from students, we refined the prototype to improve it: