راهنمای جامع طراحی سایت

وب سایت ها امروزه به بخش جدایی ناپذیر کسب و کار های اینترنتی تبدیل شده اند.

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

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

من حمید خوشدست ( نویسنده راهنمای جامع طراحی سایت) بعد از تجربه های مختلفی که تو پروژه های مختلف طراحی سایت داشتم، سعی کردم تا این راهنمای گام به گام رو تدوین ( بیشتر با استفاده از تجارب شخصی و کمی هم استفاده از منابع معتبر ) کنم تا شاید بتونه راهنمای خوبی باشه برای پروژه های طراحی سایت شما

اگه قبلا یک پروژه طراحی سایت رو اجرایی کردید و به نتیجه مطلوب نرسیدید…

اگه معمولا در اواسط راه پروژه هاتون دچار سردرگمی میشید.

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

تصویر اصلی راهنمای طراحی سایت جامع

هدف از طراحی وب سایت

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

اگر به هر دلیلی به سایت به عنوان یک کالای لوکسه در ویترین کسب و کارتان نگاه میکنید که فعلا داشته باشیم تا بعدا ازش استفاده کنیم،از طراحی سایت صرف نظر کنید!!!

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

بدون هدف و استراتژی وبسایت شما خیلی زود تبدیل به یک بروشور آنلاین که تاریخ انقضای آن گذشته است تبدیل میشود.

اگه میخواید بدونید دقیقا منظورم از هدف و استراتژی چیه این مطلب رو تا انتها دنبال کنید.

پیدا کردن هدف از طراحی سایت

هدف از  طراحی سایت

پیش از هر چیزی باید بدونید که وب سایت یک ابزاره.

ینی چی؟

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

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

وب سایت هم میتونه در اهداف خیریه،کسب و کار،کلاهبرداری ، اهداف سیاسی اجتماعی و … استفاده بشه.

پس قبل از هرچیزی به این فکر کنید که سایت رو با چه هدفی راه اندازی میکنید.

بزارید یه مثال براتون بزنم:

فرض کنیم یک شرکت داریم که آژانس دیجیتال مارکنیگ داریم.

سایت میتونه برای این شرکت در دستیابی به چند هدف کمک شایانی بکنه:

  1. معرفی خدمات: یک سایت برای  یک شرکت دیجیتال مارکتینگ میتونه در ابتدایی ترین نقش خود معرف خدمات و لیست سرویس هایی است که این شرکت به مخاطبان خود ارائه میدهد.
  2. بازاریابی و فروش : همین وب سایت میتونه با کار بر روی محتوا، همچنین حضور موفق در موتورهای جست و جو به بازاریابی و جذب مخاطبان جدید و احتمالا فروش خدمات و محصولاتش منجر بشه.
  3. برندینگ: یک وب سایت  با رابط کاربری (Ui) مناسب ، تولید محتوای دست اول ، اعلام اخبار حضور در رویداد های مختلف و … میتواند به برندینگ مجموعه خود کمک شایانی کند.
  4. آموزش: یک وبسایت دیجیتال مارکتینگ میتواند با برگزاری دوره های آنلاین و  فروش دوره های مختلف داخل پنل کاربری کاربران خود،گامی در راستای آموزش نیز بردارد.

مثال های متنوعی میتوان مانند مثال بالا بررسی کرد که در آن اهداف گوناگونی را برای یک سایت در نظر گرفت.

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

انتخاب پلتفرم مناسب طراحی سایت

اگر کمی در مورد طراحی سایت و انواع روش های آن تحقیق کرده باشید حتما این کلمات برای شما آشنا هستند :

  • وردپرس
  • جوملا
  • طراحی سایت قالب آماده
  • استفاده از سایت ساز ها
  • طراحی سایت اختصاصی
  • طراحی سایت با asp.net
  • طراحی سایت با لاراول
  • و …

خب شما هم با این عبارت ها آشنا هستید؟

انتخاب بین این موارد دغدغه شما هم تبدیل شده است؟

پس  ادامه این مطلب رو با ما همراه باشید….

انتخاب پلت فرم مناسب برای طراحی سایت

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

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

به طور کلی دو مدل دسته بندی برای انواع سایت داریم.

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

این نوع از تقسیم بندی کاملا اشتباه است.( حداقل شیوه بیان اون اشتباهه)

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

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

پ.ن : مطلبی که در ادامه میخونید برای هم ادبیات شدن در ادامه توضیحات هست،هرکسی میتونه با توجه به نظر خودش دسته بندی ها رو تغییر بده یا از کلمات دیگری استفاده بکند.

پلت فرم سایت ها از نظر فنی:

از نظر فنی (‌در اینجا منظور نوع اجرا یا پیاده سازی وب سایت است) میتوان سایت هارو به چند دسته تقسیم کرد.

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

دسته بندی انواع پلت فرم پیاده سازی وب سایت

 

خب این دسته بندی تا اینجا بیان کرد که یک سایت به چه شیوه هایی میشه پیاده سازی بشه.

پس قالب آماده ها چی شد؟؟؟

قالب آماده ها همون CMS ها هستن؟همون سایت ساز های آنلاینن؟

نخیر.

اجازه بدید دسته بندی نوع دوم رو با هم بررسی کنیم.

 

دسته بندی از نظر ظاهر وب سایت

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

