اخبارو مقالات

یک طراح وب روی ظاهر، چیدمان و در برخی موارد محتوای وب سایت کار می کند.

ظاهر به رنگ ها، تایپوگرافی و تصاویر استفاده شده مربوط می شود.

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

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

طراحی سایت ریسپانسیو چیست؟

طراحی وب ریسپانسیو (با نام مستعار «ریسپانسیو» یا «طراحی واکنش‌گرا») رویکردی برای طراحی محتوای وب است که بدون توجه به وضوح کنترل شده توسط دستگاه ظاهر می‌شود. این معمولاً با نقاط شکست دیدگاه (قطعات رزولوشن برای زمانی که محتوا به آن دیدگاه مقیاس می شود) انجام می شود. درگاه‌های دید باید روی تبلت‌ها، تلفن‌ها و دسکتاپ‌ها با هر رزولوشن منطقی تنظیم شوند.

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

با طراحی واکنشگرا، شما برای انعطاف پذیری در هر جنبه طراحی می کنید - تصاویر، متن و طرح بندی. بنابرین تو باید:

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

شبکه های سیال و تصاویر ایجاد کنید.

استفاده از گرافیک برداری مقیاس پذیر (SVG) را در اولویت قرار دهید. اینها یک فرمت فایل مبتنی بر XML برای گرافیک های دوبعدی هستند که از تعامل و انیمیشن ها پشتیبانی می کنند.

شامل سه یا چند نقطه شکست (طرح بندی برای سه یا چند دستگاه).

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

مینیمالیسم را هدف بگیرید.

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

دسترسی را هدف بگیرید.

طراحی وب تطبیقی چیست؟

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

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

در این ویدیو، مدیر عامل Experience Dynamics، فرانک اسپیلر، مزایای طراحی تطبیقی را از طریق یک سناریوی واقعی توضیح می دهد.

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

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

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

قابلیت دسترسی برای طراحی وب

«قدرت وب در جهانی بودن آن است.

دسترسی همه بدون در نظر گرفتن معلولیت یک جنبه ضروری است.»

- تیم برنرز لی، مدیر W3C و مخترع شبکه جهانی وب

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

در این ویدئو، ویلیام هادسون، مدیر عامل Syntagm، اهمیت دسترسی را مورد بحث قرار می دهد و نکاتی را در مورد نحوه دسترسی بیشتر وب سایت ها ارائه می دهد.

بازی

نمایش دهید

متن تصویری

کنسرسیوم وب جهانی (W3C) چند ملاحظات اساسی را برای دسترسی به وب فهرست می کند:

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

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

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

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

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

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

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

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

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

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

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

درباره طراحی وب سایت بیشتر بدانید

در درس Web Design for Usability با نحوه اعمال اصول طراحی کاربر محور آشنا شوید.

برای اطلاعات بیشتر در مورد طراحی تطبیقی و پاسخگو، دوره آموزشی Mobile UX Design: The Beginner's Guide را بخوانید.

برای راهنمایی های عملی در مورد پیاده سازی قابلیت دسترسی، W3C's Designing for Web Accessibility را ببینید.

سوالات مرتبط با طراحی وب سایت

• چگونه یک صفحه وب طراحی کنیم؟
• درآمد طراحان وب چقدر است؟
• چگونه یک طراح وب شویم؟
• یک طراح وب چه کاری انجام می دهد؟
• آیا طراحی وب سایت کدنویسی است؟
• طراحی وب ریسپانسیو چیست؟
• چگونه طراحی وب سایت را یاد بگیریم؟
• آیا طراحی وب شغل خوبی است؟
• آیا طراحی وب همان فرانت اند است؟
• آیا رابط کاربری با طراحی وب متفاوت است؟
• مدال در طراحی وب چیست؟
• CMS در طراحی وب به چه معناست؟

درباره طراحی وب سایت بیشتر بدانید

با دوره آموزشی طراحی UX موبایل: راهنمای مبتدیان، به طراحی وب عمیق بپردازید.

در پروژه «ساخت نمونه کارها»، مجموعه‌ای از تمرین‌های عملی را خواهید یافت که به شما تجربه دست اولی با روش‌هایی که ما پوشش می‌دهیم، می‌دهد. شما در هر درس از پروژه خود استفاده خواهید کرد، بنابراین پس از اتمام دوره، یک مطالعه موردی کامل برای نمونه کار خود خواهید داشت.

طراحی تجربه کاربر موبایل: مقدمه، بر اساس تحقیق و عمل مبتنی بر شواهد ساخته شده است. این توسط مدیر عامل ExperienceDynamics.com، فرانک اسپیلر، نویسنده، سخنران و کارشناس ارشد قابل استفاده بین المللی تدریس می شود.

درباره طراحی وب سایت بیشتر بدانید

با دوره آموزشی طراحی UX موبایل: راهنمای مبتدیان، به طراحی وب عمیق بپردازید.

در پروژه «ساخت نمونه کارها»، مجموعه‌ای از تمرین‌های عملی را خواهید یافت که به شما تجربه دست اولی با روش‌هایی که ما پوشش می‌دهیم، می‌دهد. شما در هر درس از پروژه خود استفاده خواهید کرد، بنابراین پس از اتمام دوره، یک مطالعه موردی کامل برای نمونه کار خود خواهید داشت.

طراحی تجربه کاربر موبایل: مقدمه، بر اساس تحقیق و عمل مبتنی بر شواهد ساخته شده است. این توسط مدیر عامل ExperienceDynamics.com، فرانک اسپیلر، نویسنده، سخنران و کارشناس ارشد قابل استفاده بین المللی تدریس می شود.