در دنیای امروز با تغییر مسیر بسیاری ازکسب‌وکارهای سنتی به سمت کسب‌وکارهای اینترنتی، بازار فعالیت‌هایی همچون طراحی سایت رونق زیادی پیدا کرده است، اما چگونگی طراحی وب سایت، مراحل آن، اینکه از کجا و چطور آغاز شود، همچنین شرایط طراحی وب و میزان هزینه‌های آن از جمله مواردی است که باید مورد توجه قرار گیرد.در این متن به تاریخچه ، مفهوم و مراحل طراحی سایت میپردازیم .
طراحی سایت چیست ؟
طراحی سایت یا (web design) به مراحل طراحی و ساخت یک پایگاه اینترنتی جهت اطلاع رسانی ، معرفی شرکت و ارائی محصولات گفته میشود .
طراحی وبسایت یک پروسه است که از لایه سازی صفحات وب ، تولید محتوا ، طراحی گرافیکی و رعایت اصول سئو تشکیل شده است .
تاریخچه طراحی سایت
طراحی سایت با ورود زبان HTML معنای تازه ای گرفت و بنیان گذار آن آقای (Tim Berners -Lee) است که به عنوان پدر وب نیز شناخته میشود. در آن زمان سایت ها محتوی خاصی نداشت و چیزی که در طراحی سایت مورد اهمیت بود فقط متن و بازی با رنگ ها بود.و از طرفی سرعت اینترنت در آن زمان اجازه ایجاد یک سایت گرافیکی و حجیم را نمیداد. اما به مرور زمان و پیشرفت زبانهای برنامه نویسی تحت وب کم کم سایتها تغییر شکل داد و حالت حرفه ای تری گرفت.
در سال ۱۹۹۰ زبان برنامه نویسی اچ تی ام ال ساخته شد و در سال ۱۹۹۱ اولین سایت با کمک این زبان طراحی و در فضای اینترنت قرار گرفت. و یک سال بعد از آن یعنی در سال ۱۹۹۲ قابلیت جدول بندی هم به زبان اچ تی ام ال اضافه شد که به طراحان کمک میکرد مطالب سایت را بخش بندی و مرتب کنند و به نوعی سایت ها حالت سازماندهی شده پیدا کرد. در آن زمان حدود ۱۰ میلیون کاربر از اینترنت استفاده میکرد و ۶۰۰ سایت به صورت فعال وجود داشت .
در سال 1994 قرارداد جهانی وب به نام (W3c) ایجاد شد که هدف ان تعیین استانداردها برای سایت ها و فضای وب بود .
بعد از آن در سال 1995 دو پلتفرم قدرتمند وارد عرصه وب شدند :
1-Java script
2-Flash
این دو ابزار پر قدرت و کاربردی به طراحان کمک کرد امکانات فوق العاده ای برای سایت های خود ایجاد کنند و یک موفقیت بزرگ در طراحی سایت بود. از جمله این امکانات میتوان به بازی های آنلاین , سیستم چت و گفتگوی زنده , ارتباط تصویری , مولتی مدیا و سایتهای زنده و …… اشاره کرد.
در سال 1996 با 74 میلیون کاربر اینترنتی و بیش از 650 هزار سایت فعال در فضای اینترنت قابلیت های Css وFrame هم به کمک برنامه نویسان و طراحان سایت آمد.
CSS به کاربران کمک میکرد تمام تنظیمات مربوط به نوع فونت , رنگبندی و جزییات سایت خود را در یک فایل ذخیره کنند و مجبور نباشد در هر صفحه از سایت مجدد کد نویسی کند و فقط مقادیر را از فایل CSS بازخوانی کند.
Frame هم به طراح کمک میکرد که چند صفحه از سایت خود را در یک پنجره مرورگر به کاربر نمایش دهد و به بیان دیگر یک صفحه دیگر از سایت را در صفحه فعلی به کاربر نمایش میداد.
در سالهای ۱۹۹۸ و ۱۹۹۹ زبانهای برنامه نویسی تحت وب پیشرفت کرد و زبان PHP و همچنین نسخه جدید CSS با نام CSS 3 معرفی شدند.زبان پی اچ پی به طراح سایت کمک میکرد بتواند سایتی دینامیک راه اندازی کند که با کاربر تعامل داشته باشد و قابلیتهای فراوانی در این زبان برنامه نویسی وجود داشت.که بعد از ورود آن سایتهای فروشگاهی و سایر سایتهای مدرن هم وارد فضای مجازی شدند.
در سال ۲۰۰۳ در حالی که حدود ۸۰۰ میلیون کاربر فعال و بیش از ۳۸ میلیون سایت وجود داشت. نوبت به نوع جدیدی از سایت ها به نام سایتهای وب ۲ رسید. سایتهای Web 2 به سایتهایی گفته میشود که در آن کاربران همه کاره بودند و محتوی توسط کاربر در یک بستر از قبل آماده شده منتشر میشد. مانند شبکه های اجتماعی , سایتهای انتشار مقاله و خبر و سرویس های وبلاگ .
در ادامه این تحول و در سال ۲۰۱۰ کنسرسیوم W3C ورژن پنجم از زبان برنامه نویسی اچ تی ام ال را ارائه کرد و انقلابی در طراحی سایت ایجاد کرد. با کمک این زبان طراحان میتوانستند سایتهای واکنش گرا طراحی کنند که در تمامی دستگاه ها به درستی نمایش داده شود و همچنین از مولتی مدیا در سایتهای خود استفاده کنند.
مراحل طراحی سایت چیست ؟
طراحی وب سایت به معنی طراحی، ساخت و راه‌اندازی یک وبسایت یا بهینه‌سازی یک سایت قدیمی در بستر اینترنت است. Web Design(وب دیزاین) شامل 4 مرحله اصلی است که در ادامه با هر کدام اشنا میشویم .
مرحله اول : طراحی وایر فریم
ابتدا با توجه به نوع سایت و نیاز مشتری، یک نمای کلی از سایت طراحی می‌کنیم. این نما شامل یک نقشه کلی از صفحات سایت و تعیین جایگاه و چیدمان المان‌ها و عناصر مختلف است. این مرحله از طراحی وب سایت (طراحی وایرفریم) نام دارد.
مرحله دوم : طراحی گرافیک سایت
پس از مشخص شدن محل قرارگیری عناصر سایت، باید سایت را طراحی کنیم. در این مرحله با توجه به نوع کسب‌‌وکار اینترنتی و با استفاده از نرم‌افزارهای مخصوص رنگبندی و گرافیک سایت طراحی میشود.
مرحله سوم : کد نویسی و برنامه نویسی
باتوجه به سایت طراحی شده و نیاز مشتری، در این مرحله میتوان از روش‌های مختلفی برای مدیریت سایت استفاده کرد. سیستم‌های مدیریت محتوا مانند وردپرس و یا طراحی یک فریم ورک اختصاصی برنامه‌نویسی. تصمیم‌گیری در این بخش براساس هزینه‌ها و نیاز مشتری صورت می‌گیرد.
مرحله چهارم : راه اندازی سایت
پس از انجام 3 مرحله قبل، به راه‌اندازی سایت در بستر جهانی اینترنت میپردازیم. در این مرحله پس از تهیه یک (هاست) و (نام دامنه مناسب)، سایت را پیکربندی کرده و در دسترس عموم قرار می‌دهیم.
طراح سایت چه وظایفی دارد ؟
یک طراح سایت با توجه به اینکه در چه پروسه‌ای از طراحی وب سایت درگیر است، وظایف مختلفی دارد. به صورت کلی در طراحی و راه اندازی یک سایت، به دو تیم یا فرد برای طراحی (Back-end) یا همان بخش کدها و( Front-end) نیاز داریم.
طراح back-end کسی است که مسئولیت نوشتن کدهای مختلف برای ایجاد ساختار اصلی وب سایت را به عهده دارد. این کدها همان چیزی هستند که از نظر بازدیدکنندگان یک سایت پنهان هستند و بیش از هر چیز وظیفه راه اندازی و عملکرد یک سایت را به عهده دارند. یک متخصص طراحی سایت که وظیفه توسعه Back-end را به عهد دارد از زبان های برنامه‌نویسی مثل Python، ASP و PHP استفاده میکند.
در بحث طراحی Front-end همه کارها برای بهتر کردن ویژگی‌های دیداری یک سایت انجام می‌شوند. در واقع تمام چیزی که بازدیدکننده سایت می‌بیند، نتیجه کار یک توسعه دهنده Front-end یا همان کسی است که با استفاده از کدهای مختلف ظاهر وب سایت را به سر و شکل می‌دهد. برای توسعه ظاهر سایت، نیاز به کد نویسی است و نوشتن این کدها با زبان‌هایی مثل HTML، CSS و جاوا اسکریپت انجام می‌گیرد. البته فراموش نکنید که همیشه در این پروسه همکاری با یک گرافیست وب میتواند نتایج بسیار بهتری رقم بزند.
انواع طراحی سایت
سایتها به دو دسته کلی ایستاتیک (Static Website) و دینامیک (Dynamic website) تقسیم می‌شوند.
سایت های ایستاتیک یا ایستا
تنها قسمت فرانت‌اند انجام میشود، یعنی مطالب و محتویات سایت تنها یک بار جمع‌آوری شده و هرکدام از صفحات سایت، جداگانه طراحی و بارگذاری می‌شوند. در این سایتها هرگونه تغییر باید توسط طراح و کارشناس سایت انجام شود. از این مدل معمولا برای طراحی وب سایتهای معرفی (که تا مدت‌ها محتوای آن تغییر نمی‌کند) استفاده میشود.
سایت های دینامیک یا پویا
در طراحی این سایتها هر دو بخش فرانت‌اند و بک‌اند برنامه‌نویسی می‌شوند. سایتهای پویا نیاز به تغییر مداوم محتوا دارند و باتوجه به کاربرد سایت، طراحی شده و توسعه پیدا میکنند. در سایتهای داینامیک برنامه‌نویس بک‌اند، وظیفه پویا‌سازی وبسایت را بر عهده دارد و باید اسکریپتی را طراحی کند که سایت به‌طور کامل پویا باشد.
ابزار های مورد نیاز برای طراحی سایت
ابتدایی ترین ابزار برای طراح سایت شدن تهیه یک کامپیوتر یا لب تاب قدرتمند است که بتواند برنامه های گرافیکی و برنامه های کدنویسی را به راحتی اجرا کند و در زمان کار هنگ نکند تا تمامی حواس طراح سایت به کار اصلی معطوف باشد. در قدم بعدی ابزار های طراحی وب با توجه به نیاز شما متفاوت خواهد بود، اما یکی از اصلی ترین ابزار های طراحی وب همان زبان های برنامه نویسی و فریم ورک های مربوط به آن زبان هستند که با توجه سلیقه فرد طراح و مدل سایت انتخاب می شوند.
- یک محیطی که بتوانیم کدهایمان را در آن بنویسیم. این محیط میتواند Notepad ویندوز باشد و یا یک Text Editor یا IDE حرفه‌ای تر(مثل phpStorm)
- یک مرورگر اینترنتی (Browser) که بتوانیم کدهایمان را از طریق آن اجرا کنید (مثل فایرفاکس، گوگل کروم و…)
زبان های طراحی سایت
یک طراح وب برای اینکه بتواند یک صفحه وب طراحی کند ، از زبان ها و تکنولوژی های زیر استفاده میکنند :
- HTML(HTML 5)
- CSS (CSS 3)
- Java script
- JQuery
- و ….
۴ موردی که در بالا نام بردیم، حداقل دانشی است که شما برای طراحی صفحات وب و تبدیل شدن به یک طراح وب نیاز دارید. البته میتوانید فقط با ۲ مورد اول یعنی HTML و CSS نیز سایت هایی را طراحی کنید، ولی جاوا اسکریپت و جی کوئری میتوانند به کار شما بسیار قدرت دهند.
سیستم مدیریت محتوا (CMS)
سیستم مدیریت محتوا یا (content management system) سیستمی شامل چندین تابع و فرایند از پیش تعیین شده میباشد که ابزارهایی را جهت مدیریت ، طراحی و کنترل محتوای وبسایت به شما ارائه می دهد .
از بهترین سیستم های مدیریت محتوا میتوان به موارد زیر اشاره کرد :
- WordPress
- Joomla
- Drupal
- Silver Stripe
- Crushy CMS
طراح وب کیست ؟ چه وظایفی دارد ؟
طراح وب یا به اصطلاح Front End Designer کسی است که با استفاده از تکنولوژی‌های مختلف (مثل HTML – CSS – Javascript و … ) ظاهر یک سایت را طراحی میکند و کاری به کدهای پشت صحنه ندارد.
موارد زیر را میتوان وظایف طراح سایت دانست :
- برگزاری جلسات ابتدایی و کسب درک درست از تجارت و درخواست‌های کارفرما
- ارائه یک پروپوزال در مورد امکانات و ویژگی‌های سایت، خدماتی که ارائه می‌شوند و برآورد هزینه‌ها
- طراحی اولیه و نشان دادن آن به مشتری
- تغییر طراحی در صورت درخواست مشتری
- طراحی سایتی با ساختار بهینه و ریسپانسیو با استفاده از زبانهای برنامه‌نویسی مختلف یا سیستم‌های مدیریت محتوا (بنا به سفارش کارفرما و تخصص شرکت)
- بارگذاری سایت روی هاست یا سرور و کانفیگ اولیه
- آزمایش کارایی سایت در حضور کارفرما
- آموزش کار با سایت و مدیریت آن (ممکن است این آموزش‌ها به صورت مستند هم ارائه شوند.)
- پشتیبانی رایگان برای یک مدت کوتاه (معمولا یک ماه)
مواردی که ذکر شد وظایف اصلی طراح سایت هستند. کارهایی مثل تولید و به روز رسانی محتوا، سئو و … بر عهده طراح سایت نیست.
برای طراحی سایت از کجا شروع کنیم ؟
مهم‌ترین عامل در تبدیل شدن به یک طراح سایت حرفه‌ای، فراگیری مفاهیم اولیه و سپس کسب تجربه است. بهترین مرجع در زمینه یادگیری طراحی وب، میتواند آموزش‌های پروژه محور در زمینه طراحی وب سایت باشد. با انجام پروژه‌های مختلف حین آموزش، میتوانید تجربه اولیه در زمینه توسعه و آنلاین کردن یک سایت را به‌دست آورید.
گام اول : فراگیری زبان HTML
HTMLمخفف عبارت Hyper Text Markup Language است، که در فارسی به آن )زبان نشانه‌گذاری ابرمتن(می‌گویند. از زبان HTML برای ایجاد بدنه اصلی و ساختار کلی صفحات وب استفاده میشود. این زبان با تگ (دسته‌بندی و برچسب‌گذاری‌در ارائه مطالب سایت) کار میکند و این تگ‌ها هستند که مشخص میکنند در صفحه وب از چه عناصری استفاده شده است.
گام دوم : فراگیری زبان CSS
دومین قدم برای کسی که قصد دارد به طراحی وبسایت بپردازد، استفاده از زبان (CSS Cascading Style Sheets). این زبان به‌منظور زیباسازی و فرم‌دهی به صفحات وب، کاربرد دارد. به کمک CSS میتوانید خصوصیاتی همچون رنگ، فونت، ابعاد، سایز، نحوه چیدمان عناصر و… را در صفحه وب تعیین کنید.
گام سوم : فراگیری Java Script
با تسلط به زبانهای HTML و CSS، قادر به طراحی صفحات وب ایستا (Static) خواهید بود. اما امروزه کاربران بیشتر از سایتهای تعاملی و پویا استقبال میکنند. جاوا اسکریپت، از محبوب‌ترین زبانهای برنامه‌نویسی برای پویا کردن سایت به‌شمار می‌رود که از شیوه‌های مختلف برنامه نویسی پشتیبانی میکند. از این زبان میتوان برای برنامه نویسی سمت سرور (Server Side)، اپلیکیشن‌های موبایل، بازی و اپلیکیشن‌های دسکتاپ استفاده کرد.
گام چهارم : فراگیری یک زبان برنامه نویسی سمت سرور مثل PHP
برنامه نویسان وب به دو دسته تقسیم می‌شوند:
- برنامه نویسان سمت کاربر (Client-Side) : به طراحی ظاهر سایت میپردازد .
- برنامه نویسان سمت سرور (Server-Side) : به پیاده سازی منطق سایت میپردازد .
برای داشتن سایتی مفید و سودمند، صرف داشتن طراحی زیبا کافی نیست، سایتها علاوه‌بر فرم و زیبایی، نیازمند محتوای صحیح و کارآمد هم هستند. سایتها باید به‌نحوی طراحی شوند که نیازهای کاربران را به‌درستی اجرا کنند.
در پروژه‌های بزرگ تحت وب استفاده از یک زبان سمت سرور ضروری است. اهمیت استفاده از یک زبان برنامه‌نویسی زمانی به‌خوبی مشخص میشود که می‌خواهیم میان کاربر، پایگاه داده و سرور ارتباط برقرار کنیم. با فراگیری php میتوانید اسکریپت‌هایی برای دریافت اطلاعات از کاربران بنویسید و بعد از پردازش این اطلاعات، آن‌ها را به کاربر برگردانید.
جمع بندی
امروزه در قرن 21 با شرایط حال حاضر کسب و کار ها و مخصوصا وجود ویروس کرونا ، هر کسب کاری نیازمند یک سایت است که بتواند خدمات خود را در فضای اینترنت ارائه دهد .
از مزیت های داشتن یک وبسایت برای کسب و کار خود میتوان به مواردی همچون :
- محدود نبودن به مکان خاص
- فراگیر بودن اینترنت و فضای مجازی
- خدمات شبانه روزی
- حذف هزینه های اضافی (چاپ تراکت و ….)
- تعامل بیشتر با مشتری
اشاره کرد .
با تشکر از همراهی شما “دیزاین موج”
