[{"data":1,"prerenderedAt":408},["ShallowReactive",2],{"navigation":3,"project-\u002Fprojects\u002Fviana":26,"challenges-\u002Fprojects\u002Fviana":136},[4],{"title":5,"path":6,"stem":7,"children":8,"page":25},"Blog","\u002Fblog","blog",[9,13,17,21],{"title":10,"path":11,"stem":12},"From Mockup to Market: My End-to-End Product Design Process","\u002Fblog\u002Ffrom-mockup-to-market","blog\u002Ffrom-mockup-to-market",{"title":14,"path":15,"stem":16},"How I Built My Design System from Scratch","\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch","blog\u002Fhow-i-built-my-own-design-system-from-scratch",{"title":18,"path":19,"stem":20},"The Psychology of Color in UI Design","\u002Fblog\u002Fpsychology-of-color-in-ui-design","blog\u002Fpsychology-of-color-in-ui-design",{"title":22,"path":23,"stem":24},"The Case for Slow Design in a Fast-Paced Digital World","\u002Fblog\u002Fslow-design-in-fast-paced-digital-world","blog\u002Fslow-design-in-fast-paced-digital-world",false,{"id":27,"title":28,"body":29,"company":30,"date":31,"description":32,"endDate":33,"extension":34,"image":35,"images":36,"links":90,"meta":96,"navigation":97,"order":98,"path":99,"seo":100,"startDate":31,"stem":101,"tags":102,"technologies":111,"url":134,"__hash__":135},"projects\u002Fprojects\u002Fviana.yml","ویانا سیستم — مجموعه لندینگ‌پیج‌های شرکتی",null,"ویاناسیستم","2024-09-23","طراحی و پیاده‌سازی مجموعه‌ای از لندینگ‌پیج‌های شرکتی با تمرکز بر UI و UX، پیاده‌سازی دقیق طرح‌های Figma، طراحی Responsive و ایجاد کامپوننت‌های قابل استفاده مجدد برای کاهش هزینه نگهداری و تسهیل توسعه.","2024-11-21","yml","https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana\u002FHome%20page.png",[37,38,40,42,44,46,48,50,52,54,56,58,60,62,64,66,68,70,72,74,76,78,80,82,84,86,88],{"src":35,"alt":30},{"src":39,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana\u002FEstimate%20price.png",{"src":41,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana\u002FProduct%20details.png",{"src":43,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana\u002FProducts.png",{"src":45,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana\u002FSocial%20marketing.png",{"src":47,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana\u002FWeb%20design.png",{"src":49,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana\u002Fbg.png",{"src":51,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana\u002Fgraphic%20design.png",{"src":53,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana\u002Flog%20in%201.png",{"src":55,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana\u002Fnotifs.png",{"src":57,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana\u002Fpersonal%20info.png",{"src":59,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana\u002Fprice%20estimation%20history.png",{"src":61,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana\u002Fpurchase%20history.png",{"src":63,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana\u002Fseo.png",{"src":65,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana2\u002FWeb%20design-mashhad%20%281%29.jpg",{"src":67,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana2\u002FWeb%20design-mashhad.jpg",{"src":69,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana2\u002Fonline%20shop%20website.jpg",{"src":71,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana2\u002Fpanel-courses.png",{"src":73,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana2\u002Fplans.jpg",{"src":75,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana2\u002Fportfolio.jpg",{"src":77,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana2\u002Fprice%20list.jpg",{"src":79,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana2\u002Fresponsive-app%20design.jpg",{"src":81,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana2\u002Fresponsive-portfolio.jpg",{"src":83,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana2\u002Fresponsive-software%20design.jpg",{"src":85,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana2\u002Fsoftware%20Design%20%281%29.png",{"src":87,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana2\u002Fviana%20academy-course%20details.jpg",{"src":89,"alt":30},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fviana2\u002Fviana%20academy-watch%20videos.jpg",[91],{"label":92,"to":93,"target":94,"icon":95},"مشاهده پروژه","","_blank","i-lucide-external-link",{},true,"8","\u002Fprojects\u002Fviana",{"title":28,"description":32},"projects\u002Fviana",[103,104,105,106,107,108,109,110],"UI\u002FUX","Landing Page","Responsive Design","Figma","Component Architecture","Reusable Components","Vuetify","Nuxt.js",[112,121,128],{"category":113,"items":114},"frontend",[115,116,117,118,119,120],"Nuxt.js 3","Vue.js 3","Vuetify 3","Vue Router","Pinia","VueUse",{"category":122,"items":123},"styling",[124,125,126,127],"Tailwind CSS","Sass","DaisyUI","Tailwind Merge",{"category":129,"items":130},"ui & interaction",[109,131,132,133],"Swiper","AOS","Vue Toastification","https:\u002F\u002Fwww.figma.com\u002Fproto\u002FswWlrSzaQWzZFRJLNeI90t\u002FViana-System--website--stories--posts-?node-id=29-1354&t=TMeyeGvKEwzvCzOF-1","NiW2-r51V1VuG-6vumRuo6kbjFuLjU980upJKA9PJWY",{"id":137,"title":138,"body":139,"description":93,"extension":402,"meta":403,"navigation":97,"path":404,"seo":405,"stem":406,"__hash__":407},"projectChallenges\u002Fprojects\u002Fviana-challenges.md","چالش اصلی",{"type":140,"value":141,"toc":392},"minimark",[142,146,157,167,174,177,182,188,191,194,197,203,206,209,212,216,221,224,227,255,258,261,265,271,274,277,294,299,303,309,312,315,319,325,328,359,362,365,368,371,380,386],[143,144,138],"h1",{"id":145},"چالش-اصلی",[147,148,149],"warning",{},[150,151,152,156],"p",{},[153,154,155],"strong",{},"وضعیت پروژه:"," وبسایت این پروژه دیگر در دسترس نیست و شما به پروتوتایپ آن متصل می شوید.",[150,158,159,162,163,166],{},[153,160,161],{},"ویانا سیستم"," یکی از پروژه‌هایی بود که تمرکز اصلی من در آن به‌صورت کامل روی ",[153,164,165],{},"UI\u002FUX و توسعه Frontend"," قرار داشت.",[150,168,169,170,173],{},"هدف اصلی پروژه، پیاده‌سازی مجموعه‌ای از ",[153,171,172],{},"Landing Pageهای شرکتی"," بر اساس طراحی‌های ارائه‌شده در Figma بود.",[150,175,176],{},"در این پروژه تمرکز من بیشتر از پیاده‌سازی صرف صفحات، روی این موضوع بود که طراحی نهایی تا حد ممکن به طرح اصلی نزدیک باشد، در تمام اندازه‌های صفحه‌نمایش عملکرد مناسبی داشته باشد و ساختار کد نیز به شکلی طراحی شود که در ادامه پروژه قابل توسعه و نگهداری باشد.",[178,179,181],"h2",{"id":180},"پیادهسازی-دقیق-از-روی-figma","پیاده‌سازی دقیق از روی Figma",[150,183,184,185,187],{},"یکی از مهم‌ترین تجربیاتی که در این پروژه به دست آوردم، کار کردن دقیق بر اساس طراحی‌های ",[153,186,106],{}," بود.",[150,189,190],{},"در فرآیند توسعه، تلاش می‌شد فاصله‌ها، ابعاد، Typography، ساختار Layout، اندازه کامپوننت‌ها و جزئیات بصری مطابق طراحی اصلی پیاده‌سازی شوند.",[150,192,193],{},"این تجربه باعث شد درک بهتری از تبدیل یک Design آماده به یک رابط کاربری واقعی پیدا کنم و متوجه شوم که پیاده‌سازی دقیق UI تنها به نوشتن HTML و CSS محدود نمی‌شود و نیازمند توجه به جزئیات طراحی است.",[178,195,105],{"id":196},"responsive-design",[150,198,199,200,187],{},"یکی از تمرکزهای اصلی پروژه، ",[153,201,202],{},"Responsive بودن صفحات",[150,204,205],{},"لندینگ‌پیج‌ها باید در اندازه‌های مختلف صفحه‌نمایش، از دسکتاپ تا تبلت و موبایل، ظاهر و رفتار مناسبی داشته باشند.",[150,207,208],{},"در این پروژه یاد گرفتم که Responsive Design نباید به مرحله انتهایی توسعه موکول شود، بلکه باید از همان زمان طراحی ساختار صفحه و انتخاب Layout در نظر گرفته شود.",[150,210,211],{},"برای همین، رفتار بخش‌های مختلف صفحه در Breakpointهای مختلف بررسی شد و Layoutها به شکلی پیاده‌سازی شدند که در ابعاد مختلف صفحه، ساختار و تجربه کاربری مناسبی داشته باشند.",[178,213,215],{"id":214},"معماری-کامپوننتهای-قابل-استفاده-مجدد","معماری کامپوننت‌های قابل استفاده مجدد",[150,217,218,219,187],{},"یکی از مهم‌ترین تجربیات معماری این پروژه، آشنایی عملی با مفهوم ",[153,220,108],{},[150,222,223],{},"به‌جای اینکه برای هر صفحه تمام بخش‌ها از ابتدا پیاده‌سازی شوند، تلاش شد قسمت‌های مشترک در قالب کامپوننت‌های قابل استفاده مجدد طراحی شوند.",[150,225,226],{},"برای مثال بخش‌هایی مانند:",[228,229,230,234,237,240,243,246,249,252],"ul",{},[231,232,233],"li",{},"Header",[231,235,236],{},"Footer",[231,238,239],{},"Navigation",[231,241,242],{},"Hero Section",[231,244,245],{},"Cardها",[231,247,248],{},"Buttonها",[231,250,251],{},"Sectionهای مختلف",[231,253,254],{},"عناصر مشترک رابط کاربری",[150,256,257],{},"به‌صورت Component طراحی شدند تا بتوان از آن‌ها در صفحات مختلف استفاده کرد.",[150,259,260],{},"این رویکرد باعث شد تغییرات آینده با هزینه کمتری انجام شوند؛ زیرا یک تغییر در Component اصلی می‌توانست در تمام بخش‌هایی که از آن استفاده می‌کردند اعمال شود.",[178,262,264],{"id":263},"کاهش-هزینه-نگهداری","کاهش هزینه نگهداری",[150,266,267,268,187],{},"یکی از نکات مهمی که در این پروژه یاد گرفتم، ارتباط مستقیم میان معماری Componentها و ",[153,269,270],{},"Maintainability",[150,272,273],{},"اگر هر صفحه به‌صورت مستقل و بدون توجه به استفاده مجدد ساخته شود، با افزایش تعداد صفحات، نگهداری و اعمال تغییرات سخت‌تر خواهد شد.",[150,275,276],{},"به همین دلیل تلاش شد ساختار Frontend به‌گونه‌ای طراحی شود که:",[228,278,279,282,285,288,291],{},[231,280,281],{},"کدهای تکراری کاهش پیدا کنند.",[231,283,284],{},"Componentها قابلیت استفاده مجدد داشته باشند.",[231,286,287],{},"تغییرات UI با کمترین هزینه انجام شوند.",[231,289,290],{},"توسعه صفحات جدید سریع‌تر انجام شود.",[231,292,293],{},"ظاهر بخش‌های مشترک در تمام صفحات یکپارچه باقی بماند.",[150,295,296,297,187],{},"این پروژه یکی از تجربیات مهم من در درک عملی اهمیت ",[153,298,107],{},[178,300,302],{"id":301},"آشنایی-با-vuetify","آشنایی با Vuetify",[150,304,305,306,308],{},"در این پروژه از ",[153,307,109],{}," به‌عنوان UI Framework اصلی استفاده کردم.",[150,310,311],{},"کار با Vuetify باعث شد با ساختار Component-based این کتابخانه و نحوه استفاده از Componentهای آماده برای ساخت رابط‌های کاربری مدرن آشنا شوم.",[150,313,314],{},"در کنار استفاده از Componentهای آماده، تلاش شد این ابزار صرفاً جایگزین طراحی UI نباشد و ساختار Componentهای پروژه متناسب با نیاز طراحی و معماری پروژه توسعه پیدا کند.",[178,316,318],{"id":317},"تمرکز-بر-ui-و-ux","تمرکز بر UI و UX",[150,320,321,322,187],{},"برخلاف پروژه‌هایی که تمرکز اصلی آن‌ها روی Backend یا منطق پیچیده سیستم است، تمرکز اصلی این پروژه ",[153,323,324],{},"UI و UX",[150,326,327],{},"در نتیجه بخش زیادی از زمان توسعه صرف بررسی مواردی مانند:",[228,329,330,333,336,339,342,345,348,351,354,356],{},[231,331,332],{},"Hierarchy بصری",[231,334,335],{},"فاصله‌گذاری",[231,337,338],{},"Typography",[231,340,341],{},"رنگ‌ها",[231,343,344],{},"اندازه عناصر",[231,346,347],{},"Responsive Layout",[231,349,350],{},"تعاملات کاربر",[231,352,353],{},"Animationها",[231,355,239],{},[231,357,358],{},"Consistency بین صفحات",[150,360,361],{},"شد.",[150,363,364],{},"هدف این بود که علاوه بر شباهت بصری به طراحی Figma، تجربه استفاده از صفحات نیز برای کاربر روان و قابل پیش‌بینی باشد.",[178,366,367],{"id":367},"نتیجه",[150,369,370],{},"پروژه ویانا سیستم برای من تجربه‌ای مهم در مسیر توسعه Frontend و طراحی رابط کاربری بود.",[150,372,373,374,376,377,379],{},"در این پروژه یاد گرفتم چگونه یک طراحی ",[153,375,106],{}," را با دقت به یک رابط کاربری واقعی تبدیل کنم، چگونه Responsive Design را از ابتدا در معماری صفحات در نظر بگیرم و چگونه با استفاده از ",[153,378,108],{}," ساختاری ایجاد کنم که توسعه و نگهداری پروژه در آینده ساده‌تر و کم‌هزینه‌تر باشد.",[150,381,382,383,385],{},"همچنین کار با ",[153,384,109],{}," به‌عنوان یک UI Framework تجربه مهمی برای من بود و باعث شد با رویکرد Component-based در ساخت رابط‌های کاربری و استفاده صحیح از کتابخانه‌های UI آشنا شوم.",[150,387,388,389,187],{},"تمرکز اصلی این پروژه بر ",[153,390,391],{},"UI\u002FUX، کیفیت پیاده‌سازی بصری، Responsive Design و معماری قابل نگهداری Frontend",{"title":93,"searchDepth":393,"depth":393,"links":394},2,[395,396,397,398,399,400,401],{"id":180,"depth":393,"text":181},{"id":196,"depth":393,"text":105},{"id":214,"depth":393,"text":215},{"id":263,"depth":393,"text":264},{"id":301,"depth":393,"text":302},{"id":317,"depth":393,"text":318},{"id":367,"depth":393,"text":367},"md",{},"\u002Fprojects\u002Fviana-challenges",{"title":138,"description":93},"projects\u002Fviana-challenges","wM6Q8OZLJhjCSFO6zCE2hqFscf8dvcMrNr5bZmMOgiw",1786900462724]