یک فرآیند طراحی پاسخگو جدید

محتوا

• یک روش پاسخگو
• چگونه اول محتوا را نگه دارم؟
• چرا؟
• 01. اهداف تجاری و کاربری خود را مشخص کنید
• 02. هر فرصتی که می گیرید به آنها مراجعه کنید
• 03. از عقب انداختن نترسید
• 04. تیم خود را نیز تحت فشار قرار دهید
• 05. تمام مطالب مورد نیاز خود را از قبل مشخص کنید
• چگونه می توانم مطالب را از ارائه انتزاع کنم؟
• ما نباید از لحاظ چیدمان به فکر محتوا باشیم
• مشتریان خود را مجبور کنید تا محتوای خود را مستقل از طراحی برنامه ریزی کنند
• مطالب خود را قبل از طراحی نهایی کنید
• از محتوای واقعی - هر بار استفاده کنید
• بنابراین چگونه Wireframes برای پروژه های طراحی پاسخگو کار می کند؟
• طراحی کردن
• چارچوب درون مرورگر
• حاشیه نویسی
• از محتوای واقعی در فریم های سیم استفاده کنید
• چگونه ابتدا برای صفحه های کوچک طراحی کنم؟
• طرح های انتزاعی از دستگاه ها در ابتدا
• از کاشی های سبک استفاده کنید
• هماهنگی رابط ایجاد کنید
• همه موارد را در مرورگر مشاهده کنید
• با برنامه های ثابت تعادل برقرار کنید
• نتیجه

بیایید روشن باشیم: طراحی تنها در صورتی که به موضوعات عمیق تری بپردازد ، دلیل اصلی همه چیز ، راه حل است. یک روند جامع همیشه باید کار ما را هدایت کند ، اما ما باید چیزی انعطاف پذیرتر را بپذیریم. سرانجام رسانه ما ثابت کرد که روان است ، بنابراین روند کار ما نباید باشد؟ به طراحی سیستم فکر کنید: شما باید هم کل تصویر را ببینید و هم جزئیات ریز. غیرممکن است؟ دور از آن!

فرانک کیمرو در کتاب شکل شکل خود به زیبایی آن را بیان می کند: «بخشی وجود دارد که هنرمند از تخته سه پایه عقب می رود تا چشم انداز جدیدی از کار به دست آورد. نقاشی قسمت های مساوی دور و نزدیک است: وقتی نزدیک است ، هنرمند سخت کار می کند تا اثر خود را بگذارد. وقتی دور است ، او کار را ارزیابی می کند تا کیفیت آن را تجزیه و تحلیل کند. او قدم به عقب می گذارد تا کار با او صحبت کند. "

ما باید اجازه دهیم کار خود ، رسانه خود با ما صحبت کند. با ظهور طراحی پاسخگو ، ما سرانجام از محیط خود استفاده می کنیم همانطور که قرار بود باشد: سیال. زمان درخشان برای عقب نشینی و ارزیابی کار ، تجزیه و تحلیل و استقبال از یک روش جدید برای انجام کارها ، یک فرایند جدید است. دیگر روزهای ماکت های استاتیک و طراحان وب که کدی را نمی فهمند گذشته است. زمان فرایند پاسخگو است.

یک روش پاسخگو

ما قصد داریم راز بزرگ یک فرآیند جامد را در ابتدای این مقاله به شما بدهیم. چون ما اینطور دیوانه ایم آماده؟ فرایند پاسخگو فرایندی مسئولانه است. مبهم؟ شاید. احمقانه؟ خیر. مانند حرکت استانداردهای وب قبل از آن ، طراحی پاسخگو با روشهای آینده پسند وب را به جلو سوق می دهد.

مانند هر فرآیند طراحی ، باید بر روی "چرا" در پس همه آن تمرکز کند. پس چرا وب سایت ها وجود دارند؟ برای ارائه محتوا. این می تواند مبتنی بر وظیفه ، اجتماعی ، اطلاعاتی باشد ... مهم نیست. همه چیز به این بر می گردد: با چرایی ، محتوای دارای ساختار خوب و تعاملات مهم شروع کنید.

