طراحی وب سایت دربرگیرنده مهارت­ ها و شاخه­ های مختلفی در زمینه تولید، طراحی، نگه­داری و پشتیبانی وب سایت­ ها می باشد.

طراحی وب سایت

شاخه­ های متفاوت طراحی وب عبارتند از: طراحی رابط کاربری یا همان UI ؛ نوشتن، از جمله نوشتن کدهای استاندارد شده و نرم ­افزازهای مالکیتی یا نرم‌افزار انحصاری؛ طراحی تجربه کاربری User experience design  که به اختصار به آن UX, UXD, UED و همچنین XD نیز گفته می‌شود؛ و بهینه ­سازی موتور جستجو یا همان SEO.

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

طراحی وب در قلمرو گسترده ­تر توسعه وب، تاحدی با مهندسی وب هم­پوشانی دارد. از طراحان وب انتظار می  رود که از استفاده ­پذیری وب سایت اطمینان داشته باشند و اگر نقش تولید صفحات وب توسط زبان های نشانه گذاری را نیز برعهده داشته باشند، انتظار می­رود که درباره راهبردهای دسترس ­پذیری وب یا همان Web accessibility نیز اطلاعات به­ روزی داشته باشند.

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

تاریخچه طراحی وب

1988-2001

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

آغاز وب و طراحی آن

در سال 1989، تیم برنرز-لی (Tim berners-Lee)، همزمان با کار در CERN، پروژه ­ی ساخت اَبَرمتن یا hypertext جهانی را، که بعداً تحت عنوان وب جهان­گستر یا همان وب جهانی (World Wide Web) شناخته شد، پیشنهاد کرد. وب جهان­گستر یا به طور ساده تر “وب” بین سال­های 1991 و 1993 متولد شد. در این مقطع، صفحات که صرفاً از متن تشکیل شده بودند، توسط یک مرورگر ساده لاین-مُد یا  line-mode قابل دیدن بودند.

در 1993 مارک اندرسن (Marc Andreessen) و اریک بینا (Eric Bina) مرورگر موزایک (Mosaic) را تولید کردند. در آن زمان مرورگرهای متعددی وجود داشتند، اما اکثر آن­ها یونیکس-محور یا به عبارتی Unix-base و طبیعتاً پر از نوشته بودند. هیچ روش یک­پارچه ­ای برای طراحی عناصر گرافیکی مثل تصویر یا صدا وجود نداشت.

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

W3C هم­­ اکنون کار استانداردگذاری را ادامه می­دهد، که امروزه با JavaScript دیده می­شود. اندرسن در 1994 کمپانی ارتباطات (Communications Corp) را احداث کرد که بعداً به نام  نت‌اسکیپ (NetScape) و مرورگر نت اسکیپ 9.0 شناخته شد. نت­ اسکیپ برچسب­ های HTML خود را بی ­توجه به پروسه­ ی استاندردهای سنتی تولید کرد. برای مثال، نت ­اسکیپ 1.1 دارای برچسب­ هایی (tags) برای تغییر رنگ پس ­زمینه و ایجاد جدول در نوشته­ های صفحات وب بود.

مابین سال­های 1996 و 1999 جنگ مرورگرها رخ داد و مایکروسافت و نت ­اسکیپ برای سلطه مرورگر خود بر دیگری، جنگیدند. در این زمان، فناوری­ های جدید متعددی در این زمینه معرفی شدند، که مهترین آن­ها شیوه‌نامه آبشاری (Cascading Style Sheets)، جاوا اسکریپت و HTML پویا بودند. در کل، رقابت مرورگرها منجر به خلاقیت­های مثبت متعددی شد و به تحول سریع وب کمک کرد.

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

در 1996 مایکروسافت اولین مرورگر رقابتی خود را منتشر کرد، که پر از تَگ و امکانات بود. همچنین اولین مرورگری بود که از شیوه نامه (style sheet) پشتیبانی می­ کرد، چیزی که در آن زمان یک تکنیک نوشتاری پیچیده بود. نشانه­ گذاری HTML برای جدول­ها در ابتدا برای نمایش داده­ های جدولی در نظر گرفته شده بود. اما طراحان به­ زودی متوجه پتانسیل استفاده از جدول­های HTML برای تولید طرح­ های پیچیده و چند ستونی شدند که پیش از این ناممکن بود. در این زمان، که به­­ نظر می­رسید طراحی و زیبایی نسبت به ساختار نشانه­ گذاریِ خوب ارجحیت دارد، به معنا (سمانتیک) و دسترس ­پذیری وب اهمیت کمی داده شد. سایت ­های HTML انتخاب زیادی در طراحی نداشتند، و در نسخه ­های اولیه HTML انتخاب­ها حتی کمتر هم بودند.

