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

طراحی وب به طراحی وب سایت ها اشاره دارد. معمولاً به جنبه‌های تجربه کاربر توسعه وب‌سایت اشاره دارد تا توسعه نرم‌افزار. طراحی وب در گذشته بر طراحی وب سایت برای مرورگرهای دسکتاپ متمرکز بود. با این حال، از اواسط دهه 2010، طراحی برای مرورگرهای موبایل و تبلت اهمیت روزافزونی پیدا کرده است.

بازی کنید

نمایش دهیدمتن تصویری

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

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

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

فهرست مطالب

1. طراحی وب چیست؟
2. طراحی سایت ریسپانسیو چیست؟
3. بهترین روش ها و ملاحظات برای طراحی واکنشگرا
4. طراحی وب تطبیقی ​​چیست؟
5. قابلیت دسترسی برای طراحی وب
6. درباره طراحی وب سایت بیشتر بدانید
7. سوالات مرتبط با طراحی وب سایت

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

© بنیاد طراحی تعامل، CC BY-SA 4.0

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

در طراحی ریسپانسیو، می توانید قوانینی را برای نحوه جریان محتوا و نحوه تغییر طرح بندی بر اساس محدوده اندازه صفحه تعریف کنید.

© بنیاد طراحی تعامل، CC BY-SA 4.0

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

بهترین روش ها و ملاحظات برای طراحی واکنشگرا

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

• رویکرد اول موبایل را انتخاب کنید — به جای دستگاه های دسکتاپ، ابتدا فرآیند طراحی محصول را برای دستگاه های تلفن همراه شروع کنید.
• شبکه های سیال و تصاویر ایجاد کنید .
• استفاده از گرافیک برداری مقیاس پذیر (SVG) را در اولویت قرار دهید. اینها یک فرمت فایل مبتنی بر XML برای گرافیک های دوبعدی هستند که از تعامل و انیمیشن ها پشتیبانی می کنند.
• شامل سه یا چند نقطه شکست (طرح بندی برای سه یا چند دستگاه).
• محتوا را متناسب با زمینه های کاربران اولویت بندی و پنهان کنید . سلسله مراتب بصری خود را بررسی کنید و از کشوهای آشکارسازی و پیمایش پیشرو استفاده کنید تا ابتدا موارد مورد نیاز را به کاربران ارائه دهید. اقلام غیر ضروری (خوب برای داشتن) را در درجه دوم قرار دهید.
• مینیمالیسم را هدف بگیرید .
• الگوهای طراحی را برای به حداکثر رساندن سهولت استفاده برای کاربران در زمینه هایشان و افزایش آشنایی آنها اعمال کنید : به عنوان مثال، الگوی رها کردن ستون محتوا را با انواع صفحه نمایش متناسب می کند.
• دسترسی را هدف بگیرید .

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

© بنیاد طراحی تعامل، CC BY-SA 4.0

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

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

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

بازی کنید

نمایش دهیدمتن تصویری

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

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

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

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

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

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

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

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

بازی کنید

نمایش دهیدمتن تصویری

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

1. کنتراست کافی بین پیش زمینه و پس زمینه ایجاد کنید . برای مثال، خواندن متن سیاه یا خاکستری تیره روی سفید راحت‌تر از متن خاکستری روی سایه روشن‌تر خاکستری است. از چک کننده های کنتراست رنگ برای آزمایش نسبت کنتراست بین رنگ های متن و پس زمینه استفاده کنید تا مطمئن شوید که مردم می توانند محتوای شما را به راحتی ببینند.
2. از رنگ به تنهایی برای انتقال اطلاعات استفاده نکنید . به عنوان مثال، برای متن هایپرپیوند شده علاوه بر رنگ، از زیر خط ها استفاده کنید تا افراد مبتلا به کوررنگی همچنان بتوانند پیوندی را تشخیص دهند، حتی اگر نتوانند بین متن هایپرلینک و متن معمولی تفاوت قائل شوند.
3. اطمینان حاصل کنید که عناصر تعاملی به راحتی قابل شناسایی هستند . به عنوان مثال، هنگامی که کاربر روی پیوندها قرار می گیرد یا با استفاده از صفحه کلید فوکوس می کند، سبک های مختلف را برای پیوندها نشان دهید.
4. گزینه های ناوبری واضح و ثابت را ارائه دهید . برای جلوگیری از سردرگمی، از طرح‌بندی‌ها و قراردادهای نام‌گذاری ثابت برای آیتم‌های منو استفاده کنید. برای مثال، اگر از پودر سوخاری استفاده می‌کنید ، مطمئن شوید که در صفحات مختلف وب به طور مداوم در یک موقعیت قرار دارند.
5. اطمینان حاصل کنید که عناصر فرم دارای برچسب های واضح مرتبط هستند . به عنوان مثال، برای کاهش خطا، برچسب‌های فرم را در سمت چپ یک فیلد فرم (برای زبان‌های چپ به راست) به جای بالا یا داخل فیلد ورودی قرار دهید .
6. بازخورد به راحتی قابل شناسایی ارائه دهید . اگر بازخورد (مانند پیام‌های خطا) با حروف ظریف یا رنگ خاصی باشد، استفاده از وب‌سایت برای افرادی که بینایی کمتری دارند یا کوررنگی دارند سخت‌تر خواهد بود. مطمئن شوید که چنین بازخوردی واضح است و به راحتی قابل شناسایی است. به عنوان مثال، می توانید گزینه هایی را برای پیمایش به خطاهای مختلف ارائه دهید.
7. از سرفصل ها و فاصله برای گروه بندی مطالب مرتبط استفاده کنید. سلسله مراتب بصری خوب (از طریق تایپوگرافی، فضای خالی و طرح بندی شبکه ای ) اسکن محتوا را آسان می کند.
8. طرح هایی را برای اندازه های مختلف ویوپورت ایجاد کنید . اطمینان حاصل کنید که محتوای شما در مقیاس بزرگتر (به دستگاه های بزرگتر) و پایین (برای قرار گرفتن در صفحه نمایش های کوچکتر) است. وب سایت های ریسپانسیو طراحی کنید و آنها را به طور کامل تست کنید. 
9. جایگزین های تصویر و رسانه را در طراحی خود بگنجانید . رونوشت هایی برای محتوای صوتی و تصویری و متن جایگزین برای تصاویر ارائه دهید. اطمینان حاصل کنید که متن جایگزین روی تصاویر معنی را منتقل می کند و به سادگی تصویر را توصیف نمی کند. اگر از PDF استفاده می کنید، مطمئن شوید که آنها نیز در دسترس هستند.
10. کنترل هایی را برای محتوایی که به طور خودکار شروع می شود ارائه کنید . به کاربران اجازه دهید انیمیشن ها یا محتوای ویدیویی را که به طور خودکار پخش می شوند متوقف کنند.

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

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

