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

اول از همه بدونید چی از وب سایت می خواید؟ یعنی چه انتظاراتی ازش دارید یا اینکه دقیقاً چه نیازهایی رو می خواید برطرف کنه؟ این موضوع و دونستنش به هزینه هایی که پرداخت می کنید خیلی کمک می کنه و دقیقاً مشخص می کنه که هزینه های اولیه شامل چه مواردی میشه. موضوع سایت در هزینه ها خیلی موثره، مثلاً اگه فروشگاه اینترنتی کوچیکی دارید، اصلا نیازی به پرداخت هزینه زیادی نیست و می تونید از سیستم های مدیریت محتوا (CMS) رایگان استفاده کنید مثل وردپرس. البته این رو هم بگم که هر چقدر برای وب سایت هزینه کنید در آینده ای نه چندان دور مبلغی به مراتب بیشتر بهتون برمیگرده.

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

دامنه

اول، شما باید نام دامنه رو ثبت کنید و اگر نمی دونید کلاً چی میگم و دامنه چیه به اینجا مراجعه کنید. قیمت هایی که برای انواع دامنه ها ارائه میشه متفاوته و با توجه به دامنه های رایج در ایران، هزینه ثبت دامنه برای وب سایت شما چیزی در حدود 4000 تومان تا 50000 تومان است. ارزان ترین دامنه در این بین ir و گران ترین دامنه tv, ws, bz, ca و  mnمی باشد.

هاست

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

با توجه به ترافیک بالا یا پایین و تعداد کاربرهای وب سایت، هاست مورد نیاز شما در حدود 30000 تومان الی 3000000 تومان خواهد بود. توجه داشته باشید که قیمت بیشتر یا کمتر دلیل بر سرویس بهتر نیست، با توجه به نیازتون هم دامنه و هم هاست رو انتخاب کنید.

SSL و IP امن

اگر در سایت شما درگاه پرداخت آنلاین یا ذخیره اطلاعات شخصی کاربرها وجود داره، باید این اطلاعات رو امن نگه دارید.برای دستیابی به این امنیت، شما باید یک آدرس اختصاصی IP و یک گواهی SSL (Secure Sockets Layer)  دریافت کنید. هر دو رو می تونید خریداری کنید و از طریق حساب میزبانی خود، به صورت جداگانه یا به عنوان ویژگی های طرح میزبانی تون نصب کنید.

هزینه IP برای هر ماه حدوداً از 5000 تومان شروع میشه و هزینه SSL با توجه به ویژگی هایی که داره حدوداً سالی 75000 تومان به بالا است.

طراحی سایت

فکر اینکه برای یه وب سایت معتبر و جامع خودتون دست به کار بشید و از CMS های رایگان استفاده کنید رو به کل از سرتون به در کنید. شاید این کار یک وب سایت به شما تحویل بده اما مطمئنید که همین وب سایت های ساده با قالب های از قبل تعیین شده برای تجارت شما مناسبه؟ این روزا شرکت های طراحی سایت زیادی وجود دارن که می تونید بهشون مراجعه کنید اما یک سری نکات رو حتماً برای انتخاب در نظر بگیرید چون بعداً خیلی برای وب سایت شما سرنوشت ساز میشه برای اطلاعات بیشتر درباره ویژگی های یک شرکت خوب طراحی سایت به اینجا مراجعه کنید . بعد از انتخاب شرکت طراحی سایت نکات زیر رو انجام بدید :

1- نوع سایت

با توجه به کسب و کار و تجارت مورد نظر شما، یک سری قالب کلی داریم که انواع وب سایت ها رو از هم تفکیک می کنه :

·         وب سایت فروشگاهی

·         وب سایت خبری

·         وب سایت بانک اطلاعات و مقالات

·         وب سایت دانلود سنتر

·         وب سایت صنعتی

·         وب سایت شرکتی

·         وب سایت شخصی

·         وب سایت مذهبی

·         وب سایت هاستینگ

·         وب سایت مهاجرتی

·         وب سایت سازمانی و دولتی

