نوشته‌ها

۷ ابزار طراحی جدید مبتنی بر وب

در سال ۲۰۱۶ ابزار های جدید مبتنی بر وب طراحان بروزرسانی شده است که به راحتی برروی مرورگر ها اجرا می شوند و از این طریق کار طراحان را ساده کرده است. این روزها دائما ابزارهای جدید طراحی در حال معرفی شدن هستند و خبر خوب برای طراحان سایت،توسعه دهندگان وب و … این است که بسیاری از آن ها رایگان هستند. در این مقاله با ۷ ابزارهای جدید مبتنی بر وب طراحان آشنا می شوید و به این ترتیب می توانید با گام های استوارتری پادر دنیای طراحی بگذارید.

اگر موبایل،لپ تاپ،تبلت یا رایانه شخصی شما پر شده است از برنامه های متفاوت طراحی،می توانید برنامه های طراحی مبتنی بر مرورگر را مد نظر قرار دهید. نکته مورد توجه این است که بسیاری از قدرتمندترین ابزارهای جدید به صورت مبتنی بر مرورگر ارائه می شوند. در این مقاله به ۷ ابزار جدید مبتنی بر وب (browser-based) برای طراحان در سال ۲۰۱۶ خواهیم پرداخت.

۱٫Gravit

1

پس از کنار گذاشته شدن Adobe Fireworks،ابزارهای تصویرسازی و طراحی UI چندین برابر شدند و استفاده از این ابزار ها نیز افزایش چشم گیری در میان طراحان داشته است در میان این کشمکش ها برای جلب توجه طراحان،اکنون Gravit که یکی از ابزار های جدید مبتنی بر وب طراحان می باشد این خدمات را در مرورگر شما ارائه می دهد. Gravit  ست ابزار کاملی از جمله ،  auto-shapes، فیلترهای live  و path editing modes را در اختیار طراحان قرار می دهد.

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

۲٫Boxy SVG

2

Boxy SVG یکی دیگر از  vector graphics editor هایی است که با هدف ایجاد ابزاری جایگزین برای  تصویر سازی و طرح اولیه ایجاد شده است.این ابزار برای مروگر کروم ساخته شده است و امکان باز کردن و ذخیره سازی فرمت های  SVG و  SVGZرا به شما می دهد. Boxy SVG  بیش از صد فرمان با قابلیت استفاده از کلید های میانبر را دارا می باشد. این ابزار  امکان import کردن بیت مپ ها و فونت های گوگل را در اختیار شما قرار می دهد و همانند Gravit  ابزاری رایگان است.

۳٫Figma

3

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

۴٫Unique Gradient Generator

4

این ابزار مبتنی بر مرورگر به شما کمک می کند تا تصاویر پس زمینه blur ایجاد کنید که به سادگی در پروژه های مختلف قابل استفاده باشد. اساس کار این ابزار جدید مبتنی بر وب به این شیوه است که در ابتدا قسمتی از یک تصویر ذخیره شده بیرون کشیده می شود و مقیاس آن به ۱۰۰ درصد افزایش داده می شود و سپس با استفاده از الگوریتم های image smoothing پس زمینه ی blur ایجاد می شود. برای استفاده از این تصویر blur به عنوان پس زمینه در HTML،بر روی Generate CSS کلیک کنید. توجه داشته باشید که تصاویر مورد استفاده تصاویر Public بوده و دغدغه ای بابت قوانین کپی رایت نداشته باشید.

۵٫Modelo

5

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

۶٫Browser Calories

6

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

با نصب این افزونه بر روی مرورگرتان یک آیکون به شکل دونات در کنار آدرس بار ظاهر می شود.هر بار که بر روی آن کلیک کنید performance budget را برای تبی که در مرورگرتان روی آن قرار دارید محاسبه می کند.شما می توانید برای  Browser Calories رقبایتان را تعریف کنید و نتایج را با نتایج رقبایتان مقایسه کنید.افزونه Browser Calories برای مرورگر های کروم، فایرفاکس و اپرا ارائه شده است.

۷٫Vectary

7

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


وبسیما

۶ نکته طلایی تایپوگرافی در طراحی سایت

تایپوگرافی در طراحی سایت

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

فواید تایپوگرافی:

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

طراحی سایت با تایپوگرافی

۶ نکته طلایی تایپوگرافی در طراحی سایت

۱٫مهمترین عامل؛ خوانایی

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

۲٫ساده اما تاثیرگذار

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

نکات زیر را هنگام طراحی و استفاده از تایپوگرافی در طراحی سایت در نظر داشته باشید:

  • افزایش اندازه فونت
  • استفاده از رنگ های متضاد با محیط در تایپوگرافی برای ایجاد contrast
  • استفاده از حالت bold فونت ها

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

۳٫Serif vs. Sans Serif

سریف (Serif) به خطوط کوچک یا زائده‌هایی گفته می‌شود که در نقاط پایانی یک حرف، رقم یا نماد افزوده می‌شود. فونت‌هایی که دارای این خطوط کوچک هستند را فونت‌های سریف می‌نامند.فونت‌های سنزسریف (Sans-serif) نیز به فونت‌هایی گفته می‌شود که دارای این زوائد نیستند. (sans به معنای “بدونِ …” می‌باشد و کلمه ای فرانسوی است)

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

