How to make a mockup for website?

8 min read

Step-by-step tutorial how to create a website mockup. avoiding common mistakes and pitfalls. The design stage is one of the most important steps in the development of a web-project.

What is a website mockup? Basically, the creation of a mockup for a future website implies the design of its basic structure which includes the implementation of such aspects as color palette, visual effects, and shapes of key components. The overall style of the website is decided upon at this point. It is, in fact, kind of an MVP, which can safely be demonstrated to a client for agreeing upon the ultimate looks of the site and making the certain corrections that hadn?t been defined on the wireframe creation stage.


As we mentioned, a web page Mockup is an implemented foundation. One that features clearly delineated color palette, design, media content, fonts, and, of course, locations for the intended elements.

How to make a mockup for website?

As to the practical benefits one might get when they create mockups for website, their significance is difficult to overestimate. Let?s define clearly the advantages both parties involved are getting (clients as well as web developers):

  • less talk, more action: due to being able to visualize their own concepts, web developers are getting a great opportunity to explain as precisely as possible the way they see design of a future website to a client (in the case of employing the regular sketches which only display the location of UI elements, oftentimes, a client and a web developer have different images of the end result);
  • directions for the further website development: a detailed mockup allows for clients to accessibly define their further desires as to the future website?s design (from the preferred color palette to the button shapes);
  • decrease of expenses caused by corrections: as you may know, the errors are better fixed when the website isn?t completely built yet and there is a safe mockup to work with.


Let?s find out with which tools one can be aided to create a perfect mockup.

How to make a mockup for website? - 1


Photoshop is the first thing that comes to mind when the question as to how to design a website mockup appears. In fact, this piece of software is quite a universal ?all-in-one? tool, with the help of which one can edit pictures as well as design a website template. It is an all the more useful solution in the case if a client must focus on graphic elements: background, color palette, fonts, and the location of all the mentioned. In most cases, all the templates created via this editor are static because its software methods of implementing animation are different from those employed in web technologies. Thus, if your plans include involvement of complex animation objects, Photoshop wouldn?t be enough to work everything through.

It will be a great solution, however, in the cases where the dedicated budget is strictly limited, making you search for the cheapest (or completely free) solutions to involve. It isn?t really reasonable to refuse to create web page mockups at all in such a case. Just use this piece of software.

We?d also recommend choosing Photoshop when the website structure is so complex that even the development of its template in the dedicated software (which we?ll discuss below) would take loads of time. Thus, you will have time to get more detail from the client requirements stated on the initial stage of cooperation and get comprehensible directions for further actions.

Last but not least, you?ll definitely need Photoshop or some similar software once the whole website has been built and a client asks of you to add literally a couple of new pages. In such a case, you can create a quick website mockup not bothering with too many details.

How to make a mockup for website? - 2

Specialized mockup design software

In some cases, it would be simple and accessible employing applications, the primary specialization of which is to create UI mockups for a website in the first place. The most efficient and accessible among such solutions, in our opinion, are MarvelApp, Moqups, and Balsamiq. All of them feature intuitive navigation while certain elements are even much more easily realized in them than in the renowned Photoshop. That?s why even if you?re a novice in using this type of tools, you?ll be able to create your mockup without too much effort involved. The only significant downside of those solutions is that they are not free (although the license price for small IT organizations comprises, on average, a couple of tens of c.u. per month).

HTML & CSS coding

To give you the last point, let?s consider the most complex way of creating website mockups ? with the help of HTML and CSS coding.

On one hand, it is a very time-consuming affair for an inexperienced web developer: beginner programmers are often obliged to explore the Internet for hours only to find out how to change a slider image scale; and afterwards, you meet the client and hear that they expected to see a completely different type of image there. If we?re talking about a unique designer project, the assumed time expenses can be multiplied by two-three times easily. On the other hand, sooner or later you?ll have to implement everything defined by the mockup anyway. Thus, customizing or adding up the existing website?s code base you?re simultaneously perfecting your professional skills.

Additionally, take into account that everything related to color, dimensions or location is always simpler (and more reliably) coded than approximately sketched out in Photoshop. Just be prepared that as the time comes to implement an end result, you might not handle the things initially visualized in the image editor.

We?d like to also notice that HTML/CSS coding can give you a clear understanding of which interface aspects you will be able to realize and which not.

How to make a mockup for website? - 3


So, which of the three described ways of mockup creation to choose? In fact, in most cases, developers prefer to use either Photoshop or specialized website mockup tools like MarvelApp. If you plan to demonstrate to a client some unique capacities (for instance, some original animation, an adaptation of a website to various screen formats, a certain type of touch feedback, or custom elements locations), then we?d recommend doing that using HTML/CSS program code. Either way, there is no universal approach to implementing this affair, so the decision of what way to employ is only yours to make.


Let’s sum everything up. It is a fact that one can create a website mockup using even an ordinary Photoshop. But that doesn’t mean that your end product will be able to stand competition with the solutions created by expert web developers. In order for your web-resource to be duly appreciated by your TA, your best bet would be to employ services of highly-qualified experts. In particular, you can turn to us for help. Reach out to us using the contact data and we will contact you to discuss all the details of working on your project.

Rate this article
0 (0)

Popular in blog

View all
Contact Us

We’ll contact you within a couple of hours to schedule a meeting to discuss your goals.

or via Email


We collect cookies to improve your experience with Artjoker