·         و ...

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

2- سیستم مدیریت محتوا(CMS)

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

3- انواع طراحی

در حال حاضر دو نوع طراحی محبوب و جدید داریم؛ طراحی Responsive یا واکنش گرا و طراحی Flat

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

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

4- عملکرد تجارت الکترونیک

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

به طور معمول، برای اضافه کردن قابلیت تجارت الکترونیک هزینه اضافی وجود نداره، هزینه آن از مقدار زمان لازم برای اطمینان از اینکه هر جزء در حال کاره، کسب درگاه پرداخت و هر گونه تلاش اضافی شما که ممکنه نیاز به ادغام فروشگاه خود را با حمل و نقل و یا سیستم های ردیابی میزبانی در جاهای دیگر حس کنید، تامین میشه. در حالی که ممکن است تنها بخشی از پرداخت شما را به عهده داشته باشد، ورودی تجارت الکترونیک می تواند تأثیر بزرگی بر هزینه یک وب سایت داشته باشه.

5- محتوا

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

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

6- بهینه سازی موتور جستجو (SEO)

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

خدمات SEO معمولا شامل چندین روش و تاکتیک های همیشگیه، مثلاً در شرکت دارکوب این بسته شامل: بهینه سازی کپی وب سایت، جستجو برای کلمه کلیدی، توسعه اهداف، ایجاد لینک و بک لینک، تولید محتوا و ... است.مبلغی که شما در هزینه طراحی وب سایت خود سرمایه گذاری می کنید، به این معنا نیست که خیلی سریع بازدیدکننده خواهید داشت و سئو به این موضوع کمک میکنه.

7- طراحی چند رسانه ای

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

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

8- یکپارچه سازی پایگاه داده

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

9- نگهداری آنلاین وب سایت

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

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

10- ماژول ها و پلاگین ها

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

·         فرم تماس با ما

·         فرم ورود و عضویت کاربران

·         آمارگیر اختصاصی

·         خبرنامه

·         جستجوی پیشرفته

·         نقشه سایت

·         پشتیبانی آنلاین

·         اتصال به درگاه پرداخت آنلاین

·         نظر سنجی

·         و ...

هزینه نهایی طراحی سایت خوب در ایران با توجه به نیازها و ویژگی های شما از 500000 تومان تا حدوداً 30000000 تومان می باشد البته به صورت عرف و سایت کاملاً مجهز به تمامی نیازهای شما در دارکوب از 500000 تومان تا 3000000 تومان است.

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

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

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

سازماندهی محتوا

یکی از پیچیده ترین عناصر طراحی برای موبایل نحوه سازماندهی محتواست. نیازهای کاربرهای موبایل با کاربرهای کامپیوتر فرق داره، یا اگر هم مثل هم باشه باز رفتارهایی که برای وبگردی انجام میدن بسته به دستگاهی که دارن استفاده میکنند متفاوته.
وقتی دارید برای موبایل سایت طراحی میکنید باید مهمترین اولویتتون این باشه که محتوا رو طوری سازماندهی کنید که برای کاربرهای موبایل مناسب باشه. محتوا باید به صورت عمودی به دنبال هم بیان تا متناسب با صفحه کم عرض گوشی ها باشند. چون صفحه نمایشگر موبایل حالت نمایش پرتره داره، محتوا میتونه به اندازه صفحه نمایشگر کش بیاد و معمولا پیامها و تصاویر مختلف راحت میتونن تو این عرض نمایش داده بشن ولی تو نمایشگرهای کوچیکتر حتی وقتی نمایشگر روی حالت منظره یا landscape تنظیم بشه باز هم فضای افقی کمه.
برای همین روی موبایل محتوا رو به صورت عمودی درمیارن.
حالا که محتوا رو قراره عمودی بذاریم یه سوال پیش میاد. کدوم محتوا باید اول بیاد؟ اگه کاربرهایی که از موبایل وارد سایت شما میشن اهداف متفاوتی از کاربرهای کامیپوتر دارن، بهتره طراحی سایتتون برای موبایل طوری باشه که به نیازهای این دسته از کاربرها اولویت بده (یعنی همون مطالب سایت دسکتاپتونو برای موبایل کپی نکنید و براش مخصوص کاربرهای خودش مطلب بذارید).
اوایل که طراحی وب برای موبایل تازه اومده بود، گوشی هامون به اندازه امروز پیچیده نبود و انجام کارهای سطح بالا باهاشون راحت نبود، معمولا بیشتر یه سایت موبایلی راه مینداختن که توش فقط محتوای مورد نیاز کاربرهای موبایل رو به صورت نواری نمایش میدادن. امسال دیگه این روش قابل قبول نیست. کاربرهای امروز موبایل دوست دارن روی موبایل هم همون محتوایی رو ببینن که روی کامپیوترهاشون میبینن. علاوه بر این موبایل برای خیلی از مردم به یه دستگاه همه کاره تبدیل شده و برای هر چیزی اول از همه به موبایلهاشون مراجعه میکنند.
الآن بعضی از سایتها به کاربرانتشون اجازه میدن خودشون نسخه موبایل یا کامپیوتر سایت رو انتخاب کنند و اگه کاربر نسخه موبایل رو انتخاب کنه، همون محتوا فقط به صورت عمودی نمایش داده میشه.

