شاید به دنبال آموزش طراحی سایت هستید تا طراح وب شوید و از این راه درآمد کسب کنید، شاید هم حالا که قصد دارید برای کسب و کارتان سایتی داشته باشید دوست دارید طراحی آن هم بر عهده خودتان باشد، اما حالا که اول راه ایستاده‌اید و نمی‌دانید چه باید کرد. اینجا برای هر سوالی که در ذهن شماست پاسخی هست.
مهم نیست که برای کسب و کار خود سایت می‌خواهید یا راهنمایی نیاز دارید تا روش‌های طراحی سایت را برایتان بازگو کند؛ ما اینجاییم تا تمام روش‌هایی که می‌توان با آنها سایت طراحی کرد و منابع آموزشی و هرچیز دیگری که فکرش را بکنید در این مقاله توضیح می‌دهیم.
چه روش‌هایی برای طراحی سایت هست؟
برای طراحی سایت حتما لازم نیست زبان برنامه‌نویسی بلد باشید. خب شاید تعجب کرده باشید اما بله درست خواندید اصلا اجباری برای تحصیلات دانشگاهی در این زمینه نیست! و یا حتی متخصص برنامه نویسی !
در این مقاله قرار است مسیر طراحی وب سایت را برایتان سنگ فرش کنم و راه جاده ابریشمی را نشانتان دهم تا بدون تلف کردن وقت، نقشه راه داشته باشید و جایی اشتباهی نپیچید. 😉
ما در اینجا به یک ۲ راهی بر میخوریم؛ استفاده سایت‌سازها یا طراحی سایت با کد نویسی ؟ شما کدام را انتخاب می کنید؟ عجله نکنید در ادامه کامل در مورد جفتش صحبت می‌کنیم.
خب برای انتخاب، اول به صورت اجمالی بررسی می‌کنیم که چه تفاوتی با هم دارند و بعد مفصلا درباره هرکدام حرف می‌زنیم.
۱) استفاده از روش مدیریت محتوا آماده و راحت
فکر میکنم تا به حال اسم وردپرس به گوشتان خورده باشد، اگر خورده که چه بهتر، اگر نه بگذارید بگویم؛ wordpress مدیریت محتوایی است که شما را از نوشتن کدها برای ساختن سایت بی‌نیاز می‌کند و با استفاده از همین ماژول از پیش طراحی شده می‌توانید سایت خودتان را طراحی کنید و هیچ مشکلی برای ظاهر یا کیفیت سایتتان هم پیش نیاید. در این روش شما به جای کدنویسی کدهای از پیش نوشته شده به زبان PHP را استفاده می‌کنید که البته مدیریت محتواهای (CMS) دیگه ای هم وجود دارند مانند: umbraco, joomla, drupal ، اما من بهتون وردپرس رو پیشنهاد میکنم.
دلیلش هم این است که خیلی راحت افزونه و ماژول برای آسان شدن کار شما در دسترس هست، هم به زبان فارسی و هم انگلیسی و مورد بعدی که می شود بهش اشاره کرد بحث قالب های سایت هست که بسیاری قالب برای این مدیریت محتوا قدرتمند طراحی شده است و همیشه در حال گسترش است. در مقاله های آینده حتما در مورد تمام مزایا و معایب وردپرس برای شما صحبت خواهیم کرد.
۲) استفاده از روش اختصاصی یا کدنویسی
خب، حالا اینجاست که زبان‌های برنامه‌نویسی سر آدم هوار می‌شوند و لازم است کد نویسی بلد باشید، در این روش کوچکترین مسئولیت سایت هم با شماست و “واو” به “واو” آن را باید طراحی کنید. برای هر سایت باید از اول پنلی جدید طراحی کرد – منظور همان مدیریت محتوا یا CMS است – و هرچیزی که یک سایت نیاز دارد را به صورت دستی کدنویسی کرد.
حالا که به صورت اجمالی بررسی بر انواع طراحی سایت داشته‌ایم وقتش رسیده تا مراحل یادگیری طراحی سایت با هردوی این روش‌ها را بخوانیم و بفهمیم بهترین راه برای ما کدام است.
برای طراحی سایت با وردپرس از کجا شروع کنم؟
خیلی از سایت‌ها با ماژول‌های آماده طراحی شده‌اند و همانطور که می‌بینید حتی شخصی سازی شده هم هستند پس نگران نباشید که سایت شما شبیه رقبایتان باشد؛ فقط کافیست خلاقیت داشته باشید و حوصله، بقیه چیزها همه دست شماست. برای طراحی سایت با وردپرس باید این مراحل را به ترتیب پیش ببرید.
(یک نکته ای که لازم شد بگم اونم اینه که خیلی ها این عقیده رو دارند که سایت هایی که با وردپرس طراحی می‌شوند کپی هستند و اصلا به درد نمی‌خورند. هیچ دلیلی نداره وقتی سایت با وردپرس به راحتی راه اندازی میشود و قالب های فراوان برای اون طراحی شده حتما کپی هست. همانطور که در بالا توضیح دادیم طراح سایت می تواند با خلاقیت خود سایت را به سلیقه خود طراحی کند.)
مرحله اول: انتخاب دامنه و هاست مناسب
قبل از هر چیزی باید دامنه خود را انتخاب کنید، اسم سایت چیست؟ قرار است اسم کسب و کار چه چیزی باشد؟ قرار است چی سرچ کنند تا نتیجه‌ی سرچ سایت شما باشد؟
اگر کسب و کاری دارید و قرار است سایتی بسازید که نام سایت از همان اول مشخص است، اما اگر قرار است نامی مشخص کنید، بهتر است دامنه خیلی طولانی نباشد یا مشخصات نوشتاری خاصی نداشته باشد تا مخاطب راحت سایت را پیدا کند. و مهمترین نکته دامنه باید گویا کسب و کار شما باشد.
برای خرید دامنه هم می‌توانید از سایت‌های ایرانی و خارجی مختلفی به صورت جدا دامنه خریداری کنید، یا هاست و دامنه را همراه هم بخرید، در این حالت معمولا دامنه رایگان است و یا تخفیف دارد.
قیمت دامنه نسبت به پسوندهایی مثل .com/.ir/.net.org و… به صورت سالانه محاسبه میشود. حتما پیش از انتخاب و تایید دامنه باید مطمئن شوید این دامنه پیش از این توسط شخص دیگری انتخاب نشده باشد، برای اینکار باید دامنه را به طور کامل و با پیشوند سرچ کنید، و همچنین در سایت whois.com برای می‌توانید سرچ کنید.
هاست اصلا چی هست؟
هاست به فضای ابری سایت که به شما امکان نصب وردپرس روی دامنه، نصب تمپلیت‌ها و پلاگین‌ها و فضای بارگذاری اطلاعات گفته میشود؛ شما می‌توانید بسته به شرکتی که از آن خرید می‌کنید هاست با مدت زمان‌های متفاوت و ویژگی و قیمت‌های متفاوت به صورت یک‌ماهه، سه ماهه، شش ماهه و یک ساله تهیه کنید.
سرویس‌های هاست با توجه به ماژول مورد استفاده‌ی شما خدمات و ویژگی‌های متفاوتی مثل مدت زمان متنوع، حجم، سرعت و… ارائه می‌دهند که شما با توجه به نیاز سایت خود آنها را انتخاب می‌کنید.
بهترین روش برای انتخاب هاست و دامنه از شرکت‌های فروش این است که تمام شرکت‌ها را بررسی کنید و شرکتی که قیمت و کیفیت بهتری ارائه می‌دهد را انتخاب کنید.
از شرکت‌های ایرانی معتبری که می‌توانید از آنها دامنه و هاست خود را تهیه کنید:
ایران هاست
حدود قیمت فروش هاست در این سایت از ماهانه 500/132 آغاز و تا 366 تومان ادامه دارد، اما پرداخت‌ها باید به صورت سالیانه صورت بگیرد. بسته به هاست انتخابی، به شما بین 2 تا 20 گیگ فضا و 40 تا 200 گیگ ترافیک ماهیانه داده میشود.
ایران سرور
این شرکت 5 پلان هاست از قیمت 139 تا 309 هزارتومان به صورت پرداخت سالیانه و ماهیانه ارائه می‌دهد. حجم از 2 گیگابایت شروع و تا 50 گیگابایت ادامه دارد. تمام پلان‌ها ترافیک نامحدود دارند و تقریبا به جز فضای ارائه شده تمام ویژگی‌ها مشترک است.
هاست ایران
این شرکت 4 پلن متفاوت با ویژگی‌های پایه به شما پیشنهاد می‌کند اما نکته جالب توجه تغییر در تنظیمات است، اگر پلان‌های پایه را انتخاب کنید قیمت چیزی حدود 30 تا 156 هزارتومان به صورت ماهیانه است، اما با تغییردر تنظیمات (تمام ویژگی‌ها قابل تغییر است) قیمت محاسبه شده و به شما اعلام میشود.
میزبان فا
هاست ابری ورد پرس میزبان فا از ماهیانه 300 هزارتومان آغاز و تا 800 هزارتومان ادامه دارد. این مبلغ را می‌توانید علاوه‌بر پرداخت ماهیانه؛ به صورت سه ماهه، شش ماهه و یا یکساله پرداخت کنید. از پرداخت سه ماهه به بعد تخفیف روی قیمت اعمال میشود. فضا از 30 گیگابایت تا 240 گیگابایت است و ترافیک تمام پلان‌ها نامحدود است.
مرحله دوم: حالا نوبت نصب وردپرس است
بعد از خرید هاست و دامنه، حالا باید وردپرس را دانلود کنید و روی هاست و دامنه خود نصب کنید. پیشنهاد میکنم وردپرس را از سایت رسمی www.fa.wordpress.org دانلود کنید. بعد از نصب وردپرس روی هاست و دامنه خود حالا سایت خامی دارید که باید با توجه به نیاز خود شروع به درست کردن آن کنید.
مرحله سوم: انتخاب قالب وردپرس
قالب مورد نظر خود را با توجه به کاربری سایت (فروشگاهی، آموزشی، وبلاگ، خبری و…) انتخاب کنید. شما می‌توانید قالب‌های رایگان ارائه شده توسط خود وردپرس را دانلود کنید و یا از سایت‌های ایرانی مثل راستچین و ژاکت بخرید. سایت hamyarwp.com هم قالب‌های رایگان وردپرسی دارد که می‌توانید آنها را نیز بررسی کنید.
مرحله چهارم: انتخاب صفحه ساز
برای طراحی با ورد پرس نیاز به ابزار دارید تا روی سایت خود و تمام جوانب آن کنترل داشته باشید، ما چهار صفحه ساز پرکاربرد وردپرس و ویژگی‌های آن را به شما معرفی می‌کنیم و در آخر بهتون پیشنهاد میکنم که کدام یکی بهتر و راحت میتونید باهاش کار کنید.
- صفحه ساز قدرتمند المنتور Elementor
المنتور یکی از افزونه‌های معروف وردپرسی است که هم در حالت پرو و هم رایگان در اختیار شما قرار دارد، استفاده از این افزونه به صورت رایگان اصلا مشکلی برای شما یا سایت پیش نمی‌آورد و همچنین برای دانلود آن تنها کافیست در بخش مخزن افزونه‌ها در وردپرس عبارت ” المنتور فارسی ” را سرچ و آن را دانلود کنید، پس از دانلود به صورت خودکار روی وردپرس شما نصب خواهد شد.
برای دانلود به صورت مستقیم می توانید از سایت لینکی که برای شما قرار دادیم اقدام کنید. دانلود کنید
این افزونه قابلیت‌های زیادی دارد که شما را از دانلود کردن خیلی از پلاگین‌ها بی‌نیاز می‌کند.
پس از نصب و فعال سازی این افرونه در نوار ابزارک بالا وردپس بخشی به نام ویرایش با المنتور اضافه میشود که با کلیک بر آن می‌توانید از قابلیت‌های این افزونه استفاده کنید و صفحه خود را هر شکلی که دوست دارید طراحی کنید.
این افزونه قابلیت پشیتبانی از ووکامرس را داشته و شما در این افزونه قادر به ویرایش صفحات، صفحه‌سازی، drag & Drop دسترسی به بیش از 300 قالب ساخته شده توسط طراحان، دسترسی به بیش از 90 ابزارک و ویرایش به صورت رسپانسیو، انوع پنجره‌ساز، تم‌ساز، ویجت‌های جهانی، جلوه‌ها و افکت‌ها حرکتی و… را دارید.
- صفحه ساز Beaver Builder
یکی دیگر از صفحه‌سازهای رایگان وردپرسی است، با وجود اینکه از ووکامرس پشتیبانی می‌کند اما نسخه‌ی رایگان آن تنها 6 ماژول HTML ، عکس، ویرایشگر متن، صوتی، ویدئو و ساید بار را در اختیار شما قرار می‌دهد.
- طراحی با صفحه ساز Divi
این افزونه قابلیت پشتیبانی از ویرایش چندگانه پشتیبانی از ووکامرس را دارد و بسیار محبوب است. این افزونه مثل المنتور به شما امکان ویرایش بخش‌های مختلف مثل هدر، فوتر و بدنه سفارشی شده را می‌دهد.
همچنین شما توانایی ایجاد طرح گلوبال دارید تا هدرها و فوترهای تمام صفحات شما یکسان باشد. از قابلیت‌های این صفحه‌ساز می‌توان به Drag & Drop ، ویرایشگر بصری، CSS سفارشی، ریسپانسیو بودن، گزینه‌های طراحی مختلف، ویرایشگر متن، ذخیره و مدیریت طرح‌ها، اضافه کردن عناصر و سبک‌ها مختلف و ویرایش آنها و… اشاره کرد.
- صفحه سازی وردپرس؛ گوتنبرگ
گوتنبرگ صفحه‌ساز خود وردپرس است که نیازی به نصب آن نیست و به صورت پیشفرض روی ورد پرس قرار دارد، اما درواقع آدم‌های زیادی را نمیشناسم که از آن استفاده کنند، استفاده از آن سخت است و به اندازه المنتور قابلیت در اختیار شما قرار نمی‌دهد؛ پیشنهاد من این است که اصلا به آن اکتفا نکنید و افزونه‌ای رایگان با قابلیت‌های هرچه بیشتر نصب کنید.
حالا صفحات مختلف را با توجه به کاربری سایت ویرایش کنید، نوشته‌ها را تغییر دهید و عکس‌های دیفالت را با عکس‌های مد نظر خودتان جا به جا کنید. برای پیدا کردن عکس‌های با کیفیت می‌توانید به سایت‌هایی نظیر storyset ، freepik ، paintrest و… مراجعه کنید.
اگر دوست دارید خودتان پلاگین‌هایتان را خلق کنید یا کنترل خیلی بیشتری روی وردپرس داشته باشید پیشنهاد میکنم زبان برنامه‌نویسی PHP را یاد بگیرید. خود وردپرس با این زبان نوشته شده و همچنین زبان منعطفی هم هست.
* نتیجه گیری که تا اینجا می توان کرد این است که صفحه سازهای زیادی توی وب هستند که شما می توانید از آنها برای طراحی صفحات خود در سایت استفاده کنید اما این مورد را در نظر داشته باشید که از هر صفحه سازی که استفاده می کنید باید به صورت مداوم آپدیت های جدید در اختیار شما قرار دهد و اینکه از همه مهم تر کاربری راحت و سریعی داشته باشد. مورد دیگه ای که باید به آن توجه کنید این است که افزونه های جانبی و تکمیل کننده برای آن وجود داشته باشد تا شما بتوانید طراحی های حرفه ای تری را بسازید. من با ۵ سال تجربه در حوزه طراحی سایت، به شما صفحه ساز المنتور رو پیشنهاد میکنم که در آینده از انتخاب خود پشیمان نمی شوید. 😁
طراحی وبسایت با کد نویسی را از کجا شروع کنیم؟
در این نوع از طراحی شما باید به دو بخش frontend و backend آن توجه کنید، تفاوت این دو مدل طراحی دقیقا در همینجاست، در طراحی سایت با ماژول‌های آماده کدنویسی Backend از پیش انجام شده و شما باید فقط به بخش frontend آن توجه کنید اما در طراحی سایت با کدنویسی هر دو بخش با شماست.
۱. با کدام زبان برنامه‌نویسی شروع کنم؟
زبان HTML (Hyper text markup Language) نوع ساختار یک وبسایت را توصیف می‌کند و از دو بخش عناصر و ویژگی‌ها تشکیل شده است، تمام اجزای وبسایت‌ها بر اساس این زبان طراحی شده‌اند و درواقع شما بدون بلد بودن این زبان قادر به نمایش هیچ چیزی نخواهید بود.
۲. ظاهر سایت چه؟
حالا که ستون‌های سایت را بنا کردید وقتش آن است که کمی زیبایی به آن اضافه کنید، یعنی وقت آن است که CSS (Cascading Style Sheet) را آموخته و به سایت خود روح ببخشید. بدون بلد بودن این زبان نمی‌توانید به سایت ظاهر مناسبی دهید؛ در نتیجه ملزم به یادگیری این زبان نیز هستید.
۳. چطور ضعف‌های این دو زبان را بپوشانم؟
الان نوبت java Script است که وارد عمل شود، این زبان تمام نقطه ضعف‌ها و کاستی‌های دو زبان قبلی را از بین می‌برد و ترکیب این سه زبان یک صفحه قدرتمند با قابلیت‌هایی جذاب و جالب است. JS زبانی هم برای backend و هم frontend بوده و بسیار شبیه به C# و C++ است.
۴. حالا نوبت…؟
حالا که تمام زبان‌های سمت کاربر را یاد گرفته‌ایم وقش رسیده تا زبانی سمت سرور را یاد بگیریم؛ تمام زبان‌هایی که تا الان یاد گرفته‌ایم برای ایجاد صفحه‌ای استاتیک یا ایستا مناسب است –صفحاتی که زیاد نیاز به تغییر ندارند و معمولا ثابت می‌مانند- این زبان open source و مورد استفاده تمامی سایت‌هاست به طوری که ورد پرس با آن نوشته شده و همانطور که می‌دانیم محبوب‌ترین سیستم مدیریت محتوا را دارد.
۵. jQuery که زبان برنامه نویسی نیست!
بله jQuery زبان برنامه نویسی نیست اما چون یک کتابخانه جاوا اسکریپتی است و می‌تواند سایت شما را خیلی قدرتمند کند. اگر این زبان را بلد باشید کار با JS خیلی سریعتر و ساده‌تر خواهد بود.
۶. باز هم زبانی هست؟
با عرض شرمندگی بله، هنوز یکی دیگه مانده، اگر بخواهید PHP را یاد بگیرید برای ارتباط بین پایگاه داده‌ها نیاز دارید زبان SQL را هم بلد باشید؛ این زبان یکی از محبوب‌ترین ارتباط دهنده‌ی بین پایگاه داده‌ها بین طراحان سایت است. حالا جالب اینجاست SQL محدود به زبان خاصی نیست و بیشتر برنامه‌نویس‌ها و طراحان سایت نیاز دارند تا این زبان را بلد باشند.
منابع آموزشی برای زبان‌های برنامه نویسی داریم؟
حقیقتش را بگویم این روزها چیزی که زیاد است منابع آموزشی است همه می‌خواهند چیزی به ما یاد بدهند؛ حالا ما برخی از این منابع آموزشی (هم منابع رایگان و هم دوره‌های پولی) را که واقعا تاثیری دارد به شما معرفی می‌کنیم.
همیشه به اطرافیانم می‌گویم؛ بهترین معلم را می‌خواهید؟ یوتیوب در خدمت شماست، اینترنت را روشن کنید و وارد اپ شوید کافیست تا هزاران ویدیو مرتبط با موضوعی که سرچ کرده‌اید انتخاب کنید و تصمیم بگیرید کدام یک از این آموزش‌ها بیشتر برایتان تاثیر دارد. خب چنل‌های یوتیوب که یکی دو تا نیست که از بین آنها بشود به راحتی انتخاب کرد؛ من چندتایی را می‌شناسم چون بین خودمان می‌ماند به شما هم معرفی میکنم.
دوره های رایگان
- 4rahecomputer
- Zohre movahedi
- المنتور فارسی
دوره های پولی یا غیر رایگان
- آکادمی آی‌تی
- learnparsi
- همیار آکادمی
- آکادمی آمانج
مقایسه طراحی سایت با کدنویسی و وردپرس
وقت آن رسیده که این دو مدل طراحی سایت را باهم مقایسه کنیم!
طراحی سایت با وردپرس و سایت‌سازهای آماده مدت زمان کمتری وقت می‌برد؛ می‌توانم برآورد کنم که بین 3 روز تا یک‌هفته می‌توانید آموزش ببینید و همزمان سایت خود را طراحی کنید و همچنین از نظر قیمت، اگر فقط برای طراحی سایت هزینه پرداخت کنید، به جز هزینه اینترنت برای بحث آموزش چیزی حدود 400 تا دو میلیون تومان (بسته به انتخاب هاست، پرداخت ماهانه یا سالیانه و…) هزینه در بردارد و اگر دوره‌هایی شرکت کنید بسته به آکادمی و هزینه‌ی دوره این قیمت افزایش خواهد داشت، البته اگر نیاز به برآورد دقیق زمان دارید به مقاله‌ی مدت زمان یادگیری طراحی سایت مراجعه کنید.
یادگیری زبان‌های برنامه‌نویسی قدرت سایت شما، تبحر و قیمت دریافتی از کارفرما را بالا می‌برد، اما زمان طراحی سایت و آموزش بیشتر خواهد بود. اگر قصد یادگیری به صورت خود آموز را دارید که یوتیوب اما اگر قصد شرکت در دوره‌های مختلف را دارید باید برای یادگیری به ترتیب 6 زبان مختلف زمان صرف کنید.
در آخر
هر دوی این روش‌ها کارآمد است هرکدام مزایا و معایب خاص خودش را دارد، اما هریک که انتخاب شما بود؛ بهتر است برای هر قسمت طراحی از خرید دامین و هاست تا طراحی هدر چند ویدئو ببینید، چند سایت از سایت‌های رقبا را بررسی کنید و مقاله بخوانید تا تمام جوانب را بلد باشید و تا جای ممکن تسلط داشته باشید.
اینکه قصد دارید اینکار را بدون تحصیلات دانشگاهی انجام دهید اصلا غیر ممکن نیست، فقط کمی حوصله و زمان نیاز است تا آموزش‌ها را با دقت ببینید و پیاده کنید. ما هم اینجاییم تا هر سوالی داشتید پاسخ دهیم. 🙂
