خانه / مقالات / برنامه نویسی / برنامه نویسی وب / استفاده طراحان از Adobe Muse CC برای ساخت یک نقشه از Manhattan

استفاده طراحان از Adobe Muse CC برای ساخت یک نقشه از Manhattan

استودیوی Alfalfa یکی از شرکت‌های برنده جایزه طراحی است که مجموعه‌ای کامل از خدمات، از جمله استراتژی نام تجاری و هویت، انیمیشن و فيلم، طراحی تعاملی و وب و غیره را ارائه می‌دهد. این تیم اخیراً اولین پروژه خود را با ابزار حرفه‌ای Adobe Muse CC که طراحان را قادر به ایجاد وب سایت بدون نوشتن کد می‌سازد به پایان رساند.
نتیجه، سایت جذاب و جدید New York is my Muse شد. همانطور که سایت را بررسی می‌کنید، می‌توانید من‌هتن را نیز از منظر ۱۶ طراح محلی سیاحت کنید. مشارکت‌کنندگان عبارتند از: Jan Wilker از karlssonwilker، Allan Chochinov از Core77 و Willy Wong، مدیر خلاق رئیس انجمن گردشگری نیویورک.

مفهوم
اعضای تیم طراحی استودیوی Alfalfa شامل Rafael Esquer، Gabriela Mirensky و Guillaume Boucher هستند. وظیفه آن‌ها، به گفته Mirensky، ایجاد سایتی است که «لایه‌های متعددي از محتوای ارائه شده توسط طراحان ستاره مستقر در نیویورک را ارائه مي‌دهد که به آن لحن بسیار شخصی می‌دهد. ما می‌خواهیم به صورت مرکزی باشد که در آن جامعه طراحی نیویورک شهر شگفت‌انگیز خود را با همتایان خود به اشتراک می‌گذارند. اسرار و شگفتی‌هاي آن، مکان‌هایی است که برای آن‌ها الهام‌بخش است. با گرافیک ساده و جذاب، با الهام از هنر صنایع دستي بومی، سبک بصری خاص این وب سایت احترام به شخصیت فردی، تحسين كردن قدرت تخیل و بازگشت به جذابیت اغوا‌کننده زیبایی را تداعی خواهد کرد. شکل‌هاي ۱ تا ۶ بسیاری از مراحل روند تفکر آن‌ها را نشان می‌دهد.
منحنی یادگیری
از همان ابتدا، Alfalfa تعداد زیادی از کلید‌های میانبر مفید را در Adobe Muse پیدا کرد. Mirensky به چندین نکته اشاره کرد: «Adobe Muse CC همان قابلیت حروفچینی قدرتمند Adobe InDesign CC، Illustrator CC و Photoshop C را ارائه می‌دهد. Adobe Muse همچنین پیدا کردن‌ هایپرلینک‌ها را آسان می‌کند و به تسریع اين فرآیند کمک می‌کند. با یک جست‌وجوی ساده می‌توانیم لینک‌های ذخیره شده را در کتابخانه قرار دهیم تا پس از آن تنها با یک کلیک فعال شوند. این روش از اشتباهات در تایپ مجدد اطلاعات موجود جلوگيري مي‌كند. ما همچنین متوجه شدیم که، با توجه به سهولت ایجاد و سازماندهی مجدد صفحات، ایجاد نقشه بصری سایت با استفاده از Adobe Muse سریع و روشن است.
Adobe Muse بخشی از Adobe Creative Cloud است که امکان دسترسی سریع به ویژگی‌های جدید را به محض آماده شدن به کاربران می‌دهد. مزایای استفاده از این فرآيند ارتقاي پیوسته زمانی برای Alfalfa آشکار شد که Adobe سايت ویژگی Layers را در یک به‌روزرسانی Adobe Muse در طي پروژه نقشه معرفی کرد. اين ويژگي به Alfalfa برای سازماندهی همه اجزای سايت نقشه کمک کرد، از جمله عکس‌ها، ویدجت‌ها، منو‌ها، پاورقی‌ها، هدرها و ستون‌های جانبي.
در اواسط پروژه، Adobe Muse جلوه‌هاي حرکتي پيمايش را معرفی کرد که به عناصر صفحه اجازه تنظیم حرکت را در جهات مختلف با سرعت‌های متفاوت با پيمايش ماوس می‌دهد. اين عملكرد خودش را کاملاً به مفهوم سایت بخشید و استودیوی Alfalfa طراحی سایت را تجدید کرد (ويدئو ۱ را نگاه کنید).
ويدئوي ۱٫ بزرگ‌نمايي ساختمان‌هاي تاريخي من‌هتن در صفحه اصلي هنگام پيمايش به پايين. ممنون جلوه‌هاي پيمايشي Adobe Muse CC (دانلود از
http://tv.adobe.com/watch/companion-videos-for-inspire/adobe-muse-map-scrolling-effects/).
آوردن مفهوم به زندگی
هنگامی که به سایت New York is my Muse مراجعه می‌کنید، سخت است به یاد داشته باشید که Alfalfa نگاه، احساس و عملكرد خود را بدون نوشتن کد ایجاد کرده است (ویدئو ۲ را ببینید).
ويدئوي ۲٫ توري در وب‌سايت (و من‌هتن)، در اين ويدئوي كوتاه (دانلود از:
http://tv.adobe.com/watch/companion-videos-for-inspire/adobe-muse-map-tour/).

روی آیکون چشمک‌زن صفحه اصلی کلیک کنید تا یکسری نقاط رنگی آشکار شود (ایجاد شده با استفاده از ويدجت Accordion) که نشان‌دهنده هر یک از طراحانی است که به این پروژه کمک کرده‌اند. ماوس را روي یک نقطه رنگی ببريد تا نام طراح آشكار شود؛ Alfalfa از ويدجت Tooltip برای آن رفتار استفاده می‌کند.
روی یک نقطه رنگی کلیک کنید تا صفحه برای نشان دادن نقشه‌ای سفارشی از من‌هتن با نقاط حساسي که توسط طراح متمايز شده است نوسازي ‌شود. از طریق تور‌های انفرادي هر یک از طراحان شهر با کلیک روی آیکون‌هایی پيمايش كنيد كه هنگام در دسترس بودن محتوا، ظاهر مي‌شوند. استودیوی Alfalfa این سبک پیمایش را با استفاده از ویژگی Anchors در Adobe Muse پیاده‌سازی کرده است. از آنجا که هر آیکون یک لنگر است، انتخاب یک نقطه از روی نقشه باعث ایجاد یک لایه معلق در هوا با محتوای پرسش و پاسخ مي‌شود. به عنوان مثال: جشن بعد از پروژه‌های مورد علاقه Timothy Goodman چیست؟ پرداختن به یک بازی Knicks. Jan Wilker اغلب دوست دارد کجا زندگی کند؟ یکی از خیابان‌هاي جنوبی پارك.
همانطور که شما به جلو و عقب کلیک می‌کنید، نقشه پس‌زمینه برای تطبیق قطعه بعدی اطلاعات به بالا یا پایین حرکت می‌کند که پیاده‌سازی با وارد کردن این لینک‌های داخلی و یا لنگرها برای Alfalfa آسان بود. چارچوب Adobe Muse نیز اجازه سبک پیمایش خطی را می‌داد و باعث ایجاد دکمه‌های پیکانی انتخاب «بعدی» و «قبلی» در داخل لایه محتوا می‌شد.
Alfalfa جلوه‌هاي پیمایشي را به روش‌های مختلف در سرتاسر سایت به کار گرفته است:
* صفحه خوش‌آمد‌گویی: این استودیو مجموعه‌ای از لحن‌های تجربه کلی را در صفحه خوش‌آمدگویی لازم داشت: سايتي جالب، شگفت‌آور و با پيمايش آسان. همانطور که شما در حال حرکت برای خواندن متن هستید، نقشه نیویورک به زندگی وارد مي‌شود، با عناصر مختلف صفحه‌آرايي و گرافیک در حال حرکت با سرعت‌های مختلف.
* صفحه اطلاعات: به جای داشتن یک – و انتظار می‌رود – صفحه اطلاعات ثابت، Alfalfa برخی از عناصر گرافیکی را برای تعامل با متن متحرک ساخت.
* صفحات طراح: حباب‌های اطلاعاتي براي نمايش روي محور عمودي برنامه‌نويسي شدند. کاربر مجهز به تجربه اطلاعاتي منسجمي شد، هنگامي كه كل متن همیشه در يك ارتفاع روی صفحه نمایش باشد.
آنچه كه شما نمي‌بينيد کاری است که Muse Adobe در پشت صحنه انجام می‌دهد: همه چیز بهینه‌سازی شده است تا سایت به سرعت بارگذاری شود، سازگاري چند پلت‌فرمي و چند مرورگري داشته باشد و برای موتورهای جست‌وجو مانند Google قابل شناسایی باشد.

آینده
استودیوی Alfalfa متوجه شد که Adobe Muse با استفاده از یک رويكرد بصری‌تر، ساخت سایت را با سرعت بیشتر تسهیل می‌کند. فرآیند خلاقیت می‌تواند راه را نشان دهد و جلوه‌هاي پیچیده مانند حرکت پيمايشي برای طراحانی که کد را ترجیح نمی‌دهند، محدوديت محسوب نمي‌شود.
Mirensky برداشت خود را در مورد چگونگی انطباق Adobe Muse در گردش کاری خود در آینده را سنجید. «ما قصد داريم از Adobe Muse زمانی که سریعاً به چیزی آنلاین نیاز داریم استفاده کنیم و زمانی که توانایی صرفنظر از بسیاری از جنبه‌های فنی را كه بيشتر نسخه‌های قابل چاپ که مانع از انتشار آن در یک سایت توسط طراحان مي‌شدند، داریم. انتشار با Adobe Muse آسان است – شما می‌توانید به‌طور مستقیم از Muse به میزبانی با Adobe یا انتخاب میزبانی با هر تأمين‌كننده دیگر منتشر کنید. با الهام از New York Is My Muse، یکی از کارورزان طراحی ما قادر به انتشار وب سایت نمونه کارهای خود- از ابتدا تا انتها- با استفاده از Adobe Muse فقط در طي دو روز شد.»

دیدگاهتان را ثبت کنید

آدرس ایمیل شما منتشر نخواهد شدعلامتدارها لازمند *

*

x

شاید بپسندید

ux_User experience تجربه کاربری - ماهنامه کامپیوتری رایانه

UX یا تجربه کاربری چیست؟

UX چیست؟ چرا مهم است؟ وبهترین ابزارها برای طراحی تجارب بزرگ وب ...