فرم ها

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

فهرست ها

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

مشکلات تفهیم نامه های طراحی وبسایت
سنگ بنای هر پروژه طراحی یه تفهیم نامه طراحی خوبه که اتفاقا نوشتن یه تفهیم نامه ای که به طراح کمک کنه هم واقعا کار سختیه.
منظورم تفهیم نامه ای که پروژه رو شرح میده نیست، چون اون طبق اصول مشخصیه و بسته به گروههای مخاطب و نیازهای کاربردی و غیره نوشته میشه، من منظورم تفهیم نامه ایه که به طراح داده میشه تا بهتر با برند/ویژگی های مشتری آشنا بشه.
حالا مشکل تفهیم نامه های طراحی وبسایت چیه؟
الآن 14 ساله که ما داریم تفهیم نامه طراحی میگیریم و از این همه، تعداد خیلی کمیشون تو شناخت برند مفید بودند و بیشترشون هیچ کمکی بهمون نکردند و فقط یه برند رو با یه سری کلمات کلیدی تعریف میکردند، مثلا اینطوری:
برند ما مدرن، معاصر، حرفه ای، دانش گرا، متخصص، قابل اعتماد، ... است.
آدم از خوندن این مدل نوشته ها خندش میگیره. این کلمه ها اصلا اطلاعات خاصی درباره برند به ما نمیدن و یه چیزهای عمومی و واضحن. خب قطعا هیچکس دوست نداره برندش قدیمی، غیرحرفه ای، ناقص، غیر قابل اعتماد و ... باشه!!!
با توجه به تجربه من، بیشتر تفهیم نامه ها یه مدلن (حتی میتونم نخونده بگم توش چیا هست) و اصلا هیچ ویژگی خاص و منحصر به فردی برای برند تعریف نشده و از اون بدتر اینکه اصلا کاربردی و ملموس نیست و به درد طراح نمیخوره، چون این عبارتها رو میشه در مورد هر شرکتی بکار برد... تفهیم نامه طراحی باید بتونه به خوبی برند رو توصیف کنه.
تفهیم نامه برند باید مثل راهنمای برند شما باشه، اما بیشتر (مواقع بیشتر از اینکه راهنمای برند باشه)، راهنمای هویتی شرکت شماست که هر چی که لازمه درباره نحوه استفاده از لوگوی شرکت، رنگ، تایپوگرافی و نکات مهمی که تو تصویر به کار رفته بدونیم بهمون میگه. متاسفانه اغلب ارزشهای حسی، ویژگیهای بصری ... و کلا رنگ و بوی کلی برند به خوبی تعریف نمیشه.
من یه مدت برای حل این مشکل خودم تفهیم نامه ها رو مینوشتم و سعی میکردم برم دنبالش و برند مشتری رو بهتر بشناسم و نسبت بهش وفادار باشم. واقعا مایه تأسفه که بخاطر سوالاتی که از مشتری میکردم متهم به کم کردن ارزش برند میشدم، مثلا من میپرسیدم "اگه برندتون یه ماشین بود، چه مدل ماشینی بود؟" "اگه برندتون یه اسب بود، چه نژادی بود؟" و این قبیل سوالات. شاید به نظر مسخره بیاد اما چه عیبی داره که برند رو به اسب یا ماشین تمثیل کنیم تا ملموس تر باشه. البته قطعا برای این کار هم میشه اصولی پیش رفت و از واژه های خاص حرفه ای استفاده کرد.
پس برمیگردیم سر سوال اصلی خودمون: چطور میشه یه تفهیم نامه طراحی سایت معنی دار نوشت؟ ... چطور به توسعه دهنده سایتتون توضیح میدید که میخواهید سایتتون چه شکلی باشه و چه حسی رو به بیننده منتقل کنه؟
برای این کار میتونید مثال های مواردی که تو ذهنتون هست رو از روی سایتهای دیگه پیدا کنید و به طراح یا توسعه دهنده سایتتون نشون بدید ... اما این کار فقط ظاهر سایتتونو مشخص میکنه، حالا میمونه نیازهای برند شما. برای این هم میشه ارزشهای اصلی برند و .. رو توضیح داد، اما این ها هم وجه تمایز برند شما رو از سایر برندها نشون نمیده.
نوشتن یه تفهیم نامه طراحی سایت کار سختیه – واقعیت اینه که معمولا تفهیم نامه طراحی سایت مثل یه دستورالعمل و راهنمای برند میمونه و اگه همین راهنما بتونه خوب کارشو انجام بده دیگه نیازی به تفهیم نامه نیست.
اگه شما هم براتون شرایطی پیش اومد که خواستید این کارو انجام بدید، باید بپذیرید که:

• شما دارید یه راهنما/دستوالعمل برای برندتون مینویسید و طبیعتا باید خیلی بیشتر و مشروح تر از یه سند خلاصه و ساده باشه.
• چون میشه کار رو از کانالها و روشهای مختلفی انجام داد، شاید مجبور باشید چند بار دستورات و حوزه کار رو توضیح بدید.
• این کار فراتر از نوشتن خلاصه وار سنده ... باید خواننده رو به سفری ببرید و برندتون رو براش تعریف کنید.
• در نهایت باید برندتون رو تعریف و ترجمه کنید.

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

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

• باطن قضیه چیه؟

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

• سخن آخر

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

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

• در شروع

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

• نقشه کشیدن برای تجربه کاربری

قبل از اینکه به کار طراحی ورود پیدا کنیم، باید یه تجربه کاربری بسازیم که اهداف مشتری رو تأمین کنه. یعنی باید اینها رو بسازیم:
1- پرونده کاربر: باید کاربر و نیازهاشو بشناسیم و براش یه پرونده درست کنیم که کمکمون کنه خودمونو جای کاربر بذاریم و به جای کاربر با سایت کار کنیم.
2- سفرهای کاربر: باید نقشه جاهایی که کاربر خواهد رفت رو تهیه کنیم و روی سایت جهتیابیش کنیم و ببینیم چطور قراره مشکلاتی که باهاشون روبرو میشه رو حل کنه.
تو این مرحله باید به تمام مشکلاتی که کاربر ممکنه باهاشون مواجه بشه توجه کنیم و تغییرات لازم رو تو طراحی اعمال کنیم. به این کا رمیگن دسترسی پذیری.
دسترسی پذیری برای طراحی محدودیت ایجاد میکنه اما نباید بذارید این مسئله باعث تکراری و کسالت آور کردن سایتتون بشه. بلکه باید ازش در جهت پیشبرد فرایند حل مسئله و ساخت یک طراحی دسترس پذیر استفاده کرد.
همیشه مشکلات پروژه های مختلف با هم فرق دارن، بنابراین باید گوش به زنگ باشیم و سعی کنیم بهترین راه حل ممکن رو برای کاربرهامون ارائه بدیم. گاهی اوقات شاید راه حل خودش یه مشکل دیگه ایجاد کنه و مجبور باشیم تغییرش بدیم. این فرایند دائما در حال تغییره، سیاله و خطی نیست.
گاهی این مرحله منتهی میشه به مدارک تحقیقاتی، فایرفریم، پرونده کاربر، استوری بورد و فلوچارت ساختاری سایت. تازه اینها فقط مال این مرحله بود!

• جمع بندی کار

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

• خلاصه

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

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

• یه خبر بد: نمیتونید طراحیتونو تو برنامه InDesign بسازید.

به نفع همه است که از InDesign استفاده نکنید. شاید انتخاب شما این باشه و قطعا برپایه سایت هم طراحی های خوبی ارائه میده، اما بازکردن عناصر سایت خارج از فایل PDF یا InDesign خیلی مشکله. رنگها شاید بپرن و اثرات لایه ها عوض بشن و ارتباطات طراحی که کلی روش کار کردید میتونه نابود بشه.
همه چیزهایی که نیاز دارید تو فتوشاپ هست. محورها، افکتها، شیب ها و غیره. در اصل InDesign برای کنترل کیفیت کارهای پرینتی بوجود اومده نه پیکسل های سایتها.
بعضی از طراح ها هم اول طراحی هاشونو تو InDesign آماده میکنن و بعد به فتوشاپ منتقلش میکنن. مشکلش اینه که معمولا توسعه دهنده ها به عناصر خام طراحی نیاز دارن که مشکلات طراحی جدید رو اصلاح کنن یا تغییراتی رو که مشتری طی فرایند توسعه میده توش اعمال کنن. مثلا شاید تغییر یه متن باعث شه یه بنر بزرگتر بشه، یه دکمه بخواد به حالت شناور درست شه و این قبیل مسائل. برای همین باید بتونیم لایه ها رو روشن و خاموش کنیم، نسخه های بزرگتری از طراحی درست کنیم تا تو جلسات نمایش بدیم یا بعضی قسمتها رو پهن تر کنیم تا با گوشه ها هماهنگ بشن.
دیگه اون روزها که توسعه دهنده های سایت یه عکس شیشه ای از صفحه میگرفتن و با دقت تصاویر رو تو کدهاشون وارد میکردن. اگه بتونیم بیشتر طراحی رو در قالب کدها وارد کنیم و تصاویر کمتری استفاده کنیم، صفحه برای مشتریها سریع تر لود میشن، امکان دسترسی به سایت برای افراد با ناتوانیهای جسمی فراهم میشه، صفحه برای موتورهای جستجو خواناتر میشه و انعطاف پذیری بیشتری برای محتوا و بروزرسانی های سایت با توجه به نیازهای آینده مشتری بوجود میاد.
فتوشاپ اونقدرها هم بد نیست، قول میدم!

• مشخصات فایل

معمولا سایتو برای کمترین اندازه صفحه نمایش رایج طراحی میکنن. یعنی 800 x 600، 1027 x 768 و غیره. حالا با این تنوعی که تو اندازه های صفحه نمایش وجود داره دیگه نمیشه یه اندازه طراحی کنیم و توقع داشته باشیم با همه دستگاه ها بخونه.
این روزها روشهای مختلفی برای ارائه خدمات به صفحه نمایشهای مختلف بوجود اومده. بسته به کار شما، ما طراحی دسکتاپی سایتتونو طوری منعطف میکنیم که با صفحه نمایش کاربرها هماهنگ بشه. فعلا بهتون پیشنهاد میکنیم با یه منطقه اصلی به پهنای 1200 پیکسل شروع کنید، اما یادتون باشه که باید بتونه تا 1000 پیکسل هم باریک بشه.
توجه داشته باشید که بحثهای پیرامون ابعاد سایت، عمدتا به طراحی دسکتاپی ربط داره. قبلا یه پست اختصاصی درمورد طراحی برای سایت واکنشگرا نوشتیم، اما بازهم بد نیست به نکته بالا توجه کنید.