برای طراحی­ های مختلط، بسیاری از طراحان مجبور بودند از ساختارهای جدولی پیچیده یا حتی تصاویر گیفِ شفافِ فاصله­ ساز یا به عبارتی Transparent Spacer GIF برای جلوگیری از فروپاشی خانه­ های خالی جدول استفاده کنند.

CSS در دسامبر 1996 توسط W3C برای تقویت طراحی و صفحه ­آرایی صفحات وب معرفی شد. این باعث شد که کد HTML به ­جای معنادار و نمایشی بودن، فقط معنادار باشد، و دسترسی وب را بهبود بخشید.

در ارتباط با این موضوع پیشنهاد میکنیم به مطلب زیر مراجعه نمایید:

طراحی وب سایت بدون جدول چیست و چه مفهومی دارد؟

در 1996، فلش (Flash، که در ابتدا FutureSplash نام داشت) تولید شد. در آن زمان، ابزار تولید محتوای فلش در مقایسه با اکنون نسبتاً ساده بود، که تنها از ابزار ابتدایی طراحی و رسم، حالت ابتدایی و محدود­ زبان اَکشن ­اسکریپت، و یک خط زمان یا Timeline استفاده می­کرد، اما طراحان را قادر به رفتن فراتر از HTML، گیف ­های متحرک و جاوا اسکریپت نمود.

با این حال، به این دلیل که فلش به یک افزونه (plug-in) نیاز داشت، بسیاری از توسعه­ دهندگان وب به­ دلیل ترس از کم کردن سهم خود از بازار بخاطر عدم سازگاری، از آن استفاده نکردند. در عوض، طراحان (اگر نگوییم گرافیک متحرک را به ­کل کنار گذاشتند) تنها به استفاده از گیف­ های متحرک و جاوا اسکریپت برای ابزارک ها (widget) بسنده کردند. اما فواید فلش، آن­را در بازارهای مخاطب خاص خود به قدری محبوب نمود که راه خود را به اکثر مرورگرها باز کرد، و ­آن­را به قدری قدرتمند نمود که بتوان در تولید کامل یک سایت از آن استفاده کرد.

پایان اولین جنگ مرورگرها

در سال 1988 نت ­اسکیپ کد ، ارتباط دهنده نت ­اسکیپ (Netscape Communicator) را تحت لیسانس متن باز (open source) منتشر کرد و به هزاران توسعه­ دهنده امکان بهبود این نرم ­افزار را داد. با این­ حال، آن­ها تصمیم گرفتند که از نو شروع کنند، چیزی که تولید مرورگر متن باز را پایه­ گذاری کرد و در مدت کوتاهی به یک پلتفرم نرم­ افزاری کامل تبدیل شد. سپس پروژه استانداردهای وب شکل گرفت و سازگاری مرورگر با استانداردهای HTML و CSS را توسط آزمایش­های اسید 1، اسید 2 و اسید 3 بهبود بخشید. سال 2000 برای مایکروسافت سال بزرگی بود. در این سال اینترنت اکسپلور برای مک عرضه شد؛ این موضوع اهمیت زیادی داشت زیرا اولین مرورگری بود که به ­طور کامل HTML 4.01 و CSS 1 را پشتیبانی می­کرد، چیزی که سطح تطابق استاندرد را بالا برد. همچنین اولین مرورگری بود که فرمت تصویری PNG را به ­طور کامل پشتیبانی می­کرد. در این مدت، نت­ اسکیپ به AOL فروخته شد و این شکست رسمی نت ­اسکیپ در مقابل مایکروسافت در جنگ مرورگرها بود.

2001-2012

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

از پایان جنگ مرورگرها، مرورگرهای جدیدی عرضه شده­ اند. بسیاری از این مرورگرها متن­ باز هستند، به این معنا که توسعه سریع­تری دارند و استانداردهای جدید را بیشتر پشتیبانی می­کنند. این مرورگرهای جدید از نظر بسیاری، از اینترنت اکسپلورر مایکروسافت بهتر هستند.

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

ابزار و فناوری طراحی وب

طراحان وب، بسته به فرایند تولیدی که در آن مشغول هستند، از ابزار متنوعی استفاده می­کنند. این ابزار با گذر زمان توسط نرم ­افزارها و استانداردهای جدید به­  روز رسانی می­ شود اما اصول آن­ها ­تغییر نمی کند. طراحان وب از ویرایشگرهای گرافیکی برداری و تصویری (vector and raster graphics editor) برای ساخت تصاویر با فرمت مناسب وب، یا طراحی نمونه­ های اولیه، استفاده می­کنند.

