چطور در دیزاین بد نباشیم، یک راهنمای ۵ دقیقه ای برای غیرطراحان

هر کسی می‌تواند اصول طراحیِ خوب را یاد بگیرد. این راهنمای به شما دانش پایه ای در طراحی عملیاتی خواهد داد که از امروز می‌توانید آنرا اجرایی کنید.(یا در طرح های دوستانتان تغییری ایجاد کنید.)

اگر احساس می‌کنید نمی‌توانید طراحی را یاد بگیرید، نظر شما را به سخنی از Dave Grohl کارگردان و موسیقی‌دان مشهور آمریکایی در باب یادگیری چیز های جدید جلب می‌کنم:

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

خب پس خودتون رو آماده کنید که این ۱۰ نکته کاربردی در طراحی رو به خاطر بسپارید:

۱. از کنتراست زیاد استفاده کنید

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

از: https://developer.apple.com/design/tips/
از: https://developer.apple.com/design/tips/


۲. خاکستری تیره از مشکی خالص بهتر خوانده می‌شود

اگر امکانش را داشتید برای متون از رنگ 333333# (51, 51 , 51) RBG بجای مشکی خالص استفاده کنید.
مشکی خالص روی پس زمینه سفید چشم را اذیت می‌کند و تمرکز روی حروف را سخت می‌کند.

۳. محتوای مهم را اول بیاورید

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

از: https://developer.apple.com/design/tips/
از: https://developer.apple.com/design/tips/

بگذارید برای جا افتادن موضوع چند نمونه خوب از ترتیب بصری خوب در واقعیت را مثال بزنیم:

  • اینستاگرام تمرکز اصلی را روی پست های ارسالی کاربران قرار داده است.
  • پینترست با قراردادن سرچ باکس در بالا و شبکه بندی موضوعات در ادامه آن یک ترتیب بصری ساخته است. پینترست به قرار گیری سرچ باکس در این نقطه تاکید خاصی دارد. جستجو عملکرد اصلی اپلیکیشن است، افراد برای جستجو و مرور تصاویر بر اساس موضوعات به این اپلیکیشن می‌آیند و نیاز اصلی آنها جستجو است.
راست پینترست / چپ اینستاگرام
راست پینترست / چپ اینستاگرام
  • اسپاتیفای ت آرت ورک آلبوم یا ترک را ابتدا و سپس آیکون های کنترلی را می‌آورد؛ حتی در بین آیکون ها اجرا و توقف اندازه بزرگتری نسبت به بقیه دارند.
  • فیسبوک همانند اینستاگرام وزنه اصلی را روی پستی که دوست شما ارسال کرده قرار می‌دهد.
راست فیسبوک / چپ اسپاتیفای
راست فیسبوک / چپ اسپاتیفای

۴. همه چیز را تراز کنید

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

درست کردن ترازبندی یکی از راحت ترین بهبود هایی است که می‌توان طراحی هر اپ یا وبسایتی را یکباره ۱۰ برابر بهتر کرد.

From: https://developer.apple.com/design/tips/
From: https://developer.apple.com/design/tips/

یک نمونه آموزشی این‌بار از مدیوم:

این یک اسکرین شات از سایت مدیوم است. بنظر شما ظاهر آن چگونه است؟ چه حسی نسبت به آن دارید؟

در سمت چپ فواصل سفید موجود باعث به هم خوردن ترازبندی صحیح شده است؛ در سمت راست من آنها را با یکسان کردن فواصل سر و سامان دادم!

ترازبندی بد سمت چپ و ترازبندی صحیح سمت راست
ترازبندی بد سمت چپ و ترازبندی صحیح سمت راست

۵. اندازه متون و فاصله خطوط

ما برای مورچه ها طراحی نمی‌کنیم!

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

 https://developer.apple.com/design/tips/ : از
https://developer.apple.com/design/tips/ : از
 https://developer.apple.com/design/tips/ :از
https://developer.apple.com/design/tips/ :از


۶. برای نمایش نتایج از لیست استفاده کنید(اگر ترتیب آنها اهمیت دارد)

اغلب اپ های وب و موبایل به نحوی عملکرد جستجو دارند. اگر ترتیب نمایش اهمیت دارد نمایش لیستی معمولا مناسب است. ولی وقتی ترتیب تفاوتی ندارد و می‌خواهید افراد به گشت و گذار در بخش های مختلف سوق دهید ساختار شبکه ای مفید است (مثل پینترست)

از: http://usabilitynews.org/how-do-users-view-search-results-presented-in-a-grid-layout/
از: http://usabilitynews.org/how-do-users-view-search-results-presented-in-a-grid-layout/

۷. اول سیاه سفید طراحی کنید و بعد رنگ ها را بیافزایید

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


۸. طرحی با کاربری راحت داشته باشید

کشیدگی دست یک مشکل واقعی است، تصویر را که از مقاله عالی طراحی واکنش‌گرا: بهینه سازی برای دسترسی سراسری در دیوایش لمسی را در نظر بگیرید:

این مقاله بر اساس آسانی دسترسی صفحه را بخش بندی می‌کند. بسیاری از اپلیکیشن های خوب منو های ناوبری (navigation) را در پایین صفحه و بخش مشخص شده در نظر می‌گیرند.

۹. از پالت رنگ آماده استفاده کنید

رنگ شناسی یک جور هنر سخت و تخصصی است. من به شدت به شما توصیه می‌کنم که به دریبل بروید و به دنبال "color palettes" ها بگردید یا از پالت ساز مثل Coolors یا Color Claim استفاده کنید.

وقت خود را برای بحث های بی‌پایان و حدس زدن رنگ مناسب هدر ندهید!


۱۰. از قرارداد های طراحی گوگل و اپل استفاده کنید

اپل و گوگل منابع بی نظیری برای هر کسی که برنامه های ios یا android می‌سازد فرآهم کرده اند.

برای مثال the Google Material spec اصول، منابع، رنگ ها، آیکون ها و کامپوننت هایی برای شروع سریع طراحی اپ شما تهیه کرده است.

و اپل در Apple has the HIG — their Human Interface Guidelines, تمام چیزی که برای طراحی یک اپ ios نیاز دارید را جمع آوری کرده است.

به یاد داشته باشید: طراحی نیاز به تمرین دارد!

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




نظر شما چیست؟ شما چه نکاتی را در این زمینه کشف کردید؟ با اشتراک گذاری نظرات خود در کامنت ها به یکدیگر کمک می‌کنیم  :)

این یادداشت ترجمه آزادی بود از:

https://medium.com/startup-grind/how-to-not-suck-at-design-a-5-minute-guide-for-the-non-designer-291efac43037