اصول طراحی گرافیک و ظاهر سایت

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

جلب توجه
برای اینکه مخاطب را جلب وب سایت خود کنیم باید مطالب وب سایت و همچنین عکس ها و لینک های هدایت کننده(میانبر) را در موقعیت مناسبی از سایت قرار دهیم استفاده از فونت مناسب،رنگ قلم،لینک های میانبر می تواند در جلب توجه کاربر موثر باشد.توجه داشته باشید که حداکثر استفاده از رنگ در سایت سه و نهایت چهار رنگ می باشد.
رعایت فاصله
در طراحی وب سایت رعایت فاصله بین متون ،عکس ها و سایر عناصر تاثیر بسزایی دارد زیرا  رعایت نکردن این فواصل باعث خستگی چشم بیننده می شود.رعایت فاصله می تواند در تعادل طراحی تاثیر داشته باشد.
لینک های میانبر (NAVIGATION LINKS)
برای اینکه کاربران بتوانند به راحتی و با سرعت بیشتر به اطلاعات و محتوای سایت دسترسی پیدا کنند باید منوی وب سایت شما دارای لینک های مشخص باشد به عبارتی بازدید کننده موقعیت خود را پس از چند دسته بندی شناسایی کند.منوهای درختی نمونه ای از منوی استاندارد می باشند.
استفاده از قلم مناسب
استفاده از فونت خوانا  و مناسب برای سایت از اصولی مهم در طراحی سایت می باشد.سعی کنید در متونی که می خواهید وارد سایت کنید از بولد کردن حروف مهم استفاده کنید.به عبارتی متن خود را ویرایش کنید.
استفاده از تصاویر کم حجم
بهتر است تصاویری که در سایت قرار می دهیم از حجم کمی برخوردار باشد و  از فرمت های jpg و gif  استفاده کنید همچنین استفاده از تگ Alt الزامیست.
رعایت اصل سئو(بهینه سای موتورهای جستجو)
سئو  به معنای ایجاد صفحات وبی است که برای موتور های جستجو با ارزش و جالب است. سئو  یک فرایند کاملا علمی و تقریبا وقتگیر است که جزئیات آن دائما در حال تغییر است. بهینه سازی صفحات وب به این معناست که وب سایت شما در نتایج جستجو بالاترین رتبه را داشته باشد.به عبارت دیگر لینک صفحه یا صفحاتی از سایت شما در ازاء جستجوی کلمات کلیدی مرتبط با خدمات و یا محصولات سایت در بالاترین رتبۀ نتایج جستجو قرار گیرد.
با ایجاد کلمات کلیدی برای هر صفحه از وب سایت می توانید در بین جستجوگر گوگل در بهینه سازی سایت کمک کنید.

ثبت یک نام تجاری

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

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

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

تاثیر علم روانشناسی در طراحی سایت

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

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

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

برندینگ

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

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

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

روانشناسی رنگ ها

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

محتوای مفید

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

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

تفاوت UX و UI  در طراحی سایت

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

UX چیست ؟

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

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

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

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

UI چیست ؟

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

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

تفاوت بین UX  و  UI

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

طراحی سایت برای موبایل

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

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

شماره گیری خودکار:

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

<a href=”tel:+98216123”>call us!</a>

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

<a href=”skype:skype_user?call”> call us using skype!</a>

ایجاد افکت سه بعدی در طراحی سایت

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

مرحله اول

یک سند جدید با ابعاد 1000 در 750 پیکسل ایجاد نمایید. بر روی لایه پس زمینه دوبار کلیک کنید و در بخش Color Overlay (رنگ روکش)، رنگ قهوه ای تیره را انتخاب نمایید.

مرحله دوم

رولر ها را (View>Rulers) در سند خود فعال کنید و چند راهنما اضافه کنید. دو راهنمای افقی ایجاد کنید که اندازه اولی 30 پیکس و دومی 250 پیکسل باشد. بعد از آن دو راهنمای عمودی با اندازه های به ترتیب 100 و 900 پیکسل اضافه کنید.