در اینجا س questionsالاتی وجود دارد که ما اغلب در مورد روند طراحی پاسخگو خود می شنویم.

چگونه اول محتوا را نگه دارم؟

همه ما در شروع یک پروژه بسیار خوشبین هستیم. "ابتدا مطالب!" ما میگوییم. "اهداف کاربر! آنچه مهم است را به خاطر بسپارید! " درسته. ولی خب معنیش چی میشه؟ چگونه فرآیند محتوای اول را پیاده سازی می کنید؟

حتی اگر می دانید (یا فکر می کنید می دانید) ، با پیشرفت پروژه فراموش کردن آن آسان است. پروژه های بلند مدت تمایل به ادامه کار دارند (و… و…). ما دیگر به چرایی فکر نمی پردازیم و شروع به تمرکز بر روی چگونگی می کنیم. ما خود را گول می زنیم و فکر می کنیم که پروژه های ما می توانند به فازهای جداگانه "کشف" و "توسعه" تقسیم شوند که می توانند به طور مستقل وجود داشته باشند.

حقیقت این است که ، ما باید دائماً دلیل آن را بپرسیم. مهم نیست چقدر فکر می کنید می دانید ، مهم نیست که چقدر برنامه ریزی کرده اید - هر زمان که تصمیم می گیرید ، هر زمان که یک دکمه را طراحی می کنید یا یک عنوان را می نویسید ، باید بپرسید ...

چرا؟

چرا من این کار را می کنم؟ برای کیست؟ چه هدف تجاری به مشتری من کمک می کند تا به آن دست یابد؟ چه نیازی به آدرس دهی کاربران من کمک می کند؟ فقط در ابتدا مطالب را حفظ نکنید. ابتدا دلیل آن را حفظ کنید.

این صدا را آسان می کند. اما برای انجام این کار خوب ، شما مجبور خواهید شد فشار بیاورید. به مشتریان و تیم خود فشار دهید تا ابتدا چرایی های آنها را مشخص کنند. نه لورم ایپسوم ، نه "بعداً به آن خواهیم رسید". مشقت را بنویس! همه نحوه کار شما باید با یک دلیل محکم شروع شود. این در Yellow Pencil به معنای تغییرات بزرگی در نحوه طراحی ، برآورد ، بودجه و برنامه ریزی پروژه ها است. برای انجام تحقیقات ، استراتژی و برنامه ریزی جامع مجبور به تأمین بودجه و زمان بودیم. شما هم ممکن است اما هنگامی که مشتریان و تیم های شما فواید عظیم تعریف نیاز به محتوا را از قبل ببینند ، دیگر هرگز به عقب نگاه نخواهند کرد.

و این وظیفه ماست که آنها را آموزش دهیم. (اگر می خواهید در مورد معامله با مشتری بیشتر بیاموزید ، کتاب عالی Mike Monteiro Design is a Job) را بخوانید. مشتریان می توانند درک ارزش انجام همه این تحقیقات را سخت کنند و از قبل کار کنند. و چرا آنها باید؟ در پایان چیزی به پایان نمی رسد - و اغلب آنها فقط یک فاکتور و یک سند بزرگ Word دریافت می کنند.

این تقصیر آنها نیست - این تقصیر ماست. این وظیفه ماست که در نشان دادن این ارزش کار بهتری انجام دهیم. در هر مرحله از راه ، ما باید همه آنها را به مهمترین دلیل برگردانیم.

این امر به ویژه برای طراحی پاسخگو مهم است. یک وب سایت پاسخگو به تلاش بیشتری برای توسعه نیاز ندارد ، اما به معنای برنامه ریزی بسیار بیشتر است. واقعاً ، این در حال برنامه ریزی است که ما باید تمام مراحل کار را انجام می دادیم. شاهد چرخه پروژه طراحی مجدد در هر سه سال گذشته باشید. آیا می خواهید این کار را ادامه دهید؟ مطمئن نیستیم

