طراحی وب سایت ریسپانسیو نحوه دسترسی و مشاهده محتوای آنلاین را تغییر داده است. در این راهنما، در 10 دقیقه طراحی وب سایت پاسخگوی خود را خواهید ساخت
ما در زمان تغییرات سریع و دائمی زندگی می کنیم. گاهی اوقات ما برای این تغییر آماده هستیم، گاهی اوقات نه چندان.
اگر ذهن خود را به اوایل دهه 2000 برگردانیم، زمانی که اینترنت هنوز در حال یافتن شیار خود بود، تجربه ما محدود اما پر از پتانسیل بود. چند دهه به جلو و اینترنت، و نحوه تجربه ما از اپلیکیشن های موبایل و طراحی وب سایت ها، جانوری کاملاً متفاوت به نظر می رسد.
یکی از مفیدترین و شهودی ترین پیشرفت ها طراحی وب سایت واکنش گرا است. دیگر محدود به ابعاد دستگاه خاصی نیستیم. ما یک کاوشگر اینترنت با برد آزاد هستیم که می توانیم محتوایی را که مصرف می کنیم را به میل قلبی خود گسترش و کوچک کنیم. و با این حال، 60 درصد از کسب و کارهای کوچک هنوز طراحی وب سایت های قدیمی دارند که با وضوح صفحه نمایش کاربران خود سازگاری ندارند
مهم نیست که یک رایانه شخصی هستید، مک، موبایل یا حتی تبلت، با طراحی وب سایت واکنشگرا، تجربه شما در همه دستگاه ها ثابت خواهد بود. این به یک استاندارد در طراحی وب سایت تبدیل شده است و چیزی است که همه طراحان طراحی وب سایت خوب باید در عمل از آن استفاده کنند.
اینترنت برای همه است و باید با در نظر گرفتن انواع مختلف افراد طراحی شود که هر کدام نیازهای خاص خود را دارند تا در دسترس باقی بماند. طراحی وب سایت ریسپانسیو قادر به انجام این کار است.
در این پست، Justinmind به شما نشان می دهد که چگونه می توانید طراحی وب سایت واکنش گرا خود را در ابزار نمونه سازی ما در 10 دقیقه طراحی کنید.
طراحی وب سایت ریسپانسیو چیست؟
اگر به تازگی طراحی UX را شروع کرده‌اید، شاید قبلاً با نمونه های طراحی وب سایت واکنش گرا مواجه شده باشید. اگر نه، در اینجا چیست:
طراحی وب سایت ریسپانسیو رویکردی برای طراحی وب سایت است که پویا و سازگار است. پویا است زیرا صرف نظر از ابعاد صفحه یا جهت آن، عناصر و چیدمان رابط کاربری سازگار خواهند بود.
از آنجایی که دستگاه های زیادی وجود دارد، همه با اندازه های خاص خود، طراحی وب سایت واکنش گرا پاسخی به مشکل طراحی برای چندین دستگاه است.
اکنون طراحان طراحی وب سایت یک طرح ایجاد می کنند و از یک سری نقاط شکست برای تعیین نحوه ظاهر شدن یک طرح استفاده می کنند. نقاط شکست عرض مرورگر هستند. هر نقطه شکست طرح متفاوتی را نشان می دهد.
به دنبال یک راهنمای کامل برای طراحی وب سایت واکنش گرا هستید؟ مقدمه ما در پاسخگو را امتحان کنید.
چرا طراحی وب سایت ریسپانسیو اهمیت دارد؟
53 درصد از کل ترافیک آنلاین جهانی در سال 2017 از طریق تلفن همراه قابل دسترسی بوده است. این بخش بزرگی از جمعیت است. در واقع، جمعیت موبایل جهان نزدیک به 4 میلیارد نفر است.
با توجه به درصد زیادی از جمعیت که ترجیح می دهند طراحی وب سایت را با دستگاه تلفن همراه خود مرور کنند، مهم است که تجربه آنها تحت الشعاع تجربه ای که در دستگاه های دیگر مانند رایانه های رومیزی و تبلت ها وجود دارد، نباشد.
طراحی وب سایت واکنش گرا راهی است برای اطمینان از اینکه همه تجربه های یکسان و منسجم را در سراسر جهان دارند.
با ایجاد و نمونه سازی یک طراحی وب سایت (که به لطف آخرین به روز رسانی ما بسیار آسان است) که به درستی در صفحه نمایش های کوچک رندر می شود، کاربر طراحی وب سایت مجبور نخواهد بود از تصاویر تحریف شده یا طرح بندی عجیب و غریب رنج ببرد. وقتی 75 درصد از مشتریان اعتبار یک کسب و کار را بر اساس طراحی وب سایت خود قضاوت می کنند، پاسخگو بودن ارزش دارد.
محتوا در طراحی وب سایت واکنشگرا نقش اساسی دارد
با فضای محدود در دستگاه تلفن همراه، محتوا باید مستقیم و دقیق باشد، به خصوص اگر می خواهید پیامی قوی به خانه برسانید. از آنجایی که فضای صفحه نمایش شما در بسیاری از دستگاه ها محدود است، رویکردی را که در ابتدا محتواست در طراحی وب سایت خود هدف بگیرید.
تنها با استفاده از آنچه برای کاربر مهم است و حذف هر گونه کپی اضافی از محتوای خود، می توانید پیامی واضح و متمرکز را ارائه دهید. ماهیت محدود طراحی وب سایت ریسپانسیو به این معنی است که این تمرکز به سایر بخش های طراحی وب سایت شما مانند طراحی وب سایت UI و معماری اطلاعات سرایت می کند.
طراحی وب سایت ریسپانسیو برای سئو عالی است
نمایه سازی موبایل اول یک چیز است و مدتی است که وجود داشته است. اگر نسخه موبایل پسند طراحی وب سایت شما در دسترس کاربران نباشد، طراحی وب سایت شما ممکن است توسط گوگل جریمه شود. و با توجه به اینکه بسیاری از شرکت ها هنوز به میراث خود تکیه می کنند، هنوز کار زیادی برای طراحانی وجود دارد که طراحی وب سایت ریسپانسیو ظریفی ایجاد می کنند.
از آنجایی که طراحی وب سایت ریسپانسیو متمرکز است و محتوا را در اولویت قرار می دهد، می توانید با استفاده از آن سئوی خود را تقویت کنید.
به گفته گوگل، زمان صرف شده در صفحه شما یک عامل کلیدی در ارزش یک طراحی وب سایت است و بنابراین وقتی طراحی وب سایتی طراحی می کنید که به هر دستگاهی پاسخ می دهد و معماری اطلاعاتی مناسبی دارد، سئوی طراحی وب سایت کلی خود را بهبود می بخشد.
همانطور که دیوید ترانس می نویسد: " طراحی وب سایت واکنش گرا برای موبایل برای یک تجربه مثبت کاربر اساسی است، و گوگل به سایت هایی که با کاربرانی با چنین تجربه ای ملاقات می کنند پاداش می دهد."
با استفاده از دسکتاپ سبقت موبایل به عنوان راهی که کاربران به اینترنت دسترسی دارند، با طراحی وب سایت واکنش گرا، می توانید به تعداد بیشتری از افراد دسترسی پیدا کنید.
چگونه در 10 دقیقه یک طراحی وب سایت ریسپانسیو ایجاد کنیم
بنابراین اکنون می دانیم که طراحی وب سایت واکنش گرا چقدر مهم است، به خصوص وقتی صحبت از ارائه یک تجربه عالی به کاربر می شود. زمان آن فرا رسیده است که دانش خود را عملی کنیم و طراحی وب سایتی برای خودمان بسازیم.
در Justinmind می توانید به سرعت و به راحتی یک طراحی وب سایت واکنش گرا را نمونه سازی کنید. قالب طراحی وب سایت واکنش گرا از پیش ساخته شده ما دارای تمام ابزارک های لازم از قبل برای شما است، به این معنی که تنها کاری که باید انجام دهید این است که طراحی وب سایت را با تصاویر و محتوای خود سفارشی کنید و خوب است که بروید. برای دسترسی به الگو، تنها کاری که باید انجام دهید این است که یک نمونه اولیه جدید را باز کنید، یک دستگاه را انتخاب کنید و سپس روی نمونه ها کلیک کنید، جایی که در آنجا مجموعه ای از نمونه ها را برای بازی خواهید داشت.
با این حال، اگر می خواهید دست هایتان را کثیف کنید و طراحی وب سایت واکنش گرای خود را از ابتدا بسازید، در این مسیر همراه باشید. این روش به شما نشان می دهد که برای ایجاد یک طراحی وب سایت کاملاً واکنش گرا چه کاری باید انجام دهید.
طراحی وب سایت واکنش گرا با جاستین مایند
مرحله 1: دانلود Justinmind
ابتدا Justinmind را دانلود کنید و یک نمونه اولیه موبایل جدید بسازید. بین دستگاه‌های Android یا iPhone یکی را انتخاب کنید. طراحی وب سایت ریسپانسیو ابتدا باید موبایل باشد، پس بیایید با طراحی وب سایت موبایل خود شروع کنیم. از آنجایی که ما نسبت های خود را تعیین می کنیم، طراحی وب سایت بر اساس آن در هر دستگاهی مقیاس می شود.
مرحله 2: طرح صفحه را تعریف کنید
برای اینکه زندگی را برای ما آسان کنیم، بیایید طراحی وب سایت را به یک سرصفحه، بخش اصلی و یک پاورقی تقسیم کنیم. بسیاری از طراحان نیز قبل از انجام هر گونه طراحی دیجیتال واقعی، برای ایجاد یک نمونه اولیه کاغذی از این ساختار کلی وقت صرف می کنند.
برای هدر، ویجت های مربوطه را بکشید و روی بوم خالی و تازه خود بکشید. اگر می خواهید یک هدر بزرگ با یک تصویر ایجاد کنید، یک ویجت مستطیلی را روی بوم خود بکشید.
در تب Properties، بخشی به نام "پس زمینه" را پیدا خواهید کرد که می توانید تصویر خود را در آن آپلود کنید. هنگامی که تصویر خود را آپلود می کنید، می توانید یک منوی کشویی با گزینه های مختلف نمایش تصویر انتخاب کنید. روی "پوشش" کلیک کنید - این تصویر شما با ابعاد مستطیل مطابقت دارد.
می‌توانید از ویجت‌های دکمه یا متن برای هر پیوند ناوبری در سرصفحه خود استفاده کنید - به سادگی از رویدادها برای پیوند دادن این دکمه ها به صفحه های دیگر استفاده کنید.
مرحله 3: محتوای رابط کاربری خود را طراحی کنید
اکنون باید کادرهای متنی را برای محتوای خود اضافه کنید. می توانید از ویجت های پاراگراف یا متن استفاده کنید.
پس از اینکه سرصفحه و محتوای خود را در جای خود قرار دادید، پاورقی را می توان با ویجت مستطیلی ایجاد کرد، رنگ خود را از برگه Properties انتخاب کنید. در اینجا می‌توانید نمادهای اجتماعی موجود در پنل ابزارک را نیز اضافه کنید. این آیکون ها SVG هستند، بنابراین بدون از دست دادن کیفیت، اندازه شان تغییر می کند و برای نمونه سازی واکنش گرا عالی است.
در هر پروژه واقعی، این طراحی وب سایت با گذشت زمان تکامل می یابد و جزئیات بیشتری پیدا می‌ک ند. شما با یک وایرفریم با کیفیت پایین شروع می کنید و به یک نمونه اولیه با وفاداری بالا می رسید.
مرحله 4: ایجاد عناصر UI طراحی وب سایت مقیاس پذیر و قابل پی
برای اطمینان از اینکه عناصر شما پاسخگو و مقیاس مناسب هستند، در تب Properties هر ویجتی که روی بوم خود قرار داده اید، اطمینان حاصل کنید که عرض بر حسب درصد است و نه پیکسل.
دلیل این امر این است که وقتی طراحی وب سایت را در دستگاه دیگری مشاهده می کنید یا به سادگی اندازه مرورگر خود را تغییر می دهید، محتوا و عناصر رابط کاربری موقعیت خود را نسبت به اندازه دستگاه حفظ می کنند.
برای جلوگیری از جابجایی عناصر رابط کاربری در سراسر صفحه با عمر خود، می توانید از ویژگی عنصر قابل پین استفاده کنید. با قرار دادن محتوای خود در عناصر پین شده، آنها در همان جایی که می خواهید باقی می مانند.
مطمئن شوید که نمونه اولیه خود را در حین حرکت شبیه سازی کرده اید. این اطمینان حاصل می کند که همه نسبت ها و عناصر UI طراحی وب سایت در جایی هستند که باید باشند.
جرمی ژیرارد مقاله ای عالی در مورد چگونگی کارکرد درصدها برای محاسبه عرض در یک طراحی وب سایت واکنش گرا نوشته است، بنابراین از آنجا می توانید طراحی وب سایت خود را مطابق با نیازهای خود تنظیم کنید.
این تنها کاری است که برای ایجاد یک طراحی وب سایت واکنش گرا در کمتر از 10 دقیقه باید انجام دهید. اگر می خواهید چندین صفحه با صفحات بیشتر بسازید، به زمان بیشتری نیاز دارید، اما برای ایجاد یک طراحی وب سایت واکنش گرا، تنها چیزی که نیاز دارید 10 دقیقه با Justinmind است.
نتیجه
ایجاد طراحی وب سایت واکنش گرا نباید یک امر پیچیده باشد. با چند عنصر کشیدن و رها کردن رابط کاربری و مقداری جادوی نسبت، می‌توانید در کمترین زمان وب‌سایت واکنش گرای خود را داشته باشید.