گام سوم

با استفاده از ابزار Rectangle Tool، یک مستطیل ایجاد کنید. از guideها به عنوان مرجع استفاده کنید. نام لایه را به header تغییر دهید.

گام چهارم

برای رنگ پیش زمینه، سیاه را انتخاب نمایید. ابزار Ellipse را انتخاب کنید و شکلی را ایجاد کنید که در آینده به صورت سایه خواهد بود. و کمی از مستطیل سفید رنگ خارج شوید. نام لایه را به shadow تغییر دهید و آن را زیر لایه هدر بگذارید. سپس آن را به امارت فیلتر تبدیل کنید و از Gaussian Blur استفاده کرده و opacity آن را به 60 درصد تغییر دهید.

مرحله پنجم

لایه هدر را انتخاب کنید، دوبار بر روی آن کلیک کنید تا پنجره Layer Style باز شود. سبک گرادیانت را به رادیال تغییر دهید. رنگ را به دلخواه انتخاب کنید.

مرحله ششم

در این مرحله، ابزار لاین را انتخاب کنید و رنگ روشن تری از گرادیانت هدر (مثلا قرمز) سلکت کرده و یک خط ایجاد نمایید. سپس رنگ سیاه را انتخاب کنید و یک خط دیگر با فاصله یک پیکسل در بالای خط قرمز بکشید. دو خط را انتخاب کرده و آنها را با هم ترکیب (گروه) کنید و نام آن را "vDivider" بگذارید. به این آدرس Layer>Layer Mask>Reveal All رفته، از ابزار گرادیانت استفاده کنید، یک گرادیانت رادیال از مشکی به سفید انتخاب کنید و یک ماسک به گروه اعمال نمایید. گرادیان را از مرکز گروه آغاز کنید.

مرحله هفتم

منو را با استفاده از ابزار Horizontal Type ایجاد کنید. از رنگ سفید برای رنگ متن استفاده کنید. تمام لینک ها را انتخاب کنید و آنها را گروه نمایید و نام گروه را به White Links تغییر دهید. گروه را کپی کنید و آن را در زیر White Links قرار دهید. رنگ متن را به مشکی تغییر دهید و گروه را یک پیکسل به سمت بالا چپ جابه جا نمایید. این موجب ایجاد یک سه بعدی عالی در طراحی سایت می شود.

مرحله هشتم

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

مرحله نهم

همه گروه خطوط را انتخاب کنید و در یک گروه جدید قرار دهید و نام آن را toDividers بگذارید. بعد از آن یک لایه ماسک بر روی آن اعمال کنید از این طریق Layer>Layer Mask>Reveal All، اما این بار از لاینر (Linear) استفاده کنید.

مرحله دهم

فایل الگو را باز کنید و یا هر الگویی را که دوست دارید را انتخاب کنید.همه را انتخاب کنید و به مسیر Edit>Define Pattern بروید و آن را webPattern بنامید. لایه هدر را کپی کنید و نام آن را به الگو تغییر دهید. به Layer Styles رفته و ویژگی Gradient Overlay را غیر فعال کنید و یک Pattern Overlay تنظیم نمایید. webPattern را انتخاب کنید و Blend Mode را به Color Overlay تغییر دهید. و پس از آن یک لایه ماسک به لایه الگو با استفاده از گرادیانت رادیال اعمال نمایید. و در نهایت لوگو را اضافه کنید.

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

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

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

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

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

http://bravepeople.co

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

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

 http://www.evanshalshaw.com/more/bondcars

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

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

http://www.borngroup.com

انتخاب و چیدمان منحصر به فرد منوها در طراحی سایت

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

http://www.impossible-bureau.com

استفاده از چیدمان چند تصویر در زمینه

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

http://www.firebox.com

طراحی سایت فلت

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

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

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

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

اصول طراحی سایت برای نوجوان

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

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

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

نگاه نوجوان به استفاده از سایت

