How to Share Website Mockups with Swelik: A Complete Guide

A website mockup should be easy to review. Your client should be able to open a link, understand what they are looking at, and scroll through the design without hunting for an attachment. The presentation method should support the conversation rather than become another thing you need to explain.

Swelik turns an exported design into an unlisted browser preview. You upload a file, create the preview, and share its public URL. You also receive a separate private management link for making changes. This guide walks through that process and the decisions that make the result useful, from choosing an export to handling the second round of revisions.

Start with the review you actually need

Before exporting anything, decide what you want the client to evaluate. A homepage concept review might focus on the message, section order, and visual direction. A later review might focus on approved copy, spacing, and the details of a contact form. These are different conversations, even if the same page is being shown.

Give the review a clear scope. For example: “Please review the desktop homepage structure and the services section. Mobile layouts and final photography will follow separately.” This prevents a rough placeholder image from dominating a discussion that was supposed to settle the page structure. It also makes an approval more meaningful because everybody understands what was included.

Swelik is a presentation and review tool. A static mockup does not prove that a form submits correctly, that a checkout works, or that the finished website meets its performance targets. Those need testing on an implemented site.

Step 1: Prepare a clean export

Export the complete frame or page from your design tool. Check that the header, final section, and footer are included. A clipped bottom edge can make a complete design appear unfinished. Remove selection outlines, editor panels, temporary notes, and any personal information that does not belong in a client preview.

Choose a format that suits the source. PNG or WebP works well for a finished raster mockup. A PDF can preserve vector text and shapes when the design tool exports them as vectors. Static HTML and CSS can be useful when you already have browser-ready markup. For a deeper explanation, read our guide to PNG, WebP, PDF and HTML mockups.

Do not enlarge a small screenshot and assume that the extra pixels add detail. If the original is only a few hundred pixels wide, export again from the design source at a suitable width. Check the current upload limit shown in Swelik rather than relying on an old tutorial or a remembered setting.

Step 2: Create your preview

Open Swelik and enter a project name that will make sense to the client. “Oakfield Studio Homepage” is clearer than “Untitled final 7.” The name appears in the preview interface, so treat it as part of your presentation.

Select your file or drop it into the upload area. Confirm the filename, format, and file details before choosing Create Preview. For HTML, use the HTML/CSS option or the supported HTML file upload. Include the CSS needed to present the design, and use valid absolute HTTPS addresses for externally hosted assets.

Wait for processing to finish before sharing the result. If processing fails, the error does not necessarily mean the original file is corrupt; the document might use an unsupported feature or need a different export. Try a simpler supported export, or review the file before creating another project. Avoid sending a link while the preview is still being prepared.

Step 3: Understand the two links

The public link is for your client. Anyone who possesses it can access the available preview. Swelik does not publicly list these projects, but an unlisted link is not the same as password protection or access restricted to named people.

The private management link is for you. It provides access to management actions such as renaming the project, replacing the mockup, and deleting the preview. Save it in a private project record. Do not paste it into a client message, shared document, or public task description.

Keep your design source and original exports in your own storage as well. A preview service is not a substitute for your working files or backup process. Check the expiration date shown for the project and plan around it if the client will be reviewing later.

Step 4: Inspect the exact public experience

Open the public URL yourself. Check the first screen, the middle sections, and the footer. Look for missing fonts, cropped content, unreadable text, or an image that is much smaller than expected. When the file is HTML, confirm that externally hosted pictures actually load; preserving a URL cannot force another host to serve it.

For raster images, Fit Width makes the design fit the viewing area, while 100% shows it near its natural pixel width. Fit Width can enlarge a small image, which may make it soft. For PDFs, zoom redraws the document, but raster images inside a PDF still have a finite resolution. Use the controls to inspect details rather than treating every blurred pixel as an upload failure.

Check a narrow screen too. A desktop screenshot fitting a phone screen is still a scaled desktop screenshot, not a responsive mobile layout. If you want feedback on the mobile design, share a separate mobile export and explain which link represents which screen size.

Step 5: Send a focused review message

Share the public link with a short introduction, a review goal, and a deadline. The link should be the easiest part of the message to find. Keep the explanation outside the design itself so that the client can return to it while reviewing.

For example: “Here is the desktop homepage concept. Please review the opening message, section order, and service descriptions by Thursday. The team photos are placeholders. If you suggest a change, please name the section and explain the result you want.” This gives the client a useful starting point without telling them what opinion to have.

Where comments or approval controls are enabled, explain how you want them used. Otherwise, a consolidated written response is perfectly workable. The important part is agreeing on one place for decisions, rather than collecting contradictory changes across several message threads.

Step 6: Replace the mockup after revisions

Open your private management link and choose Replace Mockup. Upload the revised export and wait for it to finish processing. The project’s public URL stays the same, which means the client can return to the link they already have.

Verify the updated public page before announcing the revision. Then explain what changed: “The services section now appears before testimonials, and the consultation button wording has been updated.” A stable URL helps people find the design; a short change summary helps them understand why they are looking again.

Do not create a separate project for every minor revision unless you intentionally need a separate review destination. Keep version names and your original exports organized even when the public URL stays unchanged. For a complete process, see how to manage mockup feedback and revisions.

Common problems to check first

If an image looks soft, compare its pixel width with the width at which you are displaying it. Re-exporting from the source often helps more than uploading the same small file repeatedly. If a PDF takes time to render, inspect whether it contains extremely large raster images or unnecessarily complex effects. Preserve a backup before simplifying the export.

If an HTML image is missing, check that its URL starts with HTTPS, is reachable without signing in, and does not depend on a local file next to your HTML document. A file path from your computer will not become a hosted asset merely because the HTML was uploaded.

If the public page becomes unavailable, check the project’s status and expiration from your private management link. Do not assume that refreshing will recover a deleted or expired preview. Read the privacy information before using unlisted links for sensitive work.

Frequently asked questions

Does the client need the management link?

No. Send the public preview URL. The private management link can allow someone to change or delete the project and should stay with the owner.

Does replacing a file change the public URL?

Replacing the mockup through the existing project keeps its public URL. Creating a completely new project produces a separate preview, so choose the replacement action when you want continuity.

Is an HTML preview a fully hosted application?

No. Swelik supports a static design presentation. Scripts and other active behavior are restricted. Use a proper staging deployment when you need to test logins, forms, checkout, or application behavior.

What should I do after approval?

Keep a record of the approved version, the scope of approval, and any outstanding items. Retain your source files and exports. Then move implementation decisions into the handoff process instead of assuming that a visual approval covers every technical requirement.

A good review starts with a clear file and ends with a clear next step. Create a preview with Swelik, save the private management link, and give your client one well-explained place to review the design.