آموزش UX/UI : اهمیت طراحی سازگار با شرایط و محیط

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

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

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

چگونه ساختار یک سیستم طراحی را بسازیم ؟

شما چند مرحله دارید

  • ساخت بلاک ها از قبل یا فکر به آن  مربوط به سایت
  • مشخص کردن خط فکری در UI  مربوط به سایت
  • قوانین طراحی که برای خود در نظر می‌گیرید  مربوط به برند شما

مرحله اول ساخت بلاک ها

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

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

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

مرحله دوم خط فکری طراحی

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

طراحی UI نیز باید خط فکری مشخص داشته باشد. طراح بداند چی کجاست و در ادامه آن کاربر هم بداند چی کجاست.

At some point your product will be leading [the design]. At another point, your design system will be leading.

—Allard van Helbergen, Senior UX Designer at Atlassian

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

مرحله سوم قوانین طراحی

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

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

شما باید، باید و نباید هایی داشته باشید. مثلا اگر سایت شما باید رنگ شاد استفاده کند در تمامی عکس‌ها و بنرها رنگ ها مشخص باشد.

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

علاوه بر گوگل سایت های مثل  Salesforce, IBM و Airbnb یک سیستم طراحی دارند که بسیار پیچیده است. از طراحی یک کارت ویزیت ساده مدیر یک بخش تا غرفه‌ آنها در نمایشگاه ها یک زبان طراحی؛ یک فونت مشخص، یک رنگ و یک استایل طراحی دارد که سایت آنها نیز از این قوانین پیروی می کنند.

چه چیزی مهم است برای یک سیستم طراحی مناسب ؟

جواب این سوال را ۳۱۵۷ متخصص داده اند و آن را الویت بندی کردند( در UXPIN بخوانید ) .

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

۱۰ الگو UI/UX طراحی سایت و اپلیکیشن حرفه‌ای – سری اول

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

طرح های جدید چه سبکی هستند ؟

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

بررسی طرح های اپلیکشین و سایت

تمامی این طرح ها مربوط به هفته آخر August 2018 است و توسط کاربران و طراحان عوض دررریبل قرار داده شده است.

۱ . App Analytics Pro User Onboarding

این طرح توسط Abinash Mohanty آماده شده است که یک طراح حرفه‌ای است. انتخاب درست رنگ‌ها و تلفیقی از یک طراحی مدرن و کلاسیک از ویژگی های بارز این طرح است. استفاده از عکس ها ۲٫۵ بعدی و آیکون های آن بسیار زیبا و جذاب است .

۲ . Dating App Landing Page

یک طرح خوش رنگ و زیبا که توسط تیم حرفه‌ای paperpillar زده شده است و به آنها صفحات هیرو Hero یا صفحه اصلی می‌گویند. استفاده از رنگ متضاد در بکگراد این تصویر زیباست و همه چنین کاراکتر‌های زیبای آن نشان می‌دهد با یک سایت حرفه‌ای رو به رو هستیم.

۳ . Esports Team Homepage

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

۴ . Get your Job Done

این طرح توسط شخصی به نام Surja قرارداده شده. طراحی بسیار ساده و روانی که برای سایت‌های سرویس‌دهی و خدماتی بسیار مناسب است. استفاده از رنگ بنفش و تصاویری زیبا از محیط زنده برنامه به این سایت کمک کرده تا طرحی جذاب به نظر برسد.

۵ . Landing Page

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

۶ . Heygood黑谷科技-精准抓客

یک اپلیکشین شیک و ساده . به نظر شما شاید این طرح اپلیکشین ساده بیاید اما UX بسیار قوی دارد ترکیب رنگ سرمه‌ای و طلایی کاربر را به وجد می آورد که در یک محیط امن و مخوف به دنبال تراکنش های مالی و فایل های خودش است .

۷ . Financial Landing Page

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

۸ . Medical web application

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

۹ . ۲۰K!!!!

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

۱۰ . Finance Page Concept Sketch Demo 1

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