نوجوانان در هر لحظه برای هدف خاصی در اینترنت حضور میابند. دلایل حضور نوجوانان در اینترنت عبارت است از:

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

از نگارش صحیح استفاده کنید

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

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

جذابیت بیش از حد سایت

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

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

سرعت سایت

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

تفاوت میان گروه های سنی

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

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

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

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

چشم انداز کلی : قبل و بعد از روند های فعلی

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

جلب توجه با استفاده از گیف ها (Gif)

خیلی خوب! بیایید واضح تر بگوییم. سوء استفاده از تصاویرgif می تواند به طور جدی به تجربه کاربری (UX) سایت شما صدمه بزند. اما استفاده صحیح و به موقع از گیف ها در طراحی سایت می تواند با تاکید بر جنبه های مهم آن می تواند به سایت زندگی ببخشد و جذابیت برای کاربر را به همراه داشته باشد.

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

با استفاده از اشکال هندسی سه بعدی ، فرآتر از چهارچوب بیاندیشید.

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

با استفاده از تایپوگرافی های نمایشی، قوانین را بشکنید.

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

پادشاه هنر مرزی (edgy art) باشید.

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

شخصی سازی نقشه گوگل

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

 تکنیک دکمه نامرئی در طراحی سایت

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

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

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

برای نمونه از  استفاده از این دکمه های نامرئی می توان به دکمه های نامرئی  اطراف صفحه نمایش iphone اشاره کرد.

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

عناصر طراحی دکمه های نامرئی

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

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

طراحی سایت تک صفحه ای

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

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

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

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

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

طراحی سایت با فرمت فلش

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

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

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

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

استفاده از فضای منفی در طراحی سایت

فضای منفی در طراحی سایت چیست؟

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

بسیاری از طراحان بر این باورند که هر چه از فضای کمتر استفاده ی بیشتری انجام دهند در طراحی وب سایت کاربر را بیشتر جلب می کند اما در همه ی موارد کارامد نیست!

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

کاربرد فضای منفی در طراحی سایت

دو نوع فضای مثبت و منفی وجود دارد.

فضای مثبت: به فضایی که اجزای صفحه مانند متن، تویر، منوها و .... آنرا فرا گرفته اند می گویند.

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

فضای منفی نیز به دو بخش خرد (micro)  "فضای مابین اجزای بسیار کوچک مانند فاصله ی بین بلوک های متنی" و بخش کلان (macro) "فضای مابین اجزای بزرگ مانند هدر وفوتر" تقسیم می شود.

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

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

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

زیاده روی در استفاده از فضای خالی

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

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

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

تکنیک های طراحی سایت Infinite Scrolling

Infinite Scrolling یا صفحات بی پایان

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

در این مقاله مزایا و معایت این تکنیک را شرح می دهیم.

مزایای تکنیک Infinite Scrolling

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

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

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

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

معایب تکنیک صفحات بی پایان

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

خوب حال این سوال پیش میاید که چرا موتور جستجوگر گوگل از این فن در image search استفاده کرده و در قسمت جستجوی صفحات سایت  از آن استفاده نکرده است و تنها 10 گزینه ی اول را در صفحه نمایش می دهد؟

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

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

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

از دیگر معایب infinite scrolling این است که کاربر با اسکرول کردن بیشتر مطالب بیشری بارگذازی می شود و هرگز به فوتر سایت نمی رسد برای رفع این مشکل می توان از فوتر های سایت استفاده کرد و یا با قراردادن دکمه"نمایش بیشتر" بارگذاری مطالب جدید را کنترل کرد.

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

هم زمان با معرفی کردن اندروید 5 ،Material Design  نیز معرفی شد . بعد از معرفی کردن Material Design  فریم ورک های دیگری نیز وجود داشت که برای کاربردی کردن اصول ارائه (UI) توسط گوگل ایجاد شده بود . با ارائه و معرفی Material Design  یک تحدید جدی برای Bootstrap ایجاد شد.در این مقاله از طراحی سایت قصد داریم به مقایسه این دو بپردازیم.

