https://virgool.ir/feed/@majid.mohebbi96طراح رابط کاربری/تجربه کاربری، علاقه‌مند به دنیای بازی‌های رایانه‌ای، نویسندگی و استارتاپها‌. توییتر: https://twitter.com/Majid_mohebbiifa2026-11-12 11:15:23https://files.virgool.ir/upload/users/117957/avatar/OPFBcV.pnghttps://virgool.ir/@majid.mohebbi96https://virgool.ir/@majid.mohebbi96/مطالعه-موردی-بازطراحی-صفحه-خانه-وبسایت-cd-projekt-red-xs2yo03iz65wآخرین مطالعه موردی من در Behance، بازطراحی صفحه خانه وبسایت شرکت سی پراجکت رد (CD PROJEKT RED - CDPR)، استودیوی سازنده بازی‌های رایانه‌ای شناخته شده نظیر مجموعه ویچر و سایبرپانک 2077 است. می‌تونید این پروژه رو از طریق این لینک مشاهده کنید: (متأسفانه به دلیل فیلتر بودن وبسایت بیهنس باید از فندق شکن استفاده کنید!)https://www.behance.net/gallery/101982375/CD-PROJEKT-RED-Homepage-Conceptهدف من از این نوشته، توضیح دادن تصمیماتی هست که در این پروژه طراحی گرفتم. امیدوارم براتون مفید واقع بشه.درباره‌ی سی دی پراجکت رداگر از طرفداران بازی‌های رایانه‌ای باشید، به احتمال زیاد با استودیوی لهستانی سی دی پراجکت رد آشنا هستید. سی دی پراجکت از پیشتازان صنعت گیم محسوب می‌شود و بازی‌های فوق العاده‌ای را منتشر کرده (و در آینده می‌کند!). می‌توانید وبسایت این شرکت رو از این آدرس مشاهده کنید تا بیشتر با آنها آشنا بشوید. بررسی این لینک همچنین به مقایسه کردن وبسایت فعلی با کانسپتی که در این نوشته در مورد آن صحبت می‌کنم، کمکتان می‌کند:https://en.cdprojektred.com/با وجود اینکه بازی‌های این شرکت در بالاترین سطح ممکن قرار دارند، وبسایت سی دی پراجکت (به نظر من) در سطح بازی‌هایشان نیست! برای همین تصمیم گرفتم در یک پروژه طراحی، صفحه خانه این وبسایت رو (که اصلی‌ترین بخش اون محسوب می‌شود) بازطراحی کنم و آن را بهبود ببخشم.برند سی دی پراجکتاولین نکته‌ای که در مورد وبسایت سی دی پراجکت باید به آن اشاره کنم، این است که این وبسایت از نوع وبسایت‌های با هدف نمایش برند (Brand Presence) هست. به این معنی که هدف اصلی این وبسایت، معرفی ماهیت و برند سی دی پراجکت به عنوان یک استودیوی پیشتاز در حوزه گیم است. در طراحی وبسایتهای از جنس «نمایش برند» دو نکته وجود دارد که باید در طراحی، آن‌ها را مد نظر قرار داد:بیان پیام، مأموریت و یا ارزش‌های سازمان به شکل مستقیم یا غیر مستقیم (ما چه سازمانی هستیم، چرا وجود داریم و چه کاری انجام می‌دهیم).ایجاد دسترسی به اطلاعات مورد نیاز گروه‌های مختلف کاربران. افراد مختلف به دلایل متنوعی به این وبسایت‌ها سر می‌زنند: کسانی که به دنبال کسب اطلاعاتی درباره خود سازمان، تاریخچه و ارزش پیشنهادی آن هستند، سایر کسب و کارهایی که به دنبال ارائه پیشنهادت همکاری هستند، افرادی که به دنبال جایگاه شغلی در آن سازمان هستند، رسانه‌ها که برای دریافت آخرین اخبار درباره سازمان به آن سر می‌زنند، سرمایه‌گذاران، شرکا و ...به عبارت دیگر، از آنجایی که با معرفی برند طرف هستیم و برند هم با احساس درونی افراد با یک سازمان مرتبط است، هدف اصلی این نوع از وبسایت‌ها ایجاد آگاهی درباره سازمان، ارزش یا ارزش‌های پیشنهادی آن و یافتن جایگاهی در دل مخاطبان است. پس با این حساب، در نظر گرفتن برند سی دی پراجکت به منظور بازطراحی وبسایت آنها موضوعی کلیدی است. برند این شرکت را می‌توان با کلماتی نظیر برجسته، قدرتمند، شورشی، پر انرژی، ساختار شکن و دارای اعتماد به نفس بالا معرفی کرد. آنها در بخش‌های مختلف وبسایتشان از «شور و اشتیاق بی اندازه و آتش درونی برای ساختن بهترین بازی‌های ممکن» صحبت می‌کنند. بیان این هویت و شخصیت نیز توسط المانهای بصری وبسایت تا حد خوبی صورت گرفته است:المانهای بصری نماینده برند سی دی پراجکت ردلوگوی الهام گرفته از پرنده‌ای به نام «کاردینال شمالی» که شخصیت برجسته و بی‌پروای سی دی پراجکت را معرفی می‌کند. خطوط تیز و شکسته بکار رفته در لوگو و فرم مشابه شعله آتش در آن (پشت سر پرنده) معرف همان «آتش درونی» است.رنگ قرمز روشن (قرمز کاردینالی) که از انرژی و شور و اشتیاق برند برای انجام آنچه که انجام می‌دهد، حکایت می‌کند.خطوط مورب و شکسته قرمز رنگ بکار رفته در المانهای مختلف وبسایت که مجدداً در راستای معرفی شخصیت شورشی و ساختارشکن این برند حرکت می‌کنند.با این حال، وبسایت سی دی پراجکت از مشکلاتی هم رنح می‌برد: عدم استفاده بهینه از فضای سفید، وجود المانهای زائد نظیر آیکون‌ها و لینک‌های غیر ضروری، نبود یکپارچگی در استفاده از المانهای مختلف در برخی قسمت‌ها و ظاهر کلی که به نوعی قدیمی محسوب می‌شود. در کنار اینها، من معقدم وبسایت این شرکت می‌تواند حتی نقش پر رنگ‌تری در معرفی برند قدرتمند آن داشته باشد.هوم پیج وبسایت فعلی سی دی پراجکت. متمرکز شدن حجم زیادی از اطلاعات در یک فضای محدود منجر به عدم تمرکز کاربر برای دنبال کردن یک موضوع یا هدف خاصی می‌شود به این ترتیب، اهداف اصلی من از این ریدیزاین، رفع مشکلات جزئی که ذکر کردم و همچنین تلاش برای نشان دادن بهتر و بیشتر شخصیت و هویت سی دی پراجکت در وبسایت این شرکت است. انتخاب تایپ‌فیس مناسبتایپ‌فیس فعلی وبسایت سی دی پراجکت Proxima Nova است. پراکسیما نوا گزینه بدی محسوب نمی‌شود اما من به دنبال انتخاب تایپ فیسی بودم که هم ظاهر مدرن‌تری داشته باشد و هم قادر باشد بخشی از روح ساختار شکن سی دی پراجکت را در خود داشته باشد. پس از تست کردن چندین و چند تایپ‌فیس به این نتیجه رسیدم که گزینه‌ای که بتواند هر دو نیاز را برآورده کند وجود ندارد. بنابراین تصمیم گرفتم تایپ‌فیس Gilroy را به واسطه ظاهر مدرن آن انتخاب کنم، و برای هدف دوم یعنی القای روح سی دی پراجکت به متن، وزن Extra Bold این تایپ‌فیس را تغییر دادم و با الهام از لوگوتایپ فعلی سی دی پراجکت، بریدگی‌هایی با زاویه 45 درجه به حروف اعمال کردم تا از آن برای تیترها و هدرهای سایت استفاده کنم:مقایسه تایپ‌فیس‌های پراکسیما نوا (بالا) و گیلروی (پایین)فونت ساخته شده با ویرایش وزن extra bold از تایپ‌فیس Gilroyپالت رنگپالت رنگ فعلی برند سی دی پراجکت، متشکل از قرمز کاردینال، مشکی خالص و چندین واریانس طوسی است. این پالت در کنار فرم و لحن، به خوبی قادر به توصیف و تکمیل ماهیت سی دی پراجکت است. من هم از همین پالت با یک تغییر جزئی در بازطراحی خود استفاده کردم: استفاده از یک طوسی تیره نزدیک به جای سیاه خالص. به این علت که رنگ سیاه خالص به چشم کاربران فشار وارد می‌کند و باعث خستگی زودهنگام می‌شود.فرم و ساختارهمانطور که در بالا گفتم، یکی از اهداف من از این بازطراحی، تلاش به منظور نشان دادن بیشتر ماهیت سی دی پراجکت در وبسایت این شرکت است. بخشی از این موضوع به کمک تایپوگرافی و رنگ محقق شد و من تصمیم گرفتم که از فرم المانهای بصری سایت نظیر دکمه‌ها، تصاویر و کارتها نیز در این راستا استفاده کنم. به همین علت، از برش 45 درجه‌ای که در تایپ استفاده شد و همچنین خطوط مورب و شکستگی‌ها در طراحی فرم المانهای سایت استفاده کردم: خطوط مورب، شکستگی‌ها و برش‌های 45 درجه در کنار تایپ و رنگ تا حد خوبی کاراکتر سی دی پراجکت را معرفی می‌کنندخروجی نهاییمجموعه تمامی تصمیماتی که در این نوشته به آنها اشاره کردم، خروجی نهایی این پروژه بازطراحی را تشکیل می‌دهند که برای دو پلتفرم موبایل و دسکتاپ به شکل رسپانسیو انجام شده است. بخش‌هایی از این بازطراحی را در تصاویر زیر مشاهده می‌کنید (برای دیدن خروجی کامل پروژه، به این لینک مراجعه کنید. فندق شکن یادتون نره!):در رابطه با تصمیمات گرفته شده در این پروژهمسلماً تمامی تصمیماتی که من برای بازطراحی این پروژه گرفتم ممکن است لزوماً درست نباشند و خب این مسئله در حوزه طراحی اتفاق رایجی است، چراکه هیچگاه یک پاسخ قطعی برای یک مسئله دیزاین وجود ندارد. با این حال من تلاش کردم تا حد ممکن تصمیماتی را که به نظرم منطقی بودند بگیرم. همچنین، بخشی از تصمیمات به دلیل دسترسی نداشتن به داده‌های واقعی بر مبنای فرضیات گرفته شدند. برای مثال، سلسله مراتب بخش‌های مختلف هوم پیج (اخبار، فرصت‌های شغلی، تاریخچه و مأموریت شرکت، محصولات و ...) می‌بایست بر مبنای حجم بازدید گروه کاربرانی که از این اطلاعات استفاده می‌کنند، طراحی شود. برای مثال چنانچه مشخص شود بخش عمده‌ی بازدید کنندگان وبسایت افرادی هستند که به دنبال جایگاه شغلی می‌باشند، اولویت فرصت‌های شغلی در ساختار سلسله مراتبی هوم پیج به منظور دسترسی آسان‌تر باید بالاتر باشد. با این حال من فرض کردم بیان پیام و مأموریت سی دی پراجکت رد به عنوان یکی از اهداف اصلی وبسایت این شرکت که از جنس نمایش برند است، می‌تواند جایگاه بالاتری نسبت به سایر بخش‌ها داشته باشد.امیدوارم مطالبی که در رابطه با این پروژه نوشتم بتونه براتون مفید واقع بشه. اگر هر سوال یا نظری در رابطه با هر موضوع مرتبط به این مطلب دارید، خوشحال می‌شم در قسمت کامنت‌ها ببینم. همچنین، اگر از این پروژه خوشتون اومده، می‌تونید بقیه پروژه‌های انجام شده توسط من رو داخل پورتفولیوی بیهنس من مشاهده کنید. و موضوع آخر هم اینکه اخیراً یه گروه تلگرامی مختص مباحث تجربه کاربری راه اندا‌زی کردیم. اگر تمایل به عضو شدن دارید، به آی دی من در تلگرام پیام بدین. خوشحال میشیم عضوی از گروه ما باشین.Majid MohebbiMajid MohebbiFri, 07 Aug 2020 16:08:10 +0430https://virgool.ir/@majid.mohebbi96/a-short-hike-review-difgjfh8rlodاین روزها دل بیشترمان لک زده برای قدم زدن در میان درختان، شنا کردن در دریا و تنفس در هوای آزاد ولی خب، همین آرزوهای ساده هم برایمان دست نیافتنی شده‌اند.اما آیا راهی وجود دارد که بتوان تجربه‌ی مشابهی را در دنیای پیکسل‌ها داشت؟ A Short Hike اینجاست تا ثابت کند که می‌توان با یک بازی به این تجربه دست یافت. در حقیقت، A Short Hike اینجاست تا خیلی بیشتر از این‌ها را برای شما به ارمغان بیاورد!تلفنی که آنتن نمی‌دهدکلیر (Claire) پرنده جوانی است که همراه با عمه‌اش می (May) به پارک هاوک پیک (Hawk Peak) سفر کرده‌اند. کلیر زیاد اهل گشت و گذار در طبیعت نیست و شهر محل زندگی خودش را بیشتر از هرجایی دوست دارد (درون‌گرایان متحد می‌شوند D:). زمانی هم که به پارک می‌رسند، منتظر یک تماس تلفنی مهم است اما عمه‌اش به او می‌گوید که در هاوک پیک، جز در بالاترین نقطه‌ی آن یعنی قله، تلفن آنتن نمی‌دهد! و همین مسئله‌ی ساده، کلیر را مجبور می‌کند تا راه قله‌ی هاوک پیک را که در واقع یک جزیره‌ی بزرگ است، پیش گیرد.همه چیز از اینجا آغاز می‌شود و در همینجا تمام می‌شودیک ادونچر-پلتفرمر متفاوت‏A Short Hike برخلاف بازی‌های پلتفرمر رایج، درباره‌ی گذر از پرتگاه‌های خطرناک و حل کردن معماهای پیچیده و رفتن از A به B برای عبور از مرحله نیست. این بازی معجزه‌ی دیگری را برای شما فراهم می‌کند که اگر اهل ادونچرها باشید، حتما از آن لذت خواهید برد. A Short Hike تماماً در مورد ماجراجویی و گردش در پارک زیبای هاوک پیک هست. شما در این بازی نمی‌میرید، معماهای پیچیده حل نمی‌کنید و با هیچ دشمنی مبارزه نمی‌کنید. شاید جالب باشد بدانید در این بازی حتی نقشه‌ای هم وجود ندارد تا محل بخشهای مختلف پارک را به شما نشان بدهد و به جای آن تنها یک قطب نما گیرتان می‌آید که شما را به قله جزیره که در شمال آن قرار گرفته است، هدایت می‌کند. شاید در ابتدا به دلیل نبود نقشه احساس گم شدن را داشته باشید، اما بعد از مدت کوتاهی متوجه می‌شوید که A Short Hike دقیقاً درباره‌ی گم شدن در هاوک پیک است! درباره‌ی اینکه هدفونهای خود را بر سر بگذارید و در میان درختان رنگارنگ، خطوط ساحلی و کوهستان سرد پرسه بزنید. شاید هم بخواهید در کنار برکه‌ای مشغول ماهی‌گیری شوید و یا برای مدت کوتاهی حس سبک بالی کنید و بر فراز مناظر هاوک پیک پرواز کنید و در نهایت به قله برسید (تجربه‌ی صعودی که من را کمی به یاد Celeste دوست داشتنی انداخت). آن هم در حالی که صدای دلنشین باد و آب گوش‌هایتان را نوازش می‌کنند. خب، اگر این کاری است که شما در بازی انجام می‌دهید، نقشه به چه کارتان می‌آید؟ وقتی از «chill» صحبت می‌کنیم دقیقاً منظورمان چیست؟کلیر قابلیت پریدن، بالا رفتن از ارتفاعات و پرواز کردن را دارد، اما به شکل محدود. در طول بازی برای اینکه بتوانید به قله‌ی هاوک پیک برسید، باید تعدادی پر طلایی جمع کنید که قابلیتهای کلیر را ارتقاء می‌بخشند. تعدادی از این پرها در محیط جزیره به صورت پراکنده پخش شده‌اند، تعدادی را می‌توانید با خرید از فروشگاه (و بازار سیاه!) بدست آورید و تعدادی هم در ازای انجام مأموریت‌های کوچک و کمک کردن به برخی حیوانات دیگر در پارک حاصل می‌شوند. هر چه تعداد پرهای بیشتری جمع آوری کنید، عبور از موانع و بلندی‌ها برای شما آسان تر می‌شود و همینطور از پرواز کردن، که انصافاً در بازی به شکل بسیار مطلوبی طراحی شده، لذت بیشتری خواهید برد.پرهای طلایی مهم‌اند! همه جا به دنبالشون بگردیدپیکسل‌های دوست داشتنی‏A Short Hike مانند بسیاری از بازی‌های مستقل دیگری که این روزها منتشر می‌شوند از گرافیک پیکسلی بهره می‌برد که شاید به مزاق خیلی از گیمرها خوش نیاید، اما همین محیط پیکسلی به قدری زیبا رنگ آمیزی شده که خود دلیل غالبی است برای گشت و گذار بیشتر در محیط. دوربین ایزومتریک غیر استاتیک بازی هم به خوبی امکان حرکت و پرواز آزادانه در محیط را فراهم می‌کند. شاید بهترین کلمه برای توصیف آنچه که از A Short Hike می‌بینیم (به قول خارجی‌ها) «cute» باشد.و این رنگ‌های زیبانوای خوش طبیعتبازی در تمام محیط‌های خود موسیقی ندارد، اما در جاهایی هم که نوای خوش موسیقی را می‌شنوید، احتمالا از وجود آن لذت خواهید برد. تم موسیقی بازی دقیقاً برای یک ماجراجویی آرامش بخش ساخته شده و به خوبی روی آن می‌نشیند. اما جدای از موسیقی، افکتهای صوتی محیط مانند صدای آب و باد و باران به قدری خوب پیاده سازی شده‌اند که توصیه می‌کنم حتماً بازی را با هدفون و با بالا بردن صدای ambient در قسمت تنظیمات تجربه کنید!کنترل روان پرواز با دوربین ایزومتریک بازی خیلی لذت بخش طراحی شده استاما در پایان، و زمانی که به قله‌ی هاوک پیک می‌رسید، انگار که معجزه‌ی بازی هم به اوج خود رسیده باشد، لحظات دلنشینی را تجربه می‌کنید. کلیر بالاخره می‌تواند تلفن خود را پاسخ دهد، اما چه تماسی بوده که کلیر تمام راه را تا قله طی می‌کند تا به آن برسد؟ زمان زیادی طول نمی‌کشد تا به پاسخ این سوال برسید.‏A Short Hike همانند اسم آن کوتاه است. بسته به اینکه چقدر در محیط بازی بچرخید می‌توانید آن را در زمانی بین 1 تا 3 ساعت به پایان برسانید. شاید بزرگترین ضعف بازی هم همین باشد. البته که تولید محتوای بیشتر هزینه‌بر است و از عهده‌ی یک استودیوی مستقل بر نمی‌آید. احتمالاً شما هم در پایان بازی دلتان می‌خواهد که A Short Hike یک «یک قدم زدن طولانی تر» می‌بود. در هر صورت، در این روزهایی که در خانه ماندن کلافه‌مان کرده است، تجربه‌ی A Short Hike می‌تواند لذت بخش‌تر از هر زمان دیگری باشد و ایمان ما را به بازی‌های مستقل، مستحکم تر از قبل می‌کند.آدرس وبسایت بازی: http://ashorthike.com https://youtu.be/l4bWwobx_LQ Majid MohebbiMajid MohebbiWed, 25 Mar 2020 22:17:03 +0430