1. ‫و‬ ‫سایت‬ ‫طراحی‬
6
‫خوبی‬ ‫به‬ ‫باید‬ ‫که‬ ‫اساسی‬ ‫عنصر‬
.‫شود‬ ‫انجام‬
‫ترکی‬ ‫هنر‬ ،‫است‬ ‫هنر‬ ‫یک‬ ‫سایت‬ ‫طراحی‬
‫ها‬ ‫رنگ‬ ،‫ساختار‬ ‫ب‬
‫و‬
‫ها‬ ‫الگو‬ ‫و‬ ‫ها‬ ‫طرح‬ .‫مطالب‬
،‫آماده‬ ‫ی‬
‫تجاری‬ ‫حوزه‬ ‫هر‬ ‫برای‬ ‫حاال‬
‫هر‬ ‫و‬
،‫باشند‬ ‫می‬ ‫دسترس‬ ‫در‬ ‫ای‬ ‫سلیقه‬ ‫نوع‬
‫یک‬ ‫که‬ ‫چیزی‬ ‫اما‬
‫عناصر‬ ‫این‬ ‫ادغام‬ ‫و‬ ‫ترکیب‬ ‫هنر‬ ،‫سازد‬ ‫می‬ ‫خاص‬ ‫و‬ ‫ویژه‬ ‫را‬ ‫سایت‬
‫دیگر‬ ‫حاال‬ ‫نکنید‬ ‫فراموش‬ ‫البته‬ ‫و‬ ‫است‬
‫سایت‬ ‫طراحی‬
‫صرفا‬ ،
‫بلکه‬ ،‫شود‬ ‫نمی‬ ‫شامل‬ ‫را‬ ‫شناختی‬ ‫زیبایی‬ ‫و‬ ‫بصری‬ ‫عناصری‬
‫گذا‬ ‫می‬ ‫تاثیر‬ ‫نیز‬ ‫شما‬ ‫رتبه‬ ‫و‬ ‫سئو‬ ‫بر‬ ‫مستقیما‬
.‫رد‬
‫اصلی‬ ‫عناصر‬ ‫با‬ ‫ارتباط‬ ‫در‬ ‫مطلب‬ ‫این‬ ‫در‬
‫سایت‬ ‫در‬
‫می‬ ‫صحبت‬
‫اس‬ ‫صحیح‬ ‫و‬ ‫مناسب‬ ‫صورتی‬ ‫به‬ ‫اگر‬ ‫که‬ ‫کنیم‬
‫می‬ ‫شوند‬ ‫تفاده‬
‫شما‬ ‫حضور‬ ‫توانند‬
‫بدل‬ ‫موفق‬ ‫حضوری‬ ‫به‬ ‫را‬ ‫مجازی‬ ‫فضای‬ ‫در‬
.‫سازند‬
‫موفقیت‬ ‫کلید‬ ،‫تکنولوژی‬
‫الگوی‬ ‫و‬ ‫رنگ‬ ‫انتخاب‬ ،‫سایت‬ ‫طراحی‬ ‫از‬ ‫شما‬ ‫اولیه‬ ‫تصور‬ ‫احتماال‬
.‫است‬ ‫درست‬ ‫مسئله‬ ‫این‬ ‫البته‬ .‫است‬ ‫آن‬ ‫بصری‬ ‫زیبایی‬ ‫و‬ ‫مناسب‬
‫در‬ ‫تر‬ ‫جامع‬ ‫نگاهی‬ ‫به‬ ‫نیاز‬ ،‫مناسب‬ ‫سایت‬ ‫یک‬ ‫به‬ ‫رسیدن‬ ‫اما‬
‫هنگام‬ ‫کاربران‬ ‫تجربه‬ ‫گرفتن‬ ‫نظر‬ ‫در‬ ‫و‬ ‫طراحی‬ ‫از‬ ‫استفاده‬
.‫دارد‬ ‫سایت‬ ‫به‬ ‫ورود‬