تفاوت های Material Design و  Bootstrap

از دیگاه برخی افراد مقایسه کردن این دو باهم از اساس اشتباه است ، زیرا Material Design را سبکی برای استاندارد سازی  Bootstrap به منظور سرعت بخشیدن به رسپانسیو سایت می دانند.

روند گسترش و توسعه

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

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

مقایسه کاربران Bootstrap و Material Design

ساختار و شکل دهی صفحه

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

نمونه ستون بندی در Material Design

هر دوMaterial Design  و  Bootstrapصفحه را به 12 بخش تقسیم می کنند. در هر دو ستون بندی ها و ریسپانسیو رعایت شده و شما با استفاده از کلاس های ساده می توانید ستون ها را در ابعاد دلخواه برای نمایش به کاربران انتخاب کنید.

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

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

ساخت Favicon

یکی از نکاتی که طراحان وب سایت به آن توجه کمی می کنند طراحی Favicon است. Favicon همان ایکنی است کا در بالای مورورگر و در کنار آدرس وب سایت شما قرار می گیرد. تمام حقوق مادی و معنوی این مقاله متعلق به شرکت طراحی سایت مبنا به آدرس وب سایت www.sitedesign-co.com می باشد.

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

1. ابتدا لوگو مورد نظر خود را با فرمت Png انتخاب کنید ، سپس با مراجعه به وب سایت Genfavicon.com و آپلود لوگو خود Favicon خود را از سایت تحویل بگیرید.

2. پس از دانلود این فایل را در Root وب سایت خود آپلود کنید.

3. کد زیر را بین دو تگ <head></head> قرار دهید:

 <link rel=”shortcut icon” href=”http://www.example.com/favicon.ico” type=”image/x-icon”>
<link rel=”icon” href=”http://www.example.com/favicon.ico” type=”image/x-icon”>

به همین راحتی Favicon خود را ساخته و در وب سایت خود قرار داده اید. لازم به ذکر است جدا از بحث زیبایی Favicon از فاکتور های سئو و بر رنکینگ شما موثر است.

دلایل عدم مطالعه محتوای وب سایت

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

√ کاربران وب سایت ها مطالب را اسکن می کنند:آمارها نشان  می دهد که تنها 16 درصد افراد مطالب را بصورت کلمه به کلمه می خوانند و سایر افراد مطالب را اسکن می کنند.به منظور ایجاد متن های مهم و برای خوانده شدن آن، عناصر بسیار مهمی وجود دارد که شامل:

• استفاده از متن های پر رنگ یا Bold شده

• استفاده از Bullet ها (●،٭،- و...) یا نشانه گذاری در متن

• استفاده از عناوین اصلی و فرعی

• اندازه ظاهری فونت ها

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

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

√ قرار دادن متن های مهم در بالای fold :ابتدا به تعریف fold می پردازیم، fold خطی است که  اولین صفحهء مشاهده شده توسط کاربر را از بخشی که کاربر برای دیدن اسکرول می کند، تقسیم می نماید. البته این خط تغییراتی خواهد کرد که این تغییر بستگی به رزولوشن صفحه نمایش کاربر دارد.
اما مطالعات نشان می دهد که بسیاری از کاربران بیشتر از وضوح 1024×768 و بالاتر در صفحه نمایش خود استفاده می کنند.
اطمینان حاصل فرمایید که لینک ها و call to action های مهم شما در بالای fold همراه با متون تکمیلی در قسمت زیر به سمت انتهای صفحه وجود دارد.

√ موتورهای جستجو را فراوش نکنید:هرگز فراموش نکنید که محتوای وب سایت شماست که رنکینگ وب سایت شما را می سازد و یا برعکس، خراب می کند. بنابراین مطمئن شوید که از راهنمایی ها و نکات ذکر شده در نوشتن محتوا در وب سایت خود استفاده کرده اید.

طراحی سایت روان یا Liquid Design

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

