طراحی سایت (web design)

طراحی سایت (web design) چیست؟ پاسخ به این سوال به نظر خیلی ساده می‌رسد. بله، اگر بخواهید تنها نگاهی گذرا به معنی طراحی سایت (web design) داشته باشید، پاسخ دادن به این سوال زیاد وقت شما را نمی‌گیرد. طراحی سایت (web design) به معنی طراحی و ایجاد یک وب سایت یا بهینه سازی یک سایت قدیمی است.

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

تاریخچه طراحی سایت ؛ تولد اولین وب سایت

وب سایت ‌های زیادی در سراسر جهان وجود دارند، اما هیچ کدام از آن‌ها ۲۶ سال قدمت ندارند. اولین وب سایت دنیا که به پروژه World Wide Web یا همان W3 تعلق داشت، در ۶ آگوست سال ۱۹۹۱ متولد شد. این وب سایت که توسط «تیم برنرز لی» توسعه یافته بود، هنوز هم با آدرس https://info.cern.ch/hypertext/WWW/TheProject.html. در دسترس قرار دارد.

همانطور که با مراجعه به آدرس اولین سایت دنیا قابل مشاهده است، این سایت و دیگر وب سایت‌های اولیه که به پیروی از همین سایت به وجود آمدند، طراحی خاصی نداشتند و در آن‌ها از المان‌هایی مثل تصویر، ترکیب‌های رنگ یا فایل صوتی استفاده نشده بود. رفته رفته و با معرفی مرورگرهای مختلف توسط Netscape و Microsoft که بازیگران اصلی دوران جنگ مرورگرها در این سال‌ها بودند، با استفاده از عواملی مثل جاوا اسکریپت و HTML، راه طراحی گرافیکی و شکل و شمایل دادن به صفحات وب هموارتر شد. به نظر می‌رسد مایکروسافت تاثیر بسیار زیادی روی این اتفاق گذاشته باشد. در سال ۲۰۰۰ و با ارائه اولین نسخه Internet Explorer برای سیستم‌های مک که از HTML 4.1 و CSS 1 به صورت کامل پشتیبانی می‌کردند، انقلاب عظیمی در مرورگرها و طراحی سایت به وجود آمد. جالب است بدانید که این مرورگر، اولین مرورگری بود که به صورت کامل از فرمت تصاویر PNG پشتیبانی می‌کرد.

وب سایت چیست؟

حتما شما هم بارها اسم وب سایت به گوشتان خورده است. میخواهم با یک مثال مفهوم وبسایت را برایتان توضیح دهم.

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

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

با مفهوم وب سایت نیز آشنا شدیم. حالا میخواهیم برسیم به سوال اصلی خودمان: طراحی سایت (web design) چیست .

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

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

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

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

وظایف طراح سایت چیست؟

یک طراح سایت با توجه به اینکه در چه پروسه‌ای از طراحی وب سایت درگیر است، وظایف مختلفی دارد. به صورت کلی در طراحی و راه اندازی یک سایت، به دو تیم یا فرد برای طراحی Back-end یا همان بخش کدها و Front-end نیاز داریم.

متخصص طراحی Back-end کسی است که مسئولیت نوشتن کدهای مختلف برای ایجاد ساختار اصلی وب سایت را به عهده دارد. این کدها همان چیزی هستند که از نظر بازدیدکنندگان یک سایت پنهان هستند و بیش از هر چیز وظیفه راه اندازی و عملکرد یک سایت را به عهده دارند. یک متخصص طراحی سایت که وظیفه توسعه Back-end را به عهد دارد از زبان های برنامه‌نویسی مثل Python، ASP و PHP استفاده می‌کند.

در بحث طراحی Front-end همه کارها برای بهتر کردن ویژگی‌های دیداری یک سایت انجام می‌شوند. در واقع تمام چیزی که بازدیدکننده سایت می‌بیند، نتیجه کار یک توسعه دهنده Front-end‌ یا همان کسی است که با استفاده از کدهای مختلف ظاهر وب سایت را به سر و شکل می‌دهد. برای توسعه ظاهر سایت، نیاز به کد نویسی است و نوشتن این کدها با زبان‌هایی مثل HTML، CSS و جاوا اسکریپت انجام می‌گیرد. البته فراموش نکنید که همیشه در این پروسه همکاری با یک گرافیست وب می‌تواند نتایج بسیار بهتری رقم بزند.

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

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

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

یک طراح سایت از ابزار و تکنولوژی‌هایی مثل HTML، CSS، PHP یا هر زبان و تکنولوژی دیگری مربوط به طراحی سایت استفاده کند.

انواع طراحی سایت

وب سایت‌های امروزی به دو گونه وب سایت استاتیک و وب سایت داینامیک دسته‌بندی می‌شوند.

طراحی سایت استاتیک

در طراحی سایت استاتیک، یک فایل متمایز به ازاء هر صفحه وب سایت روی سرور ذخیره می‌شود و هر بار که این صفحه مورد نیاز باشد، عینا از سرور بازخوانی می‌شود و برای کاربر نمایش داده می‌شود. از مزایای این گونه طراحی سایت که در بیشتر تا سال ۲۰۱۵ محبوبیت داشت، آسانی طراحی صفحات استاتیک و امنیت بالای آن برای سرورهای آن دوره بود.

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

طراحی سایت داینامیک

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

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

در یک سایت داینامیک، صفحات معمولا محتوای مورد نیاز خود را از یک دیتابیس در Back-end فراخوانی می‌کنند. هنگامی که صفحات داینامیک وب سایت برای اولین بار توسعه پیدا کردند. توسعه اولیه صفحات داینامیک وب مستقیما در زبان‌هایی مثل PHP، Perl یا ASP صورت می‌گرفت.

هدف از طراحی سایت چه می‌تواند باشد؟

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

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

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

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

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

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