نحوه به کارگیری اصول طراحی کاربر محور را در دوره طراحی وب برای کاربردپذیری بیاموزید . 

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

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

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

چگونه یک صفحه وب طراحی کنیم؟

درآمد طراحان وب چقدر است؟

چگونه یک طراح وب شویم؟

یک طراح وب چه کاری انجام می دهد؟

آیا طراحی وب سایت کدنویسی است؟

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

چگونه طراحی وب سایت را یاد بگیریم؟

آیا طراحی وب شغل خوبی است؟

آیا طراحی وب همان فرانت اند است؟

آیا رابط کاربری با طراحی وب متفاوت است؟

مدال در طراحی وب چیست؟

CMS در طراحی وب به چه معناست؟

دسترسی: چگونه برای همه طراحی کنیم

دسترسی: چگونه برای همه طراحی کنیم

بسته می شود

8

days

رزرو شده است

مشاهده دوره

بینش طراحی هفتگی را دریافت کنید

به 313854 طراح بپیوندید که نکات مفید طراحی UX / UI را از خبرنامه ما دریافت می کنند.

برو

برای کسب هدیه به یک آزمون کوتاه پاسخ دهید

سوال 1

مسئولیت اصلی یک طراح وب چیست؟

1 امتیاز نسبت به هدیه شما

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

پاسخ من را ارسال کنید

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

در اینجا کل ادبیات UX در زمینه طراحی وب توسط بنیاد طراحی تعامل، که در یک مکان گردآوری شده است:

مقاله برگزیده

چگونه حرفه خود را از طراحی وب به طراحی UX تغییر دهید

تغییر شغل آنقدرها هم که اغلب تصور می شود سخت نیست، به خصوص اگر منابع مناسبی برای کمک به ایجاد تغییر در اختیار داشته باشید. برای بسیاری از طراحان وب، اکنون زمان مناسبی برای تغییر در طراحی UX است . برای شروع، افزایش پولی است که با تغییر در شغل همراه است. با توجه به PayScale، طراحان وب در ایالات متحده به طور متوسط ​​سالانه 46000 دلار درآمد دارند (1) در حالی که طراحان UX از طرف دیگر درآمد قابل توجهی 74000 دلار دارند (2). ثانیاً، فرصت های شغلی برای طراحان UX در حال رونق است: سی ان ان گزارش می دهد که در مجموع 3،426،000 شغل طراحی UX تنها در ایالات متحده ظرف 10 سال آینده ایجاد خواهد شد (3). علاوه بر این، طراحی UX یک کار معنادار است، نه تنها به این دلیل که می‌توانید روی یک محصول از درون کار کنید، بلکه به این دلیل که – همانطور که DMI نشان داده است – طراحی UX تأثیر قابل‌توجهی بر کسب‌وکارها می‌گذارد، با کسب‌وکارهای مبتنی بر طراحی UX که عملکرد بهتری دارند. شاخص S&P با 228٪ (4). بنابراین، منابع مناسب برای کمک به تغییر شغل خود را از کجا پیدا می کنید؟ چرا، شما همین الان دارید یکی را می خوانید.

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

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

اگر می خواهید این تغییر کند ، به این صفحه استناد کنید، به ما پیوند دهید یا به ما بپیوندید تا به ما در دموکراتیزه کردن دانش طراحی کمک کنید !

پیمایش پاورقی

با 184382 فارغ التحصیل، بنیاد طراحی تعامل بزرگترین مدرسه طراحی آنلاین در سطح جهان است. ما در سال 2002 تاسیس شدیم.

هفته نامه الهام بگیرید

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

ایمیل

مشترک شوید

موضوعات طراحی UX / UI را مرور کنید

باز کنید

تنظیمات حریم خصوصی

با استفاده از این سایت، خط مشی کوکی و شرایط استفاده ما را می پذیرید .

سفارشی کنید

همه رو قبول کن

تنظیمات را ذخیره کنید