طراحی سایت کارآمد و پولساز

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

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

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

تاریخچه

1988-2001
اگرچه طراحی وب تاریخ نسبتاً جدیدی دارد، اما می‌توان آن را به حوزه‌های دیگری مانند طراحی گرافیک، تجربه کاربر و هنرهای چندرسانه‌ای مرتبط کرد، اما از دیدگاه تکنولوژیکی به‌درستی دیده می‌شود. به بخش بزرگی از زندگی روزمره مردم تبدیل شده است. تصور اینترنت بدون گرافیک متحرک، سبک‌های مختلف تایپوگرافی، پس‌زمینه، ویدیوها و موسیقی سخت است. وب در 6 آگوست 1991 اعلام شد. در نوامبر 1992، سرن اولین وب سایتی بود که در شبکه جهانی وب به صورت زنده راه اندازی شد. در این دوره، وب سایت ها با استفاده از تگ <table> که اعدادی را در وب سایت ایجاد می کرد، ساختار یافته بودند. در نهایت، طراحان وب توانستند راه خود را برای ایجاد ساختارها و قالب های بیشتر پیدا کنند. در تاریخ اولیه، ساختار وب سایت ها شکننده بود و به سختی قابل کنترل بود، بنابراین استفاده از آنها بسیار دشوار شد. در نوامبر 1993، ALIWEB اولین موتور جستجویی بود که ایجاد شد (Archie Like Indexing for the WEB).

شروع طراحی وب و وب

در سال 1989، تیم برنرز لی در حالی که در سرن کار می کرد، پیشنهاد ایجاد یک پروژه فرامتن جهانی را داد که بعدها به عنوان وب جهانی شناخته شد. از سال 1991 تا 1993 شبکه جهانی وب متولد شد. صفحات HTML فقط متنی را می توان با استفاده از یک مرورگر وب ساده در حالت خط مشاهده کرد.در سال 1993 مارک اندرسن و اریک بینا مرورگر موزاییک را ایجاد کردند. در آن زمان مرورگرهای متعددی وجود داشت، با این حال اکثر آنها مبتنی بر یونیکس و طبیعتاً متنی سنگین بودند. هیچ رویکرد یکپارچه ای برای عناصر طراحی گرافیکی مانند تصاویر یا صداها وجود نداشت. مرورگر موزاییک این قالب را شکست.

W3C در اکتبر 1994 ایجاد شد تا “با توسعه پروتکل های مشترکی که تکامل آن را ارتقا می دهد و قابلیت همکاری آن را تضمین می کند، وب جهانی را به پتانسیل کامل خود هدایت کند.” می توانست اثر شبکه جهانی وب را به عنوان یک کل تغییر دهد. W3C به تعیین استانداردها ادامه می دهد، که امروزه با جاوا اسکریپت و سایر زبان ها قابل مشاهده است. در سال 1994 آندرسن شرکت ارتباطات موزائیک را تشکیل داد که بعدها به عنوان نت اسکیپ ارتباطات، مرورگر نت اسکیپ 0.9 شناخته شد. نت اسکیپ تگ های HTML خود را بدون توجه به فرآیند استانداردهای سنتی ایجاد کرد.

به عنوان مثال، Netscape 1.1 دارای برچسب هایی برای تغییر رنگ پس زمینه و قالب بندی متن با جداول در صفحات وب بود. از سال 1996 تا 1999 جنگ مرورگرها آغاز شد، زیرا مایکروسافت و نت اسکیپ برای تسلط نهایی بر مرورگر با هم مبارزه کردند. در طول این مدت، بسیاری از فناوری‌های جدید در این زمینه وجود داشت، به‌ویژه Cascading Style Sheets، جاوا اسکریپت و Dynamic HTML. در کل، رقابت مرورگرها منجر به خلاقیت های مثبت بسیاری شد و به تکامل طراحی وب با سرعتی سریع کمک کرد.

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

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

در این زمان، از آنجایی که به نظر می رسید طراحی و زیبایی شناسی خوب بر ساختار نشانه گذاری خوب اولویت دارد، توجه کمی به معناشناسی و دسترسی به وب می شد. سایت‌های HTML در گزینه‌های طراحی خود محدود بودند، حتی با نسخه‌های قبلی HTML. برای ایجاد طرح‌های پیچیده، بسیاری از طراحان وب مجبور بودند از ساختارهای جدول پیچیده استفاده کنند یا حتی از تصاویر GIF خالی استفاده کنند تا سلول‌های خالی جدول را متوقف کنند. CSS در دسامبر 1996 توسط W3C برای پشتیبانی از ارائه و طرح‌بندی معرفی شد. این به کد HTML اجازه می‌دهد تا معنایی داشته باشد نه معنایی و نمایشی و دسترسی به وب را بهبود بخشد، طراحی وب بدون جدول را ببینید.

در سال 1996، فلش (که در ابتدا با نام FutureSplash شناخته می شد) توسعه یافت. در آن زمان، ابزار توسعه محتوای فلش در مقایسه با الان، نسبتاً ساده بود، با استفاده از طرح‌بندی و ابزارهای ترسیمی، پیش‌روی محدودی برای ActionScript و یک جدول زمانی، اما به طراحان وب اجازه می‌داد تا فراتر از HTML، GIF‌های متحرک و جاوا اسکریپت بروند. . با این حال، از آنجایی که Flash به یک افزونه نیاز داشت، بسیاری از توسعه دهندگان وب از ترس محدود کردن سهم بازار خود به دلیل عدم سازگاری، از استفاده از آن اجتناب کردند. در عوض، طراحان به انیمیشن‌های GIF (اگر به‌کلی استفاده از موشن گرافیک را کنار نمی‌گذاشتند) و جاوا اسکریپت برای ویجت‌ها بازگشتند. اما مزایای فلش آن را به اندازه کافی در میان بازارهای هدف خاص محبوب کرد تا در نهایت راه خود را به اکثریت قریب به اتفاق مرورگرها برساند و به اندازه کافی قدرتمند باشد که برای توسعه کل سایت ها مورد استفاده قرار گیرد.

جنگ مرورگرها § جنگ مرورگر اول (1995–2001)

در سال 1998، Netscape کد Netscape Communicator را تحت یک مجوز منبع باز منتشر کرد و هزاران توسعه دهنده را قادر ساخت تا در بهبود نرم افزار مشارکت کنند. با این حال، این توسعه دهندگان تصمیم گرفتند استانداردی را برای وب از ابتدا شروع کنند، که توسعه مرورگر منبع باز را هدایت کرد و به زودی به یک پلت فرم برنامه کامل گسترش یافت. پروژه استانداردهای وب شکل گرفت و انطباق مرورگر با استانداردهای HTML و CSS را ارتقا داد. برنامه هایی مانند Acid1، Acid2 و Acid3 به منظور آزمایش مرورگرها برای انطباق با استانداردهای وب ایجاد شدند. در سال 2000، اینترنت اکسپلورر برای مک منتشر شد، که اولین مرورگری بود که به طور کامل از HTML 4.01 و CSS 1 پشتیبانی می کرد. همچنین اولین مرورگری بود که به طور کامل از فرمت تصویر PNG پشتیبانی می کرد. در سال 2001، پس از کمپین مایکروسافت برای محبوب کردن اینترنت اکسپلورر، اینترنت اکسپلورر به 96 درصد از سهم استفاده از مرورگر وب رسیده بود، که نشان دهنده پایان جنگ اولین مرورگرها بود زیرا اینترنت اکسپلورر رقابت واقعی نداشت.

2001–2012

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