چند نمونه از فونت های سریف محبوب:

  • Caslon
  • Garamond
  • Freight Text
  • Minion
  • FF Meta Serif

چند نمونه از فونت های سنزسریف محبوب:

  • Proxima Nova
  • Futura
  • Avenir
  • Open Sans
  • Helvetica Neue

4.سبک دست نوشته بر روی لایه عکس

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

تایپوگرافی در طراحی سایت

۵٫Superimposed/Shared Space

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

۶٫عدم استفاده از چندین خانواده فونت

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


وبسیما

۱۰ نمونه عالی استفاده از گیمیفیکیشن در طراحی سایت

تکنولوژی های مدرن وب افق های جدیدی را برای طراحان خلاق آشکار کرده است.اگر شما هنوز در سوگ پایان دوران Flash هستید به احتمال زیاد در حال از دست دادن فرصت و امکاناتی هستید که WebGL و HTML5 و سایر کتابخانه ها و زبان های پیشرفته فراهم می کنند.زمان آن رسیده که گذشته را رها کنید و خود را با شیوه ها و متدهای طراحی روز دنیا هماهنگ کنید.

بازی های آنلاین تحت مرورگر یکی از زمینه هایی است که در این سال ها پیشرفت بسیاری کرده است .در مورد غول های عرصه بازی های رایانه ای مانند Call Of Duty و Battlefield صحبت نمی کنیم،بلکه در مورد بازی های کوچکی که در سایت های معمولی اجرا می شوند.از طرفی انکار اینکه امروزه گیمیفیکیشن یک ترند در اکثر زمینه ها محسوب می شود،امری است دشوار.

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

۱٫Colony TV

1-Colony-TV

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

۲٫The Most Decisive Game

2-The-Most-Decisive-Game

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

۳٫Futurama: Game of Drones

3-Futurama

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

۴٫Game of Scroll

4-Game-of-Scroll

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

۵٫The Avenging Llama

5-The-Avenging-Llama

The Avenging Llama یک سرویس تف کردن (توهین کردن با ارسال ایمیل ناشناس) است که در طراحی این سایت از گیمیفیکیشن و الهام گرفته شده است و طراحی سایت به صورت یک بازی ۵ مرحله ای در نظر گرفته شده است.

۶٫TravelZoo

12-TravelZoo

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

۷٫Trump Donald

7-Trump-Donald

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

۸٫Celebrity Betmatch

8-Celebrity-Betmatch

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

۹٫FarCry Primal

9-FarCry-Primal

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

۱۰٫mira

13-Mira

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


وبسیما

۶ نکته طلایی تایپوگرافی در طراحی سایت

تایپوگرافی در طراحی سایت

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

فواید تایپوگرافی:

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

طراحی سایت با تایپوگرافی

۶ نکته طلایی تایپوگرافی در طراحی سایت

۱٫مهمترین عامل؛ خوانایی

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

۲٫ساده اما تاثیرگذار

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

نکات زیر را هنگام طراحی و استفاده از تایپوگرافی در طراحی سایت در نظر داشته باشید:

  • افزایش اندازه فونت
  • استفاده از رنگ های متضاد با محیط در تایپوگرافی برای ایجاد contrast
  • استفاده از حالت bold فونت ها

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

۳٫Serif vs. Sans Serif

سریف (Serif) به خطوط کوچک یا زائده‌هایی گفته می‌شود که در نقاط پایانی یک حرف، رقم یا نماد افزوده می‌شود. فونت‌هایی که دارای این خطوط کوچک هستند را فونت‌های سریف می‌نامند.فونت‌های سنزسریف (Sans-serif) نیز به فونت‌هایی گفته می‌شود که دارای این زوائد نیستند. (sans به معنای “بدونِ …” می‌باشد و کلمه ای فرانسوی است)

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

چند نمونه از فونت های سریف محبوب:

  • Caslon
  • Garamond
  • Freight Text
  • Minion
  • FF Meta Serif

چند نمونه از فونت های سنزسریف محبوب:

  • Proxima Nova
  • Futura
  • Avenir
  • Open Sans
  • Helvetica Neue

4.سبک دست نوشته بر روی لایه عکس

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

تایپوگرافی در طراحی سایت

۵٫Superimposed/Shared Space

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

۶٫عدم استفاده از چندین خانواده فونت

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


وبسیما

طراحی سایت مبتنی بر کارت

یکی از شیوه های طراحی که در سال ۲۰۱۶ طراحان وبسایت برای استفاده از آن در طراحی سایت ها نسبت به آن تمایل و گرایش نشان داده اند استفاد از کارت در طراحی سایت می باشد. فواید و کارآمدی کارت ها خارج از دنیای دیجیتال (مانند بیزنس کارت،کارت های بازی و …) برای ما شناخته شده است. ایده استفاده از کارت به این منظور بوده که اطلاعات مرتبط درمورد یک موضوع در یک ظرف گنجانده شود.

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

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

مایکروسافت نیز در طراحی ویندوز ۸ و همچنین در ادامه ی آن،ویندوز ۱۰، به طور چشم گیری از کارت ها و نمایش کارتی در طراحی استفاده کرد که همه این ها نشان دهنده ی ایجاد یک تمایل و روند جهانی به سمت استفاده از کارت در طراحی دیجیتال است.

فواید استفاده از کارت در طراحی دیجیتال

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

