Tung Website
2021
Website design for a ceramic studio.
A mindful, spacious e-commerce website designed to reflect Tung Ceramics’ elegant brand philosophy. Balancing visual storytelling with clarity, the site presents handcrafted work, classes, and custom orders through a clean and intuitive structure.
Observing with Eyes
Observing with Eyes
Observing with Eyes
Clay echoes nature’s rhythm. Each form and glaze captures landscapes, colors, and quiet beauty—transforming earth into art.
Clay echoes nature’s rhythm. Each form and glaze captures landscapes, colors, and quiet beauty—transforming earth into art.
Clay echoes nature’s rhythm. Each form and glaze captures landscapes, colors, and quiet beauty—transforming earth into art.
Clay echoes nature’s rhythm. Each form and glaze captures landscapes, colors, and quiet beauty—transforming earth into art.
Shape with Hands
Shape with Hands
Shape with Hands
Clay responds to touch. Its curves and textures reveal a natural rhythm, creating warmth that invites connection.
Clay responds to touch. Its curves and textures reveal a natural rhythm, creating warmth that invites connection.
Clay responds to touch. Its curves and textures reveal a natural rhythm, creating warmth that invites connection.
Clay responds to touch. Its curves and textures reveal a natural rhythm, creating warmth that invites connection.
Brand Philosophy
Brand Philosophy
Brand Philosophy
Create from Heart
Create from Heart
Create from Heart
Ceramics carry meaning. More than objects, they reflect care and emotion—art that lives in the everyday.
Ceramics carry meaning. More than objects, they reflect care and emotion—art that lives in the everyday.
Ceramics carry meaning. More than objects, they reflect care and emotion—art that lives in the everyday.
Ceramics carry meaning. More than objects, they reflect care and emotion—art that lives in the everyday.
Brand Philosophy
Website Objectives
Website Objectives
Website Objectives
Website Objectives
1
1
1
1
Showcase Studio Philosophy & Work
Showcase Studio Philosophy & Work
Showcase Studio Philosophy & Work
Communicate the journey and mindfulness behind ceramic art.
Communicate the journey and mindfulness behind ceramic art.
Communicate the journey and mindfulness behind ceramic art.
Communicate the journey and mindfulness behind ceramic art.
2
2
2
2
Promote Ceramic Classes
Promote Ceramic Classes
Promote Ceramic Classes
Offer a platform for booking classes and engaging with potential students.
Offer a platform for booking classes and engaging with potential students.
Offer a platform for booking classes and engaging with potential students.
Offer a platform for booking classes and engaging with potential students.
3
3
3
3
E-Commerce (Sell Products & Facilitate Custom Orders)
E-Commerce (Sell Products & Facilitate Custom Orders)
E-Commerce (Sell Products & Facilitate Custom Orders)
Offer an easy, minimalist shopping experience.
Offer an easy, minimalist shopping experience.
Offer an easy, minimalist shopping experience.
Offer an easy, minimalist shopping experience.
4
4
4
4
Connect with Audience
Connect with Audience
Connect with Audience
Enable inquiries, collaboration requests, and engagement.
Enable inquiries, collaboration requests, and engagement.
Enable inquiries, collaboration requests, and engagement.
Enable inquiries, collaboration requests, and engagement.
Target Audience
Target Audience
Target Audience
Target Audience
．Art & Design Enthusiasts
．Art & Design Enthusiasts
．Art & Design Enthusiasts
．Art & Design Enthusiasts
．Mindful Lifestyle Seekers
．Mindful Lifestyle Seekers
．Mindful Lifestyle Seekers
．Mindful Lifestyle Seekers
．Ceramic Lovers & Collectors
．Ceramic Lovers & Collectors
．Ceramic Lovers & Collectors
．Ceramic Lovers & Collectors
Age: 20-50
Income: Middle to Upper-Middle Class
Occupation: Art & Creative industries, F&B business owners
Interests: Explore leisure hobbies, Decorate home
Age: 20-50
Income: Middle to Upper-Middle Class
Occupation: Art & Creative industries, F&B business owners
Interests: Explore leisure hobbies, Decorate home
Age: 20-50
Income: Middle to Upper-Middle Class
Occupation: Art & Creative industries, F&B business owners
Interests: Explore leisure hobbies, Decorate home
Design Focus
Design Focus
Design Focus
Design Focus
1
1
1
1
Visual Aesthetics & Story Telling
Visual Aesthetics & Story Telling
Visual Aesthetics & Story Telling
Visual Aesthetics & Story Telling
Maintain the brand's uncluttered, clean & elegant style.
Maintain the brand's uncluttered, clean & elegant style.
Maintain the brand's uncluttered, clean & elegant style.
Maintain the brand's uncluttered, clean & elegant style.
2
2
2
2
Structured information presentation
Structured information presentation
Structured information presentation
Structured information presentation
Display work, classes, and information organisedly.
Display work, classes, and information organisedly.
Display work, classes, and information organisedly.
Display work, classes, and information organisedly.
3
3
3
3
Clear E-Commerce system
Clear E-Commerce system
Clear E-Commerce system
Clear E-Commerce system
Prioritizing ease of use and efficient experience.
Prioritizing ease of use and efficient experience.
Prioritizing ease of use and efficient experience.
Prioritizing ease of use and efficient experience.
1
1
1
1
Visual Aesthetics & Story Telling
Visual Aesthetics & Story Telling
Visual Aesthetics & Story Telling
Maintain the brand's uncluttered, clean & elegant style.
Maintain the brand's uncluttered, clean & elegant style.
Maintain the brand's uncluttered, clean & elegant style.
Maintain the brand's uncluttered, clean & elegant style.
Visual Elements
Visual Elements
Visual Elements
Visual Elements
Light, clean typography creates an elegantand refined visual experience.
Light, clean typography creates an elegantand refined visual experience.
Light, clean typography creates an elegantand refined visual experience.
Light, clean typography creates an elegantand refined visual experience.
#ffffff
#ffffff
#ffffff
#ffffff
#efece5
#efece5
#efece5
#efece5
#f8f4ec
#f8f4ec
#f8f4ec
#f8f4ec
#f8f4ec
#bab09e
#bab09e
#bab09e
#bab09e
#9d8880
#9d8880
#606060
#606060
#9d8880
#9d8880
#9d8880
#606060
#606060
#606060
Noto Sans TC
Noto Sans TC
Noto Sans TC
Noto Sans TC
極細體
極細體
極細體
極細體
細體
細體
細體
細體
常規體
常規體
常規體
常規體
中等體
中等體
中等體
中等體
中粗體
中粗體
中粗體
中粗體
粗體
粗體
粗體
粗體
特粗體
特粗體
特粗體
特粗體
Work Sans
Work Sans
Work Sans
Work Sans
Extra light
Extra light
Extra light
Extra light
Light
Light
Light
Light
Regular
Regular
Regular
Regular
Medium
Medium
Medium
Medium
Semibold
Semibold
Semibold
Semibold
Bold
Bold
Bold
Bold
Extra Bold
Extra Bold
Extra Bold
Extra Bold
Buttons
Buttons
Buttons
Buttons
Instead of the formal way, we invited user to engage through CTA e.g. "to feel", "too experience", along with minimal, consistent thin-line-frame design.
Instead of the formal way, we invited user to engage through CTA e.g. "to feel", "too experience", along with minimal, consistent thin-line-frame design.
Instead of the formal way, we invited user to engage through CTA e.g. "to feel", "too experience", along with minimal, consistent thin-line-frame design.
Instead of the formal way, we invited user to engage through CTA e.g. "to feel", "too experience", along with minimal, consistent thin-line-frame design.
Photography
Photography
Photography
Photography
Thoughtfully captured photography are used as banners in each page to connects each studio scene with its page content.
Thoughtfully captured photography are used as banners in each page to connects each studio scene with its page content.
Thoughtfully captured photography are used as banners in each page to connects each studio scene with its page content.
Thoughtfully captured photography are used as banners in each page to connects each studio scene with its page content.
Spacing
Spacing
Spacing
Spacing
Generous blank space enhances readability and conveys a mindful aesthetic.
Generous blank space enhances readability and conveys a mindful aesthetic.
Generous blank space enhances readability and conveys a mindful aesthetic.
Generous blank space enhances readability and conveys a mindful aesthetic.
A 6-column layout ensures images are well-balanced and harmoniously displayed.
A 6-column layout ensures images are well-balanced and harmoniously displayed.
A 6-column layout ensures images are well-balanced and harmoniously displayed.
A 6-column layout ensures images are well-balanced and harmoniously displayed.
2
2
2
2
Structured information presentation
Structured information presentation
Display work, classes, and information organisedly.
Display work, classes, and information organisedly.
Display work, classes, and information organisedly.
Information Architecture
Information Architecture
Information Architecture
Information Architecture
Warm Welcome
Warm Welcome
Warm Welcome
Warm Welcome
A hero carousel with a brand video sets the tone, followed by classes and shop highlights.
A hero carousel with a brand video sets the tone, followed by classes and shop highlights.
A hero carousel with a brand video sets the tone, followed by classes and shop highlights.
Homepage
Homepage
Homepage
Philosophy
Philosophy
Philosophy
Philosophy
The About Us page introduces Tung’s brand philosophy through three core elements, enhanced by a brand video and the founders’ and tutors’ stories — attracting like-minded audiences.
The About Us page introduces Tung’s brand philosophy through three core elements, enhanced by a brand video and the founders’ and tutors’ stories — attracting like-minded audiences.
The About Us page introduces Tung’s brand philosophy through three core elements, enhanced by a brand video and the founders’ and tutors’ stories — attracting like-minded audiences.
The About Us page introduces Tung’s brand philosophy through three core elements, enhanced by a brand video and the founders’ and tutors’ stories — attracting like-minded audiences.
About Us Page
About Us Page
About Us Page
Custom Order & Collaboration Page
Custom Order & Collaboration Page
Custom Order & Collaboration Page
Gallery
Gallery
Gallery
Gallery
Custom works are presented in clean image carousels,
like a gallery, with brief captions that highlight the inspiration and craftsmanship behind each piece.
Custom works are presented in clean image carousels, like a gallery, with brief captions that highlight the inspiration and craftsmanship behind each piece.
Custom works are presented in clean image carousels,
like a gallery, with brief captions that highlight the inspiration and craftsmanship behind each piece.
Custom works are presented in clean image carousels, like a gallery, with brief captions that highlight the inspiration and craftsmanship behind each piece.
Information
Information
Information
Information
Class information is clearly structured to ensure users can easily understand the details and sign up.
Class information is clearly structured to ensure users can easily understand the details and sign up.
Class information is clearly structured to ensure users can easily understand the details and sign up.
Class information is clearly structured to ensure users can easily understand the details and sign up.
Classes Page
Classes Page
Classes Page
101 Page
101 Page
101 Page
3
3
3
3
Clear E-Commerce system
Clear E-Commerce system
Prioritizing ease of use and efficient experience.
Prioritizing ease of use and efficient experience.
Prioritizing ease of use and efficient experience.
Shopping Journey
Shopping Journey
Shopping Journey
The shopping journey splits into two paths: Custom Order - Guides users to the Contact page to discuss personalized pieces; General Shopping - Directs users through product categories to the cart and step-by-step checkout.
The shopping journey splits into two paths: Custom Order - Guides users to the Contact page to discuss personalized pieces; General Shopping - Directs users through product categories to the cart and step-by-step checkout.
The shopping journey splits into two paths: Custom Order - Guides users to the Contact page to discuss personalized pieces; General Shopping - Directs users through product categories to the cart and step-by-step checkout.
The shopping journey splits into two paths: Custom Order - Guides users to the Contact page to discuss personalized pieces; General Shopping - Directs users through product categories to the cart and step-by-step checkout.
Custom Order
Custom Order
Custom Order
1
1
1
Classes Page
Classes Page
Classes Page
2
2
2
Contact Page
Contact Page
Contact Page
3
3
3
Confirmation
Confirmation
Confirmation
General Shopping
General Shopping
General Shopping
1
Cart
Cart
Cart
2
2
2
Checkout
Checkout
Checkout
3
3
3
Confirmation
Confirmation
Confirmation
Results
Results
Results
Results
Through directing Tung's brand photography and video production, successfully enhanced website UX/UI and integrated e-commerce, boosted traffic by 20% in three months and increased online sales and engagement by 10%.
Through directing Tung's brand photography and video production, successfully enhanced website UX/UI and integrated e-commerce, boosted traffic by 20% in three months and increased online sales and engagement by 10%.
Through directing Tung's brand photography and video production, successfully enhanced website UX/UI and integrated e-commerce, boosted traffic by 20% in three months and increased online sales and engagement by 10%.
Through directing Tung's brand photography and video production, successfully enhanced website UX/UI and integrated e-commerce, boosted traffic by 20% in three months and increased online sales and engagement by 10%.
See Other UX/UI Projects
See Other UX/UI Projects
SUSTAINABLE CAMPUS CONSUMER PROGRAMME
A lunchbox borrowing & returning system in universities' campus.
View
SUSTAINABLE CAMPUS CONSUMER PROGRAMME
A lunchbox borrowing & returning system in universities' campus.
View
SUSTAINABLE CAMPUS CONSUMER PROGRAMME
A lunchbox borrowing & returning system in universities' campus.
View
SUSTAINABLE CAMPUS CONSUMER PROGRAMME
A lunchbox borrowing & returning system in universities' campus.
View
CLICKASNAP
Website redesign for a photo-sharing platform.
View
CLICKASNAP
Website redesign for a photo-sharing platform.
View
CLICKASNAP
Website redesign for a photo-sharing platform.
View
CLICKASNAP
Website redesign for a photo-sharing platform.
View
COASTAL TRAIL CHALLENGE
Website designed to promote outdoor activities along the coast in Hong Kong.
View
COASTAL TRAIL CHALLENGE
Website designed to promote outdoor activities along the coast in Hong Kong.
View
COASTAL TRAIL CHALLENGE
Website designed to promote outdoor activities along the coast in Hong Kong.
View
COASTAL TRAIL CHALLENGE
Website designed to promote outdoor activities along the coast in Hong Kong.
View