Start with the visitor’s task
Write down what your visitor needs to do: inspect a portfolio, understand a service, explore a collection or contact your team. Then list the material you actually have. A portrait-led portfolio needs a strong portrait; a product sequence needs appropriate product images. Choosing a template around assets you do not have creates extra work before the website can represent your business.
Choose one main action for the first page. A designer seeking enquiries might need selected projects followed by contact details. A more elaborate opening can work if that route remains clear. When comparing previews, follow the journey past the first screen and see whether the section order supports your intended content.
Compare different kinds of motion
Jesko Jets illustrates a sequence-led approach: its catalog describes a journey through a cabin window to an aircraft, its blueprint and a rotating globe. Talal Portfolio combines a portrait opening with an interactive bento grid, a scroll-filled experience timeline and a small footer game. Visual Archive concentrates on a more specific interaction, revealing a gold-masked portrait beneath another image as the pointer moves.
These are different design decisions, not interchangeable decorations. A sequence can tell a story; a grid can make varied projects easy to scan; a focused reveal can make a single image memorable. Pick the structure that fits your material. The examples describe the library designs, not measured business results or a guarantee that generated output will match every detail.
| Your priority | What to inspect |
|---|---|
| A clear service or product story | Section order, readable text and the path to contact |
| A portfolio with different projects | Card hierarchy, image crops and navigation |
| A memorable visual opening | How the scene behaves before, during and after movement |
| Arabic and English audiences | Both language previews, including the mobile layout |
Inspect the phone experience early
Open the preview at the size your customers use. Notice whether the main image still makes sense, whether titles fit naturally and whether the menu is easy to open. A pointer-following effect on a desktop needs an appropriate experience on a touch screen. Ask what the visitor sees when they cannot hover, when the video has not loaded or when they prefer less movement.
Look for a complete first screen rather than judging a design only after every asset has arrived. Read the page while scrolling normally. If an effect keeps interrupting the task, choose a calmer design or describe the exact adjustment you need. Test the resulting website again after replacing images and text, because those changes can alter wrapping, spacing and load time.
Separate the design from your business facts
Keep the template’s visual decisions in one part of your brief: layout, image proportions, typography, section order and motion. Put your own facts in another: brand name, service details, real project descriptions and contact destinations. This makes it easier to ask an AI assistant to preserve the composition while adapting the material.
Do not carry sample testimonials, figures or company names into a real launch. If you have no testimonials, leave that feature out of your own build or replace it with an honest project explanation. Before copying a prompt, check the design’s current access options. A prompt is a build instruction; an available source download is a separate deliverable.
Make a short, useful comparison
Shortlist three designs and record the same observations for each: content fit, mobile behavior, Arabic and English support, assets you need, and the changes required. Prefer the option you can adapt convincingly with your actual materials. A small list with clear reasons is more useful than saving dozens of impressive openings.
Start with the linked examples, then browse the library for a direction that suits your project. Once you choose, follow the Motionspace guide to copy the prompt, introduce your project and inspect a working preview. Treat the preview as the beginning of review, not as proof that every link, form and language state is ready to publish.
Sources and further reading
Find a starting point for your website
Explore the previews, compare the details, and choose a design that fits your project.