روش های کارآمد برای استفاده از کارت در طراحی سایت

۱٫یکتایی: یک کارت، یک مفهوم، یک کلیک

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

یکتایی کارت ها

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

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

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

۳٫تمامی سطح کارت را قابل کلیک کردن تعریف کنید.

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

طراحی سایت روش کارت

۴٫Grids vs. Masonry

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

هیچکدام از این دو انتخاب بر دیگری برتری ندارد،هر دو روش را آزمایش کنید و به کمک بازخورد کاربران یکی را انتخاب کنید.

۵٫Split-screen Style

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

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


وبسیما

تفاوت طراحی رابط کاربری و تجربه کاربری

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

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

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

راهول ورشنی از موسسین شرکت foster.fm در این باره می گوید:

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

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

تجربه کاربری

طراحی تجربه کاربری چیست؟

طبق تعریفی که در ویکی پدیا آمده است طراحی تجربه کاربر (UXD یا UED) فرایند بهبود رضایت مشتری و وفاداری او با بهبود قابلیت استفاده، سهولت استفاده و لذت های ارائه شده در تعامل بین مشتری و محصول است.

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

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

تجربه کاربری تمام جنبه های تعامل کاربر با شرکت، خدمات و محصولات شرکت را شامل می شود.

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

طراحی رابط کاربری

طراحی رابط کاربری چیست؟

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

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

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

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

  •  Sense: شامل کنش و واکنش محصول در رابطه با ورودی کاربر و یا محیط های نمایش متفاوت
  •  Skin : نمایش بصری و گرافیکی محصول
  • Makeup :شامل دستورالعمل ها و نکات و راهنماهایی که کمک می کند کاربر تجربه بهتری داشته باشد.

رابط کاربری و تجربه کاربری، مکمل یکدیگر

UI  و UX مکمل یکدیگر شناخته می شوند.هر دوی آن ها برای محصول و ایجاد تجربه ای دلنشین برای کاربر ضروری اند و نمی توان یکی را بر دیگری ارجح دانست.

هلگا مورنو ،طراح و کارشناس،در مقاله ی “فاصله بین UX  و UI” و “تفاوت UI و UX” در اینباره می گوید:

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

تفاوت ui و ux

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

در ادامه ده مورد از متدهای طراحی سایت که در سال ۲۰۱۶ مورد استقبال طراحان سایت قرارگرفته است را برای شما لیست کرده ایم:

  1. Microinteractions
  2. Cards
  3. Minimalist Design
  4. Flat & Material Design Hybrid
  5. Rich Animations
  6. Dramatic Typography
  7. More Vibrant Colors
  8. Long Scrolling
  9. HD Visuals
  10. Illustrations


وبسیما

روانشناسی رنگ ها در طراحی سایت

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

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

روانشناسی رنگ در طراحی سایت

روانشناسی رنگ در طراحی سایت

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

در انتخاب رنگ به چه مواردی باید دقت شود؟

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

– پیروی از یک طیف رنگی خاص در سایت

– وجود ارتباط میان رنگهای انتخابی لوگو ها و صفحات

– انتخاب رنگبندی خاص برای صفحات مختلف با گروه کاربران مختلف ( برای مثال اگر در سایت برای کودکان صفحه ای دارید نباید از رنگبندی صفحه اخبار و مقالات سایت خود استفاده کنید )

 – رنگ ها اثر خاصی در ۹۰ ثانیه اول در دید کاربر می گذارد

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

– هر رنگ پیام خاصی به چشم بیننده ارسال می کند

ویژگی های رنگ های مختلف :

– سفید : پاکیزگی ، صداقت ، صمیمیت ، ملایمت

رنگ سفید باعث رفع خستگی و القا انرژی مثبت به کاربر است.

– مشکی : ظرافت ، قدرت ، دلیری ، شهامت ، فریبندگی ، شیطان ، مهارت

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

– قهوه ای : تاثیر گذار ، متانت ، توانگر مالی ، کمک کننده

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

– خاکستری : صمیمیت ، اعتبار ، نفوذ ، عملی بودن تصمیم

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

– قرمز : توانایی ، هیجان ، احساسات ، سرعت ، خطر ، تهاجم

رنگ قرمز شدیدترین رنگ احساس می باشد و ضربان قلب مخاطب را بالا میبرد.

– آبی : امنیت ، اعتماد ، مسئولیت پذیری ، سرما ، ایمان ، وفاداری ، وابستگی ، جلال و عظمت

رنگ آبی دومین رنگی است که عموم مردم با آن احساس راحتی می کنند.

– سبز : تندرستی ، فراوانی ، حاصل خیزی ، آزادی ، بهبودی و شفا ، طبیعت ، حسادت ، پیشرفت ، خونسردی

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

– بنفش : وقار ، معنویت ، شاهانه بودن ، نعمت ، دارایی ، اعتبار ، نفوذ ، سوگواری ، مهارت

رنگ بنفش بیشتر معرف هنر می باشد.

– صورتی : ملایمت ، شرین بودن ، ظرافت ، زنانگی ، خوب بودن ، بی گناهی ، کودک

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

– نارنجی : سرزنده بودن ، شوخ طبع بودن ، لذت ، خوش گذرانی ، تشویق ، تحمل

استفاده از این رنگ باعث ایجاد هیجان در مخاطب برای ترغیب به کاری می شود.

