{"id":643,"date":"2023-03-14T10:59:35","date_gmt":"2023-03-14T03:59:35","guid":{"rendered":"https:\/\/produck.click\/?post_type=rara-portfolio&#038;p=643"},"modified":"2026-02-04T15:14:13","modified_gmt":"2026-02-04T08:14:13","slug":"sport-e-commerce-website","status":"publish","type":"rara-portfolio","link":"https:\/\/produck.click\/index.php\/portfolio\/sport-e-commerce-website\/","title":{"rendered":"Sport E-commerce Website"},"content":{"rendered":"\n<h3>1. Project Overview<\/h3>\n\n\n\n<p><strong>Type:<\/strong> E-commerce Website<br><strong>Year:<\/strong> ~<br><strong>Role:<\/strong> UI \/ Visual Designer<br><strong>Tools:<\/strong> Adobe Photoshop<br><strong>Platform:<\/strong> Magento<\/p>\n\n\n\n<h3>2. Design Goals \u2013 At That Time<\/h3>\n\n\n\n<p>M\u1ee5c ti\u00eau c\u1ee7a d\u1ef1 \u00e1n l\u00e0 x\u00e2y d\u1ef1ng m\u1ed9t giao di\u1ec7n b\u00e1n \u0111\u1ed3 th\u1ec3 thao mang c\u1ea3m gi\u00e1c m\u1ea1nh m\u1ebd, n\u0103ng \u0111\u1ed9ng v\u00e0 hi\u1ec7u su\u1ea5t cao, ph\u00f9 h\u1ee3p v\u1edbi nh\u00f3m ng\u01b0\u1eddi d\u00f9ng y\u00eau v\u1eadn \u0111\u1ed9ng v\u00e0 th\u1ec3 thao chuy\u00ean nghi\u1ec7p. Thi\u1ebft k\u1ebf \u01b0u ti\u00ean <strong>\u1ea5n t\u01b0\u1ee3ng th\u1ecb gi\u00e1c<\/strong>, v\u00e0 th\u00fac \u0111\u1ea9y mua nhanh, trong b\u1ed1i c\u1ea3nh UX d\u1ef1a tr\u00ean d\u1eef li\u1ec7u ch\u01b0a ph\u1ed5 bi\u1ebfn.<\/p>\n\n\n\n<h3>3. Design Focus<\/h3>\n\n\n\n<ul>\n<li><strong>Bold visual identity (nh\u1eadn di\u1ec7n th\u1ecb gi\u00e1c m\u1ea1nh):<\/strong> S\u1eed d\u1ee5ng m\u1ea3ng m\u00e0u t\u01b0\u01a1ng ph\u1ea3n cao, typography \u0111\u1eadm v\u00e0 h\u00ecnh \u1ea3nh v\u1eadn \u0111\u1ed9ng vi\u00ean c\u1ee1 l\u1edbn \u0111\u1ec3 t\u1ea1o c\u1ea3m gi\u00e1c s\u1ee9c m\u1ea1nh, t\u1ed1c \u0111\u1ed9 v\u00e0 tinh th\u1ea7n th\u1ec3 thao ngay t\u1eeb m\u00e0n h\u00ecnh \u0111\u1ea7u ti\u00ean.<\/li>\n<\/ul>\n\n\n\n<ul>\n<li><strong>High-density product layout (b\u1ed1 c\u1ee5c nhi\u1ec1u s\u1ea3n ph\u1ea9m):<\/strong> Thi\u1ebft k\u1ebf trang danh m\u1ee5c v\u00e0 homepage theo d\u1ea1ng l\u01b0\u1edbi d\u00e0y, cho ph\u00e9p hi\u1ec3n th\u1ecb nhi\u1ec1u s\u1ea3n ph\u1ea9m nh\u01b0ng v\u1eabn gi\u1eef \u0111\u01b0\u1ee3c kh\u1ea3 n\u0103ng qu\u00e9t nhanh nh\u1edd ph\u00e2n c\u1ea5p r\u00f5 gi\u00e1, t\u00ean, tr\u1ea1ng th\u00e1i sale v\u00e0 CTA.<\/li>\n<\/ul>\n\n\n\n<ul>\n<li><strong>Conversion-driven UI patterns (m\u1eabu giao di\u1ec7n h\u01b0\u1edbng mua):<\/strong> CTA \u201cAdd to Cart\u201d, gi\u00e1 v\u00e0 tr\u1ea1ng th\u00e1i kho \u0111\u01b0\u1ee3c l\u00e0m n\u1ed5i b\u1eadt b\u1eb1ng m\u00e0u s\u1eafc v\u00e0 v\u1ecb tr\u00ed nh\u1ea5t qu\u00e1n; h\u1ed7 tr\u1ee3 quick view, so s\u00e1nh v\u00e0 wishlist \u2013 c\u00e1c pattern b\u00e1n h\u00e0ng ph\u1ed5 bi\u1ebfn giai \u0111o\u1ea1n \u0111\u00f3.<\/li>\n<\/ul>\n\n\n\n<ul>\n<li><strong>Functional filtering &amp; navigation (l\u1ecdc v\u00e0 \u0111i\u1ec1u h\u01b0\u1edbng ch\u1ee9c n\u0103ng):<\/strong> Sidebar filter nhi\u1ec1u t\u1ea7ng (category, price, brand), menu l\u1edbn theo m\u00f4n th\u1ec3 thao gi\u00fap ng\u01b0\u1eddi d\u00f9ng ti\u1ebfp c\u1eadn nhanh danh m\u1ee5c ph\u00f9 h\u1ee3p m\u00e0 kh\u00f4ng c\u1ea7n duy\u1ec7t s\u00e2u.<\/li>\n<\/ul>\n\n\n\n<ul>\n<li><strong>Responsive adaptation (th\u00edch \u1ee9ng \u0111a thi\u1ebft b\u1ecb):<\/strong> Giao di\u1ec7n \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf responsive cho desktop, tablet v\u00e0 mobile, t\u1eadp trung v\u00e0o vi\u1ec7c <strong>gi\u1eef tr\u1ea3i nghi\u1ec7m mua s\u1eafm li\u1ec1n m\u1ea1ch<\/strong> khi thu g\u1ecdn layout, \u01b0u ti\u00ean thao t\u00e1c ch\u1ea1m v\u00e0 hi\u1ec3n th\u1ecb danh s\u00e1ch s\u1ea3n ph\u1ea9m r\u00f5 r\u00e0ng tr\u00ean m\u00e0n h\u00ecnh nh\u1ecf.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"1920\" height=\"1440\" src=\"https:\/\/produck.click\/wp-content\/uploads\/2023\/03\/cover-2.jpg\" alt=\"\" class=\"wp-image-644\" srcset=\"https:\/\/produck.click\/wp-content\/uploads\/2023\/03\/cover-2.jpg 1920w, https:\/\/produck.click\/wp-content\/uploads\/2023\/03\/cover-2-300x225.jpg 300w, https:\/\/produck.click\/wp-content\/uploads\/2023\/03\/cover-2-1024x768.jpg 1024w, https:\/\/produck.click\/wp-content\/uploads\/2023\/03\/cover-2-768x576.jpg 768w, https:\/\/produck.click\/wp-content\/uploads\/2023\/03\/cover-2-1536x1152.jpg 1536w, https:\/\/produck.click\/wp-content\/uploads\/2023\/03\/cover-2-80x60.jpg 80w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"1280\" height=\"2378\" src=\"https:\/\/produck.click\/wp-content\/uploads\/2023\/03\/1280_index.jpg\" alt=\"\" class=\"wp-image-891\" srcset=\"https:\/\/produck.click\/wp-content\/uploads\/2023\/03\/1280_index.jpg 1280w, https:\/\/produck.click\/wp-content\/uploads\/2023\/03\/1280_index-161x300.jpg 161w, https:\/\/produck.click\/wp-content\/uploads\/2023\/03\/1280_index-551x1024.jpg 551w, https:\/\/produck.click\/wp-content\/uploads\/2023\/03\/1280_index-768x1427.jpg 768w, https:\/\/produck.click\/wp-content\/uploads\/2023\/03\/1280_index-827x1536.jpg 827w, https:\/\/produck.click\/wp-content\/uploads\/2023\/03\/1280_index-1102x2048.jpg 1102w, https:\/\/produck.click\/wp-content\/uploads\/2023\/03\/1280_index-32x60.jpg 32w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"672\" src=\"https:\/\/produck.click\/wp-content\/uploads\/2023\/03\/1280_404-1024x672.jpg\" alt=\"\" class=\"wp-image-892\" srcset=\"https:\/\/produck.click\/wp-content\/uploads\/2023\/03\/1280_404-1024x672.jpg 1024w, https:\/\/produck.click\/wp-content\/uploads\/2023\/03\/1280_404-300x197.jpg 300w, https:\/\/produck.click\/wp-content\/uploads\/2023\/03\/1280_404-768x504.jpg 768w, https:\/\/produck.click\/wp-content\/uploads\/2023\/03\/1280_404-91x60.jpg 91w, https:\/\/produck.click\/wp-content\/uploads\/2023\/03\/1280_404.jpg 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>1. Project Overview Type: E-commerce WebsiteYear: ~Role: UI \/ Visual DesignerTools: Adobe PhotoshopPlatform: Magento 2. Design Goals \u2013 At That Time M\u1ee5c ti\u00eau c\u1ee7a d\u1ef1 \u00e1n l\u00e0 x\u00e2y d\u1ef1ng m\u1ed9t giao di\u1ec7n b\u00e1n \u0111\u1ed3 th\u1ec3 thao mang c\u1ea3m gi\u00e1c m\u1ea1nh m\u1ebd, n\u0103ng \u0111\u1ed9ng v\u00e0 hi\u1ec7u su\u1ea5t cao, ph\u00f9 h\u1ee3p v\u1edbi nh\u00f3m ng\u01b0\u1eddi d\u00f9ng y\u00eau v\u1eadn &hellip; <\/p>\n","protected":false},"author":1,"featured_media":649,"comment_status":"closed","ping_status":"closed","template":"","rara_portfolio_categories":[10],"_links":{"self":[{"href":"https:\/\/produck.click\/index.php\/wp-json\/wp\/v2\/rara-portfolio\/643"}],"collection":[{"href":"https:\/\/produck.click\/index.php\/wp-json\/wp\/v2\/rara-portfolio"}],"about":[{"href":"https:\/\/produck.click\/index.php\/wp-json\/wp\/v2\/types\/rara-portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/produck.click\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/produck.click\/index.php\/wp-json\/wp\/v2\/comments?post=643"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/produck.click\/index.php\/wp-json\/wp\/v2\/media\/649"}],"wp:attachment":[{"href":"https:\/\/produck.click\/index.php\/wp-json\/wp\/v2\/media?parent=643"}],"wp:term":[{"taxonomy":"rara_portfolio_categories","embeddable":true,"href":"https:\/\/produck.click\/index.php\/wp-json\/wp\/v2\/rara_portfolio_categories?post=643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}