امیر عسکری
امیر عسکری
خواندن ۵ دقیقه·۶ سال پیش

نکته هایی برای داشتن تصاویر social بهتر و نقد چند پست تصویری از دید من

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

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

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


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

2نمونه استفاده درست از فضای صفحه با پوزیشن فیکس که باعث انتقال سریع تر مفهوم (حتی با وجود وجود تصویرهای حواس پرت کننده! ( معادل دیگه ای از مفهوم distraction point به ذهنم نرسید)

قسمت صورتی رنگ
قسمت صورتی رنگ


تغییر زاویه دید:

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

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


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

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

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

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


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


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


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



فضا سازی درست در راستای رسوندن هدف

هر طرح یک هدف اصلی داره و اون نشون دادن ارزش (VALUE) خاص هست ، برای مثال برای تصویر زیر ، هدف نشون دادن ذات سنتی هست. دو روش داریم
یکی اینکه بیایم و با فونت ۷۲ و با استروک ۸۰ بنویسیم اینجا همه چیز سنتی هست!
دو اینکه بیایم و با فضاسازی ، (گاها حتی کوچک نسبت به طرح) اون حس رو القا کنیم.(یادتون نرفته که هدف درگیر کردن حس هست ، نه چشم)

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



اشتباه گرفتن تصویر تبلیغاتی وب ،‌با پوستر چاپی!

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

درست مثل بازی در تئاتر و تلویزیون هست. یکی با اغراق بیشتر ، یکی با سادگی بیشتر.

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



استفاده درست از تاری (Opacity)

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

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


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



رنگ ، رنگ ، رنگ

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

شاید اگر تویه گرافیک چاپی از رنگ های کدر استفاده می کردیم و بعد از چاپ به بقیه نشون می دادیم ، همه می گفتن Wow , Che Khafan ! اما تو وب این ها باعث می شه کاربر ترغیب نشه روی اون ها کلیک کنه ،‌مگر در مواقع خاص.

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



وابستگی به رنگ سازمانی !

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


عدم تناسب رنگ گل بهی با سبز ، تویه یه طیف نیستند
عدم تناسب رنگ گل بهی با سبز ، تویه یه طیف نیستند


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


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


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



استفاده نا مناسب از gredient

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

حتما gredient ها باید در وب ، با ملایمت خیلی خیلی زیاد تغییر رنگ بدن.

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


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



بک گراند ها

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

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


کمک به انتقال بهتر مفهوم.
کمک به انتقال بهتر مفهوم.


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


بدون بک گراند، ساده و زیبا
بدون بک گراند، ساده و زیبا


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