بنابراین در اینجا سه ​​مرحله برای نگهداری محتوا در مرحله اول پروژه وجود دارد.

01. اهداف تجاری و کاربری خود را مشخص کنید

لیست اولویت بندی شده از اهداف تجاری و کاربری پروژه خود را تعیین کنید. کاربران شما بیشتر می خواهند چه چیزی را بدانند یا انجام دهند؟ تحقیق کنید استنباط آگاهانه داشته باشید ، نه حدس های وحشی. همه ذینفعان خود را موافقت کنید.

02. هر فرصتی که می گیرید به آنها مراجعه کنید

هر زمان که تصمیم می گیرید ، هر وقت کسی ویژگی یا عنصر طراحی جدیدی یا صفحه ای از محتوا را پیشنهاد می کند ، او را مجبور کنید نقشه درخواست را برای هدف کسب و کار و کاربر ترسیم کند. این ویژگی واقعاً چه نیاز واقعی را برآورده می کند؟ دلیل واقعی چیست؟ (نکته: "چون من می خواهم" یا "من واقعاً آبی را دوست دارم" یا "همه در فیس بوک هستند" به حساب نمی آیند.)

03. از عقب انداختن نترسید

این می تواند یک مورد سخت باشد. روابط با مشتری می تواند لطیف باشد ، و کنار گذاشتن نبرد برای پیروزی در جنگ وسوسه انگیز است. اما به یاد داشته باشید ، همه ما با هم در این کار هستیم! این تجارت در مقابل کاربر نیست ؛ ما در مقابل آنها

تأمین نیازهای کاربران بهترین راه برای تأمین نیازهای تجاری است. زیرا بدون کاربران ما ، مشاغلی نداریم! مشتریان (مشتریان خوب) شما را استخدام نمی کنند تا به همه چیز "بله" بگویید. بنابراین اگر مشتری شما چیزی را می خواهد که پاسخگوی اهداف وی یا نیازهای کاربرانش نباشد ، از به چالش کشیدن نترسید. این مربوط به خودخواهی نیست. این در مورد ایجاد بهترین راه حل ممکن است.

04. تیم خود را نیز تحت فشار قرار دهید

این همچنین می تواند هنگام کار در یک تیم خلاق یک چالش باشد. تفکیک نقش ها - طراحی بصری ، تجربه کاربر ، معماری اطلاعات ، استراتژی محتوا ، تولید محتوا - می تواند منجر به سو mis ارتباط شود. مشغول کار می شویم ، با ایمیل ها غرق می شویم. ماندن در یک پروژه از ابتدا تا انتها دشوار است ، به ویژه هنگامی که کار "شما" تمام شود.

روابط تیم شما حداقل به اندازه روابط مشتری مهم است. ما باید دلیل این کار را به خود یادآوری کنیم ، همانطور که با مشتریان خود این کار را می کنیم. همکاری مهم است. شما نمی توانید به سادگی یک طرح محتوا یا قاب های سیم یا طرح ها را "تحویل دهید". تا آنجا که ممکن است ، ما باید دست در دست هم کار کنیم. آسان است که کالای تحویل پذیر را به پایان برسانید و به چیز دیگری بروید. وقتی کار دشوار شد ماندن در یک پروژه بسیار دشوارتر است.

رویکرد آبشار به کار خلاقانه فقط کارایی ندارد. کار چابک و مشترک بین اعضای تیم باعث نتیجه بهتر می شود.

05. تمام مطالب مورد نیاز خود را از قبل مشخص کنید

این نکته مهم است: برنامه ریزی وب سایت های پاسخگو طولانی تر است. ما دیگر فقط برای یک متن واحد برنامه ریزی نمی کنیم. ما در حال برنامه ریزی برای همه زمینه هایی هستیم که اکنون درباره آنها می دانیم و برخی دیگر که هنوز وجود ندارند.