• بافت، تصاویر و پس زمینه

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

• فونت

فناوری وب به جایی رسیده که همونطور که میتونیم از تصاویر مختلف استفاده کنیم، میتونیم هر فونتی هم که دوست داریم برای سایتمون بکار ببریم. خب این خیلی خوبه.
با اینکه میشه فونت رو هم مثل تصاویر، گوگل کرد، به فرمت مناسب تبدیل کرد و استفاده کرد، اما معمولا همچین اجازه ای بهتون نمیدن. حتی اگه فونت رو هم برای استفاده های پرینتی بخرید، نمیتونید به طور خودکار برای سایت بکار ببرید. معمولا باید یه گواهی جدا مخصوص استفاده روی سایت برای فونت بخرید.
برای خرید فونت میتونید از سایتهای Adobe Typkit و Fonts.com. استفاده کنید که فونتهای مناسب وب ارائه میدن و تا حد ممکن هم فونتهاشون خوب و تو همه مرورگرها یکسانه. معمولا فونتهای محبوب هم دارن و اگه نداشته باشن، قطعا براش فونت جایگزین میذارن. بد نیست خودتون هم یه یکم دنبال فونت بگردید و قیمتهارو بالا پایین کنید.
در مورد فونتها توجه به این دو نکته ضروریست:
برخلاف اینکه یه سری فونت برای استفاده کاربرها روی کامپیوتر از قبل نصب شده، اما برای استفاده آنلاین باید فونت مورد نظرتونو دانلود کنید. اگه از سبک و سیاق های زیادی روی سایتتون استفاده کنید سرعت بارگذاریش پایین میاد. اگه بخواهید بیشتر از دو فونت روی سایتتون بکار ببرید باید از سیستم فونتهای مکمل استفاده کنید و فونتها رو طبق اصول روی سایت استفاده کنید.
ضخامت و مدلهای فونتها: انتخاب فونت سایت باید طوری باشه که، به خصوص برای متن اصلی سایت، از دو اندازه مختلف استفاده بشه. اما از اون طرف اگه زیادی دیگه از مدلها و اندازه های مختلفی استفاده کنید، سرعت لود پایین میاد. خیلی وقتها مرورگرهای خاصی وقتی میخوان یه ضخامت مصنوعی به فونتهای رایج بدن، خرابکاری میکنن و متن رو ناخوانا میکنن.

• شروع کار

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

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

• صفحه پاسخ به سوالات رایج باید حاوی چه مطالبی باشه؟

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

• نکاتی برای صفحه پاسخه به سوالات رایج

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

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

• روایت داستان و محتوا

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

• محوریت کاربر و شخصی سازی

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

•  طراحی پیش بینی کننده

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

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

• طراحی رابط کاربری خوب: تفاوت بین یک رابط کاربری خوب و یک رابط کاربری بد

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

• ساده گرا باشه

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

• طراحی فلت داشته باشه

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

• برای نمایش مسائل پیچیده، از نمودار کمک بگیره

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

• وارد عمل بشید: اصول طراحی رابط کاربری مدرن

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

• برندسازی رو به حداقل برسونید

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

• خیلی کم از تصاویر استفاده کنید

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

• محتوای ساده

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

• برای جهتیابی به فهرست ها اعتماد نکنید

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

• اندازه پوشه (فایل)ها رو بزرگ نکنید

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

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

نباید جهتیابی اپلیکیشن ها سخت باشه- اپلیکیشن ها باید آسون باشن. رابط کاربری رو تا جایی که میشه ساده و تمیز نگهدارید. اینطوری کاربرها دعاتون هم می کنن. (حالا اگر هم دعا نکنن ولی حداقل براتون نظرهای نامهربانانه نمیذارن)

• تصاویر و ویدئوهای قهرمان

