The Colorsفروشگاه کالرز
A Persian fashion storefront that brings collections, an interactive showroom, product choices and order follow-up into one considered shopping experience.فروشگاه آنلاین پوشاک کالرز؛ از دیدن کالکشن و شوروم تعاملی تا انتخاب رنگ و سایز، مطالعه راهنمای خرید و پیگیری سفارش.
- Yearسال
- 20262026
- Roleنقش
- Product design / Full-stack developmentطراحی محصول / توسعه فولاستک
- Scopeمحدوده
- Laravel · React · CommerceLaravel · React · فروشگاه
- Statusوضعیت
- Live storefrontویترین آنلاین
At a glanceدر یک نگاه
The work behind the screensپشت این صفحهها چه ساخته شده؟
See the collectionدیدن کالکشن
Editorial imagery and a category-based showroom give the catalogue a clear starting point.ویترین تصویری و شوروم دستهبندیشده، نقطه شروع روشنی برای پیدا کردن لباس میسازند.
Explore featuresدیدن قابلیتها ↗Choose with contextانتخاب با اطلاعات کافی
Product images, colour options and size notes sit beside the purchase controls.تصاویر، گزینههای رنگ و توضیح سایز کنار کنترلهای خرید قرار دارند.
See the screensمشاهده تصاویر ↗Keep the next step visibleادامه مسیر پس از انتخاب
Size guides, support and order tracking connect browsing with the work after a purchase.راهنمای سایز، پشتیبانی و رهگیری سفارش، مسیر خرید را کاملتر میکنند.
Read the scopeوضعیت و محدوده ↗The project, in contextپروژه از نزدیک
I designed and developed The Colors as a Persian clothing store for women, men and children. The work connects the visual side of fashion retail with practical product information: a collection-led homepage, interactive showroom, searchable catalogue, colour and size selection, editorial guides and order tracking. The public storefront is live; online payment was still awaiting activation when I documented it on 17 October 2026.کالرز را بهعنوان یک فروشگاه فارسی پوشاک زنانه، مردانه و بچهگانه طراحی و توسعه دادم. هدف این بود که ظاهر جذاب لباسها به انتخاب راحتتر کمک کند: از کالکشن صفحه اصلی و شوروم تعاملی تا جستوجو، انتخاب رنگ و سایز، راهنمای خرید و رهگیری سفارش. ویترین سایت آنلاین است؛ در زمان ثبت این گزارش، ۲۵ مهر ۱۴۰۵، پرداخت اینترنتی هنوز در انتظار فعالسازی بود.
A good photograph is only the beginningعکس خوب، فقط شروع انتخاب است
Clothing is difficult to judge through a screen. A customer needs to understand what is included, which colours can be selected and what a size label actually means. A lively storefront also has to remain easy to navigate on a small phone.
خرید لباس از پشت صفحه نمایش با چند سؤال همراه است: رنگ واقعی چه شکلی است؟ کدام سایز مناسب است؟ اقلام داخل عکس همگی جزو سفارشاند؟ طراحی باید هم حس دیدن یک کالکشن را منتقل میکرد، هم برای این سؤالهای ساده و مهم جا باز میکرد.
The catalogue serves three audiences with different browsing needs. I wanted each group to find its own starting point, while keeping product selection, guidance and support consistent across the store.
فروشگاه سه گروه مخاطب دارد و نیاز هرکدام متفاوت است. مسیر زنانه، مردانه و بچهگانه باید سریع پیدا میشد، بدون اینکه کاربر برای یاد گرفتن شیوه استفاده از هر بخش دوباره وقت بگذارد.
A visual storefront with a practical coreویترینی دیدنی، با جزئیات کاربردی
I organised the experience around a short sequence: discover a collection, narrow the catalogue, inspect a product and choose its options. The showroom adds movement to discovery; the product page gives the customer a quieter place to make a decision.
تجربه را حول یک مسیر روشن چیدم: دیدن کالکشن، محدود کردن انتخابها، بررسی محصول و انتخاب گزینه مناسب. شوروم به بخش کشف محصول حرکت میدهد؛ صفحه محصول فضای آرامتری است تا مشتری مشخصات و گزینهها را با حوصله ببیند.
Laravel handles the application and server-rendered pages, while focused React interfaces add interaction where it helps. The public product copy distinguishes studio imagery reconstructed with AI from a guarantee about fit, and explains missing sizing details instead of inventing measurements.
پایه برنامه و صفحات سمت سرور با Laravel ساخته شده و بخشهای تعاملی مشخصی با React تکمیل شدهاند. در توضیح محصول، بازسازی استودیویی تصاویر با هوش مصنوعی بهروشنی بیان میشود. وقتی اندازه دقیق یک لباس در دسترس نیست، متن همین محدودیت را توضیح میدهد و راه ارتباط با فروشگاه را نشان میدهد.
What I builtآنچه طراحی و پیادهسازی کردم
The parts that make this project useful in day-to-day work.بخشهایی که این پروژه را در استفاده روزمره کاربردی میکنند.
Collections that lead into the catalogueکالکشنهایی با مسیر روشن به محصول
The homepage combines a seasonal campaign, selected products, category entry points and best-selling or recent items. A visitor can move from a visual impression to a specific product without searching for the next link.
صفحه اصلی از کمپین فصلی، محصولات منتخب، ورودی دستهها و تازهها تشکیل شده است. هر بخش به محصول یا فهرست مرتبط میرسد تا عکسها فقط تزئین صفحه نباشند.
See project imagesتصاویر پروژه را ببینید ↗An interactive showroom for three audiencesشوروم تعاملی برای سه گروه پوشاک
Women’s, men’s and children’s tabs switch the showroom selection. Previous and next controls, the product name and a direct product link keep the visual presentation connected to the catalogue.
تبهای زنانه، مردانه و بچهگانه محصولات شوروم را عوض میکنند. نام لباس، کنترل قبلی و بعدی و لینک مشاهده محصول در همان بخش قرار دارد؛ بنابراین نمایش تعاملی به انتخاب واقعی وصل میماند.
See project imagesتصاویر پروژه را ببینید ↗Search, filters and useful sortingجستوجو و فیلتر متناسب با خرید لباس
The shop exposes category, audience, colour, price and availability controls, alongside text search and sorting. Filters help a visitor narrow a mixed clothing catalogue to a manageable set of choices.
در فروشگاه میتوان انتخابها را بر اساس دسته، گروه پوشاک، رنگ، محدوده قیمت و موجودی محدود کرد. جستوجو و مرتبسازی هم در همان مسیر قرار دارند تا پیدا کردن لباس به ورق زدن بیپایان محصولات وابسته نباشد.
See project imagesتصاویر پروژه را ببینید ↗Product choices with the explanation nearbyانتخاب رنگ و سایز، کنار توضیح همان محصول
Product pages combine a gallery, colour swatches, size options, quantity and purchase controls. Descriptions explain material, season, included items and sizing limitations; the customer does not have to guess what the photographs mean.
گالری، رنگها، سایز، تعداد و کنترل خرید کنار توضیح محصول قرار گرفتهاند. جنس اعلامشده، فصل، اقلام همراه و محدودیت اطلاعات سایز هم توضیح داده میشوند؛ مثلاً فریفیت بودن بهعنوان تضمین مناسب بودن برای همه اندامها معرفی نمیشود.
See project imagesتصاویر پروژه را ببینید ↗A model-view styling aidدیدن استایل روی مدل
The catalogue includes a model-view interface for exploring how an outfit looks. Its accompanying copy explains that a reconstructed model image is a styling aid, not a measurement or a guarantee of personal fit.
بخش نمایش استایل روی مدل به کاربر کمک میکند ظاهر ترکیب لباس را بهتر تصور کند. توضیح کنار آن روشن میکند که تصویر بازسازیشده جای اندازهگیری را نمیگیرد و تنخور واقعی هر فرد را تضمین نمیکند.
See project imagesتصاویر پروژه را ببینید ↗Editorial guidance connected to shoppingمجلهای که به انتخاب کمک میکند
The magazine covers body and garment measurements, children’s numeric sizes, free-size garments and hoodie or trouser fit. These guides answer the questions that naturally arise while choosing a product.
مقالههای مجله درباره تفاوت اندازه بدن و لباس، سایز عددی لباس کودک، فریسایز، هودی و شلوار نوشته شدهاند. این موضوعها از سؤالهای واقعی خرید میآیند و نقش راهنما دارند، نه صرفاً پر کردن یک بخش محتوایی.
See project imagesتصاویر پروژه را ببینید ↗Order follow-up and supportرهگیری سفارش و دسترسی به پشتیبانی
A dedicated tracking page gives customers explicit lookup routes. Support, shipping guidance and purchase policies stay reachable from the storefront, so the journey extends beyond the product page.
صفحه اختصاصی رهگیری، روشهای پیدا کردن کد مرسوله را توضیح میدهد. راه ارتباط با پشتیبانی، سیاست ارسال و قوانین خرید هم در دسترس هستند تا مشتری بعد از انتخاب لباس، برای مرحله بعد سرگردان نماند.
See project imagesتصاویر پروژه را ببینید ↗A maintainable commerce foundationزیرساختی برای اداره روزانه فروشگاه
The implementation separates storefront presentation from product, order, content and support administration. This makes the visual layer part of an operating shop, while activation-dependent services can be introduced separately.
ساختار پروژه، نمایش فروشگاه را از مدیریت محصول، سفارش، محتوا و پشتیبانی جدا میکند. به این ترتیب تغییر ظاهر یا اضافه کردن یک سرویس، به بازنویسی کل فروشگاه وابسته نیست. فعالسازی خدماتی مثل پرداخت هم مرحله مستقلی دارد.
See project imagesتصاویر پروژه را ببینید ↗
A closer lookنگاهی به بخشهای پروژه
Open any image to inspect the interface. Captures link back to the public page they show.هر تصویر را باز کنید و جزئیات رابط را ببینید. کپچرها به همان صفحه عمومی پروژه لینک دارند.
No captures in this view yet. Choose all views.برای این نمایش کپچری ثبت نشده؛ همه تصاویر را ببینید.
From structure to releaseمسیر طراحی و اجرا
Map the shopping questionsشناخت سؤالهای خریدار
I structured the catalogue and product content around discovery, selection and follow-up.
ابتدا مسیر دیدن لباس، مقایسه گزینهها و پیگیری سفارش را مشخص کردم؛ سپس برای هر مرحله، اطلاعات و کنترلهای لازم را کنار هم گذاشتم.
Design the visual systemطراحی ویترین و رفتار رابط
A restrained interface gives the clothing photography room, with movement concentrated in the collection and showroom areas.
رابط با فضای کافی برای تصویر لباسها طراحی شد. حرکت بیشتر در ویترین و شوروم قرار گرفت و کنترلهای انتخاب محصول خوانا و قابل پیشبینی ماندند.
Connect the applicationپیادهسازی مسیرهای فروشگاه
Server-rendered Laravel pages connect the catalogue and product data; interactive components enhance selected parts of the experience.
صفحات Laravel به دادههای محصول و دستهها متصل شدند. کامپوننتهای تعاملی، بخشهایی مثل ناوبری و شوروم را تکمیل کردند.
Document the public releaseبررسی و مستندسازی نسخه عمومی
Desktop and mobile captures document the homepage, showroom, catalogue, product detail, magazine and tracking page.
نسخه عمومی در دسکتاپ و موبایل بررسی شد و از صفحه اصلی، شوروم، کاتالوگ، محصول، مجله و رهگیری کپچر تهیه شد. وضعیت پرداخت هم جداگانه در گزارش آمده است.
Delivery and current scopeخروجی و وضعیت پروژه
- Live Persian storefront with collection, category and product routes.فروشگاه فارسی آنلاین با مسیرهای کالکشن، دستهبندی و محصول.
- Responsive catalogue, product information and purchase-selection controls.کاتالوگ واکنشگرا، اطلاعات محصول و کنترل انتخاب رنگ و سایز.
- Interactive showroom, styling preview, editorial guides and order-tracking entry points.شوروم تعاملی، نمایش استایل، راهنماهای خرید و صفحه رهگیری سفارش.
- Online payment remained pending activation at the capture date; no successful payment or sales-growth claim is made here.در تاریخ ثبت تصاویر، پرداخت اینترنتی هنوز فعال نشده بود. این گزارش درباره طراحی و قابلیتهای قابل مشاهده است و ادعایی درباره تراکنش موفق یا افزایش فروش ندارد.
Questions about this projectپرسشهای رایج درباره پروژه
What is The Colors?کالرز چه نوع پروژهای است؟
The Colors is a Persian online clothing store for women, men and children, with a visual showroom, searchable catalogue, product selection and shopping guides.
کالرز یک فروشگاه آنلاین فارسی برای پوشاک زنانه، مردانه و بچهگانه است. ویترین تصویری، شوروم، کاتالوگ قابل جستوجو، انتخاب گزینههای محصول و راهنمای خرید از بخشهای اصلی آن هستند.
What was Mohammadreza Talebi’s role?نقش محمدرضا طالبی در این پروژه چه بود؟
I designed the product experience and developed the storefront, its interactive interfaces and application foundation. The live site also credits me for website design, security and support.
طراحی تجربه محصول، توسعه فروشگاه، رابطهای تعاملی و زیرساخت برنامه را انجام دادم. نام من در سایت نیز بهعنوان مسئول طراحی، امنیت و پشتیبانی درج شده است.
Which technologies are used?پروژه با چه فناوریهایی ساخته شده؟
The implementation uses Laravel and PHP for the application, with React components for focused interactive experiences. The storefront is Persian and right-to-left.
پایه برنامه با PHP و Laravel ساخته شده و برای بخشهای تعاملی مشخص از React استفاده شده است. رابط فروشگاه فارسی و راستبهچپ است.
Is online payment active?پرداخت اینترنتی فعال است؟
At the 17 October 2026 review, the public site stated that online payment had not yet been activated. Check the store for its current payment status.
در بررسی ۲۵ مهر ۱۴۰۵، خود فروشگاه اعلام میکرد که پرداخت اینترنتی هنوز فعال نشده است. برای وضعیت فعلی پرداخت، اطلاعات همان فروشگاه را ببینید.
Are the images on this page real screenshots?تصاویر این گزارش واقعاً از سایت گرفته شدهاند؟
Yes. The gallery contains desktop and mobile captures of the public site, with source links. Some clothing imagery within the store is AI-reconstructed studio imagery, as disclosed on the product pages.
بله؛ تصاویر گالری، کپچر نسخه عمومی سایت در دسکتاپ و موبایل هستند و به صفحه منبع لینک دارند. بخشی از عکسهای لباس داخل خود فروشگاه بازسازی استودیویی با هوش مصنوعی است که در صفحه محصول توضیح داده شده.
Can a similar store be built for another brand?میتوان فروشگاهی مشابه برای برند دیگری ساخت؟
Yes. The catalogue structure, product options, fulfilment needs and brand identity should first be defined. A project brief determines which features belong in the initial release.
بله. ابتدا باید ساختار کالاها، گزینههای محصول، روش ارسال و هویت برند مشخص شود. بعد از بررسی بریف، میتوان درباره امکانات نسخه اول و مراحل توسعه تصمیم گرفت.
Have a similar project in mind?برای پروژهای مشابه صحبت کنیم؟
Tell me what you need to build and where the current experience falls short.بگویید چه محصولی میخواهید بسازید و تجربه فعلی در کدام بخش نیاز به تغییر دارد.