فرابین پندار ، طراحی سایت در تبریز ، سئو وب سایت

۱۳۹۸
طراحی وب را از کجا شروع کنم ؟

طراحی وب را از کجا شروع کنم ؟


طراحی وب را از کجا شروع کنم ؟

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

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

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

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

و یا برایش سوال است که چطور وقتی روی دکمه خاصی کلیک می کند یک سری فرآیند ها برای او اجرا می شوند .

در قدم اول باید گفت طراحی وب در اصل به دو قسمت تقسیم می شود :

  • طراحی وب ( فرانت اند – frontend )
  • برنامه نویسی وب ( بک اند – backend )

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

طراحی وب شامل طراحی صفحات داخلی و نمای کاری است که کاربر آن را می بیند . این صفحات می توانند شامل تصاویر ، متن ها ، اسلایدر ، منوها ، فرم ها و … باشند .

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

چرا که لازم است تا طرح اولیه را پیاده سازی کنیم تا سایر کارها روی آن انجام شود .

برای فرانت اند یا همان طراحی سمت کاربر که به آن  ui هم گفته می شود ، لازم است تا حداقل با سه زبان آشنا باشیم و آن ها را به شکل کامل یاد بگیریم . این زبان ها کدام هستند : Html , Css , jQuery .

البته در طراحی وب زبان های Html , Css زبان برنامه نویسی نیستند و به این دو زبان نشانه گذاری گفته می شود چرا که اصولا تعریف متغیر در آن ها ممکن نیست و این دو به زبان نشانه گذاری صفحات وب معروف هستند .

به کمک این دو زبان نشانه گذاری و با ایجاد نشانه های مختلف در صفحه می توانیم انواع اشکال داخل صفحه را ایجاد کنیم .

البته می توان با زبان هایی مثل Less و یا Sass زبان Css به زبان برنامه نویسی در طراحی وب تغییر داد و داخل آن متغیر تعریف کرد که خروجی حاصل از آن دو زبان هیچ فرقی با خروجی زبان Css نخواهد داشت .

اصولا برای کدنویسی کمتر و مدیریت بهتر کدها به کار می روند و در مرحله اول لازم نیست شما آن را فرا بگیرید و همین Css برای شما کافی خواهد بود .

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

یادگیری زبان Html برای طراحی وب قدم اول است !

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

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

قدم دوم طراحی وب 

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

کاملا هم درست است چرا که ما هنوز برای طرح بندی و اصطلاحا دیزاین صفحات از هیچ زبانی استفاده نکرده ایم .

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

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

اینجاست که در طراحی وب شما با زبان Css آشنا خواهید شد و مثل یک طراح هر المانی را خواستید در هرجای صفحه قرار می دهید .

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

زبان Css با استفاده از سیستم تقسیم بندی یا همان Div کار می کند و شما میتوانید صفحات خود را به راحتی تقسیم بندی کنید و طرح های خود را پیاده کنید .

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

البته یادگیری خوب نیازمند منابع خوب است وگرنه وقت شما تلف خواهد شد !

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

طراحی وب

نمونه ای از طراحی صفحات وب توسط Css

قدم سوم طراحی وب

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

اما چرا در طراحی وب ما JQuery یاد میگیریم ؟

اگر شما اول به سراغ جاوا اسکریپت بروید و سپس کتابخانه جی کوئری را یاد بگیرید خواهید دید که چطور چندین خط کدهای طولانی در جاوا اسکریپت تبدیل به یک خط کد ساده در جی کوئری شد و لذت برنامه نویسی را تجربه خواهید کرد .

اما کاربرد جی کوئری در طراحی وب چیست ؟ شما ممکن است در وب سایت های مختلف عناصری دیده باشید که به نوعی در حال تغییر مداوم هستند .

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

ما برای پیاده کردن این عناصر و در واقع زنده سازی صفحات وب خودمان نیاز داریم تا از این کتابخانه استفاده کنیم .

در طراحی وب شما می توانید خودتان هم با زبان جی کوئری مواردی مثل اسلایدر ، تب ، منو و.. را پباده سازی کنید .

اما امروزه طراحی وب قدری راحت تر شده که خود جی کوئری با ارائه برخی کتابخانه ها مثل jQuery Ui  و با jQuery Mobile این امکان را به شما داده است تا اگر دانش جی کوئری هم نداشتید با رعایت یکسری قوانین خاص بتوانید این المان ها را در صفحه پیاده کنید .

قدم نهایی در طراحی وب ( فرانت اند )

قدم بعدی که شما به عنوان یک طراح باید بردارید تا دامنه فعالیت های شما کامل تر شود یادگیری فریم ورک ها Framework است .

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

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

دوما سرعت کدنویسی ما بیشتر و بیشتر شود و پروژه های زیادی را بتوانیم مدیریت کنیم .

فریم ورکی که برای طراحی وب در بخش فرانت باید حتما یاد بگیریم فریم ورک محبوب Bootstrap (بوت استرپ) می باشد که طراحی رسپانسیو و واکنشگرای صفحات را برای ما ممکن می سازد و یادگیری آن بعد از اینکه سی اس اس را یاد گرفتید بسیار روان و راحت است و به سرعت آن را یاد خواهید گرفت .

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

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

web design


شرکت فرابین پندار، طراحی سایت در تبریز، طراحی سایت، سئو سایت، پشتیبانی سایت، طراحی اپلیکیشن

با ما در تماس باشید

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

فرابین پندار تبریز

فرابین پندار تبریز | طراحی ، اجرا ، سئو و پشتیبانی وب سایت