از زمان پایان جنگ مرورگرها [چه زمانی؟] مرورگرهای جدید منتشر شده اند. بسیاری از آنها منبع باز هستند به این معنی که توسعه سریع تری دارند و از استانداردهای جدید حمایت بیشتری می کنند. گزینه های جدید توسط بسیاری [راسو کلمات] بهتر از اینترنت اکسپلورر مایکروسافت در نظر گرفته می شود.

W3C استانداردهای جدیدی را برای HTML (HTML5) و CSS (CSS3) و همچنین APIهای جاوا اسکریپت جدید منتشر کرده است که هر کدام به عنوان یک استاندارد جدید اما جداگانه هستند.[چه زمانی؟] در حالی که اصطلاح HTML5 فقط برای اشاره به نسخه جدید استفاده می شود HTML و برخی از APIهای جاوا اسکریپت، استفاده از آن برای ارجاع به کل مجموعه استانداردهای جدید (HTML5، CSS3 و جاوا اسکریپت) رایج شده است.

2012 به بعد

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

ابزارها و فناوری ها

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

طراحی UX

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

مهارت ها و تکنیک ها

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

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

طراحی تجربه کاربری و طراحی تعاملی

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

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

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

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

ارتقای پیشرونده

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

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

به عنوان مثال، سایت‌های مبتنی بر مدیاویکی از جمله ویکی‌پدیا از پیشرفت‌های پیشرونده استفاده می‌کنند، زیرا زمانی که جاوا اسکریپت و حتی CSS غیرفعال است، قابل استفاده باقی می‌مانند، زیرا محتوای صفحات در کد منبع HTML صفحه گنجانده شده است، در حالی که Everipedia برای بارگیری صفحات به جاوا اسکریپت متکی است. ‘ محتوا متعاقبا; یک صفحه خالی با غیرفعال شدن جاوا اسکریپت ظاهر می شود.

صفحه آرایی

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

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

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

طراحی وب ریسپانسیو یک رویکرد جدیدتر، مبتنی بر CSS3، و سطح عمیق‌تری از مشخصات هر دستگاه در صفحه سبک صفحه از طریق استفاده پیشرفته از قانون CSS @media است. در مارس 2018، گوگل اعلام کرد که فهرست‌سازی اول موبایل را راه‌اندازی خواهد کرد.سایت‌هایی که از طراحی واکنش‌گرا استفاده می‌کنند، در موقعیت خوبی قرار دارند تا اطمینان حاصل شود که با این رویکرد جدید مطابقت دارند.

 تایپوگرافی

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

دانلود فونت بعداً در ماژول فونت های CSS3 گنجانده شد و از آن زمان در Safari 3.1، Opera 10 و Mozilla Firefox 3.5 پیاده سازی شده است. این متعاقباً علاقه به تایپوگرافی وب و همچنین استفاده از دانلود فونت را افزایش داده است.

اکثر طرح‌بندی‌های سایت، فضای منفی را برای تقسیم کردن متن به پاراگراف‌ها و همچنین اجتناب از متن تراز وسط قرار می‌دهند.

نقاشی متحرک

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

موشن گرافیک هایی که توسط بازدید کننده سایت شروع نشده اند می توانند مشکلات دسترسی ایجاد کنند. استانداردهای دسترسی کنسرسیوم وب جهانی مستلزم آن است که بازدیدکنندگان سایت بتوانند انیمیشن ها را غیرفعال کنند.

کیفیت کد

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

دو راه برای ایجاد وب سایت ها وجود دارد: ایستا یا پویا

وب سایت های استاتیک