یک طراح سایت باید به تفاوت های احتمالی میان بازدیدکنندگان یک سایت را بداند و به این تفاوت ها توجه داشته باشد،این تفاوت ها شامل موارد زیر می باشند:

√ رزولوشن صفحه نمایش
√ نوع مرورگر شامل فایرفاکس، کروم، اینترنت اکسپلورر و…
√ تولبارهای اضافی نصب شده بر روی مرورگر کاربران مانند تولبار الکسا
√ سیستم عامل کامپیوتر کاربران

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

در طراحی سایت ثابت معمولا بخش های مختلف دارای ابعادی مشخص و تعیین شده بر اساس پیکسل هستند و در بخش های مختلف با تغییر صفحه نمایش کاربر اندازه خود را حفظ می کند.در طراحی سایت ثابت پهنای کلی صفحه بر روی ۹۶۰ پیکسل تنظیم شده است و به سه بخش اصلی به پهنای ۵۲۰، ۲۰۰ و ۲۰۰ پیکسل تقسیم شده است. عدد ۹۶۰ یک استاندارد رایج در این روش است زیرا عموم کاربران با رزولوشن ۱۰۲۴*۷۶۸ پیکسل از صفحات اینترنتی بازدید می کنند.

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

مزایای طراحی سایت روان

• سایت طراحی شده کارایی بهتری دارد زیرا با توجه به تنظیمات کاربران خود را تغییر میدهد.

• فضای بین بخش های اصلی تناسب خود را حفظ کرده و نمایش سایت شما در هر شرایطی یکسان خواهد بود.

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

معایب طراحی سایت روان

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

• تصویر، ویدئو و محتوایی که باید ابعاد مشخصی داشته باشد نمیتواند با تغییر ابعاد صفحه خود را هماهنگ کند.

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

ممکن است بکارگیری تکنیک طراحی سایت از نوع روان برای شما مشکلات زیادی را به همراه داشته و زمان طراحی و رفع عیب را تا حد زیادی افزایش دهد. ولی میتوانید با ترکیب این دو روش فضای کاربری مناسبی برای سایت خود ایجاد کنید بعنوان مثال با استفاده از تکنیک طراحی روان در هدر و فوتر سایت و تکنیک سایت ثابت برای محتوای میان آنها شما بیشتر معایب این دو روش را بکار گرفته اید. میتوانید با تغییر رزولوشن صفحه نمایش یا بزرگنمایی مرورگر خود نحوه نمایش آن را در شرایط مختلف بررسی کرده و ایرادات احتمالی را شناسایی و رفع کنید. در اکثر مرورگرها با نگه داشته دکمه “Ctrl” و فشردن کلیدهای “+” یا “-” میتوانید بزرگنمایی تصویر را تغییر دهید.

اهمیت صفحه ی اصلی سایت در ترافیک وب سایت

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

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

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

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

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

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

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

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

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

• بروز رسانی:بارها تاکید کرده ایم که پس از طراحی سایت به صورت منظم مطالب خود را بروز کنید زیرا انجام این کار می تواند توجه موتورهای جستجو را به خود جلب نماید که به دنبال آن می تواند در سئوی سایت شما موثر باشد همچنین به بازدید کننده نشان می دهد که سایت شما بروز است.

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

Hero header در طراحی سایت

تکنیکHero header در طراحی سایت

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

تکنیک های Hero header در طراحی سایت چیست؟

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

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

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

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

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

نکاتی برای استفاده از hero header در طراحی سایت

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

نمونه طراحی سایت هیرو هدرها توسط شرکت طراحی سایت مبنا

اهمیت گالری تصاویر در وب سایت

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

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

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

√ آیا گالری تصاویر شما در راستای اهداف وب سایت شما طراحی شده است؟

√ آیا تصاویر و عکس ها در گالری عکس وب سایت شما دارای کیفیت حرفه ای می باشد؟

√ آیا برای عکس های خاصی که دارای پتانسل ویژه ای هستند، دکمهء " خرید هم اکنون" طراحی نموده اید؟