اما برنامه ریزی برای همه آن پیچیدگی های پیش رو زمان بسیار کمتری دارد تا بازگشت و ساخت مجدد ویژگی ها و عملکردهایی که حساب نکرده اید. بنابراین وقت / تلاش / بودجه خود را صرف کنید. قبل از شروع به طراحی ، مشتریان و تیم خود را مجبور کنید که تمام محتوای خود را تعریف کنند (و به آن متعهد شوند!). از جداول صفحه استفاده کنید. از محتوای ساخت یافته استفاده کنید. در حال حاضر محتوای خود را در آینده اثبات کنید! یا بعدا گریه کن.

چگونه می توانم مطالب را از ارائه انتزاع کنم؟

این را در حوزه اینترنت-حوزه زیاد می شنوید. اما صبر کنید ، چه؟ و صبر کنید - چرا؟

زیرا ارائه می تواند تغییر کند (و خواهد شد). روشی که ما 15 سال پیش در طراحی وب سایت ها انجام داده ایم از نحوه ارائه آنها تقریباً غیرقابل تشخیص است. اما می دانید چه تغییری نکرده است؟ کلمات ما هنوز از آنها استفاده می کنیم. اینترنت در درجه اول برای محتوای (مبتنی بر متن) وجود دارد. ما هنوز از آن برای حل مشکلات اطلاعاتی استفاده می کنیم. برای انجام وظایف اما اگر محتوای شما به روشی برای ارائه بستگی داشته باشد (صفحات مقدماتی Flash ، کسی؟) احتمالاً تا چند سال دیگر قابل استفاده نخواهد بود. و این بمکد.

ما نباید از لحاظ چیدمان به فکر محتوا باشیم

ما (به عنوان یک صنعت) به مشتریان خود آموزش داده ایم که به مطالب از نظر طرح فکر کنند. ما می گوییم: "آن را در نوار کناری قرار دهید." "این باید در پایین صفحه قرار گیرد." متوقف کردن! متوقفش کن متوقف کردن. این مربوط به مکان نیست. این در مورد اولویت است. مهمترین محتوای کاربران شما چیست؟ چون حدس بزنید: طرح در کل زمینه ها تغییر می کند. (احتمالاً) قرار نیست نوار کناری در طراحی صفحه کوچک شما وجود داشته باشد.

ابر منوی غول پیکر مشتری شما می خواهد؟ نمی خواهم با آیفون پرواز کنم.

مشتریان خود را مجبور کنید تا محتوای خود را مستقل از طراحی برنامه ریزی کنند

خوب ، شما مجبور نیستید آنها را مجبور کنید. آنها را تشویق کنید. به شدت تشویق کنید. جداول صفحه برای این کار عالی هستند. اگر قبلاً آن را نخوانده اید ، برای کسب اطلاعات بیشتر در مورد نحوه ایجاد آنها ، بلافاصله به استراتژی محتوای وب Kristina Halvorson و Melissa Rach بروید. آنها را به ترتیب اولویت بندی کنید. به مکان یا طرح مراجعه نکنید. این به مشتریان شما کمک می کند تا به روش سازنده تری در مورد محتوای خود فکر کنند و همچنین روند ایجاد محتوا را قبل از فریم وایرهای نهایی یا طراحی منتقل می کنند.

مطالب خود را قبل از طراحی نهایی کنید

بسیار خوب ، این همیشه ممکن نیست. اما هرچه عدم اطمینان بیشتری را می توانید قبل از شروع به طراحی از بین ببرید ، مجبور خواهید بود به عقب برگردید و بعداً چیزها را تغییر دهید.

از محتوای واقعی - هر بار استفاده کنید

در صورت امکان ، از محتوای Case Case استفاده کنید - پیچیده ترین صفحات ، تصاویر و منوها را به مشتریان خود نشان دهید. این امر بعداً در حین انجام فرآیند ، هنگامی که آنها کثیف ترین محتوای خود را در محصول نهایی مشاهده می کنند ، از شگفتی جلوگیری می کند.