یک وب سایت استاتیک یک فایل منحصر به فرد را برای هر صفحه از یک وب سایت استاتیک ذخیره می کند. هر بار که آن صفحه درخواست می شود، همان محتوا برگردانده می شود. این محتوا یک بار در حین طراحی وب سایت ایجاد می شود. معمولاً به صورت دستی نوشته می‌شود، اگرچه برخی از سایت‌ها از فرآیند ایجاد خودکار استفاده می‌کنند، شبیه به یک وب‌سایت پویا، که نتایج آن برای مدت طولانی به‌عنوان صفحات تکمیل‌شده ذخیره می‌شوند. این سایت‌های استاتیک به‌طور خودکار در سال 2015 با مولدهایی مانند Jekyll و Adobe Muse محبوبیت بیشتری پیدا کردند.

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

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

وب سایت های پویا

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

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

هنگامی که صفحات وب پویا برای اولین بار توسعه یافتند، معمولاً مستقیماً به زبان هایی مانند Perl، PHP یا ASP کدگذاری می شدند. برخی از اینها، به‌ویژه PHP و ASP، از رویکرد «الگو» استفاده کردند که در آن صفحه سمت سرور شبیه ساختار صفحه تکمیل‌شده سمت کلاینت بود و داده‌ها در مکان‌هایی که با «برچسب‌ها» تعریف شده‌اند درج می‌شدند. این یک ابزار توسعه سریعتر از کدنویسی در یک زبان برنامه نویسی صرفا رویه ای مانند Perl بود.

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

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

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

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

فلسفه 1:

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

فلسفه 2:

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

فلسفه 3:

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

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

طراحی صفحه اصلی

کارشناسان قابلیت استفاده، از جمله Jakob Nielsen و Kyle Soucy، اغلب بر طراحی صفحه اصلی برای موفقیت وب سایت تأکید کرده اند و اظهار داشته اند که صفحه اصلی مهمترین صفحه در یک وب سایت است.[21]Nielsen, Jakob; طاهر، ماری (اکتبر 2001)، قابلیت استفاده از صفحه اصلی: 50 وب سایت تخریب شده، انتشارات New Riders، ISBN 978-0-7357-1102-0[22][23] با این حال، پزشکان در دهه 2000 شروع به یافتن تعداد فزاینده ای از وب سایت کردند. ترافیک صفحه اصلی را دور می زد و مستقیماً از طریق موتورهای جستجو، خبرنامه های الکترونیکی و فیدهای RSS به صفحات محتوای داخلی می رفت.بسیاری از تمرین‌کنندگان را به این استدلال سوق می‌دهد که صفحات اصلی از آن چیزی که بیشتر مردم فکر می‌کنند اهمیت کمتری دارند. جارد اسپول در سال 2007 استدلال کرد که صفحه اصلی یک سایت در واقع کم اهمیت ترین صفحه در یک وب سایت است.

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

مشاغل

دو شغل اصلی در ایجاد یک وب سایت وجود دارد: طراح وب و توسعه دهنده وب، که اغلب در یک وب سایت از نزدیک با هم کار می کنند.طراحان وب مسئول جنبه بصری هستند که شامل چیدمان، رنگ آمیزی و تایپوگرافی یک صفحه وب است. طراحان وب همچنین دانش کاری در مورد زبان های نشانه گذاری مانند HTML و CSS خواهند داشت، اگرچه میزان دانش آنها از یک طراح وب به دیگری متفاوت خواهد بود. به ویژه در سازمان های کوچکتر، یک نفر به مهارت های لازم برای طراحی و برنامه نویسی صفحه وب کامل نیاز دارد، در حالی که سازمان های بزرگتر ممکن است یک طراح وب داشته باشند که مسئول جنبه بصری آن به تنهایی باشد.

مشاغل دیگری که ممکن است در ایجاد یک وب سایت دخیل باشند عبارتند از:

طراحان گرافیک برای ایجاد تصاویر بصری برای سایت مانند آرم، طرح‌بندی و دکمه‌ها

متخصصان بازاریابی اینترنتی برای کمک به حفظ حضور وب از طریق راه حل های استراتژیک برای هدف قرار دادن بینندگان به سایت، با استفاده از تکنیک های بازاریابی و تبلیغاتی در اینترنت

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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