– زرد : گرمی ، نورخورشید ، خوشی ، خیانت ، ترس ، حسادت

رنگ زرد باعث تایید و پا فشاری برای انجام کاری می باشد و سخت ترین رنگ برای چشم می باشد.

– طلایی : گران بودن ، قدرت ، پرستیژ ، ظرافت ، اعتبار

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

در آخر :

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


مدیریت تارنمای ایران

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

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

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

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

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

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

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

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

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

برای فیلدهای خاص مقدار پیش فرض تعیین کنید

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

استفاده از مقدار پیش فرض در طراحی فرم تماس

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

از فیلد های اجباری به ندرت استفاده کنید

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

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

قابلیت ثبت نام سریع در سایت

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

بکارگیری تکنولوژی Ajax در طراحی فرم سایت

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

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

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

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

گزینه های جایگزین برای فرم تماس داشته باشید

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

اصول فرم تماس در طراحی سایت

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

استفاده از آنتی اسپم آسان در فرم تماس

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

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

استفاده از فیلدهای HTML5 در فرم

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

تصویر زیر نمونه ای از پیام های HTML5 در فرم ارسال دیدگاه وبسیما است.

استفاده از HTML5 فرم ارسال دیدگاه

سخن پایانی، دیگر مشتری های خود را از دست ندهید!

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

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

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


وبسیما

بکارگیری HD در طراحی سایت

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

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

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

استفاده از تصاویر HD در هدر سایت

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

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

با رعایت نکات کلیدی زیر همواره می توانید تصاویری با کیفیت بالا تولید کنید.

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

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

تصاویر HD در طراحی سایت

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

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

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

وبسایت Life of Pi که برای فیلمی با همین عنوان ساخته شده است یک نمونه بسیار موفق و زیبا از بکارگیری ویدئوی HD در طراحی سایت محسوب میشود.

ویدئوی hd در طراحی سایت

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

  • ساخت ویدیو HD باید با مهارت بالا و توسط متخصصان این رشته انجام شود تاجلوه ای متناسب در سایت ایجاد کند.
  • ویدیو HD باید دارای زمان مشخصی باشد که این زمان معمولا بینی ۱۰ تا ۳۰ ثانیه در نظر گرفته می شود.
  • در صورتی ویدیو شما دارای صوت می باشد بهتر است به طور پیشفرض بدون صدا در نظر گرفته شود.
  • توجه به فاکتور لود ویدیو نیز از اهمیت ویژه ای برخوردار می باشد. ویدیو شما باید دارای سرعت لود مناسبی باشد.
  • بعضی از صفحات نمایشی قابلیت نمایش HD را ندارند در نتیجه شما باید روش هایی برای این نوع کار بران نیز در نظر بگیرید.

طراحی سایت با استفاده از انیمیشن HD

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

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

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

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

طراحی سایت با استفاده از انیمیشن HD

نظرات خود را در مورد استفاده از این نوع تصاویر با ما در میان بگذارید. به نظر شما این روند در آینده گسترش خواهد یافت؟ آیا سایت های موفقی که از این تکنیک ها در ارائه بهتر محتوای خود استفاده کرده اند می شناسید؟


وبسیما

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

دو سبک شناخته شده و رایج در طراحی سایت عبارتند از طراحی تخت (Flat Design) و متریال دیزاین (Material Design). دو سبک طراحی سایت که بر اساس دیدگاه های یکسان شکل گرفته اند؛ یکی کاملا جدید و دیگری در حال تبدیل شدن به یک مد زود گذر. طراحی تخت روندی از طراحی سایت است که خود به خود و در مرور زمان رشد کرده است و متریال دیزاین مجموعه ای از قوانین و دستورالعمل های تدوین شده برای رسیدن به یک سبک طراحی بی نظیر است.

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

اسکیومورفیسم در طراحی سایت چیست؟

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

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

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

اسکیومورفیسم در طراحی سایت

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

سبک طراحی تخت در طراحی سایت

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

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

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

سبک فلت دیزاین در طراحی سایت

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

مزایای طراحی تخت

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

معایب طراحی تخت

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

سبک طراحی متریال در طراحی سایت

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

تکنیک متریال دیزاین در طراحی سایت

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

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

مزایای طراحی متریال

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

معایب طراحی متریال

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

نتیجه گیری: متریال دیزاین بهتر است یا فلت دیزاین؟

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

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

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

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

نظرات خود را در مورد فریم ورک های طراحی سایت و سبک های طراحی با ما در میان بگذارید. بنظر شما کدامیک موفق تر بوده اند و کدامیک آینده روشن تری خواهد داشت؟


وبسیما

طراحی پاپ آپ های مختلف با Icegram

طراحی پاپ آپ های مختلف با IcegramReviewed by مجتبی گودرزی on Feb 29Rating: 5.0طراحی پاپ آپ های مختلف با Icegramطراحی پاپ آپ های مختلف با Icegramدر همیار وردپرس

سلام دوستان؛

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

  1. پنجره پاپ آپ(Pop Up)
  2. نوار عملکرد شناور(Action Bar)
  3. مسنجر(Messenger)
  4. اطلاعیه تست (Toast Notification):پس از چند ثانیه به صورت خودکار حذف و مخفی می شود

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

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

افزونه Icegram