وایر فریم های کاربردی و درون مرورگر جهان را متفاوت می کند. به مشتریان خود اجازه دهید که محتوای آنها را در محدوده اندازه صفحه نمایش تغییر و تحول دهند. همانطور که فریمهای سیم خود را ارائه می دهید ، به آن اشاره کنید (در حال ارائه حضوری هستید ، درست است؟) به آنها نشان دهید که در حالی که چیدمان تغییر می کند ، اولویت اطلاعاتشان در اندازه صفحه نمایش یکسان است.

بنابراین چگونه Wireframes برای پروژه های طراحی پاسخگو کار می کند؟

ما اعتقاد راسخ داریم که طراحی تعامل برای RWD باید سریع و اغلب به مرورگر وارد شود. تقریباً غیرممکن است که یک سند ثابت ایجاد کنید که همه چیز را توصیف کند. مطمئناً ، ما می توانیم سندی ایجاد کنیم که سه ، چهار یا پنج نقطه شکست را نشان دهد ، اما این فقط بخشی از داستان است. در مورد تمام لحظات بین نقاط شکست چطور؟ این در مرورگر اتفاق می افتد.

طراحی کردن

هنوز هم خوب است که بتوانید به سرعت و به صورت مشترک ایده های خود را ترسیم کنید. نیازی به این نیست که در هیچ رسانه خاصی اتفاق بیفتد ، اما فقط چیزی در مورد مداد روی کاغذ وجود دارد. نکته اصلی در اینجا این است که ایده ها را به سرعت و به صورت تکراری بیان کنید. ما دوست داریم هر زمان ممکن اسکچ بورد طراحی کنیم و حتی برنامه ای برای آن وجود دارد: UI Sketcher.

چارچوب درون مرورگر

این بلیط واقعی برای ماست. ما دوست داریم هنگام نمایش RWD در مرورگر ، از الگوها و سیستم ها دوباره استفاده کنیم. البته ، ما می توانیم هر بار سیستم خود را از ابتدا ایجاد کنیم ، اما این به ما یا مشتریان کمک نمی کند.

ما همچنین دوست داریم از چارچوب های نمونه سازی سریع پاسخگو مانند Twitter's Bootstrap یا Zurb’s Foundation استفاده کنیم. ما شخصاً به بنیاد متمایل می شویم زیرا متناسب با گردش کار ما است. خیلی خوب می شود که هرکدام رویکردی با صفحه نمایش کوچک و پهنای باند برای اولین بار داشته باشند ، اما نحوه رول کردن ما فقط به همین ترتیب است.

حاشیه نویسی

حاشیه نویسی برای سیم های RWD ضروری است اما به نظر ما اغلب نادیده گرفته می شود. با صدای بلند بگویید: مستندات ، مستندات ، مستندات! ما چند نمونه از این موارد را از دوستان دیده ایم و فکر می کنیم که هیئت منصفه هنوز به "بهترین" روش برای حاشیه نویسی صحیح فریم های سیم پاسخگو در مرورگر نیست. همانطور که در بالا ذکر شد ، ما به طور منظم از Foundation by Zurb استفاده می کنیم و دوست داریم از افزودنی Reveal آن برای نمایش حاشیه نویسی خود استفاده کنیم. این حاشیه نویسی فقط برای صفحه های بزرگتر نشان داده می شود و به طور ایده آل می تواند خاموش و روشن شود.

از محتوای واقعی در فریم های سیم استفاده کنید

بحث های زیادی در مورد Lorem Ipsum در فریم های سیم و ماکت های طراحی شده است ، اما اگر محتوای واقعی در قاب های سیم خود ندارید ، این کار را اشتباه انجام می دهید. این محتوا تصمیمات تعامل را به شما اطلاع می دهد و به شما می گوید چه زمانی یک طرح از بین می رود. چگونه لورم ایپسوم می تواند چنین کاری انجام دهد؟

چگونه ابتدا برای صفحه های کوچک طراحی کنم؟

ما سالها با وضوح خاصی در ذهن طراحی می کردیم. این یک تنظیم پیش فرض بود. چه طراحی در نوت بوک ها ، وایر فریمینگ در OmniGraffle ، کار در فتوشاپ یا طراحی در مرورگر ، ما می دانستیم که اندازه بوم ما قرار است چه اندازه باشد. آن روزها از بین رفته است. ما بسیار معتقد به طراحی صفحه نمایش کوچک و افزایش تدریجی آن هستیم. بنابراین چگونه یک طراح گردش کار خود را از اندازه بوم ثابت به سیال تغییر می دهد؟