الآن دیگه خیلی از شرکت های طراحی سایت تو سایت هایی که طراحی می کنن از تصاویر تمام صفحه و حتی ویدئوهای تمام صفحه تو پس زمینه استفاده میکنن. در واقع همه به طریقی سعی میکنن با بهره وری از قوه تجسم مردم، روشون اثر بذارن. به جز این، بهبود سرعت و هزینه پهنای باند و ارائه خدمات ویژه برای مشترکان تلفن های همراه هم بخشی از روش معمول این شرکت ها به حساب میاد. در اصل، به خاطر این روشها (بهبد پهنای باند و کارایی سایت روی تلفن همراه) میشه تو سایتها از برتری تصاویر HD هم استفاده کرد.
تصاویر پس زمینه با وضوح بالا هم (در صورت درخواست مشتری) جزئی از طراحی های سایت دارکوب محسوب میشن. تو کارهایی که ما طراحی می کنیم تصویرها با استفاده از یه ابزار فشرده سازی مخصوص، فشرده میشن تا حجم کمتری بگیرن و سایت زودتر بارگذاری بشه. به علاوه از اثر "بزرگنمایی و محو شدن" هم برای ایجاد حس تحرک و پویایی بهره برده میشه.

• طراحی فلت و مینیمالیستی

چند سالی هست که طراحی فلت و مینیمالیستی که روی کارایی سایت تمرکز دارن رو بورس هستن. اینجور طراحی ها تمیز، با زاویه های باز زیاد، رنگ های روشن و معمولا با طراحی فلت دو بعدی ظاهر میشن (واژه flat در انگلیسی به معنی تخت و مسطح- مثل تصاویر دو بعدی). در مقابل سایت های قدیمی تر رنگ های سایه دار، شیب دار اریب داشتن که خیلی زود انقدر همه سایت ها همین مدلی شدن که تازگی و جذابیتشو از دست داد. یکی از اولین سایت هایی که از طراحی فلت استفاده کرد شرکت میکروسافت بود. سایت میکروسافت یه شی از زندگی واقعی رو، مثل تقویم، به یه تصویر واقع گرایانه کوچیک تبدیل کرده بود. برنامه هایی که میخوان طراحی فلت داشته باشن باید ساده باشن و از تصاویر آیکون مانندی که تو هه سایت ها و برنامه های میکروسافت می بینید استفاده کنن.
مهمترین ویژگی طراحی های فلت اینه که عناصر زینتی رو فقط بهم ریختگی میدونن. اگه یه عنصر طراحی هیچ کاربردی نداشته باشه، فقط باعث پرت کردن حواس کاربر از هدف اصلی سایت میشه. برای همین طراحی فلت ساده و مینیمالیستیه. نهایتا همه این کارها در جهت بهبود تجربه کاربری سایت انجام میشه.
معمولا تو طراحی های فلت این ویژگی ها هم بیشتر دیده میشه: میکرو تعاملات، گوشه های تیز و زاویه دار کمتر، فهرست های همبرگری، تصاویر معمول باطراوت و پیکرنگاری های زیاد. وقتی تو گوگل سرچ کنید کلی سایت های با طراحی فلت براتون میاره.

• پیمایش و الگوی عمودی

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

• استفاده از فونت های چاپی برای نوشته ها

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

• تصاویر متحرک کوچک با بارگذاری نامحسوس

از وقتی که سایت ها شروع کردن از تصاویر متحرک فلش استفاده کردن و HTML5 و CSS3 با حرکت های سایده ،برای بارگذاری صفحات متحرک رونق گرفتن، دکمه ها و فهرست های کشویی و چسبنده رواج پیدا کردن.
تو سایت M is for Money  ازTransitions  CSS استفاده شده. اسلایدی که تو سایت میبینید از یه انتقال انیمیشنی بهره میبره و  با تصاویر متحرک و زیبای اسلایدها یه تجربه "جوان پسند" برای سایت خلق می کنه. قبلا، انیمیشین هایی مثلا این رو باید با افزونه هایی مثل فلش درست می کرد. اما الآن CSS Transition ها دیگه نیازی به افزونه ندارن و خیلی سریع تر دانلود میشن. باید در عمل کارشو ببینید تا متوجه بشید.