icegram_16

پنجره پاپ آپ(Pop Up)،نوار عملکرد(Action Bar)،مسنجر(Messenger)،اطلاعیه تست (Toast Notification) پیام هایی هستند که شما می توانید توسط این افزونه برای تعامل با کاربران سایتتان ایجاد کنید.بسیاری از افزونه های مشابه این افزونه پولی هستند اما همچنان این افزونه رایگان می باشد.

نکته!!! این افزونه توسط همیار وردپرس فارسی سازی شده است و از همین جا می توانید فارسی شده ی آن را دریافت کنید!

نصب و فعال سازی

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

icegram_1

ساخت کمپین

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

icegram_2

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

icegram_19

انتخاب نوع پیغام

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

icegram_4

تنظیمات یک پیغام

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

  1. در این قسمت نام را برای پیغام  انتخاب کنید.
  2. در این قسمت مشخص کنید چند ثانیه بعد از بارگزاری سایت پیغام فعالیتش را شروع کند.
  3. در این قسمت پس از تمام شدن تنظیمات می توانید عملکرد این پیغام را ویرایش کنید.
  4. در این قسمت قالب و یا پوسته مد نظرتان را برای این پیغام انتخاب کنید.
  5. نوع انیمیشن دلخواهتان برای هر پیغام انتخاب کنید.
  6. در این قسمت عنوان پیغام را تنظیم کنید.
    icegram_5
  7.  در این قسمت متن و محتوی پیغام را وارد کنید.
  8. متنی که می خواهید در درون دکمه نمایش داده شود را در این قسمت وارد کنید
  9. آدرس و لینکی که می خواهید مخاطب پس از کلیک به آن هدایت شود را در این قسمت وارد کنید
  10. موقعیت هر پیغام را در صفحه نمایش مشخص کنید.icegram_6
  11. در این مرحله می توانید مشخص کنید که این پیام در کدام صفحه سایتتان نمایش داده شود.شما در قسمت سمت چپ کد کوتاهی را می بینید که هر کجا که می خواهید این کمپین نمایش داده شود می توانید این کوتاه را قرار دهید.
  12. در این قسمت می توانید زمان نمایش این پیام را به مخاطب مشخص کنید.حتی می توانید بهش برنامه نیز بدهید
  13. در این قسمت می توانید در مورد نمایش این پیام در موبایل ،تبلت و…. تصمیم بگیرید
  14. در این قسمت می توانید مشخص کنید این نوع پیام به چه کسی نمایش داده شود.
  15. در این قسمت می توانید تنظیم کنید که در چه شرایطی این پیام دوباره نمایش داده شود و یا نمایش داده نشود.icegram_11
  16. در این قسمت که بین همه پیغام ها مشترک نیست می توانید تصویر آواتار برای پیام را تنظیم کنید.

پیغام ها

پس از ایجاد پیام های دلخواهتان در کمپین مد نظرتان شما می توانید تک تک پیام ها را به صورت مستقل ویرایش کنید برای این کار به منوی اصلی پیشخوان وردپرس>Icegram>پیغام ها بروید و تغییرات دلخواهتان را ایجاد کنیدicegram_14icegram_15

انواع خروجی این افزونه پس از تنظیم قسمت های مختلف

  • خروجی پیام از نوع Action Bar

icegram_7

  • خروجی پیام از نوع Messenger

icegram_10

  • خروجی پیام از نوع Pop Up

icegram_12

  • خروجی پیام از نوع Toast

icegram_13

جمع بندی!

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

  1. پنجره پاپ آپ(Pop Up)
  2. نوار عملکرد(Action Bar)
  3. مسنجر(Messenger)
  4. اطلاعیه تست (Toast Notification)

دانلود افزونه ی فارسی  Icegram

دانلود  صفحه افزونه   پیش نمایش


همیار وردپرس

وبمستران هوشمند ۳ – سبک جدید آموزش طراحی سایت

وبمستران هوشمند ۳ – سبک جدید آموزش طراحی سایتReviewed by علی حاجی محمدی on Feb 4Rating: 5.0وبمستران هوشمندوبمستران هوشمند

 ثبت نام دوره وبمستران هوشمند ۳ آغاز شد :)

 smartwebmasters_3

لیست پذیرفته شدگان دوره وبمستران هوشمند ۳

به زودی اسامی وبمستران هوشمند ۳ اعلام خواهد شد  …

لیست پذیرفته‌شدگان دوره وبمستران هوشمند ۲

MissParidarMrmodaresiMiss tehraniMiss saediMiss shafei  misyaghchiMryadollahiMrGharaghpzloMryaghchiMrmalekiMrabdaliMrtebifakhr   MrMohamadiMrMotavaliyanMrHaghaniMrDehghan

لیست پذیرفته شدگان دوره وبمستران هوشمند۱

MrZandiMrMajidiMrRajabi

ثبت نام در این دوره مستلزم قبولی در آزمون ورودی میباشد. 

هزینه شرکت در دوره : ۳.۷۰۰.۰۰۰ تومان است

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

وبمستران هوشمند