√ آیا تصاویر و عکس های موجود در گالری وب سایت شما به وضوح کلمات محتوای وب سایت شما هستند؟

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

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

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

مزایا و معایب سایت های فلش

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

√ عدم امکان قابلیت داینامیک نمودن محتوا

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

√ حجم بالای سایت های فلش

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

√ عدم ایندکس شدن محتوای سایتهای فول فلش توسط موتورهای جستجو

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

√ هزینه بالای طراحی سایت به صورت فول فلش و پشتیبانی

معمولاً طراحی سایت از نوع فول ‌فلش که از قابلیتهای فلش بهترین استفاده می برند هزینه برتر هستند. ضمن آنکه پشتیبانی آنها نیز مشکل است.

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

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

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

بهترین نوع فایل تصویر برای استفاده در وب سایت چیست؟

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

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

نکته اول در تعیین یکی از 3 نوع فرمت تصاویر، محتوای تصویر است. برای تصاویری که غالبا از رنگ های solid ( سفت و جامد) تشکیل شده اند از فرمت GIF یا PNG استفاده کنید. برای تصاویر تمام رنگی از فرمت JPG استفاده کنید.

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

فشرده سازی JPEG از سوی دیگر، یک نوع فشرده سازی " دارای اتلاف" است، یعنی زمانی که شما یک تصویر را در فرمت JPG ذخیره می کنید، اطلاعات آن از بین می رود. این فرمت با استفاده از الگوریتم ها برای تشریح بلوک های 8*8 کار می کند و این کار را برای گول زدن چشم انجام می دهد.

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

شفافیت

عامل دیگری که در فرمت عکس ها متنوع است، شفافیت است. GIF و PNG هر دو به شما اجازه می دهند تا بخشی از عکس را بی رنگ ( در اصطلاح transparent) کنید. این امکان در فرمت JPG وجود ندارد.

Call To Action  یا  CTA چیست؟

?What is CTA

CTA مخفف Call To Action است. همانطور که از نامش مشخص است هدف این تکنیک اینست که کاربر را تشویق به کلیک بر روی دکمه  CTA می کند تا فعالیت مورد نظر انجام شود. CTA ها در بنرها ، وب سایت ها و خبرنامه ها کاربرد دارد.

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

در طراحی سایت  ،Call To Action  ها را در کجا بکار ببریم؟

اولین سوالی که برای طراح سایت بوجود میاید این است که محل مناسب قراردادن CTA کجای صفحه سایت، بنر ویا خبر نامه است!

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

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

چگونه Call To Action  خود را  گیرا و تاثیر گذار کنیم؟

متن یا عبارتی که برای CTAها بکار میبریم بسیار حائز اهمیت است. در کشور ما اکثر طراحان از عبارت "اطلاعات بیشتر" استفاده می کنند که تاثیر گذاری چندانی ندارد.

برای انتخاب عبارت مناسب برای  CTA ابتدا باید مقدمه و زمینه کلیک کردن روی  CTAتان را فراهم کنید.

با پاسخ دادن به این پرسش "کسب و کار شما چه خدماتی را به کاربران ارائه می دهد؟" برای موثر واقع شدن CTA کافیست در یک عبارت ویا جمله خدماتی را که عرضه می کنید شرح دهید.  

نکاتی که به هنگام استفاده Call To Action در طراحی سایت باید رعایت شوند

1. اندازه ی CTA باید بزرگ باشد تا هدف درخواست انجام فعالیت که جلب توجه کاربر است محقق شود.
2. فضای کافی برای CTA در نظر بگیرید زیرا شلوغ کردن صفحه کاربرد CTA را از بین میبرد. پس ترکیب مناسبی بین CTA و دیگر الملن های صفحه ایجاد کنید.
3. CTA  را در ابتدا و بالای صفحه قرار دهید تا کاربر بدون اسکرول کردن به پایین صفحه آن را مشاهده کند.
4. یکی از عوامل مهم و تاثیرگذار برای جلب توجه CTA استفاده از تضاد رنگی است.برای این کار می توانید از رنگی مخالف  رنگ زمینه برای متن ویا دکمه خود استفاده کنید.
5. استفاده از جلوه خاص پس از قرارگیری ماوس بر روی  CTA یکی دیگر از اقدامات جلب توجه است. مانند تغییر رنگ دکمه به هنگام قرار دادن ماوس بر روی دکمه یا متن.  
6. شکل اغلب CTA ها مستطیل شکل است در صورت استفاده از تصاویر گرافیکی  از تصاویری استفاده کنید  که دارای گوشه های  گرد و خمیده باشد. گرافیک هایی که دارای گوشه های تیز هستند کاربر را به یاد تبلیغات می اندازد و نرخ کلیک را کاهش می دهد.
7. استفاده از جهت ها و فلش ها برای جلب توجه بیشتر CTA
8. در CTA بیشتر بر روی متن توجه کنید تا گرافیک! تحقیقات نشان می دهند که کاربران محتویات متنی را بیشتر از محتویات گرافیکی می خوانند.
9. ترجیحا و تا حد امکان از چند CTA در صفحه استفاده نکنید. در صورت استفاده از چند CTA در طراحی سایت آنها را اولویتبندی کنید. آنهایی که مهمترند را از لحاظ اندازه بزرگتر و از لحاظ مکان در موقعیت بالاتر قرار دهید. 

بهترین رنگ برای Call To Action چه رنگی است؟

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

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

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

منابع فونت

برای دریافت فونت مناسب با طراحی سایت خود، وب سایت های زیادی وجود دارند که می توانید از آنها استفاده کنید. برخی از این وب سایت ها عبارتند از : Font Squirrel ، فونت وب گوگل (Google Web Fonts) و نرم افزار فونت وب Adobe Edge.

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

1. فونت مونتسرات (Montserrat) : فونت مونتسرات از تایپوگرافی شهری منطقه Buenos Aires الهام گرفته شده است.
2. Abril Fatface : یک فونت عالی در طراحی سایت برای جالب نمودن سرفصل ها است.
3. Playfair Display : مناسب برای سرفصل های و فضاهای کم
4. GT Walsheim: GT Walsheim یک فونت مناسب برای طراحی وبلاگ است.
5. فونت Merriweather: یک انتخاب خوب برای خواندن طولانی در صفحه نمایش.
6. Josefin Sans : Josefin الهام گرفته از سبک طراحی سوئدی است.
7. Gravitas One: این فونت وب سایت برای هدر ها و تب ها ایده آل است.
8. Jura: این فونت در چهار وزن متفاوت وجود دارد، بنابراین می توان از آن در بخش های مختلف طراحی سایت استفاده کرد.
9. League Gothic: این فونت نیز یکی از فونت های ستاره ای در طراحی سایت است.
10. Fjord: یک فونت مناسب برای محتوا در طراحی سایت است.
11. Amaranth: این فونت در بخش های مختلف طراحی سایت کاربرد دارد.
12. Poly: این فونت وب رایگان در اصل برای زبان Wayuunaiki طراحی شده است.
13. Gentium Basic: این فونت وب برای طراحی سایت چندزبانه کاربردی است. زیرا به صورت چندزبانه طراحی شده است.
14. Open Sans: این وب فونت رایگان، مرتب و بهینه سازی شده برای وب و تلفن همراه است.
15. Ledger Regular: این فونت مورد استاده در طراحی سایت دارای خوانایی عالی حتی بر روی صفحه نمایش با وضوح پایین است.
16. Signika: وب فونت رایگان Signika با وضوح در ذهن طراحی شده است.
17. Josefin Slab: ارتفاع حروف کوچک این فونت، نصف ارتفاع حروف بزرگ آن است.
18. Forum: این وب فونت رایگان به ویژه برای سرفصل ها بسیار موثر است.
19. Tikal Sans: این فونت مناسب برای طراحی سایت، نام خود را از شهر اصلی ماهایا گرفته است.
20. Arvo: یک فونت وب بسیار عالی است.