MWW SHIPPING — PREMIUM DESIGN REFINEMENT
Now take the existing MWW SHIPPING website you just created and perform a complete premium design refinement.
Do NOT rebuild it as a generic template.
Keep the existing content structure, bilingual functionality and all working features, but significantly improve the visual quality, hierarchy, spacing, typography, imagery, animations and overall brand perception.
The final result should feel like a website created by a world-class international branding and digital-experience agency.
⸻
Upgrade the entire website to a premium maritime-corporate aesthetic.
The feeling should be:
Powerful — Elegant — Global — Trustworthy — Sophisticated — Precise
Avoid:
Use generous whitespace and strong visual hierarchy.
⸻
Create a sophisticated maritime palette:
Primary:
Deep Navy / Midnight Blue
Secondary:
Near Black
Background:
Off-white / very light neutral for selected sections
Text:
White on dark sections
Deep charcoal on light sections
Accent:
A restrained metallic blue/silver maritime accent.
Do not use too many colors.
The website should feel expensive rather than colorful.
⸻
Completely refine the hero section.
Use a spectacular high-resolution maritime image or video.
Preferred scene:
A large modern container ship moving through open water or approaching a major international port.
The hero should occupy approximately 85–100vh.
Use:
Headline:
CONNECTING BUSINESS
ACROSS THE SEAS
Make the headline extremely prominent.
Do not center everything by default.
Prefer an editorial left-aligned composition on desktop.
Add a subtle animated maritime route line in the background.
Keep it extremely subtle.
⸻
Make the header look premium and understated.
Desktop:
Logo on the left.
Navigation centered/right.
CTA on the far right.
Language selector:
EN | فارسی
Use a subtle hover animation.
On scroll:
Transform the transparent header into a refined dark/navy navigation bar with slight backdrop blur.
Do not make the header too tall.
⸻
Upgrade typography significantly.
Use:
Create a consistent typography scale.
Hero headline:
Very large
Section headings:
Large
Body:
Comfortable and highly readable
Small labels:
Uppercase with letter spacing for English.
For Persian:
Use a premium Persian font and ensure RTL typography looks natural and balanced.
Do NOT simply mirror the English design.
The Persian layout should feel intentionally designed.
⸻
Transform the About section from a normal corporate section into an editorial composition.
Use:
One large image.
One smaller overlapping image or visual element.
Text block:
YOUR TRUSTED
MARITIME PARTNER
Use a short premium introduction.
Add a subtle vertical line or numbered indicator.
Create visual depth without making it cluttered.
⸻
Make statistics visually impressive.
Instead of ordinary cards:
15+
YEARS OF EXPERIENCE
50+
PORTS & DESTINATIONS
24/7
OPERATIONAL SUPPORT
100%
COMMITMENT
Use huge numbers with elegant typography.
Animate numbers when entering viewport.
Important:
If these numbers are not verified company facts, keep them configurable placeholders and clearly mark them in the code.
⸻
Redesign Services.
Do NOT use six identical cards.
Create an editorial service layout.
Each service should have:
On hover:
The service image should smoothly reveal or expand.
The active service should feel immersive.
Example:
01
SHIP AGENCY
02
MARINE OPERATIONS
03
CARGO & LOGISTICS
04
CREW SERVICES
05
TANKER OPERATIONS
06
GLOBAL NETWORK
Use smooth 300–600ms transitions.
⸻
Make this one of the visual highlights of the entire website.
Create a sophisticated dark section.
Show a subtle world map.
Add animated maritime route lines.
Use glowing but restrained route points.
Animate routes slowly.
Text:
GLOBAL
MARITIME
NETWORK
And:
FROM PORT TO PORT,
WE KEEP YOUR BUSINESS MOVING.
Do not overcrowd the map.
The map should feel like a premium logistics control interface.
⸻
Create a visual storytelling section.
Use a large cinematic port/vessel image.
Overlay small information panels:
VESSEL SUPPORT
PORT OPERATIONS
CARGO COORDINATION
CREW SERVICES
DOCUMENTATION
Create a subtle vertical progress indicator.
As the user scrolls, each operation item becomes active.
Keep animations elegant.
⸻
Do not use ordinary three-card boxes.
Create three large editorial statements:
01
RELIABILITY
02
EXPERIENCE
03
EFFICIENCY
Each should occupy significant visual space.
Use large typography.
Add subtle hover interaction.
⸻
Make this section calm and premium.
Use a cinematic ocean image.
Headline:
MOVING FORWARD,
RESPONSIBLY.
Use minimal copy.
Avoid unsupported environmental claims.
⸻
Make the CTA visually powerful.
Use a full-width cinematic maritime image.
Large headline:
LET’S MOVE YOUR
BUSINESS FORWARD.
Primary button:
REQUEST A QUOTE
Secondary:
CONTACT OUR TEAM
Buttons should have sophisticated hover animations.
⸻
Make the form feel like an enterprise contact experience.
Use clean fields.
Fields:
Full Name
Company
Email
Phone
Service
Message
Use floating or minimal labels.
Strong focus states.
Elegant submit animation.
Include success/error states.
Do not invent company contact information.
Use placeholders until verified information is provided.
⸻
Create a large premium footer.
Dark background.
Large MWW SHIPPING logo.
Short company statement.
Navigation columns.
Services.
Contact placeholders.
Language selector.
Social links only if actual URLs are supplied.
Use a subtle divider above the copyright.
⸻
Create a unified animation language.
Use:
Fade-up
Slide-up
Image reveal
Text reveal
Parallax
Hover transitions
Route animations
Number counters
Animation timing should generally be around 300–800ms.
Use easing curves that feel smooth and premium.
Do not animate everything.
Animations should communicate quality, not distract the user.
Respect:
prefers-reduced-motion
⸻
Completely optimize the mobile experience.
Do not simply stack desktop elements.
Create intentional mobile compositions.
Hero:
Services:
Use vertical interactive sections.
Global map:
Optimize for mobile.
Contact form:
Full-width fields.
Persian RTL:
Verify every section manually.
There must be:
NO horizontal scrolling.
⸻
Optimize the site for excellent performance.
Use:
Avoid heavy libraries unless necessary.
⸻
Keep the code clean and production-ready.
Use reusable React components.
Do not duplicate components unnecessarily.
Keep content configurable.
Separate content from presentation where practical.
Maintain TypeScript types.
Do not break any existing functionality.
⸻
Before finishing, review the entire website as if you were a senior designer at a global maritime company.
Ask:
Does this look expensive?
Does it look trustworthy?
Does it look international?
Does it feel like a real shipping company?
Does the first 5 seconds create a strong impression?
Does the Persian version look professionally designed?
Does the mobile version feel intentional?
Does anything look like a generic AI template?
If anything looks generic, redesign it.
The final result must communicate:
GLOBAL REACH
MARITIME EXPERTISE
RELIABILITY
PRECISION
TRUST
Do not add unnecessary features.
Focus on exceptional visual design, usability and brand credibility.