ali_hajimohamadiاساتید
علی حاجی محمدی

  •  مدیر و موسس همیار وردپرس و مارکت وردپرس
  • مدرس ۲ دوره وبمستران هوشمند
  •  مبتکر و مدرس دوره های صفرتا صد طراحی وب
  •  مشاور و طراح وب و رابط کاربری
  •  مشاور راه اندازی سایت های برپایه وردپرس
  •  نویسنده آموزش های وردپرس مجله موفقیت
  •  نویسنده قسمت کارگاه وردپرس روزنامه کلیک جام جم
  •  مشاور راه اندازی سایت در رادیو اقتصاد (FM98)
  •  سخنران آکادمی وبمسترها ( پاییز ۹۳ / آموزش گوگل آنالیتیکس، تکنیک های زیباسازی صفحات وب )

داستان این آموزش

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

وبمسترها مانند تعمیرکارهای ماشینی هستند که به جای اینکه از آچار فرانسه استفاده کنند و برای تعمیر یک بنز ۵٫۰۰۰٫۰۰۰ تومان دریافت کنند آچار را به قیمت ۱۰۰ هزار تومان به صاحب ماشین میفروشند و حتی آموزش تعیمر ماشین را هم به او میگویند.

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

در این دوره وبمستران یادمیگیرند که چطور از ابزار ها به طور هوشمندانه استفاده نمایند و در پایان دوره تبدیل به یک وبمستر هوشمند گردند :)

دانلود ویدئو فهرست مطالب دوره:

دانلود ویدئو

فهرست مطالب موجود

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

timeline

lv1

اولین قدم وبمستران هوشمند

  • معرفی همیار وردپرس و علی حاجی محمدی.
  • چرا ما در این دوره وردپرس را انتخاب کردیم؟
  • ۱۰ کلید موفقیت در کسب و کار اینترنتی با وردپرس

از همین الان ۰ تا ۱۰۰ راه اندازی سایت را یادبگیرید

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

تبریک. شما اکنون مدیر سایت هستید :)

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

نوبت ایجاد یک ظاهر حرفه ای برای سایت شماست

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

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

  • میدانید پلاگین ها چه امکانات باورنکردنی به سایت شما افزوده خواهند کرد؟ شروع کار با پلاگین ها
  • شما هم میتوانید مانند سایت های بزرگ سرعت سایت خود را چندین برابر افزایش دهید.
  • از تکنیکی برای وفادارتر نمودن کاربران خود استفاده نمایید (میدانید که ۵۰% کاربران به طور اتفاقی به سایت شما می آیند و پس از این که پنجره را بستند دیگر هیچگاه به سایت شما نمی آیند. تکنیکی یاد میگیرید که همه بازدیدکنندگان را دائمی نمایید)
  • بهترین راه ارتباط  و پرسش سوال را در اختیار کاربرانتان قرار دهید.

lv2

استاد قوانین Google شوید :)

  • قبل از شروع با سئو آشنا شوید.
  • راه های قدیمی غیر مفید برای سئو چیست ( برای یادگیری سئوی جدید باید کل مباحثی که از سئو شنیده اید را فراموش نمایید و به سبک جدید  و حرفه ای عمل کنید)
  • الگوریتم های گوگل چه هستند و آیا باعث کمک به ما هستند یا ضرر؟
  • با الگوریتم گوگل پاندا آشنا شوید.
  • با قوانین گوگل پنگوئن آشنا شوید.
  • با استاندارد های مرغ مگس خوار گوگل، بازدید سایت خود را افزایش دهید.
  • از بین یک دنیا افزونه سئو از بهترین افزونه سئوی وردپرس استفاده کنید و سایت خود را بهینه نمایید.
  • سایت خود را به گوگل معرفی نمایید.
  • با امکانات Search Console جدید گوگل آشنا شوید.
  • از ابزارهای Search Console برای بهبود سایت خود بهره ببرید.
  • برای سایت خود ( و البته روبات های گوگل) یک نقشه سایت تمیز بسازید.
  • نقشه سایت خود را به گوگل معرفی کنید و از آمار آن با خبر شوید.
  • توضیحات کلیدی را به سایت خود بیفزایید.
  • معرفی کامل Site Authority
  • چگونه مدیران وب با رفتار غلط، باعث لطمه به سئوی خود میشوند؟
  • Backlink چیست و چگونه میتواند برای سایت ما مفید یا کشنده باشد ؟
  • معرفی روشهای نوشتن یک مقاله مناسب برای گوگل
  • چگونه مدال سبز برای مقاله خود دریافت کنیم ؟
  • تبلیغات گوگل چیست و چگونه بر سئوی ما تاثیر خواهد گذاشت ؟
  • چگونه عکس های خود را در وردپرس برای گوگل بهینه نماییم ؟
  • بهترین حالت ساختار لینک ها در وردپرس به چه صورت میباشد ؟
  • چگونه (بدون صرف هیچ هزینه ای ) به بالاترین سطح کیفیت سئو در سایت خود برسیم ؟
  • robots.txt چیست و چگونه از آن استفاده کنیم و آن را بسازیم؟
  • با واقعیت های پنهانی در مورد گوگل آشنا شوید.
  • همیشه خود را در سئو به روز نگه دارید.

از گوگل آنالیتیکس بیشترین استفاده را ببرید !

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

دانلود PDF شایعات سئو را فراموش کنید

lv3

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

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

با راه اندازی درست و اتوماتیک vip، در خواب هم درآمدزایی نمایید

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

lv4

ساخت انواع فرم ها (ارتباط با ما، استخدام، ارسال نوشته، پرداخت آنلاین) را یک بار برای همیشه یادبگیرید

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

lv5

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

  • مهمترین معیار سنجیدن سایت و اعتبار سایت به نظر شما چیست ؟
  • اهمیت ایمیل مارکتینگ و دستاورد های باورنکردنی آن !
  • قدم اول ایمیل مارکتینگ چیست ؟
  • با بهترین و حرفه ای ترین افزونه های ایمیل مارکتینگ و ساخت لیست در وردپرس آشنا شویم.
  • چگونه ۷۰% از کاربران سایت خود را از کاربران عادی تبدیل به طرفداران وفادار نماییم ؟
  • روش ها و نگرش های مختلف ایمیل مارکتینگ چه هستند ؟
  • بهترین روش های رایگان ارسال ایمیل به کاربران طوری که ۱۰۰% در inbox آنها قرار بگیرد چیست ؟

lv6

با افزایش امنیت سایت وردپرسی خود دیگر نگران هیچ چیز نباشید :)

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

Time_table

کمیک کسب و کار آنلاین

comic-business-online-HamyarWP.com

در این دوره :

  1. ابتدا هر فرد سایت خود را راه اندازی مینماید
  2. یک قالب زیبا و حرفه ای خریداری مینماید و بر روی سایت خود قرار میدهد
  3. امکانات سایت خود را افزایش میدهد
  4. سیستم های فروشگاهی به سایت خود اضافه مینماید
  5. تکنیک های مختلفی در جهت بهبود، بر روی سایت خود پیاده سازی مینماید
  6. و در پایان از سایت، البته بهتر است بگوییم “کسب و کار آنلاین” خود لذت  میبرد :)

بعد از گذراندن این آموزش

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

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

نکته آموزشی

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

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

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

این پکیج برای چه کسانی مناسب است ؟

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

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

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

این آموزش برای چه کسانی مناسب نیست ؟

کسانی که هیچ اعتقادی به درآمد آنلاین ندارند.

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

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

اطلاعات برگزاری دوره

تاریخ برگزاری دوره : ۲۱ فروردین ماه
تعداد جلسات : ۲۰
ساعت هر جلسه : ۳
ساعت برگزری هر جلسه : ۱۷ تا ۲۰
آدرس برگزاری دوره : تهران ، خ ولی عصر ، میدان توانیر … ( آدرس دقیق برای شرکت کنندگان این دوره ارسال خواهد شد )
شماره تماس : ۰۲۱۸۸۱۹۸۵۹۱

پاسخ به سوالات متداول

چرا مبلغ دوره بالاست ؟
مبلغ دوره نسبت به آموزش هایی که در این دوره از تجربیات و راهکارهای استاد حاجی محمدی که مشاور بیش از ۲۵۰ سایت وردپرسی درآمد زای فارسی بودند را به صورت یکجا دریافت مینمایید.

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

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

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

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

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

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

هزینه کمی برای من سنگین است، اگر نخواهم کل مبلغ را یک جا پیداخت نمایم شرایط پرداخت به چه صورت است ؟
برای ثبت نام قطعی میتوانید ۱/۱۰ مبلغ را پرداخت نمایید و ۳۷۰ هزار تومان واریز نمایید. بقیه مبلغ به صورت دو یا سه قسط دریافت میگردد.

گواهی حضور به شرکت کنندگان ارائه میشود ؟
بله به همه شرکت کنندگان گواهی حضور در دوره ارائه خواهد شد.

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

Compare_Smart_webmasters_0T100

ثبت نام در این دوره مستلزم قبولی در آزمون ورودی میباشد. 

هزینه شرکت در دوره : ۳.۷۰۰.۰۰۰ تومان است

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

about_hamyarwp

نظرات هنرجویان شرکت کننده در دوره وبمستران ۱

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

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

امیر رضا بهمنیار : این دوره بسیار جامع و کاربردی بوده که در صورتی که دوره دیگری برگزار شود به همه پیشنهاد میکنم شرکت کنند، در جلسات seo از جمله on-page مباحث بسیاری گفته شد که بسیار مفید بود.

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

فرهاد زندی : راجع به seo قبلا جستجو کرده بودم ولی توی کلاس مباحث خیلی مدون و کامل آموزش داده میشه .woocommerce عالی بود! فکرکنم خیلی باهاش کار دارم.فوق العاده بود کلا دیدم به طراحی وب عوض شد مخصوصا به خاطر visual composer

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

ثبت نام در این دوره مستلزم قبولی در آزمون ورودی میباشد. 

هزینه شرکت در دوره : ۳.۷۰۰.۰۰۰ تومان است

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


همیار وردپرس

بهترین رنگ طراحی سایت را چگونه انتخاب کنیم؟

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

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

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

این ماجرا، دلیل اصلی اینکه چرا در وبسایتی حس منفی یا مثبتی تجربه می کنیم را برای ما آشکار می سازد. آیا تابحال برایتان پیش آمده که مثلا در یک وبسایت گردشگری هنگام مطالعه مطلبی در مورد پرش از ارتفاع و چتربازی دچار احساس هیجان شوید؟ همه این ها جادوی رنگ ها است. سایت Kissmetrics اظهار کرده است که قضاوت یک کاربر در مورد یک وبسایت فقط ۹۰ ثانیه زمان می برد و حدود ۶۲ تا ۹۰ درصد این قضاوت، مربوط به رنگ های به کار رفته در آن سایت است.