فناوری­ های مورد استفاده در ساخت وبسایت­ ها شامل استانداردهای W3C مثل HTML و CSS می­باشند که هم با دست قابل کدنویسی هستند و هم با نرم ­افزار ویرایشگر WYSIWYG.

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

مهارت­ها و تکنیک ­ها در طراحی وب

طرح ­ریزی ارتباط و بازاریابی

طرح­ ریزی ارتباط و بازاریابی در یک وبسایت می تواند تعیین کند که چه چیزی برای جذب بازار مخاطب آن سایت موثر است. این بازار مخاطب می­تواند دارای افرادی با رده سنی خاص یا فرهنگ خاص باشد؛ بنابراین طراح می­تواند به گرایش مخاطب پی ببرد.

طراحان همچنین می­توانند درک کنند چه جور سایتی را طراحی می­کنند، یعنی، مثلاً، ملاحظات طراحی یک سایت تجارت-به-تجارت (B2B) به انگلیسی Business to Business با سایتی که مصرف­ کننده را هدف گرفته، مثل یک فروشگاه اینترنتی یا یک وبسایت سرگرمی، کاملاً متفاوت است.

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

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

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

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

توابع تعاملی پیشرفته یا Advanced interactive functions ، حتی اگر به زبان­ های کد نویسی پیشرفته نیاز نداشته باشند، به افزونه یا پلاگین (plugin) نیاز دارند. در طراحی تجربه کاربری، انتخاب روشی تعاملی که به افزونه ها  نیاز داشته باشد، تصمیمی خطیر است. اگر این پلاگین از قبل روی بیشتر مرورگرها نصب نشده باشد، این ریسک وجود دارد که کاربر توانایی، یا حوصله نصب این پلاگین را صرفاً برای دسترسی به محتوای این سایت، نداشته باشد. اگر این تابع به مهارت­های بالایی در زبان کدنویسی نیاز داشته باشد، کد نویسی آن چه از نظر بودجه و چه از نظر زمان، ممکن است هزینه ­برتر از پیشرفتی باشد که در تجربه کاربری ایجاد می کند.  این ریسک نیز وجود دارد که تعامل پیشرفته­ تر با ساختار مرورگرها یا سخت ­افزارهای قدیمی­ تر سازگاری نداشته باشد. عرضه­ کردن تابعی که به­ طور مفید کار نکند، احتمالاً برای تجربه کاربری مضرتر از عرضه نکردن آن است. این که به چنین تابعی نیاز باشد یا ارزش ریسک وجود داشه باشد، به مخاطب هدف بستگی دارد.

صفحه­ آرایی

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

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

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

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

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

حروف­ نگاری یا Typography

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

دانلود فونت بعداً در ماژول فونت­ های CSS3 گنجانده شد و از آن پس در مرورگرهای سافاری 3.1 ، اپرا 10 و موزیلا فایرفاکس 3.5 پیاده سازی شده است. این موضوع متعاقباً علاقه به حروف­ نگاری وب، و نیز دانلود فونت را بیشتر کرده است.

صفحه ­آرایی بیشتر سایت­ها از فضای منفی برای شکستن متن به چند پاراگراف استفاده می­کند و نیز از متن­ های تراز شده در مرکز استفاده نمی­ کنند.

گرافیک متحرک یا Motion graphics

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

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

کیفیت کد

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

صفحاتی که ضعیف کدنویسی شده­ اند گاهی اوقات به­ طور محاوره­ ای “سوپ چسب” یا tag soup نامیده می­شوند. اعتبارسنجی توسط W3C تنها زمانی قابل انجام است که DOCTYPE که برای Highlight یا برجسته نشان دادن خطاها در کد استفاده می­شود، به درستی تعریف شده باشد. این سیستم، خطاها و ناحیه­ هایی را که با استانداردهای طراحی وب تطابق ندارند شناسایی می­کند. این اطلاعات توسط کاربر قابل اصلاح هستند.

تولید محتوا

وبسایت­ ها به دو صورت تولید می­شوند: به ­طور ایستا یا به ­طور پویا.

وب سایت­ ایستا یا وب سایت استاتیک

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

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

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

وب سایت­ پویا یا وب سایت داینامیک

وبسایت­ های پویا سریع ساخته میشوند و از فناوری اسکریپت‌نویسی سمت سرور برای تولید صفحات وب استفاده می­کنند. چنین سایت­هایی معمولاً محتوای خود را از پایگاه داده های بَک-اِند (back-end) استخراج می­ کنند: بعضی­­ها جستار­هایی ­در سرتاسر  پایگاه داده­ای مرتبط با جستجوی یک کاتالوگ یا خلاصه­ سازی اطلاعات عددی هستند، بعضی دیگر ممکن است از یک پایگاه داده اسنادی از قبیل Mongo DB یا NoSQL برای ذخیره ­سازی واحد­های بزرگ­تر محتوا، مثل پست­ های بلاگ یا مقالات ویکی، استفاده کنند.

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