اصطلاحی که بین عموم جا افتاده این هست که:

  • هنگامی که ظاهر سایت شمارو یک طراح UI/UX وب با توجه به نیازمندی های شما، طراحی میکنه، بهش میگن طراحی اختصاصی یا قالب اختصاصی یا طرح اختصاصی.
  • هنگامی که ظاهر سایت شما از بین طرح های آماده ( این طرح های آماده میتونه پوسته های آماده وردپرس باشه،میتونه پوسته های آماده html باشه و … ) انتخاب بشود، سایت شما اصطلاحا یک سایت قالب آماده است.

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

خب حالا که تونستیم به ادبیات مشترکی در مورد انواع پلت فرم طراحی سایت برسیم،اجازه بدید بریم سراغ اصل مطلب:

کدام روش مناسب کسب و کار دیجیتال من است؟

خب برای پاسخ به این سوال ،اول باید به عوامل زیر توجه کنید و برای هرکدوم یک پاسخ حدودی تو ذهنتون باشه:

  • بودجه
  • محدودیت زمانی
  • امکاناتی که نیاز داریم

بعد از اینکه این سه مورد رو تعیین کردید،به اینفوگرافیک زیر توجه کنید:

بودجه بندی و پلت فرم ها:

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

محدودیت زمانی و پلت فرم های طراحی سایت

راهنمای جامع طراحی سایت جدول محدودیت زمانی

راهنمای استفاده از جداول:

البته تمام اطلاعات ارائه شده طبق تجربه شخصی و وضعیت فعلی فضای دیحیتال است، در شرایط عادی است،تحت شرایط خاص و پروژه های خاص تمامی این موارد ممکن است تغییر یابد.

جمع بندی:

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

شاید گاهی هزینه اضافی برای وضعیت فعلی کسب و کار شما بی معنی و کاملا مضر باشد.

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

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

شاید بتوانید سایتتان را خودتان طراحی کنید.

شاید برای شما استخدام نیرو بهترین گزینه باشد.

طراحی وایرفریم قبل از پیاده سازی سایت

تا به حال روند ساخت یک خانه را دیده اید؟یا درباره آن چیزی شنیده اید؟

حتما تا به حال وارد خانه هایی شده اید که خوش ساخت باشند، همچنین بالعکس خانه هایی که بد نقشه هستند.

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

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

ما در این بخش قصد داریم کار همان معمار ساختمانی را انجام بدهیم… همان برنامه ریزی ها را انجام بدهیم. همان نقشه ها را بکشیم و …

پس اگر برای یه نقشه کشی حسابی آماده هستید به مطالعه ادامه مطلب بپردازید…

طراحی سایت جامع | مراحل ظاهر سایت

طراحی ظاهر سایت

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

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

گام های طراحی ظاهر سایت

  1. ایجاد نمودار درختی وب سایت
  2. طراحی وایرفریم
  3. انتخاب رنگ بندی مناسب
  4. انتخاب تمپلیت مناسب ( در صورت تمایل به استفاده از قالب آماده )

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

گام اول: ایجاد نمودار درختی سایت

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

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

بزارید با یک مثال بررسی کنیم،فرض کنید یک سایت فروشگاهی داریم که قراره اسباب بازی های کودکان رو بفروشه،شکل زیر یک نمونه ساده شده از نمودار درختی اون میتونه باشه:

طراحی سایت نمودار درختی

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

که میتوانید هر کدام از این موارد رو برای پروژه خودتان اجرا کنید.

فایده این طرح چیه؟

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

اینطوری اول به نیازکاربر توجه میکنیم،و صرفا برای زیبایی یا بر اساس سلیقه  المان ها رو در کنار یکدیگر قرار نمیدیم!!! .

شاید در ابتدا این موضوع براتون بدیهی به نظر برسه،اما اگر از افرادی که تجربه طراحی سایت دارند بپرسید،قطعا برای شما از اضافه شدن المان های نا مربوط در حین فرآیند طراحی سایت به بهانه های مختلف مانند:

  • این به اینجا میاد!!!
  • این صفحه خیلی خالیه
  • اینارو دیدم بقیه اینجا میزارن
  • و …

گله می کنند.

گام دوم: طراحی وایرفریم سایت

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

خب بیاید دوباره با یک مثال بررسی کنیم.

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

 

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

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

گام سوم: انتخاب رنگ بندی مناسب:

در تعیین رنگ بندی سایت همیشه چند عامل میتواند تعیین کننده باشد:

  • سلیقه
  • رنگ های سازمانی (که پیش از این انتخاب شده اند.)
  • تعیین رنگ بر مبنای کاربرد آن‌ ها

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

شاید برای عده ای از خوانندگان این سوال ایجاد بشود که انتخاب رنگ چه ربطی به نیاز مخاطب دارد؟

خب بعضی از رنگ ها تاثیرات مختلفی رو بر روی ضمیر ناخودآگاه افراد میزارند،به عنوان مثال دقت کردید که خیلی از شبکه های اجتماعی از رنگ های آبی و مشتقات اون استفاده میکنند؟

چون رنگ آبی باعث ایجاد حس اعتماد در مخاطب میشه.

یا دقت کردید که فست فود ها چقدر کم از رنگ آبی استفاده میکنند؟

چون رنگ آبی ممکنه باعث کاهش اشتهای شما بشه.

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

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

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

 

این مطلب ادامه دارد…

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

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

Fill out this field
Fill out this field
لطفاً یک نشانی ایمیل معتبر بنویسید.
You need to agree with the terms to proceed

فهرست