How to Create a Website Mockup

How to Create a Website Mockup

Mocking up your website before coding it can help your team get the big picture. Use Lucidchart to build a prototype for your site—you’ll be amazed at how much navigating a mockup feels like navigating the real thing!

Lucidchart is the cloud-based alternative to expensive prototyping programs. With up-to-date UI shapes, widgets, and containers, you can build a beautiful and functional website mockup. Add interactivity with layers, links, and buttons.

Try it now
Sign up free

Website mockup template

Click to open
How to create a website mockup

SELECT A MEDIUM

1.

You can make basic sketches of your website with pen and paper, graphics software, or a diagramming and mockup tool. The advantages of using a dedicated mockup tool include easy arranging of the elements and a library of pre-built shapes.

Lucidchart's website mockup tool is the ideal wireframing and mockup tool. This guide will show you how to create a website mockup, then share it with the world.


CHOOSE A MOCKUP TYPE

2.

Do you want your mockup to be a static image, or to include interactive elements? Are you building your site from scratch or from a popular platform like WordPress? Decide how detailed your mockup will be, then determine which template to work from. You can build your own wireframe by starting from a blank mockup template.


ADD ELEMENTS AND WIDGETS

3.

There are a lot of elements making up this mockup—that’s what makes it look so realistic! Through easy-to-adjust shapes and text boxes, you’ll give the development team an idea of what your final product will look like. Add shapes by dragging an element from the content bar onto the canvas.

4.

Many mockups begin as wireframes, which are basic overviews of the end product. Use elements like the image widget to sketch out a wireframe. The boxes with an “X” show where images will go—think of them as placeholders. Drag them out from the UI widgets library and place them on the canvas.

How to create a website mockup

Customize your mockup

What makes Lucidchart special is its infinite possibilities for customization. In other programs, you’re constrained in what you can do in any template. With Lucidchart, rearrange elements, change colors, and get the text exactly right. Then use presentation mode to show off your mockup in company meetings or to clients. We’ve designed our mockup and wireframe templates with real-world functionality in mind.

Read on for tips that will help you take your mockup from an idea to a polished document.


ALIGNMENT

1.

If you’ve dragged elements onto your canvas and the site mockup is looking messy, align shapes with just one click. First, select the objects you want to align. Once you’ve selected them, navigate to Arrange > Align objects.

How to create a website mockup tool

TEXT STYLES

2.

A website’s text—the typeface, the use of bold or italics, the color—immediately communicates volumes about your company’s values and purpose. The mockup for the Monarch site uses two sans serif fonts, Liberation Sans and Droid Sans, for a clean, modern look. Don’t worry about getting the copy finalized at this stage: focus on the overall purpose of each section of your site. Dummy text can be added by selecting a text box, then clicking Insert > Fill With Lorem Ipsum.

How to create a website mockup tool

COLORS

3.

One of the most enjoyable parts of website design is customizing your color scheme. Every person has a palette they’re drawn to, whether the purpose is to evoke a sense of calm, industriousness, or youthful energy. The combination of teals, greens, and whites used on this mockup gives a sense of the outdoors and forward thinking. This site looks like it would easy to navigate, with large buttons, sliders, and plenty of white space.

How to create a website mockup tool

Now that you’ve completed your website mockup, it’s ready for prime time. Lucidchart works well as a native presentation app: simply open your document and show it off to colleagues or superiors. With real-time collaboration, you have control over editing and commenting permissions. Did you miss a button, misspell a word, or choose a clashing color scheme? Getting an outside opinion of your mockup is always a good idea.


Whether you’re making a desktop site or a mobile app, don’t start coding until you try a Lucidchart mockup. A premium trial is completely risk free: no credit card required!

Try it now
Sign up free