طرح های انتزاعی از دستگاه ها در ابتدا

تا زمانی که ما برای دستگاه خاصی طراحی نکرده ایم ، ضروری است که دیگر به فکر دستگاه ها نباشیم و به تجربیات فکر کنیم. تمام تکنیک های زیر به طراحان کمک می کند تا تجربه های خود را بسازند در حالی که می توانند دستگاه خود را (تا یک مرحله) باقی بمانند.

از کاشی های سبک استفاده کنید

برای ایجاد جهت و تکرار سریع از کاشی های سبک استفاده کنید. کاشی های سبک یک طراح را قادر می سازد جهت یک سیستم طراحی را بدون خاصیت بیش از حد مشخص تعیین کند. خالق آنها ، سامانتا وارن ، آنها را اینگونه توصیف می کند:

"کاشی های سبک برای مواردی است که یک تابلوی مبهم بیش از حد مبهم و یک محتوا بسیار واقعی است. کاشی های سبک بدون تعریف طرح ، ارتباط مستقیمی با عناصر رابط واقعی ایجاد می کنند. "

هماهنگی رابط ایجاد کنید

یک بوم را تصور کنید که تمام عناصر بصری و تعاملی در کنار هم قرار گرفته اند. نه برای دیدن طرح بندی رابط کاربری خاص ، بلکه برای دیدن نحوه کار همه عناصر با هم. این بوم هماهنگی رابط کاربری است. بوم هماهنگی رابط ، طراح را قادر می سازد تا ایده ها را کنار هم نگه دارد ، اما بر روی هر اندازه صفحه تمرکز ندارد. به علاوه ، این یک روش عالی برای برقراری ارتباط موثر و مستندسازی عناصر طراحی شده به جای تهیه یک راهنمای سبک کامل است.

اگر علاقه مند به مطالعه بیشتر هستید ، دو مقاله عالی در مورد هماهنگی رابط را می توانید در اینجا و اینجا پیدا کنید.

همه موارد را در مرورگر مشاهده کنید

همه چیز باید در مرورگر جمع شود. اینجاست که طراحی UI واقعاً جان می گیرد. دیدن چگونگی تعامل محتوای واقعی با عناصر بصری بسیار مهم است. هیچ راهی برای انجام صحیح این کار در یک محیط ثابت وجود ندارد. شما باید ببینید که چگونه در رسانه بومی پاسخ می دهد.

با برنامه های ثابت تعادل برقرار کنید

بین مرورگر و برنامه های ثابت مانند فتوشاپ جریان وجود دارد. باید تعادلی وجود داشته باشد که اجازه دهد سیستم طراحی به روشی روان و طبیعی ایجاد شود. مطمئناً ، این در فتوشاپ اتفاق خواهد افتاد ، اما یک طراح که در حال طراحی پاسخگو است ، باید یاد بگیرد چگونه در مرورگر فکر خلاقانه کند.

نتیجه

یک بار دیگر ، با احساس: با چرایی شروع کنید ، با محتوای ساختارمند و تعاملات مهم. ابتدا روی صفحه کوچک و پهنای باند کم تمرکز کنید و به تدریج مفاهیم پاسخگو خود را افزایش دهید. مدیوم ما در حال بلوغ است. ما این فرصت را داریم که کارها را به درستی انجام دهیم و جهان را تغییر دهیم ، همزمان یک پروژه وب.

بهترین 20 ابزار قاب سازی سیم را برای طراحان کشف کنید

استیو فیشر تحقیقات ، تجزیه و تحلیل ، طراحی و استراتژی را در Yellow Pencil در کانادا هماهنگ می کند و در موضوعاتی مانند RWD ، UX و منبع باز صحبت می کند. آلن مکنزی یک استراتژیست محتوا در Yellow Pencil است.