تو این درس
بالاخره قراره درباره‌ی
شخصیت‌های وب‌سایت حرف بزنیم
و همزمان من یه قابلیتی رو معرفی می‌کنم که
اسمش رو گذاشتم «چارچوب شخصیت‌های وب‌سایت»
که مخصوص این دوره ساختم
پس یادتون باشه همونطور که توضیح دادم
تو اولین درس این بخش
صدها شاید هم هزاران
وب‌سایت خوش‌ساخت رو
تحلیل کردم
و بخش‌های مهمشون رو جدا کردم
و به یه سری قوانین طراحی وب جمع و جور تبدیلشون کردم
که همونایی هستن که تازه یاد گرفتیم
توی کل این بخش
حالا کار دیگه‌ای که کردم
این بود که همه این وب‌سایت‌ها رو
که بررسی کردم
به هفت شخصیت وب‌سایت متفاوت دسته‌بندی کردم
و این خیلی بهت کمک می‌کنه
وقتی قراره تصمیمات طراحی خودت رو بگیری
تو آینده
چون قوانین طراحی وبی که یاد گرفتیم
باید بر اساس شخصیتی که برای طراحی‌ت انتخاب کردی اعمال بشن
پس وقتی یه شخصیت انتخاب کردی
گزینه‌های طراحی‌ت
خیلی محدودتر می‌شن
و این باعث می‌شه راحت‌تر یه طراحی منسجم
و خوشگل بسازی
بدون اینکه گیر بیفتی
پس بیایید ببینیم چطور می‌تونیم شخصیت مناسب رو انتخاب کنیم
ولی اول از همه
شخصیت وب‌سایت اصلاً چیه؟
خب تو این چارچوبی که ساختم
شخصیت وب‌سایت یه جور حس کلیه
یا یه حال و هوا که می‌خوایم وب‌سایت
به کاربران منتقل کنه
و همون حسیه که می‌خوایم تو کاربرا ایجاد بشه
مثلاً اگه شخصیت جدی رو انتخاب کنیم
می‌خوایم کاربر حس لوکس بودن
ظرافت
و یه محصول پرمیوم رو تجربه کنه
پس وقتی می‌خوای شخصیت درست رو انتخاب کنی
به همون چیزایی که گفتم فکر کن
می‌خوای وب‌سایتت تو دید کاربرا چه جوری باشه؟
چه حال و هوایی منتقل کنه؟
بعد بر اساس اون لیست شخصیت‌ها رو نگاه کن
و اون یکی رو انتخاب کن که بهترین تطابق رو با حال و هوای مورد نظرت داره
یا اگه راحت‌تره
مستقیماً یکی از هفت شخصیت موجود رو بردار
همچنین می‌تونی چند شخصیت رو هم با هم انتخاب کنی
ولی در موردش آخر ویدیو توضیح می‌دم
شاید بپرسی «چرا اصلاً شخصیت مهمه؟»
خب جوابش اینه که طراحی وب رو
تقریباً ده برابر راحت‌تر می‌کنه
چون وقتی یه شخصیت انتخاب کردی
گزینه‌هات برای هر جزء طراحی
خیلی محدود می‌شن
همونطور که شخصیت‌های آدم‌ها ویژگی‌های مختلف دارن
هر شخصیت وب‌سایت هم ویژگی‌های خودش رو داره
مثلاً شخصیت جدی و شیک
از سایه و گوشه‌های گرد استفاده نمی‌کنه
ولی شخصیت استارتاپی و پرانرژی
همیشه از این‌ها استفاده می‌کنه
پس وقتی طراحی‌هامون رو می‌سازیم
کافیه ویژگی‌های شخصیتی هر شخصیت رو روی عناصر طراحی اعمال کنیم
و این ویژگی‌ها دقیقاً چیا هستن؟
خب می‌فهمیم
پس شروع می‌کنیم با شخصیت جدی و شیک
و اینجا همون متن کلیه که
قبلاً تو اولین درس نشون دادم
پس دیگه لازم نیست برای هر شخصیت دوباره بخونم
در واقع فقط به طور مختصر توضیح می‌دم
چون اگه همه‌شو بخونم خسته‌کننده می‌شه
پس کاری که می‌خوام بکنی اینه که دوباره
این اسلایدها رو دانلود کنی
و بعد خودت با حوصله تمام ویژگی‌های شخصیت‌ها رو بررسی کنی
برای مثال
شخصیت جدی و شیک
از سایه‌ها استفاده نمی‌کنه
و گوشه‌های گرد هم به کار نمی‌بره
در حالی که شخصیت استارتاپی و پرانرژی
همیشه از این‌ها استفاده می‌کنه
پس وقتی طراحی‌ها رو می‌سازیم
کافیه فقط
ویژگی‌های شخصیتی مربوط به هر عنصر طراحی رو اعمال کنیم
همون چیزایی که قبلاً یاد گرفتیم
و این ویژگی‌ها دقیقاً چیا هستن؟
خب الان می‌فهمیم
پس شروع می‌کنیم
با شخصیت جدی و شیک
و اینجا همون متن کلیه که
قبلاً تو اولین درس
از این بخش نشون دادم
پس دیگه لازم نیست برای هر شخصیت دوباره بخونم
و در واقع
من فقط به طور مختصر در مورد
هر شخصیت حرف می‌زنم
چون اگه کامل بخونم
خیلی زود خسته‌کننده می‌شه
پس کاری که می‌خوام بکنی اینه که
این اسلایدها رو دانلود کنی
و بعد خودت به صورت شخصی و با حوصله همه ویژگی‌های شخصیت‌ها رو بررسی کنی
اینطوری خیلی بهتر یاد می‌گیری
خودت می‌تونی ببینی هر شخصیت چه حس و حال و چه ویژگی‌هایی داره
و راحت‌تر تصمیم بگیری که کدوم برای طراحی تو مناسبه
و یه نگاهی به مثال‌ها بنداز
تا ببینی اون چیزی که من اینجا توضیح می‌دم
واقعا منطقیه
و تو زمینه هر شخصیت وب‌سایت هم کاربرد داره
به هر حال
شخصیت جدی یا شیک
خیلی تو حوزه املاک استفاده می‌شه
یا مد و فشن
و به طور کلی برای محصولات یا خدمات لوکس کاربرد داره
حالا عناصر طراحی وب که قبلاً یاد گرفتیم رو داریم
یادتونه؟
یعنی تایپوگرافی رنگ‌ها
تصاویر آیکون‌ها سایه‌ها
گوشه‌های گرد و همین‌طور چیدمان
که در بخش بعدی مفصل درباره‌ش صحبت می‌کنیم
پس دوباره بگم برای هر شخصیت
به طور کلی ویژگی‌های شخصیتی متفاوت داریم
برای هر کدوم از این عناصر طراحی
پس شخصیت جدی
معمولاً از فونت‌های serif استفاده می‌کنه
و مخصوصاً تو تیترها
با وزن فونت سبک
و معمولاً اندازه فونت متن اصلی هم کوچیکه
این هم خیلی رایجه
رنگ‌های رایج شامل طلایی
رنگ‌های پاستلی مثل این مثال
یا مشکی آبی تیره یا خاکستری
پس اصولاً رنگ‌هایی که حس
لوکس بودن یا کیفیت بالای محصولات رو منتقل می‌کنن
در مورد تصاویر
این سبک طراحی‌ها
معمولاً تصاویر خیلی بزرگ استفاده می‌کنن
و مطمئن می‌شن
که واقعاً تصاویر با کیفیت بالا باشن
خیلی وقت‌ها عکاس حرفه‌ای استخدام می‌کنن
تا واقعاً عکس‌های جذاب و باکیفیت بسازن
برای طراحی‌هاشون
حالا درباره آیکون‌ها
خیلی وقت‌ها این طراحی‌های جدی
اصلاً از آیکون استفاده نمی‌کنن
اما گاهی از آیکون‌های خیلی ساده و نازک
و خطوط هم استفاده می‌کنن
بعد سایه و گوشه‌های گرد معمولاً استفاده نمی‌شن
همون‌طور که قبلاً هم گفتیم
و یه چیدمان خلاقانه و تجربی
معمولاً تو این سبک طراحی‌ها رایجه
البته
همه این موارد همیشه تو همه طراحی‌های جدی و شیک نیست
پس این بیشتر یه راهنمای کلیه
و مجموعه‌ای از روندهاست
که می‌تونی تو طراحی خودت استفاده کنی
چون دوباره می‌گم
این کار رو خیلی راحت‌تر برات می‌کنه
پس همه وب‌سایت‌هایی که می‌بینی
تو این هفت شخصیت نمی‌گنجن
ولی برای مبتدی‌ها
فکر کنم این یه چارچوب عالیه
که واقعاً بهت کمک می‌کنه
حالا بیایم یه نگاه به چند مثال دیگه بندازیم
برای این شخصیت
پس اینجا سه سایت دیگه داریم
که همشون تقریباً طبق راهنمایی‌هایی که گفتم عمل کردن
همون‌هایی که گفتم
دقیقاً برای این شخصیت وب‌سایت
و دوباره
می‌خوام خودت به این مثال‌ها نگاه کنی
شاید بعد از ویدیو یه فرصت بذاری
یا می‌تونی ویدیو رو متوقف کنی
و خودت تحلیلشون کنی
بعدش شخصیت مینیمال
یا ساده
که معمولاً برای مد و فشن استفاده می‌شه
یا هر نوع پرتفولیو
یا حتی شرکت‌های مینیمالیستی مثل
این مثال Arc Shelter که سمت راست می‌بینی
تایپوگرافی معمولاً خیلی مکعبی و زاویه‌دار
و از فونت‌های سنس‌serif استفاده می‌کنه
در مورد رنگ‌ها
معمولاً متن مشکی ساده
روی پس‌زمینه سفید
چون حس مینیمالیستی قوی منتقل می‌کنه
و معمولاً فقط یه رنگ در کل طراحی استفاده می‌شه
در کل طراحی
معمولاً این طراحی‌ها تعداد تصاویر کمی دارن
و هیچ تصویرسازی ندارن
و مخصوصاً تصویرسازی سه‌بعدی ندارن
که اگه بود خیلی عجیب به نظر می‌رسید
توی این نوع وب‌سایت‌ها
همچنین معمولاً آیکون هم نیست
اما گاهی آیکون‌های کوچک یا ساده مشکی
هم استفاده می‌شن
همچنین دوباره
سایه و گوشه گرد هم تو این طراحی‌ها نیست
چیدمان معمولاً خیلی ساده‌ست
بعضی وقت‌ها واقعاً فقط یه چیدمان تک‌ستونه باریکه
که همه محتوا پشت سر هم قرار می‌گیره
حالا بیایم چند مثال دیگه رو اینجا بررسی کنیم
مثلاً توی این اولین نمونه
یه سری تصاویر باکیفیت داریم
که یه رنگ و لعاب قشنگ به طراحی اضافه می‌کنن
وگرنه کلش فقط سیاه و سفید بود
همونطور که قبلاً گفتم
یه سری آیکون مشکی کوچیک هم هست
و دوباره درست مثل چیزی که
توی اسلاید قبلی بهتون نشون دادم
دومی اینجا در واقع از تصویرسازی استفاده کرده
ولی تصویرسازیا خیلی ساده‌ان
و همه‌چی کاملاً سیاه و سفیده
و بعد آخری اینجا
یه استثنا نسبت به قانون
فونت‌های serif به حساب میاد؛
چون سرتیترهای بزرگش در واقع استفاده می‌کنن از
یه فونت serif نازک
ولی در کل طراحی همچنان مینیمال و ساده به نظر میاد
بعدی طراحی ساده رو داریم
یا همون شخصیت خنثی
این سبک معمولاً توی شرکت‌های بزرگ و باسابقه استفاده میشه
شرکت‌هایی که لزوماً نمی‌خوان
با طراحی‌شون تأثیر خیلی بزرگی بذارن
مثلاً مثل وب‌سایت IBM
یا وب‌سایت مایکروسافت
که همون اول بهتون نشون دادم
اینجا تایپوگرافی خیلی خنثی به نظر میاد
و معمولاً از فونت‌های سنس‌serif استفاده میشه
در مورد رنگ‌ها
معمولاً میشه گفت رنگ‌های "ایمن" انتخاب میشن
نه خیلی جیغ و درخشان
نه خیلی بی‌روح و کمرنگ
و اصلاً عجیب و غریب به نظر نمیان
و رنگ‌های آبی و مشکی خیلی رایجن
چون همونطور که توی بخش رنگ‌ها یاد گرفتیم
آبی رنگیه که حس اعتماد رو منتقل می‌کنه
پس این دقیقاً همون چیزیه که برندهای بزرگ
یا این شرکت‌های بزرگ دنبالش هستن
حالا توی این طراحی‌ها تصاویر نسبتاً زیاد استفاده میشن
ولی معمولاً توی اندازه‌های کوچیک
طوری که مرکز توجه قرار نگیرن
مثل چیزی که توی سبک‌های دیگه‌ی وب‌سایت دیده میشه
گاهی وقتا یه سری آیکون ساده هم استفاده میشه
ولی باز هم
معمولاً خبری از سایه یا گوشه‌های گرد نیست
و در نهایت در مورد لایه‌بندی
این نوع وب‌سایت‌ها
معمولاً یه ساختار خیلی منظم
و فشرده دارن
پس خیلی جعبه و ردیف توشون دیده میشه
دقیقاً مثل چیزی که اینجا سمت راست می‌بینیم
پس این در واقع یه نمونه‌ی خیلی تیپیکال
از طراحی ساده یا خنثی محسوب میشه
پس در کل به عنوان خلاصه‌ای از این شخصیت
می‌تونیم بگیم هدف اینه که
تأثیر بصری خیلی بزرگی نذاره
حتی میشه گفت انگار عمداً می‌خوان کمی خسته‌کننده به نظر بیان
این به این معنا نیست که طراحی بده
باشه؟
بد بودن خیلی فرق داره با خسته‌کننده بودن
خب معلومه که این شرکت‌های بزرگ
بودجه‌های زیادی برای طراح‌ها دارن
پس نه شرکت‌ها بد هستن و نه طراحی‌ها بد محسوب میشه
این طراحی فقط هدفشون رو برآورده می‌کنه
که یه همچین سبکی داشته باشن
خب اینجا سه نمونه‌ی دیگه داریم
دوباره مایکروسافت
پورشه اینجاست
و همین وب‌سایت دیگه‌ای که اینجاست
و اگه اینا رو مقایسه کنید
با ویژگی‌های شخصیتی که همین الان توضیح دادم
احتمالاً متوجه میشید
که هر سه‌تاشون
طراحی‌های خنثی به حساب میان
بعدی
می‌رسیم به شخصیت خیلی مهم جسور
و بااعتمادبه‌نفس
که یکی از سبک‌هایی هست که من واقعاً دوست دارم
و خیلی در آژانس‌های دیجیتال استفاده میشه
استارتاپ‌های نرم‌افزاری
شرکت‌های گردشگری
کلاً شرکت‌هایی که می‌خوان منتقل کنن
یه تصویر قوی که نشون بده به خودشون اعتماد دارن
و از حرکت‌های جسورانه نمی‌ترسن
حالا یکی از شاخص‌ترین ویژگی‌های
طراحی‌های جسور
استفاده از فونت‌های مربعی و گوشه‌دار هست
که معمولاً در قالب
تایپوگرافی بزرگ و برجسته به کار میرن
همچنین دقیقاً مثل چیزی که توی این مثال می‌بینیم
بلاک‌های رنگی بزرگ
یا بخش‌های بزرگی با پس‌زمینه‌ی رنگی روشن
معمولاً برای جلب توجه زیاد استفاده میشن
و هر دو این ویژگی‌های شخصیتی
به وضوح جسارت و اعتمادبه‌نفس رو
در این طراحی‌ها نشون میدن
و همین کار با استفاده از تصاویر بزرگ هم انجام می‌شود
در مورد آیکون‌ها سایه‌ها و گوشه‌های گرد
معمولاً در این نوع طراحی‌ها استفاده نمی‌شوند
یا اگر هم استفاده شوند بسیار محدود هستند
برای مثال همین دکمه‌ای که اینجا می‌بینید
که روی آن نوشته شده "Shop our Kits"
یک مقدار خیلی کم گوشه گرد دارد
اما به طور کلی منظور این است
که این طراحی‌ها معمولاً اصلاً حالت گرد ندارند
اینجا سه نمونه طراحی دیگر هم داریم؛
و باز هم می‌بینیم که تایپوگرافی بزرگ
در کنار استفاده‌ی جسورانه از بلوک‌های رنگی بزرگ و روشن
واقعاً جسارت و اعتماد به نفس برند را منتقل می‌کند
و این دقیقاً همان هدفی است
که در شخصیت طراحی وب‌سایت به کار گرفته می‌شود
مورد بعدی شخصیت آرام یا صلح‌جو است
که در واقع کاملاً نقطه مقابل شخصیت جسور و بااعتمادبه‌نفسی است
که همین الان در مورد آن صحبت کردیم
این شخصیت به‌طور گسترده در حوزه‌ی سلامت
و به‌طور کلی در محصولاتی که تمرکز اصلی‌شان
روی رفاه و آسایش مصرف‌کننده است استفاده می‌شود
این شخصیت برای برندهایی است که می‌خواهند به کاربر القا کنند
که واقعاً برای او اهمیت قائل هستند
و این کار را با استفاده از فونت‌های نرم با serif انجام می‌دهند
به ویژه برای تیترهایی شبیه همین دو نمونه‌ای که اینجا می‌بینیم
همچنین معمولاً از رنگ‌های ملایم و روشن
مانند آبی‌های پاستلی یا زردهای روشن استفاده می‌شود
یا نارنجی‌های روشن قهوه‌ای‌ها یا سبزها
پس شما این‌ها را همیشه خواهید دید
و همین‌طور در سه نمونه بعدی که نشان خواهم داد
تصاویر در این نوع طراحی معمولاً شامل افراد زیادی هستند
و سعی می‌کنند با پالت‌های رنگی آرام هماهنگ باشند
پس طبیعتاً عجیب خواهد بود اگر ناگهان تصویری با رنگ‌های خیلی روشن و پر زرق و برق
مثل آنچه در شخصیت جسور دیدیم ظاهر شود
شخصیت آرام همچنین استفاده زیادی از آیکون‌ها و گوشه‌های گرد دارد
بنابراین طراحی‌های گرد بیشتری در این مرحله مشاهده می‌شوند
اما سایه‌ها معمولاً زیاد استفاده نمی‌شوند
گرچه گاهی ممکن است ببینید
در مورد چیدمان‌ها هم
هیچ گرایش خاصی وجود ندارد؛
هیچ چیدمان عجیب یا خلاقانه‌ای استفاده نمی‌شود
سه نمونه دیگر
که امروزه بسیار رایج و به‌راحتی قابل پیدا کردن هستند
بنابراین در حال حاضر این یک شخصیت وب‌سایت بسیار محبوب است
چون برندهای بیشتری سعی دارند تصویری منتقل کنند
که نشان می‌دهد به مصرف‌کننده اهمیت می‌دهند
در هر سه این طراحی‌ها
می‌توان رنگ‌های پاستلی آرام
فونت‌های نرم با serif در تیترها و خود پیام‌ها را مشاهده کرد
می‌توان رنگ‌های پاستلی آرام فونت‌های نرم با serif در تیترها و خود پیام‌ها را مشاهده کرد
همچنین حس آرامش و صلح را منتقل می‌کنند
در این نوع طراحی‌ها تصاویر بزرگ افراد معمولاً با پالت‌های رنگی ملایم هماهنگ هستند
آیکون‌ها و گوشه‌های گرد به وفور استفاده می‌شوند تا حس دوستانه و نرم ایجاد کنند
سایه‌ها معمولاً کمتر دیده می‌شوند اما گاهی ممکن است استفاده شوند
چیدمان‌ها ساده و بدون الگوهای عجیب یا خلاقانه است
این سبک طراحی به برندها کمک می‌کند تا حس مراقبت و توجه به کاربران را منتقل کنند
سه نمونه طراحی دیگر در ادامه ارائه شده است
این نمونه‌ها رایج و آسان برای پیدا کردن هستند و نشان‌دهنده کاربرد گسترده این سبک طراحی‌اند
رنگ‌های پاستلی و ملایم تایپوگرافی نرم با serif و طراحی دوستانه عناصر
به‌طور یکپارچه حس آرامش را منتقل می‌کنند
این سبک طراحی به‌ویژه برای وب‌سایت‌های مراقبت از سلامت و محصولات رفاهی مناسب است
استفاده از تصاویر افراد
به تقویت حس انسانی و آرامش کمک می‌کند
رنگ‌های ملایم و پاستلی در کنار تایپوگرافی نرم
پیام مراقبت و توجه برند را تقویت می‌کنند
طراحی عناصر گرد و دوستانه نیز حس نزدیکی و راحتی ایجاد می‌کند
در نتیجه
این شخصیت وب‌سایت برای برندهایی مناسب است که می‌خواهند نشان دهند به کاربران اهمیت می‌دهند
ترکیب رنگ فونت و طراحی کلی
همه با هدف ایجاد حس آرامش و صلح استفاده می‌شوند
در تمامی سه نمونه ارائه‌شده
می‌توان این ویژگی‌ها را مشاهده کرد
رنگ‌های پاستلی ملایم فونت‌های serif نرم و پیام‌های دوستانه عناصر
همگی با هم حس آرامش صلح و توجه به کاربر را منتقل می‌کنند
این ویژگی‌ها باعث می‌شوند برند حس مسئولیت‌پذیری و مراقبت از مصرف‌کننده را منتقل کند
So the text content is also all about the consumer, محتوای متنی نیز کاملاً حول مصرف‌کننده است
and it is very focused و تمرکز بسیار زیادی
on basically helping them بر کمک و حمایت از آن‌ها دارد
and caring about them و هدف اصلی آن منتقل کردن حس مراقبت است.
Next up, بعدی
we have finally, the startup or the upbeat personality شخصیت استارتاپی یا پرانرژی است.
And if you use a lot of technology websites like I do, اگر زیاد از وب‌سایت‌های فناوری استفاده می‌کنید
then this is probably the personality احتمالاً این شخصیت
that you come across the most است که بیشتر با آن مواجه می‌شوید.
So, as the name of the personality says, همان‌طور که نام شخصیت نشان می‌دهد
this one is used a lot in software start ups, این شخصیت در استارتاپ‌های نرم‌افزاری بسیار کاربرد دارد
but also in other companies و همچنین در شرکت‌های دیگری
that simply want to transmit که صرفاً می‌خواهند منتقل کنند
a modern looking image یک تصویر مدرن به مشتریانشان
to their customers به مشتریانشان.
So this design right here این طراحی همین‌جا
is from the Stripe website, مربوط به وب‌سایت Stripe است
which is a very big and well known software startup, که یک استارتاپ نرم‌افزاری بزرگ و شناخته‌شده است
and many people actually try, و بسیاری از افراد واقعاً سعی می‌کنند
or get inspired by this exact design یا از این طراحی دقیق الهام می‌گیرند.
So, by this website right here پس با همین وب‌سایت.
But now, about the personality traits, اما اکنون درباره ویژگی‌های شخصیتی
let's again start with typography بیایید دوباره با تایپوگرافی شروع کنیم.
And this personality uses medium sized headings, این شخصیت از تیترهای با اندازه متوسط استفاده می‌کند
and usually only one sans-serif typeface و معمولاً تنها یک فونت بدون serif
in the entire design در کل طراحی به کار می‌رود.
And the tendency is for light colors in the text, و تمایل بر استفاده از رنگ‌های روشن در متن است
which is quite a modern looking trend که یک روند کاملاً مدرن در این نوع وب‌سایت‌هاست
in these kinds of websites در این نوع وب‌سایت‌ها.
Now about the colors, حالا درباره رنگ‌ها
greens and blues and purples, سبز آبی و بنفش
are used a lot for the primary brand colors برای رنگ‌های اصلی برند بسیار استفاده می‌شوند.
And then, as for background colors, و سپس درباره رنگ‌های پس‌زمینه
it is very common to have a light gray background استفاده از پس‌زمینه خاکستری روشن بسیار رایج است
in many places in these designs در بخش‌های مختلف این طراحی‌ها.
And again, we can see that right away و دوباره ما می‌توانیم فوراً این را مشاهده کنیم
here in this example on the right side در این مثال در سمت راست.
It's also quite common to use gradients, استفاده از گرادیانت‌ها نیز بسیار رایج است
at least in the last couple of years حداقل در چند سال اخیر
these have become really popular این‌ها بسیار محبوب شده‌اند.
Now, images are of course used all the times, تصاویر البته همیشه استفاده می‌شوند
and illustrations, و همچنین تصویرسازی‌ها
and especially 3D illustrations, و به‌ویژه تصویرسازی‌های سه‌بعدی
are becoming really modern these days این روزها بسیار مدرن شده‌اند.
So you will see illustrations all the times بنابراین همیشه تصویرسازی‌ها را خواهید دید
in startup or upbeat websites, در وب‌سایت‌های استارتاپی یا پرانرژی
and sometimes even patterns, و گاهی حتی الگوها
or these small shapes یا این اشکال کوچک
that might add some visual details که ممکن است جزئیات بصری اضافه کنند.
For example, behind images, مثلاً در پشت تصاویر
and I think I showed you that و فکر می‌کنم این را به شما نشان داده‌ام
in one of the lectures before در یکی از جلسات قبلی.
Also, icons, and shadows, and border radius, همچنین آیکون‌ها سایه‌ها و شعاع حاشیه
are all used very commonly همگی بسیار رایج استفاده می‌شوند.
So these designs are again, بنابراین این طراحی‌ها دوباره
getting more round گردتر می‌شوند
as all the other previous designs مانند تمام طراحی‌های قبلی
that we talked about, که درباره آن‌ها صحبت کردیم
and shadow is also more used than before و همچنین سایه‌ها نسبت به قبل بیشتر استفاده می‌شوند.
Now, about some common layout patterns; حالا درباره برخی الگوهای رایج چیدمان؛
it is quite usually to see something معمولاً دیده می‌شود که چیزی شبیه
like row of carts, ردیف کارت‌ها
or rows of product features, یا ردیف ویژگی‌های محصول
and the Z pattern in startup designs, و الگوی Z در طراحی‌های استارتاپی
and we will learn what those actually are و ما خواهیم آموخت که واقعاً این‌ها چیستند
very soon, by the beginning of the next section به‌زودی در ابتدای بخش بعدی.
And now, again, و اکنون دوباره
three more examples, سه مثال دیگر
and you can see in all of them و شما می‌توانید در همه آن‌ها ببینید
that they use a very simple که از تایپوگرافی بسیار ساده‌ای استفاده شده است
and clean looking typography و ظاهر تمیز و مرتب دارد.
So the text is not too big, بنابراین اندازه متن خیلی بزرگ نیست
and the colors are also quite light و رنگ‌ها نیز نسبتاً روشن هستند.
And actually in the first example, و در واقع در اولین مثال
I would even say they are a little bit too light می‌توان گفت رنگ‌ها کمی بیش از حد روشن هستند
همچنین می‌توانید این رنگ‌های پس‌زمینه خاکستری روشن را ببینید
که همیشه استفاده می‌شوند
به‌ویژه در دو نمونه اول
اما در نمونه آخر
در اصل همان موضوع را داریم
اما در قالب طراحی حالت تاریک
این سه نمونه واقعاً تمام ویژگی‌های
یک طراحی مدرن استارتاپی و پرانرژی را دارند
که دوباره
مطمئنم این نوع طراحی را
امروزه در بسیاری از جاها دیده‌اید
زیرا بدون شک
یکی از محبوب‌ترین‌هاست
که امروزه مشاهده می‌کنیم
پس می‌توانم بگویم این مورد
و شخصیت آرام
رایج‌ترین‌ها هستند
و حالا در نهایت
شخصیت شماره هفت
شخصیت جذاب و سرگرم‌کننده است
بنابراین طراحی‌هایی که از این شخصیت استفاده می‌کنند
معمولاً برای شرکت‌هایی است که محصولات
برای کودکان یا حیوانات تولید می‌کنند
و بسیاری اوقات حتی برای صنایع غذایی هم استفاده می‌شود
حالا در اینجا
تایپوگرافی معمولاً بسیار گرد و خلاقانه است
پس بسیاری اوقات در واقع نوعی از
فونت‌های دست‌نویس استفاده می‌شود
و فونت‌های بدون serif
همچنین نسبتاً رایج هستند
حال یکی از بارزترین ویژگی‌های
این شخصیت
استفاده بسیار مکرر از رنگ در این طراحی است
بنابراین استفاده گسترده از رنگ در سراسر طراحی
چه در پس‌زمینه و چه در متن
و حتی در داخل تصاویر
همین باعث می‌شود که این طراحی‌ها
حسی جذاب و سرگرم‌کننده داشته باشند
البته
تصاویر زیادی نیز استفاده می‌شوند
و گاهی حتی تصویرسازی‌های دست‌ساز
پس دوباره
این‌ها به ایجاد حس جذابانه در طراحی کمک می‌کنند
و همین موضوع برای آیکون‌ها نیز صادق است
و برای سایه‌ها و شعاع گردی نیز همین‌طور است
پس دوباره
همه این‌ها بسیار رایج هستند
و همیشه استفاده می‌شوند
و بسیاری اوقات حتی با سبک دست‌ساز
به‌ویژه برای آیکون‌ها
حالا اینجا سه مثال دیگه داریم
که شاید کمی کمتر جذاب باشند
نسبت به همونی که همین الان دیدیم
اما با این حال فکر می‌کنم این سه نمونه
به‌خصوص به خاطر شیوه‌ای که از رنگ‌ها استفاده کردن
و بعضی عناصر دستی و طراحی‌شده می‌تونن جزو دسته
طراحی‌های جذاب و سرگرم‌کننده محسوب بشن
پس دوباره امیدوارم این‌ها براتون
به عنوان یه منبع الهام‌بخش باشن
و امیدوارم که بتونید نگاه کنید
به همه این طراحی‌ها وقتی کمی وقت بیشتری بذارید
و تحلیل کنید که توشون چه اتفاقی داره میفته
و واقعاً ببینید که چطور با
ویژگی‌هایی که همین الان براتون توضیح دادم مقایسه می‌شن
حالا
در حقیقت می‌تونید همین جا درس رو تموم کنید
بدون هیچ مشکلی
چون تا اینجا در مورد همه چیز صحبت کردیم
که مهم‌ترینشونه
در چارچوب شخصیت سایت
که من در اصل برای این دوره طراحی کردم
پس اون چیزی که همین الان یاد گرفتیم
همون مهم‌ترین چیزی هست که باید بدونید
اما اگه بخواید عمیق‌تر وارد طراحی بشید
و همین چارچوب شخصیت سایت
پس بریم جلو
خب چیزی که الان می‌خوام بهتون نشون بدم
این هست که ما در اصل می‌تونیم همه
این هفت شخصیت رو
روی محور جدی بودن تا جذاب بودن
یا آرامش و جسارت قرار بدیم
پس در اصل
جدی برعکس جذابه
و آرام برعکس جسوره
در همین چارچوب
پس اینجا قراره یاد بگیریم
که ما در واقع می‌تونیم جذابی و جسارت رو
در یک طراحی واحد با هم ترکیب کنیم
خب جذاب به طور کلی یعنی
همونطور که همین الان یاد گرفتیم
که طراحی رنگی‌تره
و همه چیز گردتره
و معمولاً سایه‌ها و تصویرسازی‌های بیشتری داره
حالا وقتی این شخصیت‌ها رو روی محور جذابی قرار می‌دیم
اولینش باید شخصیت جدی باشه
یا شخصیت شیک و باوقار
پس این همونیه که کمترین میزان جذابی رو داره
و بنابراین جدی‌ترین شخصیت محسوب میشه
بعدش شخصیت مینیمالیست داریم
بعدش شخصیت ساده و خنثی
بعدش شخصیت استارتاپی و پرانرژی
که خودش نسبتاً جذابه
اما بعدش البته جذاب‌ترین شخصیت
همون شخصیت جذاب و سرگرم‌کننده است درسته؟
پس در اصل این پنج شخصیت
از جدی‌ترین تا
جذاب‌ترین مرتب شدن
بعدش محور جسارت هم داریم
و همونطور که یاد گرفتیم
هر چی طراحی سایت جسورانه‌تر باشه
فونت‌ها مکعبی‌تر و مربعی‌ترن
و تایپوگرافی بزرگ‌تر و جسورانه‌تر میشه
(تایپوگرافی همونطور که گفتم بزرگ و جسور میشه)
و رنگ‌ها هم می‌تونیم بگیم
روشن‌تر و جذاب‌تر خواهند بود
و در بلوک‌های رنگی بزرگ‌تر نمایش داده میشن
و جسورترین شخصیت
طبیعتاً شخصیت جسور و مطمئن هست
بعد در سمت دیگه طیف
البته شخصیت آرام و صلح‌طلب داریم
و همون‌طور که یاد گرفتیم
هر چی طراحی آرام‌تر باشه
عناوین بیشتر از فونت‌های نرم و serif استفاده می‌کنن
و همچنین از رنگ‌ها و تصویرسازی‌های کم‌رنگ و ملایم بهره می‌برن
اما ممکنه الان از خودتون بپرسید چرا
همه این‌ها واقعاً مهمه
و چرا دارم همه این‌ها رو بهتون نشون می‌دم
خب دلیلش اینه که
این اساساً بهمون نشون می‌ده
که همه این شخصیت‌ها در واقع انعطاف‌پذیر هستن
و می‌تونن توی این طیف قرار بگیرن
که از جذابی تا جسارت گسترده شده
یعنی بعضی ویژگی‌های جسارت
یا شخصیت‌های آرام
می‌تونن به راحتی وارد
یکی از پنج شخصیت دیگه بشن
حالا بیایم شخصیت استارتاپی رو در نظر بگیریم
گاهی این نوع طراحی می‌خواد
کمی جسورتر یا مطمئن‌تر به نظر بیاد
و در این صورت می‌تونن به سادگی از
برخی ویژگی‌های شخصیت جسور
یا شخصیت مطمئن وب‌سایت استفاده کنن
و اون‌ها رو توی شخصیت خودشون هم بگنجونن
یا البته می‌تونه برعکس هم باشه؛
پس شخصیت استارتاپی ممکنه بخواد
یکم بیشتر مراقب و توجه‌کننده نسبت به کاربر به نظر بیاد
و در این صورت
می‌تونه تلاش کنه تا برخی ویژگی‌های
شخصیت آرام
تو طراحی‌های خودش وارد کنه
می‌فهمید؟
پس در واقع چیزی که می‌خوام اینجا نشون بدم
این هست که کمی جسارت یا کمی آرامش
می‌تونه وارد
این پنج شخصیت دیگه وب‌سایت بشه
می‌فهمید؟
حالا شخصیت‌های دیگه
در واقع می‌تونن با هم ترکیب بشن
مثلاً
می‌تونید شخصیت جدی رو با
یکی استارتاپی ترکیب کنید
اما در واقع این خیلی رایج نیست
پس این روزها بیشتر چیزی که وارد شخصیت‌های دیگه می‌شه
همین جسارت و آرامش هست
که وارد یکی از شخصیت‌های دیگه می‌شه
و گاهی حتی جسارت و آرامش می‌تونن با هم ترکیب بشن
که می‌تونه طراحی‌های خیلی جذاب بسازه
اما در واقع برای تازه‌کارها
پیاده‌سازی این کار کمی سخت‌تره
خوب و برای اینکه همه این‌ها رو روشن کنیم
بیایم دوباره چند مثال ببینیم
و این اولین نمونه اینجاست
که من اون رو طبقه‌بندی می‌کنم
در اصل به عنوان شخصیت پایه
که طراحی مینیمال و ساده‌ای داره
با این حال
این طراحی بعدش از
فونت‌های بزرگ و بولد استفاده می‌کنه
و همچنین دو بلوک رنگی بزرگ داره
این‌ها واقعاً خیلی روشن یا زننده نیستن
اما با این حال بخشی از
شخصیت جسور محسوب می‌شن
پس اینجا می‌تونم بگم که کمی جسارت
وارد شخصیت مینیمال
یا شخصیت اصلی ساده شد
بعد یکی دیگه
و اینجا می‌تونم بگم
که این یک جور شخصیت استارتاپی هست
اما دوباره
کمی جسارت هم واردش شده
همونطور که می‌بینیم با این فونت بزرگ و جعبه‌ای
و راستی فونت‌ها به طور کلی
خیلی بولد و بزرگ هستن
و تو این طراحی حتی می‌تونیم
نشونه‌هایی از مینیمالیسم ببینیم
طراحی عمدتاً سیاه و سفیده
با لینک‌های آبی
و هیچ آیکون یا سایه‌ای
یا تصویرسازی‌ای اینجا وجود نداره
ولی به هر حال بیاید یه نمونه دیگه رو نگاه کنیم
و این یکی رو می‌تونم بگم که عمدتاً بولده
پس رنگ‌های روشن زیادی داره
فونت‌ها هم بزرگ هستن
اما بعدش المان‌های نامنظم
و گرد تو طراحی داریم
و همینطور آیکون‌های دستی
و این پترن پشت تصویر هم هست
پس واضحاً یه حس جذابی
تو این طراحی دیده میشه
شاید حتی بتونیم بگیم که جذابی
شخصیت اصلی طراحی هست
و بولد بودن شخصیت فرعیه به نوعی
ولی به هر حال این موضوع خیلی مهم نیست
چیزی که مهمه اینه که اینجا ما داریم
یه جور تلفیق بین این دو حس
و این باعث میشه طراحی واقعاً زیبا و
خلاقانه باشه
بعدش یه طراحی دیگه داریم که
به نظر من بولد یا با اعتماد به نفس هست
پس تیترها خیلی بزرگ هستن
و بلوک‌های رنگی روشن زیادی داره
یعنی اینجا فقط یکی از اون‌ها رو می‌بینید
ولی بقیه سایت
همون‌طور که من دیدم پر از این بلوک‌هاست
ولی بعدش در واقع یه حس آرامش
یا ویژگی‌های شخصیتی صلح‌آمیز
هم توش اعمال شده
و به خصوص تو فونت‌های نرم serif
توی تیترها
و همینطور تو رنگ‌های آرامش‌بخش پاستلی
که در تمام تصویرسازی‌های سایت استفاده شده
در کل سایت
پس این همون وضعیتی هست که گفتم
که در واقع حتی آرامش و بولد بودن
می‌تونن تو یه طراحی با هم ترکیب بشن
و فکر می‌کنم این واقعاً خیلی خوب جواب می‌ده
در این موقعیت خاص
ولی باز هم
ممکنه کمی سخت‌تر باشه
که بخوایم چنین طراحی‌ای بسازیم
بعدش فقط دو تا نمونه دیگه:
اینجا یه طراحی با شخصیت استارتاپی داریم
یا شاداب و پرانرژی
که چند ویژگی آرامش‌بخش هم توش هست
و خیلی وقت‌ها
ویژگی آرامش که اضافه می‌شه
معمولاً همون فونت‌های نرم serif هستن
توی تیترها
پس این در واقع یه روند بزرگه
که من داشتم مشاهده می‌کردم
تو انواع طراحی‌ها این روزها
و همین موضوع برای این تصویرسازی‌های آرامش‌بخش هم صدق می‌کنه
پس این دو ویژگی شخصیتی آرامش
امروزه
در همه شخصیت‌های دیگه هم اعمال می‌شن
و در واقع اینجا یه نمونه دیگه هم از همین موضوع داریم
پس دوباره
همون دو ویژگی دقیقاً توی این طراحی گنجونده شدن
همین توی خود طراحی
که واقعاً نتیجه خوبی داره به همون دلیلی که
قبلاً هم اشاره کردم
یعنی اینطوری نشون داده می‌شه
به کاربر سایت
که این شرکت واقعاً براشون اهمیت قائله
پس استفاده از این ویژگی‌ها
واقعا باعث می‌شه کاربر احساس کنه
که این یه شرکت سرد و بی‌روح نیست
به نوعی این انتخاب‌های طراحی
باعث می‌شه کاربر احساس امنیت بیشتری داشته باشه
و به نوعی بیشتر اعتماد کنه
پس این شرکت‌ها دارن از همین نکته استفاده می‌کنن
و این تصمیم‌های طراحی رو به نفع خودشون به کار می‌برن
خب و در واقع این هم همون چیزیه که می‌خواستم بگم
این چارچوب شخصیت‌های سایت منه
و امیدوارم براتون قابل درک بوده باشه
و امیدوارم یه روزی بتونین ازش استفاده کنین
وقتی که بخواین طراحی‌های خودتون رو بسازین
و البته
ما هم ازش استفاده می‌کنیم وقتی که می‌خوایم
پروژه بزرگ Omni Food خودمون رو بسازیم
کمی جلوتر توی این دوره
پس دوباره می‌گم امیدوارم اینجا چیزی یاد گرفته باشین
و اینکه براتون جالب بوده باشه
و حالا می‌بینمتون توی ویدیوی بعدی
جایی که بالاخره این بخش رو تموم می‌کنیم
و در مورد گرفتن الهام صحبت می‌کنیم
پس یه عنصر مهم دیگه
وقتی که باید طراحی‌های خودتونو از صفر بسازین
کاملاً به تنهایی
پس همونجا می‌بینمتون