آموزش کاربردی طراحی وب واکنش گرا

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

در این مقاله به منابعی اشاره می‌کنیم که شما را در ایجاد یک وب سایت که هم عملکرد خوبی داشته باشد هم به روی هر دستگاهی به خوبی دیده شود راهنمایی کنند.

چطور واکنش گرا فکر کنیم

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

۹ نکته تایپوگرافی واکنش گرا

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

قوانین تایپوگرافی وب واکنش گرا

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

یک سایت واکنش گرا را با اندازه em طراحی کنید

واحد اِم (em) سیستم اندازه‌گیری تایپوگرافی است. با استفاده از این واحد اندازه‌گیری برای سایز نوشته‌ها می‌توانید اجزاء صفحه را طوری طراحی کنید که به صورت اتوماتیک سایز نوشته را نیز تغییر دهد. سپس با یک روش هوشمندانه برای یک سایز نوشته واکنش گرا، می‌توانید یک صفحه را به صورت داینامیک بر اساس عرض مرورگر طراحی کنید. این آموزش را دنبال کنید تا یاد بگیرید چطور می‌توانید رفتار مرتبط با em ها را برای ایجاد طرح‌هایی که قابل کوچک و بزرگ شدن و ریسپانسیو هستند بهتر کنید.

راهنماهای اولویت: محتوای اول جایگزین وایرفریم

وایرفریم‌ها پرمصرف‌ترین ابزار برای طراحی وب سایت و اپلیکیشن و سایر رابط‌های دیجیتالی هستند، اما بدون اشکال نیستند، بخصوص وقتی نوبت به طراحی واکنش گرا می‌رسد. در این مطلب Heleen van Nues و Lennart Overkamp جایگزین ترجیحی خودشان برای وایرفریم را معرفی می‌کنند: راهنماهای اولویت که شامل محتوا و المان‌های صفحه‌نمایش موبایل می‌شود که با یک زنجیره از بالا به پایین بدون هیچ مشخصه ظاهری مرتب می‌شوند.

راهنمای حرفه‌ای برای طراحی وب واکنش گرا

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

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

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

با استفاده از CSS Grid قالب واکنش گرا ایجاد کنید

این روزها قالب‌هایی که با CSS طراحی می‌شوند به خوبی در مرورگرهای مختلف نمایش داده می‌شوند. اگرچه این قالب‌ها جایگزین Flexbox یا حتی float نمی‌شوند، اما وقتی در ترکیب با آن‌ها استفاده شوند روشی عالی برای ایجاد قالب‌های واکنش‌گرای جذاب و خلاقانه خواهند بود. این راهنمای مرحله به مرحله را دنبال کنید تا با استفاده از Grid یک سایت واکنش‌گرا بسازید.

راهنمای Flexbox برای طراحان وب

آیا استفاده از Flexbox را آغاز کرده‌اید؟ در این آموزش Wes Bos یک راهنمای کامل برای مفاهیم اصلی این ابزار ارائه می‌دهد که به شما درک کاملی از استفاده از این ابزار قدرتمند خواهد داد.

رفرنس Codrops Flexbox

این راهنمای کامل Flexbox که توسط سارا سوئیدان (Sara Soueidan) که یک نویسنده متبحر است که به خاطر توانایی‌اش برای توضیح مفاهیم به روشی که بسیار ساده است و نیازی به توضیحات پیچیده ندارد شهرت دارد، نوشته شده است. راهنمای Codrops به طور مکرر به روز شده و یک منبع عالی برای مرور مجدد در مواقع مورد نیاز خواهد بود.

اسلکس (Slacks): استفاده از Flexbox برای طرح اولیه

Slacks، بخشی از پلاگین قالب اتوماتیک، یک روشی ارائه می‌دهد که شما بتوانید بدون اینکه از CSS استفاده کنید از تکنولوژی Flexbox در طرح اولیه استفاده کنید. این مقاله توضیح می‌دهد چطور شما می‌توانید از این تکنیک قدرتمند برای یک طراحی آسان واکنش گرا استفاده کنید.

آموزش فنی طراحی وب واکنش گرا

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

ساخت قالب‌های قابل تغییر به کمک Susy و Breakpoint

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

راهنمای ایجاد سایت واکنش‌گرا در Adobe XD

اگر علاقه‌مند هستید از Adobe Experience Design (XD) برای طراحی استفاده کنید، در اینجا یک آموزش کامل و کاربردی برایتان داریم که می‌توانید کارتان را با آن آغاز کنید که شامل یک ویدیو می‌شود که تمامی پروسه طراحی با این ابزار را کلیک به کلیک نشان می‌دهد.

CSS در BBC Sport

این یک آموزش نیست، بلکه فقط نکات زیادی برای یادگیری در آن وجود دارد. در این مطلب که یکی از مطالب دو قسمتی سایت است، شاون بنت (Shaun Bent) که یک فرانت دولوپر است ما را به یک تور با جزییات به سایت BBS Sport و اینکه چطور CSS به روی آن کار شده می‌برد. طراحان این سایت توانسته‌اند CSS این سایت عظیم را زیر ۹ کیلوبایت نگه دارند و دانستن اینکه چطور این کار را کرده‌اند بسیار جالب خواهد بود.

پنج نکته برای طراحی فوتر

طراحی فوتر باید بسیار ساده باشد درست است؟ اما متأسفانه این‌طور نیست چرا که قرار دادن فوتر در جای مناسب در هر دستگاهی بیش از چیزی که انتظارش را دارید پیچیده است. خوشبختانه Chris Coyier پنج نکته مهم را جمع‌آوری کرده که به شما کمک خواهد کرد با استفاده از cacl()، Flexbox و مارجین‌ها و گریدها این کار را به درستی و سادگی انجام دهید.

تطبیق با ورودی

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

بهترین اقدام، بالا بردن عملکرد وب موبایل است

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

نحوه ساخت برنامه‌های وب واکنش‌گرا با کمک Container queries

با استفاده از container queries می‌توانید یک اپلیکیشن وب زیبا را که اجزاء مختلفی دارد و عملکردهای مختلفی انجام می‌دهد را در رزولوشن‌ها و ابعاد مختلف طراحی کنید.