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

طراحی وب چیست

در مقاله ای به نام برنامه نویسی چیست، درباره‌ی برنامه نویسی توضیحات ساده‌ای را ارائه دادیم. در این فایل آموزشی میخواهیم به این سوال پاسخ دهیم: طراحی وب سایت چیست

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

وب چیست؟

اگر بخواهیم به سوال طراحی وب چیست پاسخ بدهیم، اول باید بدانیم که وب چیست و به چه چیزی وب میگویند. در زیر یک تعریف بسیار ساده (و شاید تا حدودی اشتباه از لحاظ فنی) از وب ارائه میدهیم:

وب یا همان شبکه جهانی یا World Wide Web که به اختصار www نامیده میشود، همان چیزی است که امروزه به آن اینترنت میگوییم. امروزه از طریق یک مرورگر و با اتصال به این شبکه‌ی جهانی، میتوانیم به تمام اطلاعات درون آن دسترسی داشته باشیم.

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

وب سایت چیست؟

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

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

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

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

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

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

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

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

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

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

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

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

طراح وب کیست و چه وظایفی دارد؟

تا اینجا درباره‌ی طراحی وب صحبت کردیم و الان پاسخ دادن به سوال « طراحی وب چیست » برایمان کار زیاد سختی نیست. حالا میخواهیم درباره‌ی وظایف یک طراح وب صحبت کنیم و بگوییم که یک طراح وب چه کاری باید انجام دهد.

طراح وب یا به اصطلاح Front End Designer کسی است که با استفاده از تکنولوژی‌های مختلف (مثل HTML – CSS – Javascript و … ) ظاهر یک سایت را طراحی میکند و کاری به کدهای پشت صحنه ندارد.

ممکن است برایتان سوال پیش بیاید که Front End چیست و چه تفاوتی با Back End دارد. سوال بسیار خوبی است که در فیلم و مقالات آموزشی آینده حتما درباره آن صحبت میکنیم.

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

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

یک طراح وب، برای اینکه بتواند یک صحفه‌ی وب را طراحی کند، از تکنولوژی های زیر استفاده میکند:

• HTML (یا HTML5)
• CSS (یا CSS3)
• جاوا اسکریپت
• جی کوئری
• و…

۴ موردی که در بالا نام بردیم، حداقل دانشی است که شما برای طراحی صفحات وب و تبدیل شدن به یک طراح وب نیاز دارید. البته میتوانید فقط با ۲ مورد اول یعنی HTML و CSS نیز سایت هایی را طراحی کنید،‌ ولی جاوا اسکریپت و جی کوئری میتوانند به کار شما بسیار قدرت دهند.

باید به این نکته توجه کنیم که به دلایلی نمیتوانیم به HTML و CSS زبان های برنامه نویسی بگوییم. زیرا اصلا ویژگی های زبان های برنامه نویسی را ندارند. بلکه آن‌ها را  زبان های نشانه گذاری یا تگ گذاری میدانیم.

برای طراحی وب به چه ابزارهایی نیاز داریم

تا اینجا سعی کردیم به سوال طراحی وب چیست پاسخ دهیم. حالا میخواهیم ببینیم که برای طراحی وب به چه ابزارهایی نیاز داریم.

برای طراحی صفحات اینترنتی، نیاز به داشتن امکانات پیچیده نیست. حداقل هایی که نیاز داریم را در زیر مشاهده میکنید:

• یک محیطی که بتوانیم کدهایمان را در آن بنویسیم. این محیط میتواند Notepad ویندوز باشد و یا یک Text Editor یا IDE حرفه‌ای تر(مثل phpStorm)
• یک مرورگر اینترنتی (Browser) که بتوانیم کدهایمان را از طریق آن اجرا کنید (مثل فایرفاکس، گوگل کروم و…)