همانطور که در کتاب الکترونیکی Web Design for the Human Eye توضیح داده شده، رنگ یکی از مهم ترین جنبه های طراحی وبسایت است که تاثیر اولیه مهمی بر چشم انسان دارد.

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

رنگ ها در طراحی سایت

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

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

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

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

• مخاطب (مرد/زن و کودک/بزرگسال و ترکیب جمعیتی متنوع)

• ملاحظات فرهنگی

• تناسب با برند یا محصول

• دسترسی و کاربرد آسان

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

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

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

۱- فضاهای سفید

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

۲- رنگ های مخصوص وب

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

۳- از تنوع زیاد رنگ ها استفاده نکنید

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

۴- کاهش وضوح تصویر (opacity) یا افزایش شفافیت (transparency) چیز بدی نیست

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

رنگ در طراحی سایت

۵- عدم استفاده از رنگ های متناقض

دوست دارید متنی که با رنگ زرد در پس زمینه صورتی نوشته شده را بخوانید؟ چنین حالتی خیلی عجیب و غریب است!

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

۶- رنگ لینک های کلیک شده

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

۷- رنگ لینک ها

بیشتر سایت های معروف مثل Google، New York Times،  BBC،  Yahoo و … از رنگ آبی برای لینک ها استفاده می کنند و این به یک استاندارد تبدیل شده است که چشم مردم به آن عادت کرده است، پس چرا تغییرش دهیم؟

۸- تیره تا روشن

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

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

۹- کنتراست یا تضاد

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

تضاد در رنگ های طراحی سایت

۱۰- انتخاب رنگ با توجه به اهمیت موضوع

مثلا ترجیح ما در مورد رنگ دکمه «سفارش خرید»، رنگ قرمز در زمینه سفید است.

۱۱- سایه ها  و گرادینت ها

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

کاربرد رنگ ها در طراحی سایت جذاب

۱۲- متن روشن در زمینه تیره

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

۱۳- استفاده از رنگ های به اصطلاح فسفری، فاجعه ای دیگر است

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

۱۴- ملاحظات فرهنگی

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

۱۵- از رنگ علامت تجاری و رنگ های سازگار با آن استفاده کنید

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

۱۶- جمعیت شناسی

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

۱۷- تصاویر

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

۱۸- موضوع کسب و کار و محصولات خود را در نظر داشته باشید

مثلا برای کاری که با رنگ سبز خیلی بهتر به نظر می رسد، رنگ قرمز هیچ کارایی ندارد.

۱۹- از ابزارها و روش های ترکیب رنگ استفاده کنید

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

color.adobe.com: سایتی که به راحتی میتوانید حالتهای مختلف چرخه رنگ را در آن تعریف کرده و ترکیب رنگ مورد نظر را بدست آورید؛ همچین از تم های رنگی که طراحان دیگر در سایت ساخته و به اشتراک گذاشته اند استفاده نمایید.

www.flatuicolorpicker.com: سایتی مفید برای انتخاب رنگ در طراحی های فلت

paletton.com: این سایت نیز همانند سایت adobe امکان تعیین ترکیب در چرخه رنگ و گرفتن کد رنگ مورد نظر را دارد. 

روش های انتخاب رنگ (color scheme)

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

سه روش مهم وجود دارد که به شما در انتخاب بهترین ترکیب رنگ کمک می کند:

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

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

روش مثلثی یا سه تایی انتخاب رنگ

روش compound یا مرکب

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

انتخاب رنگ به روش مرکب

روش Analogous یا رنگ های مشابه

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

رنگ های مشابه در چرخه رنگ

زیاد از رنگ قهوه ای و نارنجی استفاده نکنید

معمولاً قهوه ای یکی از رنگ هایی است که آقایان علاقه ای به آن ندارند و نارنجی یکی از رنگ هایی است که خانم ها علاقه ای به آن ندارند.

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

نتیجه گیری

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

لطفا صبر کنید


طراحی سایت ۲۴

۱۲ گام برای طراحی سایت با بهترین چیدمان

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

۱- ایده هایتان را یادداشت کنید:

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

بهترین چیدمان در طراحی سایت

۲- طرح اولیه چیدمان مورد نظرتان را رسم کنید:

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

اسکچ یا طرح اولیه برای طراحی سایت

۳- کار خود را با فتوشاپ و در سیستم مشبک شروع کنید:

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

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

۴- فونت مورد نظرتان را انتخاب کنید:

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

۵- تم رنگ مورد نظرتان را انتخاب کنید:

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

رنگ بندی در طراحی سایت

۶- از تصاویر مناسبی استفاده کنید:

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

۷- ساختار چیدمان را به بلوک های مختلف تقسیم کنید:

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

۸- به ریزه کاری ها و جزئیات اهمیت بدهید:

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

۹- از بالاترین رزولوشن ممکن استفاده کنید:

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

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

۱۰- برای دستگاه های مختلف طراحی کنید:

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

طراحی ریسپانیو چیدمان سایت

۱۱- ایده های توسعه دهنگان وب را در نظر بگیرید:

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

۱۲- سایت را دائماً چک کنید:

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

جمع بندی:

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

لطفا صبر کنید


طراحی سایت ۲۴