طراحی وب شامل بسیاری از مهارت ها و رشته های مختلف در تولید و نگهداری وب سایت ها می باشد. حوزه های مختلف طراحی وب شامل طراحی گرافیک وب می باشد. طراحی رابط کاربری (طراحی UI); نوشتن، از جمله کد استاندارد و نرم افزار اختصاصی؛ طراحی تجربه کاربری (طراحی UX)؛ و بهینه سازی موتورهای جستجو اغلب افراد زیادی در تیم هایی کار می کنند که جنبه های مختلف فرآیند طراحی را پوشش می دهند، اگرچه برخی از طراحان همه آنها را پوشش می دهند.
اصطلاح “طراحی وب” معمولاً برای توصیف فرآیند طراحی مربوط به طراحی جلویی-فرانت اند (سمت مشتری) یک وب سایت از جمله نوشتن نشانه گذاری استفاده می شود. طراحی وب تا حدی با مهندسی وب در حوزه گسترده تر توسعه وب همپوشانی دارد. از طراحان وب انتظار می رود که از قابلیت استفاده آگاهی داشته باشند و با دستورالعمل های دسترسی به وب به روز باشند.
تاریخچه
1988-2001
اگرچه طراحی وب تاریخ نسبتاً جدیدی دارد، اما میتوان آن را به حوزههای دیگری مانند طراحی گرافیک، تجربه کاربری و هنرهای چندرسانهای مرتبط کرد، اما از دیدگاه تکنولوژیکی بهدرستی بیشتر دیده میشود. به بخش بزرگی از زندگی روزمره مردم تبدیل شده است. تصور اینترنت بدون گرافیک متحرک، سبکهای مختلف تایپوگرافی، پسزمینه، ویدیوها و موسیقی سخت است. در نوامبر ۱۹۹۲، Cern اولین وب سایتی بود که راه اندازی شد. وب در ۶ آگوست ۱۹۹۱ معرفی شد و سرن اولین وب سایتی بود که در شبکه جهانی وب فعال شد. در این دوره، وب سایت ها با استفاده از تگ <table> که اعدادی را در وب سایت ایجاد می کرد، ساختار یافته بودند. در نهایت، طراحان وب توانستند راه خود را برای ایجاد ساختارها و قالب های بیشتر پیدا کنند. در تاریخ اولیه، ساختار وب سایت ها شکننده بود و به سختی قابل کنترل بود، بنابراین استفاده از آنها بسیار دشوار شد. در نوامبر ۱۹۹۳ ALIWEB اولین موتور جستجویی بود که ایجاد شد ( Archie Like Indexing for the WEB)
شروع وب و طراحی وب
در سال ۱۹۸۹، تیم برنرز- لی در حالی که در سرن کار می کرد، پیشنهاد ایجاد یک پروژه فرامتن جهانی را داد که بعدها به عنوان وب جهانی شناخته شد. از سال ۱۹۹۱ تا ۱۹۹۳ شبکه جهانی وب متولد شد. صفحات HTML فقط متنی را می توان با استفاده از یک مرورگر وب ساده خطی- مد مشاهده کرد. در سال ۱۹۹۳ مارک اندرسن و اریک بینا مرورگر موزاییک را ایجاد کردند. در آن زمان مرورگرهای متعددی وجود داشت، با این حال اکثر آنها مبتنی بر یونیکس و طبیعتاً متنی سنگین بودند. هیچ رویکرد یکپارچه ای برای عناصر طراحی گرافیکی مانند تصاویر یا صداها وجود نداشت. مرورگر موزاییک این قالب را شکست. W3C در اکتبر ۱۹۹۴ ایجاد شد تا «با توسعه پروتکلهای مشترکی که تکامل آن را ارتقا میبخشد و قابلیت همکاری آن را تضمین میکند، وب جهانی را به پتانسیل کامل خود هدایت کند.» این امر هر شرکتی را از انحصار یک مرورگر و زبان برنامهنویسی مناسب منصرف کرد. می توانست اثر شبکه جهانی وب را به عنوان یک کل تغییر دهد. W3C به تعیین استانداردها ادامه می دهد، که امروزه با جاوا اسکریپت و سایر زبان ها قابل مشاهده است. در سال ۱۹۹۴ آندرسن شرکت ارتباطات موزائیک را تشکیل داد که بعدها به عنوان ارتباطات نت اسکیپ ، مرورگر نت اسکیپ ۰.۹ شناخته شد. نت اسکیپ تگ های HTML خود را بدون توجه به فرآیند استانداردهای سنتی ایجاد کرد. به عنوان مثال، Netscape ۱.۱ دارای برچسب هایی برای تغییر رنگ پس زمینه و قالب بندی متن با جداول در صفحات وب بود. از سال ۱۹۹۶ تا ۱۹۹۹ جنگ مرورگرها آغاز شد، زیرا مایکروسافت و نت اسکیپ برای تسلط نهایی بر مرورگر با هم مبارزه کردند. در طول این مدت، بسیاری از فناوریهای جدید در این زمینه وجود داشت، بهویژه (CSS) Cascading Style Sheets، جاوا اسکریپت و Dynamic HTML. در کل، رقابت مرورگرها منجر به خلاقیت های مثبت بسیاری شد و به تکامل طراحی وب با سرعتی سریع کمک کرد.
تکامل طراحی وب
در سال ۱۹۹۶، مایکروسافت اولین مرورگر رقابتی خود را منتشر کرد که با ویژگی ها و تگ های HTML خود کامل بود. همچنین اولین مرورگری بود که از شیوه نامه ها پشتیبانی می کرد، که در آن زمان به عنوان یک تکنیک تالیف مبهم دیده می شد و امروزه یکی از جنبه های مهم طراحی وب است. نشانه گذاری HTML برای جداول در ابتدا برای نمایش داده های جدولی در نظر گرفته شده بود. با این حال، طراحان به سرعت متوجه پتانسیل استفاده از جداول HTML برای ایجاد طرحبندیهای پیچیده و چند ستونی شدند که در غیر این صورت ممکن نبود. در این زمان، از آنجایی که به نظر می رسید طراحی و زیبایی شناسی خوب بر ساختار نشانه گذاری خوب اولویت دارد، توجه کمی به معناشناسی و دسترسی به وب می شد. سایتهای HTML در گزینههای طراحی خود محدود بودند، حتی با نسخههای قبلی HTML. برای ایجاد طرحهای پیچیده، بسیاری از طراحان وب مجبور بودند از ساختارهای جدول پیچیده استفاده کنند یا حتی از تصاویر GIF خالی استفاده کنند تا سلولهای خالی جدول را متوقف کنند. CSS در دسامبر ۱۹۹۶ توسط W3C برای پشتیبانی از ارائه و طرحبندی معرفی شد. این به کد HTML اجازه میدهد تا معنایی باشد بجای اینکه هم معنایی و هم نمایشی، ولذا دسترسی به وب را بهبود بخشد.
در سال ۱۹۹۶، فلش (که در ابتدا با نام FutureSplash شناخته می شد) توسعه یافت. در آن زمان، ابزار توسعه محتوای فلش در مقایسه با الان، نسبتاً ساده بود، با استفاده از طرحبندی و ابزارهای ترسیمی، پیشروی محدودی برای ActionScript و یک جدول زمانی، اما به طراحان وب اجازه میداد تا فراتر از HTML، GIFهای متحرک و جاوا اسکریپت بروند. با این حال، از آنجایی که Flash به یک افزونه نیاز داشت، بسیاری از توسعه دهندگان وب از ترس محدود کردن سهم بازار خود به دلیل عدم سازگاری، از استفاده از آن اجتناب کردند. در عوض، طراحان به انیمیشنهای گیف (اگر بهکلی استفاده از موشن گرافیک را کنار نمیگذاشتند) و جاوا اسکریپت برای ویجتها بازگشتند. اما مزایای فلش آن را به اندازه کافی در میان بازارهای هدف خاص محبوب کرد تا در نهایت راه خود را به اکثریت قریب به اتفاق مرورگرها برساند و به اندازه کافی قدرتمند باشد که برای توسعه کل سایت ها مورد استفاده قرار گیرد.
پایان اولین جنگ مرورگرها
در سال ۱۹۹۸، Netscape کد Netscape Communicator را تحت یک مجوز منبع باز منتشر کرد و هزاران توسعه دهنده را قادر ساخت تا در بهبود نرم افزار مشارکت کنند. با این حال، این توسعه دهندگان تصمیم گرفتند استانداردی را برای وب از ابتدا شروع کنند، که توسعه مرورگر منبع باز را هدایت کرد و به زودی به یک پلت فرم برنامه کامل گسترش یافت. پروژه استانداردهای وب شکل گرفت و انطباق مرورگر با استانداردهای HTML و CSS را ارتقا داد. برنامه هایی مانند Acid1، Acid2 و Acid3 به منظور آزمایش مرورگرها برای انطباق با استانداردهای وب ایجاد شدند.
در سال ۲۰۰۰، اینترنت اکسپلورر برای مک منتشر شد، که اولین مرورگری بود که به طور کامل از HTML ۴.۰۱ و CSS ۱ پشتیبانی می کرد. همچنین اولین مرورگری بود که به طور کامل از فرمت تصویر PNG پشتیبانی می کرد. در سال ۲۰۰۱، پس از کمپین مایکروسافت برای محبوب کردن اینترنت اکسپلورر، اینترنت اکسپلورر به ۹۶ درصد از سهم استفاده از مرورگر وب رسیده بود، که نشان دهنده پایان جنگ اولین مرورگرها بود زیرا اینترنت اکسپلورر رقابت واقعی نداشت.
2001–2012
از آغاز قرن بیست و یکم، وب روز به روز بیشتر و بیشتر در زندگی مردم ادغام شده است. همانطور که این اتفاق افتاده است، فناوری وب نیز پیشرفت کرده است. همچنین تغییرات قابل توجهی در نحوه استفاده و دسترسی افراد به وب ایجاد شده است و این موضوع نحوه طراحی سایت ها را تغییر داده است.
از زمان پایان جنگ مرورگرها، مرورگرهای جدید منتشر شده اند. بسیاری از آنها منبع باز هستند به این معنی که توسعه سریع تری دارند و از استانداردهای جدید حمایت بیشتری می کنند. گزینههای جدید توسط افراد بیشتری در نظر گرفته شده اند زیرا آنها را بهتر از Internet Explorer مایکروسافت میدانند.
W3C استانداردهای جدیدی را برای HTML (HTML5) و(CSS3) CSS و همچنین APIهای جدید جاوا اسکریپت منتشر کرده است که هر کدام به عنوان یک استاندارد جدید اما جداگانه هستند. در حالی که اصطلاح HTML5 فقط برای اشاره به نسخه جدید HTML و برخی از APIهای جاوا اسکریپت استفاده می شود، استفاده از آن برای ارجاع به کل مجموعه استانداردهای جدید (HTML5، CSS3 و جاوا اسکریپت) رایج شده است.
۲۰۱۲ به بعد
با بهبود پوشش اینترنت 3G و LTE، بخش بزرگی از ترافیک وب سایت توسط تلفن همراه تولید شد. این صنعت طراحی وب را تحت تاثیر قرار داد و آن را به سمت سبکی مینیمال، سبک و ساده سوق داد. به طور خاص، رویکرد «ابتدا موبایل» پدیدار شد، که مستلزم ایجاد طراحی وبسایت با طرحبندی ابتدا موبایلگرا و سپس تطبیق آن با ابعاد صفحهنمایش بالاتر است.
ابزارها و فناوری ها
طراحان وب بسته به بخشی از فرآیند تولید که درگیر آن هستند، از ابزارهای مختلفی استفاده می کنند. این ابزارها در طول زمان توسط استانداردها و نرم افزارهای جدیدتر به روز می شوند، اما اصول پشت آنها ثابت می ماند. طراحان وب از ویرایشگرهای گرافیکی بردار و شطرنجی برای ایجاد تصاویر با قالب وب یا نمونه های اولیه طراحی استفاده می کنند. یک وبسایت را میتوان با استفاده از نرمافزار سازنده وبسایت WYSIWYG یا سیستم مدیریت محتوا ایجاد کرد، یا میتوان صفحات وب منفرد را دقیقاً به همان روشی که اولین صفحات وب ایجاد شد، به صورت دستی کدگذاری کرد. ابزارهای دیگری که طراحان وب ممکن است از آنها استفاده کنند عبارتند از اعتبار سنجی نشانه گذاری و سایر ابزارهای آزمایشی برای قابلیت استفاده و دسترسی برای اطمینان از اینکه وب سایت آنها دستورالعمل های دسترسی به وب را رعایت می کند.
طراحی UX
یکی از ابزارهای محبوب در طراحی وب، طراحی UX است، این یک نوع هنر است که محصولات را برای اجرای یک پسزمینه دقیق کاربر طراحی میکند. طراحی UX بسیار عمیق است. UX فراتر از وب است، بسیار مستقل است و اصول آن را می توان در بسیاری از مرورگرها یا برنامه های دیگر اعمال کرد. طراحی وب بیشتر بر اساس چیزهای مبتنی بر وب است. UX می تواند همپوشانی طراحی و طراحی وب داشته باشد. طراحی UX بیشتر بر محصولاتی متمرکز است که کمتر مبتنی بر وب هستند.
مهارت ها و تکنیک ها
طراحی بازاریابی و ارتباطات
طراحی بازاریابی و ارتباطات در یک وب سایت ممکن است مشخص کند که چه چیزی برای بازار هدف آن کار می کند. این می تواند یک گروه سنی یا رشته خاصی از فرهنگ باشد. بنابراین طراح ممکن است روندهای مخاطبان خود را درک کند. طراحان همچنین ممکن است نوع وبسایتی را که طراحی میکنند، بدانند، به این معنا که، برای مثال، ملاحظات طراحی وبسایت تجاری (B2B) ممکن است با وبسایتهای هدفدار مصرفکننده مانند وبسایتهای خردهفروشی یا سرگرمی تفاوت زیادی داشته باشد. ممکن است بررسی دقیقی انجام شود تا اطمینان حاصل شود که زیبایی شناسی یا طراحی کلی یک سایت با وضوح و دقت محتوا یا سهولت ناوبری وب، به ویژه در یک وب سایت B2B در تضاد نیست. طراحان همچنین ممکن است شهرت مالک یا کسبوکاری را که سایت نشان میدهد در نظر بگیرند تا مطمئن شوند که به خوبی به تصویر کشیده میشوند. طراحان وب معمولاً بر تمام وب سایت هایی که در مورد نحوه کار یا عملکرد آنها ساخته شده اند نظارت می کنند. آنها دائماً همه چیز را در وب سایت های پشت صحنه به روز می کنند و تغییر می دهند. تمام عناصری که آنها انجام می دهند متن، عکس، گرافیک و طرح بندی وب است. قبل از شروع کار بر روی یک وب سایت، طراحان وب معمولاً یک قرار ملاقات با مشتریان خود برای بحث در مورد طرح، رنگ، گرافیک و طراحی می گذارند. طراحان وب اکثر وقت خود را صرف طراحی وب سایت و کسب اطمینان از سرعت مناسب می کنند. طراحان وب معمولاً درگیر آزمایش و کار، بازاریابی، و ارتباط با دیگر طراحان در مورد چیدمان وب سایت ها و یافتن عناصر مناسب برای وب سایت ها هستند.
طراحی تجربه کاربری و طراحی تعاملی
درک کاربر از محتوای یک وب سایت اغلب به درک کاربر از نحوه عملکرد وب سایت بستگی دارد. این بخشی از طراحی تجربه کاربری است. تجربه کاربری به چیدمان، دستورالعمل های واضح و برچسب گذاری در یک وب سایت مربوط می شود. اینکه کاربر چگونه میتواند در یک سایت تعامل داشته باشد، به خوبی به طراحی تعاملی سایت بستگی دارد. اگر کاربر مفید بودن وب سایت را درک کند، به احتمال زیاد به استفاده از آن ادامه خواهد داد.
کاربرانی که در استفاده از وبسایت ماهر و مسلط هستند، ممکن است یک رابط وبسایت متمایزتر، در عین حال کمتر بصری یا کمتر کاربرپسند را مفید بدانند. با این حال، کاربران با تجربه کمتر احتمال کمتری دارند که مزایا یا سودمندی یک رابط وب سایت کمتر بصری را ببینند. این امر باعث میشود که تجربه کاربر جهانیتر و دسترسی آسانتر برای پذیرش هرچه بیشتر کاربران بدون توجه به مهارت کاربر باشد. بیشتر طراحی تجربه کاربری و طراحی تعاملی در طراحی رابط کاربری در نظر گرفته شده است.
اگر مهارت های زبان برنامه نویسی پیشرفته نباشد، توابع تعاملی پیشرفته ممکن است به افزونه نیاز داشته باشند. انتخاب اینکه آیا از تعاملی که نیاز به افزونه دارد یا نه استفاده کنید، یک تصمیم مهم در طراحی تجربه کاربر است. اگر افزونه در اکثر مرورگرها از پیش نصب نشده باشد، این خطر وجود دارد که کاربر نه دانش فنی و نه حوصله نصب یک افزونه را فقط برای دسترسی به محتوا داشته باشد. اگر این تابع به مهارتهای زبان برنامهنویسی پیشرفته نیاز دارد، ممکن است در مقایسه با میزان پیشرفتی که عملکرد به تجربه کاربر اضافه میکند، کدنویسی از نظر زمان یا هزینه بسیار پرهزینه باشد. همچنین این خطر وجود دارد که تعامل پیشرفته با مرورگرهای قدیمی یا پیکربندی های سخت افزاری ناسازگار باشد. انتشار عملکردی که به طور قابل اعتماد کار نمی کند به طور بالقوه برای تجربه کاربر بدتر از عدم تلاش است. این به مخاطبان هدف بستگی دارد که آیا به احتمال زیاد مورد نیاز است یا ارزش ریسک دارد.
افزایش پیشرونده
افزایش پیشرونده یک استراتژی در طراحی وب است که در ابتدا بر محتوای وب تأکید می کند و به همه اجازه می دهد تا به محتوا و عملکرد اصلی یک صفحه وب دسترسی داشته باشند، در حالی که کاربران با ویژگی های اضافی مرورگر یا دسترسی سریع تر به اینترنت به جای آن نسخه پیشرفته را دریافت می کنند.
در عمل، این به معنای ارائه محتوا از طریق HTML و استفاده از استایل و انیمیشن از طریق CSS تا حد ممکن از نظر فنی است، سپس اعمال پیشرفتهای بیشتر از طریق جاوا اسکریپت. متن صفحات بلافاصله از طریق کد منبع HTML بارگیری می شود نه اینکه منتظر بمانید تا جاوا اسکریپت شروع و محتوا را بارگذاری کند، که به محتوا اجازه می دهد با حداقل زمان بارگذاری و پهنای باند، و از طریق مرورگرهای مبتنی بر متن قابل خواندن باشد و سازگاری با عقب مانده ها را به حداکثر برساند.
به عنوان مثال، سایتهای مبتنی بر مدیاویکی از جمله ویکیپدیا از پیشرفتهای پیشرونده استفاده میکنند، زیرا زمانی که جاوا اسکریپت و حتی CSS غیرفعال است، قابل استفاده باقی میمانند، زیرا محتوای صفحات در کد منبع HTML صفحه گنجانده شده است، در حالی که Everipedia برای بارگیری صفحات به جاوا اسکریپت متکی است. محتوا متعاقبا؛ که یک صفحه خالی با غیرفعال شدن جاوا اسکریپت ظاهر می شود.
صفحه آرایی
بخشی از طراحی رابط کاربری تحت تاثیر کیفیت صفحه آرایی قرار می گیرد. برای مثال، یک طراح ممکن است در نظر داشته باشد که آیا صفحهآرایی سایت باید در صفحات مختلف در هنگام طراحی طرحبندی ثابت بماند یا خیر. عرض پیکسل صفحه نیز ممکن است برای تراز کردن اشیاء در طراحی چیدمان حیاتی در نظر گرفته شود. محبوبترین وبسایتهای با عرض ثابت معمولاً دارای همان عرض تنظیم شده برای مطابقت با محبوبترین پنجره مرورگر فعلی، در محبوبترین وضوح صفحه نمایش فعلی، در محبوبترین اندازه نمایشگر فعلی هستند. بیشتر صفحات نیز برای نگرانیهای زیباییشناسی در صفحههای بزرگتر در مرکز تراز هستند.
محبوبیت طرحبندیهای سیال در حدود سال ۲۰۰۰ افزایش یافت تا به مرورگر اجازه دهد تا تنظیمات طرحبندی خاص کاربر را بر اساس جزئیات صفحه خواننده (اندازه پنجره، اندازه فونت نسبت به پنجره، و غیره) تنظیم کند. آنها به عنوان جایگزینی برای طرحبندیهای مبتنی بر جدول HTML و طراحی مبتنی بر شبکه در اصول طراحی صفحهآرایی و در تکنیک کدنویسی رشد کردند، اما استفاده از آنها بسیار کند بود. این به دلیل ملاحظات دستگاههای خواندن صفحه و اندازههای مختلف پنجره بود که طراحان هیچ کنترلی روی آنها ندارند. بر این اساس، یک طرح ممکن است به واحدهایی تقسیم شود (نوارهای جانبی، بلوکهای محتوا، مناطق تبلیغاتی تعبیهشده، مناطق ناوبری) که به مرورگر ارسال میشوند و به بهترین شکل ممکن توسط مرورگر در پنجره نمایش قرار میگیرند. اگرچه چنین نمایشگری اغلب ممکن است موقعیت نسبی واحدهای محتوای اصلی را تغییر دهد، ستونهای کناری ممکن است به جای اینکه در کنار آن قرار گیرند، زیر متن بدنه قرار گیرند. این صفحه نمایش انعطاف پذیرتر از یک طرح بندی مبتنی بر شبکه کدگذاری شده سخت است که با پنجره دستگاه تناسب ندارد. به طور خاص، موقعیت نسبی بلوکهای محتوا ممکن است تغییر کند در حالی که محتوای درون بلوک بیتأثیر باقی بماند. این همچنین نیاز کاربر به اسکرول افقی صفحه را به حداقل می رساند.
طراحی وب واکنش گرا (ریسپانسیو) یک رویکرد جدیدتر، مبتنی بر CSS3، و سطح عمیقتری از مشخصات هر دستگاه در صفحه سبک صفحه از طریق استفاده پیشرفته از قانون CSS @media است. در مارس ۲۰۱۸، گوگل اعلام کرد که فهرستسازی اول موبایل را راهاندازی خواهد کرد. سایتهایی که از طراحی واکنشگرا استفاده میکنند، در موقعیت خوبی قرار دارند تا اطمینان حاصل شود که با این رویکرد جدید مطابقت دارند.
تایپوگرافی
طراحان وب ممکن است بجای استفاده از طیف وسیعی از حروف تایپ یا سبک های تایپ، تنوع حروف تایپ وب سایت را تنها به تعداد کمی که دارای سبک مشابه هستند محدود کنند. اکثر مرورگرها تعداد خاصی از فونت های ایمن را تشخیص می دهند که طراحان عمدتاً برای جلوگیری از پیچیدگی ها از آنها استفاده می کنند.
دانلود فونت بعداً در ماژول فونت های CSS3 گنجانده شد و از آن زمان در Safari ۳.۱، Opera ۱۰ و Mozilla Firefox ۳.۵ پیاده سازی شده است. این متعاقباً علاقه به تایپوگرافی وب و همچنین استفاده از دانلود فونت را افزایش داده است.
اکثر طرحبندیهای سایت، فضای منفی را برای تقسیم کردن متن به پاراگرافها و همچنین اجتناب از متن تراز وسط قرار میدهند.
نقاشی متحرک
چیدمان صفحه و رابط کاربری نیز ممکن است تحت تأثیر استفاده از موشن گرافیک قرار گیرد. انتخاب یا عدم استفاده از موشن گرافیک ممکن است به بازار هدف وب سایت بستگی داشته باشد. ممکن است با یک وب سایت سرگرمی گرا، موشن گرافیک قابل انتظار باشد یا حداقل بهتر دریافت شود. با این حال، یک مخاطب هدف وب سایت با علاقه جدی یا رسمی تر (مانند کسب و کار، جامعه یا دولت) ممکن است انیمیشن ها را غیرضروری و حواس پرت کند، اگر فقط برای اهداف سرگرمی یا دکوراسیون باشد. این بدان معنا نیست که نمیتوان محتوای جدیتر را با ارائههای متحرک یا ویدیویی مرتبط با محتوا تقویت کرد. در هر صورت، طراحی موشن گرافیک ممکن است بین جلوه های بصری موثرتر یا تصاویر حواس پرت کننده تفاوت ایجاد کند.
موشن گرافیک هایی که توسط بازدید کننده سایت شروع نشده اند می توانند مشکلات دسترسی ایجاد کنند. استانداردهای دسترسی کنسرسیوم وب جهانی مستلزم آن است که بازدیدکنندگان سایت بتوانند انیمیشن ها را غیرفعال کنند.
کیفیت کد
طراحان وب سایت ممکن است رعایت استانداردها را عمل خوبی بدانند. این معمولاً از طریق توضیحاتی انجام می شود که مشخص می کند عنصر در حال انجام چه کاری است. عدم انطباق با استانداردها ممکن است یک وب سایت را غیرقابل استفاده یا مستعد خطا کند، اما استانداردها می توانند به چیدمان صحیح صفحات برای خوانایی و همچنین اطمینان از بسته شدن مناسب عناصر کدگذاری شده مربوط باشند. این شامل خطاهایی در کد، طرحبندی سازمانیافتهتر برای کد، و اطمینان از شناسایی صحیح شناسهها و کلاسها میشود. صفحاتی که کدگذاری ضعیفی دارند گاهی اوقات به صورت محاوره ای تگ صابون نامیده می شوند. اعتبارسنجی از طریق W3C تنها زمانی میتواند انجام شود که یک اعلان DOCTYPE درست انجام شود، که برای برجسته کردن خطاها در کد استفاده میشود. این سیستم خطاها و مناطقی را که با استانداردهای طراحی وب مطابقت ندارند شناسایی می کند. سپس این اطلاعات می تواند توسط کاربر تصحیح شود.
محتوای تولید شده
دو راه برای ایجاد وب سایت ها وجود دارد: ایستا یا پویا.
وب سایت های ایستا (استاتیک)
یک وب سایت ایستا یک فایل منحصر به فرد را برای هر صفحه از یک وب سایت ایستا ذخیره می کند. هر بار که آن صفحه درخواست می شود، همان محتوا برگردانده می شود. این محتوا یک بار در حین طراحی وب سایت ایجاد می شود. معمولاً به صورت دستی نوشته میشود، اگرچه برخی از سایتها از فرآیند ایجاد خودکار استفاده میکنند، شبیه به یک وبسایت پویا، که نتایج آن برای مدت طولانی بهعنوان صفحات تکمیلشده ذخیره میشوند. این سایتهای استاتیک بهطور خودکار در سال ۲۰۱۵ با مولدهایی مانند Jekyll و Adobe Muse محبوبیت بیشتری پیدا کردند.
مزایای یک وب سایت ایستا این است که میزبانی آنها ساده تر است، زیرا سرور آنها فقط به ارائه محتوای ثابت نیاز دارد، نه اجرای اسکریپت های سمت سرور. این نیاز به مدیریت سرور کمتری داشت و شانس کمتری برای افشای حفرههای امنیتی داشت. آنها همچنین می توانند صفحات را با سرعت بیشتری روی سخت افزار سرور ارزان قیمت ارائه دهند. این مزیت از اهمیت کمتری برخوردار شد زیرا میزبانی وب ارزان برای ارائه ویژگی های پویا گسترش یافت و سرورهای مجازی عملکرد بالایی را برای فواصل زمانی کوتاه با هزینه کم ارائه کردند.
تقریباً همه وب سایت ها دارای محتوای ثابت هستند، زیرا دارایی های پشتیبانی مانند تصاویر و شیوه نامه ها معمولاً ثابت هستند، حتی در وب سایت هایی با صفحات بسیار پویا.
وب سایت های پویا
وب سایت های پویا به سرعت تولید می شوند و از فناوری سمت سرور برای تولید صفحات وب استفاده می کنند. آنها معمولاً محتوای خود را از یک یا چند پایگاه داده پشتیبان استخراج می کنند: برخی از آنها کوئری های پایگاه داده در یک پایگاه داده رابطه ای برای پرس و جو از یک کاتالوگ یا خلاصه کردن اطلاعات عددی هستند و برخی دیگر ممکن است از یک پایگاه داده سند مانند MongoDB یا NoSQL برای ذخیره واحدهای بزرگتر محتوا استفاده کنند. ، مانند پست های وبلاگ یا مقالات ویکی.
در فرآیند طراحی، صفحات پویا اغلب با استفاده از صفحات ایستا به صورت مدل یا وایرفریم می شوند. مجموعه مهارت های مورد نیاز برای توسعه صفحات وب پویا بسیار گسترده تر از یک صفحه ایستا است که شامل کدگذاری سمت سرور و پایگاه داده و همچنین طراحی رابط سمت مشتری است. بنابراین، حتی پروژه های پویا با اندازه متوسط تقریباً همیشه یک تلاش تیمی هستند.
هنگامی که صفحات وب پویا برای اولین بار توسعه یافتند، معمولاً مستقیماً به زبان هایی مانند Perl، PHP یا ASP کدگذاری می شدند. برخی از اینها، بهویژه PHP و ASP، از رویکرد «الگو» استفاده کردند که در آن صفحه سمت سرور شبیه ساختار صفحه تکمیلشده سمت کلاینت بود و دادهها در مکانهایی که با «برچسبها» تعریف شدهاند درج میشدند. این یک ابزار توسعه سریعتر از کدنویسی در یک زبان برنامه نویسی صرفا رویه ای مانند Perl بود.
هر دوی این رویکردها اکنون برای بسیاری از وب سایت ها با ابزارهای سطح بالاتر متمرکز بر برنامه مانند سیستم های مدیریت محتوا جایگزین شده اند. اینها بر روی پلتفرمهای کدنویسی همهمنظوره ساخته میشوند و فرض میکنند که یک وبسایت برای ارائه محتوا بر اساس یکی از چندین مدل شناختهشده، مانند یک وبلاگ با ترتیب زمانی، یک مجله موضوعی یا سایت خبری، یک ویکی یا یک انجمن کاربری وجود دارد. این ابزارها اجرای چنین سایتی را بسیار آسان و یک کار کاملاً سازمانی و مبتنی بر طراحی و بدون نیاز به کدنویسی می کند.
ویرایش خود محتوا (و همچنین صفحه قالب) هم از طریق خود سایت و هم با استفاده از نرم افزارهای شخص ثالث قابل انجام است. امکان ویرایش تمام صفحات فقط برای دسته خاصی از کاربران (به عنوان مثال، مدیران، یا کاربران ثبت نام شده) ارائه می شود. در برخی موارد، کاربران ناشناس مجاز به ویرایش محتوای وب خاص هستند که کمتر دیده می شود (به عنوان مثال، در انجمن ها – اضافه کردن پیام). نمونه ای از سایتی که تغییر ناشناس دارد ویکی پدیا است.
طراحی صفحه اصلی
کارشناسان قابلیت استفاده، از جمله Jakob Nielsen و Kyle Soucy، اغلب بر طراحی صفحه اصلی برای موفقیت وب سایت تأکید کرده اند و اظهار داشته اند که صفحه اصلی مهمترین صفحه در یک وب سایت است. با این حال، کارورزان در دهه ۲۰۰۰ دریافتند که تعداد فزاینده ای از ترافیک وب سایت در حال دور زدن صفحه اصلی است. رفتن مستقیم به صفحات محتوای داخلی از طریق موتورهای جستجو، خبرنامه های الکترونیکی و فیدهای RSS. بسیاری از کارورزان را به این استدلال سوق میدهد که صفحات اصلی از آن چیزی که بیشتر مردم فکر میکنند اهمیت کمتری دارند. جارد اسپول در سال ۲۰۰۷ استدلال کرد که صفحه اصلی یک سایت در واقع کم اهمیت ترین صفحه در یک وب سایت است.
در سالهای ۲۰۱۲ و ۲۰۱۳، گردونهها (همچنین به آنها «لغزنده» و «بنرهای چرخشی» نیز گفته میشود) به یک عنصر طراحی بسیار محبوب در صفحات اصلی تبدیل شدهاند که اغلب برای نمایش محتوای برجسته یا اخیر در یک فضای محدود استفاده میشود. بسیاری از کارورزان استدلال می کنند که گردونهها یک عنصر طراحی ناکارآمد هستند و به بهینه سازی موتور جستجو و قابلیت استفاده وب سایت آسیب می رسانند.
مشاغل
دو شغل اصلی در ایجاد یک وب سایت وجود دارد: طراح وب و توسعه دهنده وب، که اغلب در یک وب سایت از نزدیک با هم کار می کنند. طراحان وب مسئول جنبه بصری هستند که شامل چیدمان، رنگ آمیزی و تایپوگرافی یک صفحه وب است. طراحان وب همچنین دانش کاری در مورد زبان های نشانه گذاری مانند HTML و CSS خواهند داشت، اگرچه میزان دانش آنها از یک طراح وب به دیگری متفاوت خواهد بود. به ویژه در سازمان های کوچکتر، یک نفر به مهارت های لازم برای طراحی و برنامه نویسی صفحه وب کامل نیاز دارد، در حالی که سازمان های بزرگتر ممکن است یک طراح وب داشته باشند که مسئول جنبه بصری آن به تنهایی باشد.
مشاغل دیگری که ممکن است در ایجاد یک وب سایت دخیل باشند عبارتند از:
- طراحان گرافیک برای ایجاد تصاویر بصری برای سایت مانند آرم، طرحبندی و دکمهها
- متخصصان بازاریابی اینترنتی برای کمک به حفظ حضور وب از طریق راه حل های استراتژیک برای هدف قرار دادن بینندگان به سایت، با استفاده از تکنیک های بازاریابی و تبلیغاتی در اینترنت
- سئو نویسان برای تحقیق و توصیه کلمات صحیح برای گنجاندن در یک وب سایت خاص و ایجاد دسترسی بیشتر وب سایت در موتورهای جستجوی متعدد
- کپی رایتر اینترنتی برای ایجاد محتوای نوشتاری صفحه به منظور جذب بینندگان هدف سایت
- طراح تجربه کاربر (UX) جنبه هایی از ملاحظات طراحی متمرکز بر کاربر را شامل می شود که شامل معماری اطلاعات، طراحی کاربر محور، تست کاربر، طراحی تعامل و گاهی اوقات طراحی بصری است.
ما در پرمیرز تمام تلاش خود را جهت طراحی وب سایت های جذاب و کاربردی انجام می دهیم. شما می توانید قسمتی از کارهای ما را در بخش نمونه کارها مشاهده نمایید. منبع: