مقدمه

طراحی وب یک کار زیبا و هنری است. چنانچه قصد یادگیری طراحی سایت به صورت حرفه ای برای کسب درآمد، یا فقط برای علاقه مندی را دارید این مطلب را تا انتها مطالعه کنید؛ در این مطلب از کاسپریا، ارائه دهنده خدمات طراحی سایت تمام مواردی که برای یادگیری طراحی سایت به صورت حرفه ای لازم است از ابتدا تا انتها توضیح داده خواهد شد. از یادگیری زبان های HTML و CSS گرفته تا زمان مورد نیاز برای یادگیری طراحی وب، همگی به طور کامل در این مطلب توضیح داده شده است. 
حتی اگر قصد یادگیری طراحی سایت به صورت حرفه ای را ندارید و فقط مایلید یک سایت ساده (شخصی، شرکتی یا فروشگاه) راه اندازی کنید، در ابتدای این مطلب این مورد هم توضیح داده شده است، به طوری که هر شخصی با کمی مهارت در بکارگیری مرورگر اینترنت و زبان انگلیسی، با کم ترین هزینه ممکن می تواند یک سایت برای خود راه اندازی کند. 
عبارت های "طراحی وِب"، "طراحی سایت" و غیره همگی به یک کار اشاره دارند و هم معنی هستند؛ ولی در اصل "طراحی وب" یا به انگلیسی "Web Design" صحیح ترین عبارت برای این کار است. منبع عکس: 2440Media

پیش نیازهای یادگیری طراحی وب

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

راه اندازی سایت به صورت ساده و سریع

برای راه اندازی یک سایت ابتدا باید یک دامِین (به فارسی دامَنه) برای سایت ثبت شود، دامین همان آدرس سایت است، به عنوان مثال google.com یک آدرس دامین است. و بعد خرید Host. هاست به معنی فضایی است که فایل های سایت مانند فایل های کدنویسی و برنامه نویسی شده، تصاویر، ویدیوها و غیره روی آن نگهداری می شوند و زمانی که کاربر آدرس سایت (به انگلیسی Domain) را در مرورگر خود تایپ می کند این فایل ها توسط مرورگر کاربر از سِرور Host دریافت شده و در مرورگر نمایش داده می شوند. پس از خرید هاست و دامین باید این دو را به هم متصل نمود، یعنی آدرسی که برای سایت ثبت شده است را به هاست خریداری شده متصل کرد که نحوه این کار در سایت شرکت های ارائه دهنده این خدمات توضیح داده شده است. هزینه هاست و دامین به صورت سالیانه و آنلاین پرداخت می شود که بسته به نوع آدرس مورد ثبت، و میزان فضا و پهنای باند خریداری شده برای هاست، متغیر خواهد بود که البته برای راه اندازی یک سایت ساده معمولاً گزینه های با هزینه پایین کافی است. برای خرید و تهیه هاست و دامین می توانید عبارت های "ثبت دامین" و "خرید هاست" را در گوگل سرچ کنید. 
حالا پس از تهیه هر دو مورد و اتصال این دو به یکدیگر با نصب یک سیستم مدیریت سایت مانند WordPress می توانید یک سایت ساده راه اندازی کنید. وردپرس یک نرم افزار تحت وب رایگان است که از زبان فارسی نیز پشتیبانی می کند و با نصب این سیستم روی هاست خریداری شده (برای این کار هاست لینوکس خریداری کنید) کاربر یک وب سایت ساده با تمام قابلیت های مورد نیاز مانند ساخت صفحات مختلف، ارسال مطلب، ایجاد دسته بندی، عضویت کاربران و غیره را در اختیار خواهد داشت. کاربر با نصب قالب های مختلف روی وردپرس می تواند طراحی و شکل شمایل سایت خود را تغییر دهد و با نصب پلاگین های مختلف می تواند قابلیت های جدید به سایت خود اضافه کند به عنوان مثال با نصب پلاگین Contact Form 7 می تواند یک فرم تماس (یا هر فرم دیگری) به سایت خود اضافه نماید و یا با نصب پلاگین WooCommerce می تواند سایت خود را به یک فروشگاه اینترنتی تبدیل کند. وردپرس هزاران قالب و پلاگین مختلف دارد. برای نصب وردپرس عبارت "آموزش نصب وردپرس" را سرچ کنید.

یادگیری HTML

زبان HTML (اِچ تی اِم اِل) مبنای صفحات وب و اینترنتی است و البته اولین زبانی است که برای یادگیری طراحی سایت باید فرا گرفته شود. زبان اِچ تی اِم اِل برای تعریف عناصر و بخش های مختلف در صفحه به کار گرفته می شود. هر صفحه و وب سایت اینترنتی معمولاً از بخش های مختلفی مانند هِدِر (بخش بالای سایت شامل لوگو، منو و غیره)، بخش سایدبار (بخش کناری سایت معمولاً شامل تبلیغات، لینک های مختلف مانند دسته بندی، مطالب پربازدید و غیره)، بخش محتوا (شامل متن و محتوای اصلی سایت) و بخش فوتر (که در انتهای صفحه قرار می گیرد و شامل متن کپی رایت و لینک های مختلف است) بوده که این تقسیم بندی ها با استفاده از زبان HTML تعریف شده و سپس با زبان CSS شکل و شمایل آن تعریف می شود. 
HTML مجموعه ای از ده ها تَگ مختلف است که هر یک برای تعریف چیز خاصی در صفحه بکار برده می شوند؛ به عنوان مثال از چند تگ برای تعریف بخش های مختلف و تقسیم بندی صفحه، از یک تگ برای درج متن، از تگ دیگری برای درج تصویر، از چند تگ برای ایجاد فرم، فیلد و دکمه ارسال و دیگر موارد استفاده می شود.

یادگیری CSS

زبان سی اِس اِس برای ایجاد ظواهر، شکل و شمایل اجزائی است که با HTML تعریف شده است. به عنوان مثال اینکه رنگ پس زمینه چه رنگی باشد، حاشیه و کادر دور آن چقدر ضخامت و چه رنگی باشد، فاصله اجزاء از یکدیگر چه مقدار باشد، متن آن چه رنگی داشته باشد، فاصله بین خطوط چقدر باشد، بخش مورد نظر در سمت چپ صفحه باشد یا راست، اندازه عنوان و متن های صفحه چقدر باشد و تقریباً هر موردی که مربوط به ظواهر و شکل و شمایل اجزاء مختلف است با استفاده از زبان سی اس اس کدنویسی خواهد شد. 
پس از یادگیری زبان HTML برای تعریف بخش ها و اجزاء مختلف در صفحه، و زبان CSS برای تعریف شکل و شمایل اجزاء تعریف شده با HTML، شخص تا همین جا با یادگیری همین دو زبان می تواند وب سایت طراحی کند. البته وب سایت اِستاتیک (Static). استاتیک به این معنی که فقط یک صفحه ثابت است و پنل و صفجه مدیریتی ندارد یعنی به عنوان مثال برای ویرایش عنوان و یا متن صفحه، این ویرایشات باید از طریق تغییر در کدنویسی، ذخیره و آپلود مجدد روی سرور انجام شوند. همچنین وب سایت های استاتیک قابلیت هایی مانند ارسال مطلب، ساخت صفحه، عضویت کاربران، آپلود فایل، پرداخت آنلاین و غیره را ندارند و برای این کار باید از یک زبان سِرور ساید (Server-Side) استفاده نمود که به این مدل از سایت ها Dynamic یا به فارسی پویا گفته می شود. اکثر طراحی سایت ها به صورت داینامیک بوده و از وب سایت های استاتیک فقط در مواردی مانند وب سایت های موقت یا وب سایت هایی که نیاز به بروزرسانی ندارند استفاده می شود. توضیحات مربوط به یادگیری زبان سرورساید در ادامه این مطلب آمده است.

یادگیری JavaScript

زبان جاوا اِسکریپت یک زبان برنامه نویسی Client-Side یا به فارسی، سَمت کاربر است؛ به این معنی که کدهای آن از طریق مرورگر کاربر دریافت شده و توسط خود مرورگر نیز اجرا می شوند. و این بر خلاف زبان Server-Side بوده که در ادامه توضیح داده شده است. در زبان Server-Side کدها در سرور سایت پردازش و اجرا شده و کاربر فقط نتیجه آن را مشاهده خواهد کرد.
کاربرد جاوا اسکریپت در طراحی وب گسترده و برای طراحی سایت های حرفه ای لازم است. کاربرد جاوا اسکریپت معمولاً در اعتبار سنجی فرم ها، ایجاد واکنش ها و رخدادهای مختلف، ارسال درخواست های اِیجَکس (Ajax)، ایجاد اسلایدشو تصاویر و بسیاری موارد دیگر است. 
برای توضیح موارد بالا این طور می توان گفت که اگر فرم تماسی را با استفاده از HTML تعریف، و با سی اس اس شکل و شمایل آن مشخص شده باشد، با استفاده از جاوا اسکریپت می توان بررسی نمود که آیا کاربر تمام فیلدهای مورد نظر مانند نام، ایمیل، موضوع، شماره تماس و متن را پر کرده است یا خیر. اگر یکی از فیلدها خالی بود می توان متنی را نمایش داده که پرکردن این فیلد لازم است. یا می توان بررسی کرد که آیا کاربر آدرس ایمیل خود را به صورت صحیح وارد کرده است یا خیر، و اگر کاربر چیزی شبیه aaa.bbb.ccc وارد نمونه بود پیامی مبنی بر وارد کردن ایمیل صحیح نمایش داده شود. یا اگر شماره تماس را به صورت aaa وارد نموده بود با نمایش پیامی از کاربر درخواست شود تا برای شماره تماس فقط از عدد استفاده نماید. حالا وقتی کاربر روی دکمه ارسال کلیک می کند می توان این درخواست را به صورت اِیجکس به سرور ارسال نمود یعنی بدون رفرش صفحه. این مورد در بسیاری از سایت های مختلف قابل مشاهده است به این صورت که کاربر با کلیک بر روی دکمه ای یک تصویر کوچک و چرخنده را مشاهده می کند و پس از لحظاتی نتیجه درخواست نمایش داده خواهد شد.

یادگیری زبان سِروِرساید

زبان Server-Side به زبان برنامه نویسی تحت وبی گفته می شود که کدهای آن توسط سرور پردازش شده و نتیجه آن به مرورگر کاربر ارسال می شود و کاربر کدهای اصلی را نخواهد دید. کاربرد زبان سرور ساید برای برنامه نویسی قابلیت هایی مانند دریافت و ذخیره اطلاعات مختلف (مانند پست، ثبت سفارش و نظرات) از کاربر در دِیتابِیس (یعنی بانک اطلاعاتی و محل ذخیره اطلاعات سایت)، آپلود فایل، ارسال ایمیل، پرداخت آنلاین و اینگونه موارد. 
برای طراحی وب سه زبان CSS ،HTML و JavaScript معادل و جایگزینی ندارند و مبنای صفحات وب هستند ولی در مورد زبان سرورساید گزینه های مختلفی قابل استفاده است. دو زبان تحت وب PHP و ASP.NET معمولاً دو انتخاب اصلی برای یادگیری هستند. PHP یک زبان برنامه نویسی تحت وب اُپِن سورس، رایگان و فراگیر است که حدود 80 درصد سایت های اینترنتی از این زبان استفاده می کنند. در مقابل ASP.NET از شرکت مایکروسافت است که رایگان نیست و درصد استفاده بسیار کمتری نسبت به PHP دارد. ASP.NET یک زبان برنامه نویسی تحت وب نیست بلکه بخشی از فریم ورک NET Framework. (دات نت فِریم وُرک) بوده که معمولاً با زبان دیگری از مایکروسافت به نام #C (سی شارپ) بکارگرفته می شود. PHP رایگان بوده و دارای منابع یادگیری بسیاری بیشتری نسبت به ASP.NET است، همچنین به دلیل گستردگی استفاده از پی اِچ پی، این زبان معمولاً دارای مشتریان بیشتری نیز است. در مقابل ASP.NET ساختار و سبک کدنویسی منظم تری نسبت به PHP دارد ولی به دلیل پیچیده تر بودن نسبت به پی اِچ پی یادگیری آن نیازمند زمان بیشتری است. 
همچنین PHP زبان برنامه نویسی سیستم مدیریت سایت WordPress که در ابتدای مطلب توضیح داده شد است. وردپرس یک سیستم مدیریت سایت بسیار پرمخاطب است که تمام قابلیت های پایه یک وب سایت مانند ارسال مطلب، ایجاد صفحه، ایجاد دسته بندی، آپلود فایل و غیره را در اختیار کاربر قرار می دهد و طراحان وب آن را مبنای کار خود قرار می دهند و به این صورت دیگر نیاز نیست برای طراحی و راه اندازی هر سایت تمام قابلیت های مورد نیاز را از ابتدا کدنویسی کنند که این خود باعث کاهش زمان و هزینه برای طراحی و راه اندازی یک وب سایت است.
در این مطلب با توجه به توضیحات بالا، یادگیری زبان PHP توصیه می شود. از نظر از قدرت و سرعت هر دو این زبان ها در یک سطح هستند و برتری خاصی نسبت به یکدیگر ندارند. ولی نهایتا انتخاب با خود شخص است.

یادگیری اصول طراحی

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

یادگیری تبدیل PSD به HTML

برای طراحی، برخی ترجیح می دهند طراحی خود را در مرورگر و نرم افزار کد ادیتور انجام داده و با انجام ویرایشات مختلف طرح را نهایی کنند. در مقابل برخی ترجیح می دهند که طراحی خود را در نرم افزار فتوشاپ انجام داده و سپس آن را کدنویسی کنند. به این کار تبدیل PSD به HTML (و معمولاً سپس وردپرس) گفته می شود. تبدیل PSD به HTML با استخراج و برش بخش های مختلف مانند لوگو و آیکان ها، و پس زمینه ها که معمولاً با کدنویسی قابل اجرا نیستند آغاز شده و سپس شخص با نگاه کردن به طرح PSD کدنویسی آن را شروع می کند. آنچه که در تبدیل PSD به HTML بسیار مهم است این است که طرح کدنویسی شده باید تا %99 با طرح اصلی مطابقت داشته باشد. تبدیل PSD به HTML نیازمند مهارت بالایی در کدنویسی HTML و CSS است.

یادگیری اصول سئو

اصول سئو یا به انگلیسی SEO (در انگلیسی اِس ای اُ خوانده می شود) به معنی رعایت اصولی است که نتیجه آن دریافت بازدیدکننده و مشتریان بیشتر در عبارت های مورد نظر و جستجو شده توسط کاربران از موتورهای جستجو به ویژه گوگل است. اصول سئو جزو طراحی وب محسوب نمی شود ولی یادگیری آن برای طراحی سایت به صورت حرفه ای به ویژه برای مشتریان لازم است. برخی از اصول سئو اثبات شده هستند و برخی دیگر فقط برمبنای حدس و گمان، چراکه گوگل برای جلوگیری از تقلب و پایین آمدن کیفیت نتایج جستجو هرگز الگوریتم ها و نحوه رتبه بندی سایت های مختلف را توضیح نمی دهد. از جمله مهم ترین اصول سئو می توان به انتخاب عنوان خوب و دقیق برای صفحات، بکارگیری کلمات و عبارت مورد جستجوی کاربران در متن صفحه و دریافت بَک لینک از سایت های دیگر است. 
همچنین بیشتر مشتریان سفارش طراحی سایت از طریق گوگل وارد سایت می شوند، پس برای کسب درآمد این برای شخص بسیار مهم است که یک وب سایت بهینه برای عبارت های مورد نظر داشته باشد. 
برای یادگیری اصول سئو می توان از سایت Moz استفاده کرد. برای ورود به راهنمای یادگیری سئو سایت Moz اینجا کلیک کنید.

معرفی سایت، فیلم و کتاب برای یادگیری طراحی سایت

در بالا توضیح داده شد که برای طراحی وب نیاز به یادگیری HTML برای تعریف اجزاء و بخش های مختلف، CSS برای تعریف شکل و شمایل اجزاء HTML، و JavaScript برای ایجاد قابلیت های مختلف در مرورگر کاربر و یک زبان سرورساید مانند PHP برای برنامه نویسی قابلیت های مختلف لازم است. 
برای یادگیری تمام موارد بالا می توان از سایتی به نام W3Schools.com استفاده نمود. این سایت شامل آموزش های کامل و خوبی به زبان انگلیسی بوده و دارای توضیحات و مثال های گوناگونی است. با ورود به صفحه اصلی این سایت می توان به مطالب مورد نیاز دسترسی پیدا کرد که البته نیازی به هیچگونه عضویت و یا هزینه ای ندارد. همچنین این سایت دارای بخش هایی در بین مطالب است که کاربر می تواند کدهای توضیح داده شده را داخل مرورگر اجرا و ویرایش نماید و نحوه کار آنها را مشاهده کند. 
در مورد فیلم های آموزشی کدنویسی و طراحی وب، می توان از فیلم های آموزشی Lynda.com و TutsPlus.com استفاده نمود. البته فیلم های آموزشی موجود در این سایت رایگان نیستند بلکه برای استفاده باید اشتراک این سایت ها را خریداری نمود ولی با توجه به محدودیت های موجود در ایران، تقریباً تمام فیلم های آموزشی این دو در سایت های مختلف قابل دانلود کردن هستند. به عنوان مثال عبارت "دانلود آموزش Lynda HTML" را جستجو کنید. 
در مورد کتاب هم کتابی با عنوان HTML & CSS: Design and Build Web Sites برای یادگیری HTML و CSS وجود دارد که می توان از آن نیز استفاده نمود. البته امکان خرید این مورد هم در ایران وجود ندارد ولی لینک دانلود آن در سایت های مختلف قابل دسترسی است. البته نسخه چاپی این کتاب های انگلیسی برنامه نویسی و طراحی وب در برخی از کتاب فروشی های تهران میدان انقلاب قابل تهیه است. 
در مورد آموزش های به زبان فارسی نیز می توانید جستجو کنید ولی موارد به زبان انگلیسی به ویژه این چند موردی که در بالا توضیح داده شد توصیه می شود چراکه آموزش ها کاملاً بروز، استاندارد و بدون هزینه بوده و البته ضمن یادگیری باعث تقویت زبان انگلیسی نیز خواهند شد.

زمان مورد نیاز برای یادگیری طراحی وب

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

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

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

جمع بندی

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