Midjourney can help with website design by generating art direction, hero images, promotional tiles, product concepts, and logo ideas. It does not build the final page, write accessible production code, or guarantee a usable logo. This tutorial shows a current workflow for creating assets in Midjourney and placing them into a Shopify page builder.
The original video below was recorded with Midjourney V4. The overall design process is still useful, but its old parameters and interface steps should be treated as a historical demonstration. Midjourney’s current default model is V8.2, so the prompts in this updated guide use current, simpler syntax.
What Midjourney Can and Cannot Do for a Website
| Good use of Midjourney | Still needs another tool or human review |
|---|---|
| Hero and campaign images | Responsive page layout and browser testing |
| Visual style exploration | Brand strategy and final art direction |
| Product-background concepts | Accurate product representation |
| Logo and icon ideas | Clean vector artwork and trademark checks |
| Decorative illustrations | Alt text, accessibility, and performance optimization |
Treat generated images as raw creative material. A functional ecommerce page still needs deliberate hierarchy, readable text, licensed assets, mobile testing, and an accurate product offer.
Plan the Website Assets Before Prompting
Open the existing page template and list every image slot before generating anything. Record the slot’s purpose, aspect ratio, focal point, and text-safe area. This prevents a common mistake: creating attractive images that cannot be cropped into the actual layout.
| Asset | Typical goal | Prompt consideration |
|---|---|---|
| Hero image | Introduce the brand and support the main offer | Leave negative space for headline and button |
| Square campaign tile | Promote a collection or category | Keep the subject centered and readable at small size |
| Wide banner | Support a seasonal promotion | Use a wide composition with a clear visual path |
| Cutout model or object | Layer an asset over the page background | Request a simple studio background, then remove it separately |
| Logo concept | Explore symbols and visual directions | Avoid relying on generated text for the final wordmark |
Build a short brand brief containing the audience, personality, color direction, photography style, and elements to avoid. Reuse the same brief across prompts so the page feels like one system rather than a collection of unrelated images.
How to Write Midjourney Website Design Prompts
Midjourney’s official prompt basics recommend clear descriptions of what you want to see. For website assets, a useful structure is:
subject + visual medium + composition + setting + lighting + brand style + placement requirement + aspect ratio
Put essential visual details in the natural-language prompt. Add parameters such as --ar at the end. The Midjourney model documentation identifies V8.2 as the current default, so old V4 switches from the original tutorial should not be copied into a new project.
Current Prompt Examples for Website Assets
Hero model with space for a headline
editorial full-body fashion model wearing a futuristic navy T-shirt, clean white studio background, premium ecommerce campaign photography, subject positioned on the right, generous negative space on the left for headline and button, crisp softbox lighting --ar 16:9Specify where the subject should sit and where the text will go. Do not ask Midjourney to render the final headline inside the image; add real HTML text in the page builder so it remains readable, accessible, and editable.
Square collection tile
futuristic streetwear campaign portrait, model wearing a minimal hoodie, modern geometric blue background, centered composition, premium fashion editorial, clean edges, no typography --ar 1:1Wide promotional banner
full-body fashion model wearing a hat and graphic T-shirt, luminous blue futuristic retail environment, cinematic ecommerce campaign, subject on the left, open dark space on the right for promotional copy, coherent brand palette --ar 2:1Cutout-friendly product or model image
side-profile fashion model wearing a futuristic hoodie, isolated against an evenly lit plain white studio background, clean silhouette, minimal floor shadow, commercial catalog photography --ar 1:1A white background is not the same as a transparent PNG. Generate the cleanest silhouette you can, then use a dedicated background-removal tool and inspect hair, fabric, hands, and shadows at full size.
Logo concept
minimal geometric monogram symbol for a futuristic fashion brand, flat black-and-white vector style, strong negative space, simple memorable silhouette, centered on white, no mockup, no decorative text --ar 1:1Use the output for exploration, not as a finished trademark. Rebuild the selected symbol as clean vector artwork, typeset the brand name separately, verify legibility at favicon size, and conduct the appropriate trademark search before commercial use.
Midjourney Website Design Workflow for Shopify
1. Choose the page template
Install or open your chosen Shopify page builder, select the page type, and preview the template on desktop and mobile. The original demonstration uses PageFly. Its interface may have changed, so follow the current product instructions rather than matching every old click.
2. Measure every image slot
Record each slot’s aspect ratio and approximate display size. Decide whether it needs an image with embedded detail or a simple background that will sit behind live text. Generate for the intended composition instead of cropping one square image into every location.
3. Create one visual direction first
Generate a small set of hero concepts before producing the remaining assets. Select the strongest direction, then reuse its palette, lighting, wardrobe, lens language, and composition rules for the rest of the page. Midjourney’s current Style Reference, Image Prompt, and Moodboard workflows can help guide a related look, but they do not guarantee identical output.
4. Generate and refine each asset
Review anatomy, hands, accessories, fabric details, reflected text, logos, and unintended objects. Choose the variation that works in the page layout—not merely the most dramatic standalone image. Retouch or regenerate visible errors.
5. Remove backgrounds only when necessary
For layered compositions, use the site’s AI background remover guide or another editor. Export a transparent PNG or WebP and check edge quality on both light and dark backgrounds. You can also use the workflow in our Canva AI image guide.
6. Optimize before uploading
- Resize the file close to its maximum display dimensions.
- Compress it without visible artifacts.
- Use an appropriate modern format when supported.
- Give the file a descriptive name.
- Write concise alt text that describes the image’s function.
- Keep important details away from likely mobile crops.
7. Place assets in PageFly
Upload the optimized images, assign them to the correct sections, and adjust the focal position for each breakpoint. Keep headlines and buttons as live page elements rather than baking them into generated imagery. Use the original PageFly creator link below if you want to follow the same tool path as the video.
8. Add navigation and restrained animation
The original build uses Globo Mega Menu. Verify the current app listing, plan, reviews, permissions, and theme compatibility before installation. If you add animation, keep it subtle and respect reduced-motion preferences. Motion should clarify hierarchy rather than delay access to content.
9. Test the finished page
Before publishing, test real product information, links, checkout paths, keyboard navigation, contrast, text scaling, mobile crops, page speed, and image licensing. AI-generated visuals must not misrepresent the product a customer will receive.
Why the Original V4 Prompts Need Updating
The 2023 tutorial used switches including --v 4, --q 5, and --upbeta. Those settings belong to an older Midjourney workflow. Keeping them in a new prompt can force a legacy model, be ignored, or produce an error depending on current support.
The safer approach is to preserve the original video as an archive, rewrite the visual instruction in plain language, use the current default model, and add only parameters documented for the current version. Retest every prompt because a prompt is not portable evidence that two model versions will create the same result.
Frequently Asked Questions
Can Midjourney design an entire website?
It can produce visual concepts and image assets, but a screenshot is not a functioning website. You still need a page builder or code, responsive behavior, accessibility, performance work, real copy, and tested links.
Can Midjourney create a transparent background?
You can request a plain or isolated background, but do not assume the downloaded image contains true transparency. Remove the background in a dedicated editor and inspect the result.
Should I use Midjourney text inside banners?
Use generated text only as visual inspiration. Add final headlines, prices, calls to action, and legal copy as editable page text so they remain accurate, searchable, accessible, and responsive.
Can I use generated images commercially?
Review Midjourney’s current terms, your subscription rights, applicable laws, and any third-party rights involved. Avoid copying a living artist’s identity, protected character, logo, or recognizable person without appropriate authorization.
Related Video Tutorials
The most reliable workflow is to design the page structure first, generate assets for known slots, keep text as live HTML, optimize every file, and test the finished page on real devices. Midjourney accelerates visual exploration; it does not replace web design judgment.