اولین صفحات پویای وب ساخته شده، اغلب مستقیماً به زبان­های مثل Perl، PHP یا ASP نوشته شده بودند. بعضی از این زبان­ها، که مهم­ترین آن­ها PHP و ASP بودند، از یک روش “الگویی” (template) استفاده می­کردند که در آن یک صفحه سمت سرور، نشانگر ساختار صفحه کامل سمت کاربر بود و داده ­ها به مکان­ های تعریف شده توسط “برچسب­ها” (tags) تزریق می ­شدند. در مقایسه با کدنویسی به یک زبان کاملاً رَویه ­ای یا به عبارتی وابسته به دستورالعمل مثل Perl، این روشی سریع­تر برای توسعه بود.

هر دوی این روش­ها در بسیاری از وبسایت­ ها با ابزارهای متمرکز بر کاربردِ سطح بالایی مثل سیستم­ های مدیریت محتوا یا CMS ها جایگزین شده ­اند. این سیستم ­ها مبتنی بر پلتفرم­ های کدنویسی چندمنظوره ساخته می­شوند و این پیش­فرض را دارند که هر سایتی محتوای خود را مطابق با یکی از چند الگوی شناخته شده ارائه می­کند، مثل بلاگ با ترتیب زمانی، مجله موضوعی یا سایت خبری، انجمن کاربری یا ویکی. این ابزار، بدون نیاز به کدنویسی، پیاده ­سازی چنین سایتی را بسیار آسان و آن­را به امری سازمان­ یافته و طراحی-محور تبدیل می­کند.

طراحی صفحه خانه یا Homepage

کارشناسان حوزه مصرف، از جمله جیکوب نیلسن (Jakob Nielsen) و کایل سوسی (Kyle Soucy)  همواره بر نقش طراحی صفحه خانه در موفقیت سایت تاکید داشته ­اند و مدعی بودند که صفحه خانه، مهم­ترین صفحه یک سایت است. با این­ حال کاروَرزان در اوایل هزاره جدید به این حقیقت پی بردند که بخشی بزرگ و روبه­ رشد از ترافیک وبسایت­ ها، از صفحه خانه عبور نمی­ کنند، و توسط موتورهای جستجو، خبرنامه ­های الکترونیکی و یا فیدهای RSS، مستقیماً وارد صفحات محتوایی می­شوند؛ چیزی که بسیاری از کارورزان را قانع کرد که صفحات خانه اهمیتی کمتر از آنچه مردم تصور می­کنند، دارند. جارد اسپول (Jared Spool) در سال 2007 استدلال کرد که صفحه خانه یک سایت، کمترین اهمیت را میان صفحات آن سایت دارد.

در 2012 و 2013، طرح ­های اسلایدی (که “اسلایدر” یا “بنرهای گَردان” نیز نامیده می­شوند) در صفحات خانه، بسیار محبوب شدند، و اغلب استفاده آن­ها این است که محتوای جدید یا مهم را در فضایی محدود نمایش ­دهند. بسیاری از کارورزان باور دارند اسلایدرها یک عنصر بی­ تاثیر در طراحی است و بهینه سازی موتو جستجو و قابلیت مصرف سایت را کاهش می­دهد.

موقعیت­ های شغلی در حوزه طراحی وب سایت

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

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

• طراحان گرافیکی برای ساختن المان­ های بصری سایت مثل لگو، آرایش صفحه و دکمه­ ها
• متخصصین بازاریابی اینترنتی برای کمک به حضور دائمی در وب از طریق راه­های استراتژیک هدف ­گیری مخاطبین سایت، توسط بازاریابی و تکنیک­های ترقی در اینترنت
• نویسنده ­های سئو (SEO) برای واکاوی و پیشنهاد کردن لغات صحیح جهت استفاده در یک سایتِ به­ خصوص، و افزایش دسترسی به سایت و حضور بیشتر آن در موتورهای جستجوی مختلف
• کارشناسان کپی ­رایت اینترنتی، جهت جذاب نمودن محتوای نوشتاری برای مخاطبین هدف سایت
•  طراح تجربه کاربری (UX) که جنبه ­های مختلف ملاحظات کاربر-محور را باهم ادغام می­کند، از جمله معماری اطلاعاتی، طراحی کاربر-محور، تست کاربر، طراحی تعاملات و گاهی اوقات طراحی بصری.