Link to post

Share on other sites

Creating a single mockup isn't much help. You need to consider how the site will look on a desktop, tablet and phone in landscape and portrait. You need to design a navigation system that works on all devices. You need a homepage and product pages and a whole lot more.

It's often better to develop the content, navigation and calls to action first as they will often dictate the layout and structure of the site.

I assume the OP meant a mockup of a website, or in other words, a visual high-fidelity graphic preview of how the website would look like when fully developed (which was the usual practice a few years ago) and not a presentation mockup as @Quco's answer suggests.

As @fisicx pointed out, there are many many things to take into account. Ideally, you'd start with wireframing or prototyping and most likely, you'll need to create quite a few low-fi mockups / wireframes / screens (you name them) during this first stage to illustrate the user journey, focusing on functionality, gathering (or discovering rather) additional business requirements in the process, perhaps even testing various layouts without investing too much time.

Of course you can do most of this in Photoshop but there are plenty of tools, free or paid, which you can use to create high or low fidelity mockups. It all depends on your workflow - virtually any tool has its use if you feel comfortable with it.

If you Google the following terms, I'm sure you'll get a better idea of what you really need:

Share on other sites

Good designs are never done upfront and then thrown over the fence to the development team. Also designs should think more in terms of individual components rather than pages however some very high level rough outlines of what components key pages contain is useful.

Good design is all about collaboration and a continual feedback loop between design, dev, stakeholders and end users. You need to find what design best suits the needs of all of these and will always involve compromise.

All too often design teams will spend months creating a beautiful shiny design that gets dumped onto the dev team only for it to be sent back as the design does not translate well to sensible code and/or has major UX/Accessibility failings.

Going back to components and the feedback loop, individual components should be designed and built ideally with the designer and developer pairing to determine the feasibility of the component. Components should be looked at like lego bricks - they should be able to slot together with other components to build out a page or view.

These components should start out at a very low level - like a wireframe to very quickly determine the feasibility described above, with the cosmetics coming second.

The design team can then produce pages or views containing these components, again with a feedback loop between dev, users/stakeholders.

I really don't think the waterfall process of design->dev works well, the two should be done in unison as a collaborative effort. Results from teams that do this well speak for themselves. It's a massive pain to design and build something at great expense to find out at the end that it's not really what the user had in mind.