2. ‫مثال‬ ‫برای‬
‫اگر‬ ‫حتی‬
‫سایت‬ ‫طراحی‬ ‫بهترین‬
‫زیبا‬ ‫نظر‬ ‫از‬
‫یی‬
‫که‬ ‫صورتی‬ ‫در‬ ،‫باشید‬ ‫داشته‬ ‫هم‬ ‫را‬ ‫شناختی‬
‫کاربرا‬
‫هنگام‬ ‫ن‬
‫اینترنتی‬ ‫گذار‬ ‫و‬ ‫گشت‬ ‫و‬ ‫ورود‬
‫سریعا‬ ،‫شوند‬ ‫مواجه‬ ‫کندی‬ ‫با‬
‫تقریبا‬ .‫گیرند‬ ‫می‬ ‫پیش‬ ‫در‬ ‫را‬ ‫خروج‬ ‫راه‬
75
%
،‫سایت‬ ‫یک‬ ‫کاربران‬
‫باز‬ ‫صورت‬ ‫در‬
‫ن‬
‫در‬ ‫سایت‬ ‫صفحات‬ ‫یا‬ ‫صفحه‬ ‫شدن‬
‫مدت‬
5
‫ثانیه‬
،
.‫گیرند‬ ‫می‬ ‫پیش‬ ‫در‬ ‫را‬ ‫خروج‬ ‫راه‬
‫از‬ ‫استفاده‬
‫ها‬ ‫هاست‬
‫و‬
‫سرورهای‬
‫در‬ ‫را‬ ‫بنا‬ ‫اولین‬ ،‫اتکا‬ ‫قابل‬
‫شرکت‬ .‫کند‬ ‫می‬ ‫گذاری‬ ‫پایه‬ ‫درستی‬ ‫به‬ ‫سایت‬ ‫طراحی‬
‫سایت‬ ‫طراحی‬
‫کاسپید‬
‫از‬ ‫بیش‬ ‫ای‬ ‫سابقه‬ ‫با‬ ،
23
‫خود‬ ‫ساله‬
‫در‬
‫طراحی‬ ‫حوزه‬
‫و‬ ‫سایت‬
‫اینترنتی‬ ‫فروشگاه‬ ‫طراحی‬
‫برای‬ ‫را‬ ‫گام‬ ‫اولین‬ ‫این‬ ،
.‫دارد‬ ‫برمی‬ ‫محکم‬ ‫شما‬
‫طراحی‬ ‫اصلی‬ ‫عناصر‬
‫حا‬
‫بصری‬ ‫عناصر‬ ‫مورد‬ ‫در‬ ‫توانیم‬ ‫می‬ ‫ال‬
‫تایپوگرافی‬ ،‫رنگ‬ ‫چون‬
‫مط‬ ‫چینش‬ ‫(نوع‬
‫های‬ ‫گزینه‬ ،)‫الب‬
call to action
‫آن‬ ‫طی‬ ‫که‬ ‫مواردی‬ (
)‫شود‬ ‫می‬ ‫درخواست‬ ‫کاری‬ ‫انجام‬ ‫کاربر‬ ‫از‬
‫وب‬ ‫و‬ ‫خالی‬ ‫فضاهای‬ ،
،‫سایتی‬ ‫صاحب‬ ‫یا‬ ‫کننده‬ ‫ایجاد‬ ،‫طراح‬ ‫هر‬ .‫کنیم‬ ‫صحبت‬ ‫گردی‬
‫رو‬ ‫و‬ ‫دیدگاه‬
‫اما‬ ،‫دارد‬ ‫سایت‬ ‫یک‬ ‫ایجاد‬ ‫در‬ ‫متفاوت‬ ‫یکردی‬
‫که‬ ‫دارند‬ ‫وجود‬ ‫مفاهیم‬ ‫و‬ ‫ها‬ ‫گزینه‬ ‫از‬ ‫استاندارد‬ ‫فهرستی‬
.‫شود‬ ‫توجه‬ ‫ها‬ ‫آن‬ ‫به‬ ‫باید‬
1
-
‫بصری‬ ‫ظاهر‬ ‫و‬ ‫کلی‬ ‫چارچوب‬
‫سایت‬ ‫طراحی‬ ‫حیاتی‬ ‫بخش‬ ‫تردیدی‬ ‫هیچ‬ ‫بدون‬ ‫شما‬ ‫سایت‬ ‫کلی‬ ‫ظاهر‬
‫شکل‬ ‫را‬ ‫شما‬ ‫سایت‬ ‫از‬ ‫کاربر‬ ‫برداشت‬ ‫اولین‬ ‫بصری‬ ‫جلوه‬ .‫شماست‬
.‫دهد‬ ‫می‬
50
‫را‬ ‫سایت‬ ‫به‬ ‫ورودی‬ ‫کاربر‬ ‫که‬ ‫دارید‬ ‫وقت‬ ‫ثانیه‬
‫ای‬ ‫و‬ ‫کنید‬ ‫خود‬ ‫سایت‬ ‫بصری‬ ‫جلوه‬ ‫مرعوب‬
‫ن‬
‫که‬ ‫تاثیری‬ ‫و‬ ‫برداشت‬
‫راه‬ ‫یا‬ ‫ماند‬ ‫می‬ ‫سایت‬ ‫در‬ ‫او‬ ‫که‬ ‫کند‬ ‫می‬ ‫مشخص‬ ‫گیرد‬ ‫می‬ ‫کاربر‬
.‫گیرد‬ ‫می‬ ‫پیش‬ ‫در‬ ‫را‬ ‫خروج‬
‫کلی‬ ‫طور‬ ‫به‬
‫حس‬ ‫سازد؛‬ ‫محقق‬ ‫را‬ ‫بخش‬ ‫آرامش‬ ‫اهداف‬ ‫باید‬ ‫طراحی‬
‫تمیزی‬ ،‫آشناپنداری‬
)‫صفحه‬ ‫نبودن‬ ‫(شلوغ‬
‫می‬ ‫تا‬ ،‫دسترسی‬ ‫و‬
‫موقع‬ ‫در‬ ‫کاربر‬ ‫نباید‬ ،‫کنید‬ ‫استفاده‬ ‫خالی‬ ‫فضاهای‬ ‫از‬ ‫توانید‬
‫احسا‬ ‫سایت‬ ‫به‬ ‫ورود‬
‫های‬ ‫طراحی‬ ‫از‬ .‫کند‬ ‫خفگی‬ ‫س‬
grid-based
‫ب‬
‫رای‬
.‫کنید‬ ‫استفاده‬ ‫سایت‬ ‫فضای‬ ‫به‬ ‫بخشیدن‬ ‫نظم‬
‫آ‬ ،‫تصاویر‬
‫اما‬ ‫است‬ ‫مهم‬ ‫بسیار‬ ‫صفحه‬ ‫گرافیک‬ ‫یا‬ ‫و‬ ‫ها‬ ‫یکون‬
.‫باشد‬ ‫هم‬ ‫کننده‬ ‫تکمیل‬ ‫تصاویر‬ ‫که‬ ‫شوید‬ ‫مطمئن‬

3. ‫می‬ ‫که‬ ‫مراتبی‬ ‫سلسله‬ ‫به‬ ‫توجه‬ ‫با‬ ‫باید‬ ‫شما‬ ‫سایت‬ ‫از‬ ‫بخش‬ ‫هر‬
‫خواهید‬
‫بنابر‬ .‫بگیرد‬ ‫قرار‬ ‫چینش‬ ‫مورد‬ ‫دهید‬ ‫اختصاص‬ ‫آن‬ ‫به‬
‫چینش‬ ‫(الگوی‬ ‫صفحات‬ ‫چینش‬ ‫نوع‬
F
‫چینش‬ ‫الگوی‬ ‫یا‬
Z
‫چشم‬ ‫شما‬ )
‫در‬ ‫و‬ ‫کاربر‬
.‫دهید‬ ‫می‬ ‫شکل‬ ‫را‬ ‫سایت‬ ‫در‬ ‫کاربر‬ ‫رفتار‬ ‫نهایت‬
‫شرکت‬
‫سایت‬ ‫طراحی‬
‫تهران‬
‫کاسپید‬
‫جدید‬ ‫نیازهای‬ ‫با‬ ‫همگام‬ ،
‫کارکردی‬ ‫وجوه‬ ‫با‬ ‫را‬ ‫بصری‬ ‫الزم‬ ‫عناصر‬ ‫تمام‬ ،‫سایت‬ ‫طراحی‬ ‫حوزه‬
‫حال‬ ‫عین‬ ‫در‬ ‫و‬ ‫نواز‬ ‫چشم‬ ‫طراحی‬ ‫و‬ ‫کرده‬ ‫ادغام‬ ‫آن‬
‫را‬ ‫کاربردی‬
‫شده‬ ‫انجام‬ ‫کارهای‬ ‫نمونه‬ ‫توانید‬ ‫می‬.‫کند‬ ‫می‬ ‫حاصل‬ ‫سایت‬ ‫برای‬
‫بعد‬ ‫و‬ ‫کنید‬ ‫مشاهده‬ ‫را‬ ‫معتبر‬ ‫های‬ ‫شرکت‬ ‫برای‬ ‫شرکت‬ ‫این‬ ‫توسط‬
.‫کنید‬ ‫گیری‬ ‫تصمیم‬
2
-
‫رنگ‬ ‫طرح‬
‫در‬ ‫را‬ ‫کاربر‬ ‫نظر‬ ،‫صفحه‬ ‫فونت‬ ‫و‬ ‫استفاده‬ ‫مورد‬ ‫رنگ‬ ‫ترکیب‬
‫به‬ ‫باید‬ ‫رنگ‬ ‫انتخاب‬ ‫در‬ .‫دهد‬ ‫می‬ ‫شکل‬ ‫شما‬ ‫سایت‬ ‫با‬ ‫ارتباط‬
‫رویکر‬
‫توجه‬ ‫سایت‬ ‫مخاطبین‬ ‫جامعه‬ ‫هدف‬ ‫بندی‬ ‫دسته‬ ‫و‬ ‫برند‬ ‫د‬
.‫کنید‬
‫مثال‬ ‫عنوان‬ ‫به‬
‫کاری‬ ‫حوزه‬ ‫به‬ ‫مربوطه‬ ‫سایت‬ ‫اگر‬
‫و‬ ‫وکال‬
‫حسابداران‬
‫یا‬ ‫سیر‬ ‫آبی‬ ‫های‬ ‫رنگ‬ ‫سراغ‬ ‫به‬ ‫باید‬ ،‫باشد‬ ‫مربوط‬
.‫بروید‬ ‫سبز‬
‫زم‬ ‫پس‬ ‫عکاس‬ ‫یک‬ ‫مثال‬ ‫یا‬
‫برای‬ ‫را‬ ‫سفید‬ ‫و‬ ‫سیاه‬ ‫ینه‬

4. ‫ترجیح‬ ‫عکاسی‬ ‫به‬ ‫مربوط‬ ‫سایت‬ ‫یک‬ ‫در‬ ‫استفاده‬ ‫مورد‬ ‫تصاویر‬ ‫پشت‬
.‫دهد‬ ‫می‬
3
-
‫تایپوگرافی‬
‫کاری‬ ‫حوزه‬،‫متن‬ ‫چینش‬ ‫نوع‬ ‫مورد‬ ‫در‬
‫بندی‬ ‫دسته‬ ‫و‬ ‫نظر‬ ‫مورد‬
‫باید‬ ‫متن‬ .‫است‬ ‫کننده‬ ‫تعیین‬ ‫بسیار‬ ‫پیام‬ ‫انتقال‬ ‫در‬ ‫جمعیتی‬
‫حس‬ ‫و‬ ‫وکال‬ ‫مثل‬ ‫تر‬ ‫رسمی‬ ‫مشاغل‬ .‫باشد‬ ‫خوانش‬ ‫قابل‬ ‫کامال‬
‫ابداران‬
‫مشاغل‬ ‫که‬ ‫حالی‬ ‫در‬ ،‫دارند‬ ‫منظم‬ ‫متن‬ ‫ساخت‬ ‫به‬ ‫نیاز‬
‫سرخوشانه‬
‫داشته‬ ‫تری‬ ‫متنوع‬ ‫و‬ ‫بازتر‬ ‫چینش‬ ‫تواند‬ ‫می‬ )‫عکاسی‬ ‫(مثل‬ ‫تر‬
.‫باشد‬
‫دقت‬ ‫هم‬ ‫زمینه‬ ‫پس‬ ‫رنگ‬ ‫و‬ ‫سایت‬ ‫متن‬ ‫بین‬ ‫کنتراست‬ ‫به‬ ‫همچنین‬
.‫کنید‬
4
-
‫گردی‬ ‫وب‬
‫به‬ ‫نیاز‬ ‫که‬ ‫نیست‬ ‫ای‬ ‫نقطه‬ ‫شما‬ ‫سایت‬ ‫در‬ ‫کاربران‬ ‫گردی‬ ‫وب‬
‫آن‬ ‫در‬ ‫خالقیت‬
‫گرفتار‬ ‫را‬ ‫خود‬ ‫سایت‬ ‫اینکه‬ ‫اول‬ .‫باشید‬ ‫داشته‬
‫در‬ ‫گردی‬ ‫وب‬ ‫عناصر‬ .‫نکنید‬ ‫کننده‬ ‫هدایت‬ ‫پرشمار‬ ‫های‬ ‫آیکون‬
‫می‬ ‫کفایت‬ ‫کاربران‬ ‫هدایت‬ ‫برای‬ ‫صفحه‬ ‫پایین‬ ‫یا‬ ‫میانه‬ ،‫باال‬
.‫کند‬
‫صاحبان‬ ‫اغلب‬ ‫که‬ ‫ای‬ ‫مسئله‬
‫هستند‬ ‫درگیر‬ ‫آن‬ ‫با‬ ‫ها‬ ‫سایت‬
‫صفح‬ ‫باالی‬ ‫در‬ ‫همبرگری‬ ‫آیکون‬ ‫به‬ ‫مرسوم‬ ‫آیکون‬ ‫از‬ ‫استفاده‬
‫ه‬
‫عمال‬ ‫اما‬ ‫کند‬ ‫ایفا‬ ‫نقش‬ ‫هدایت‬ ‫در‬ ‫است‬ ‫قرار‬ ‫آیکون‬ ‫این‬ .‫است‬
‫کلیک‬ ‫نرخ‬ ‫و‬ ‫شود‬ ‫می‬ ‫صفحه‬ ‫باالی‬ ‫مهم‬ ‫اطالعات‬ ‫شدن‬ ‫پنهان‬ ‫باعث‬
.‫دارد‬ ‫هم‬ ‫پایین‬
‫همچنین‬
‫صفحه‬ ‫پائین‬ ‫های‬ ‫گزینه‬ ،
‫اگر‬ .‫نکنید‬ ‫فراموش‬ ‫هم‬ ‫را‬
.‫است‬ ‫جدی‬ ‫کاربری‬ ‫احتماال‬ ،‫برود‬ ‫شما‬ ‫صفحه‬ ‫پایین‬ ‫تا‬ ‫کاربری‬
‫پایین‬ ‫در‬ ‫توانید‬ ‫می‬
،‫دهید‬ ‫قرار‬ ‫را‬ ‫مشخصات‬ ‫ثبت‬ ‫گزینه‬ ‫صفحه‬
.‫محصول‬ ‫خرید‬ ‫پیشنهاد‬ ‫هستید‬ ‫فروش‬ ‫سایت‬ ‫اگر‬ ‫یا‬ ‫ایمیل‬ ‫مثال‬
5
-
‫محتوا‬
‫به‬ ‫کار‬ ‫ها‬ ‫دیواره‬ ‫زدن‬ ‫رنگ‬ ‫با‬ ،‫داخلی‬ ‫طراحی‬ ‫در‬ ‫که‬ ‫طور‬ ‫همان‬
‫الگوی‬ ‫سازی‬ ‫پیاده‬ ‫با‬ ،‫هم‬ ‫سایت‬ ‫طراحی‬ ‫در‬ ،‫رسد‬ ‫نمی‬ ‫اتمام‬
،‫رنگ‬ ،‫سایت‬
‫کا‬ ‫شناختی‬ ‫زیبایی‬ ‫عناصر‬ ‫دیگر‬ ‫و‬ ‫تایپوگرافی‬
‫ر‬
.‫شود‬ ‫نمی‬ ‫تمام‬

5. ‫حذف‬ ‫را‬ ‫اضافی‬ ‫لغات‬ ،‫بخوانید‬ ‫را‬ ‫شده‬ ‫داده‬ ‫قرار‬ ‫محتوای‬
‫بخشی‬ ‫نظم‬ ‫برای‬ ‫متنی‬ ‫بین‬ ‫نمایشگرهای‬ ‫و‬ ‫تیترها‬ ‫سر‬ ‫از‬ .‫کنید‬
.‫کنید‬ ‫استفاده‬
6
-
‫نکنید‬ ‫فراموش‬ ‫را‬ ‫موبایل‬
‫با‬ ‫مقایسه‬ ‫در‬ ‫موبایل‬ ‫از‬ ‫استفاده‬ ‫گذشته‬ ‫سال‬ ‫پنج‬ ‫در‬
‫روند‬ ‫این‬ ‫و‬ ‫است‬ ‫شده‬ ‫بیشتر‬ ‫تاب‬ ‫لب‬ ‫و‬ ‫کامپیوتر‬
‫ادامه‬ ‫همچنان‬
‫یک‬ ‫گوگل‬ ،‫تبلت‬ ‫یا‬ ‫گوشی‬ ‫کاربران‬ ‫بهتر‬ ‫دسترسی‬ ‫برای‬ .‫دارد‬
‫در‬ .‫است‬ ‫کرده‬ ‫ایجاد‬ ‫ها‬ ‫سایت‬ ‫بندی‬ ‫درجه‬ ‫برای‬ ‫موبایل‬ ‫شاخص‬
‫سال‬ ‫می‬ ‫ماه‬
2021
‫مجمو‬ ،
‫عنوان‬ ‫تحت‬ ‫را‬ ‫معیارها‬ ‫از‬ ‫ای‬ ‫عه‬
core
web vitals
‫که‬ ‫شد‬ ‫تعیین‬
‫ارائه‬ ‫در‬ ‫ها‬ ‫سایت‬ ‫کارآیی‬ ‫آن‬ ‫طبق‬
‫کاربرا‬ ‫و‬ ‫مشتریان‬ ‫به‬ ‫خدمات‬
‫از‬ ‫کنندگان‬ ‫استفاده‬ ‫(شامل‬ ‫ن‬
‫امتیاز‬ ‫یک‬ ‫عنوان‬ ‫به‬ )‫موبایل‬
.‫بگیرد‬ ‫قرار‬ ‫مدنظر‬ ‫بندی‬ ‫رتبه‬
‫با‬ ‫سایت‬ ‫یک‬ ‫از‬ ‫راحت‬ ‫استفاده‬ ‫امکان‬ ‫ترتیب‬ ‫این‬ ‫به‬
.‫است‬ ‫الزم‬ ‫اصل‬ ‫یک‬ ‫بلکه‬ ‫امتیاز‬ ‫یک‬ ‫نه‬ ‫حاال‬،‫موبایل‬
‫گیری‬ ‫نتیجه‬
‫به‬ ‫سایت‬ ‫طراحی‬ ‫در‬ ‫ابتدایی‬ ‫چارچوب‬ ‫و‬ ‫اصول‬ ،‫فوق‬ ‫موارد‬ ‫مجموع‬
.‫آیند‬ ‫می‬ ‫حساب‬
،‫باال‬ ‫موارد‬ ‫از‬ ‫کدام‬ ‫هر‬ ‫که‬ ‫نکنید‬ ‫فراموش‬
‫سایت‬ ‫طراحی‬ ‫از‬ ‫پیش‬ ‫که‬ ‫شود‬ ‫می‬ ‫محسوب‬ ‫وسیعی‬ ‫موضوعی‬ ‫ی‬ ‫حوزه‬
‫باید‬
‫بود‬ ‫مسلط‬ ‫انها‬ ‫تمام‬ ‫بر‬
‫با‬ ‫کاسپید‬ ‫سایت‬ ‫طراحی‬ ‫شرکت‬ .
‫در‬ ‫حوزه‬ ‫این‬ ‫روز‬ ‫نیازهای‬ ‫با‬ ‫همگام‬ ،‫ای‬ ‫دهه‬ ‫چند‬ ‫ای‬ ‫تجربه‬

6. ‫این‬ ‫برتر‬ ‫کارهای‬ ‫نمونه‬ ‫جز‬ ،‫آن‬ ‫کارهای‬ ‫نمونه‬ ‫و‬ ‫است‬ ‫حرکت‬
‫حو‬
.‫آید‬ ‫می‬ ‫حساب‬ ‫به‬ ‫زه‬