حالا پیش از اینکه بتونیم یاد بگیریم
درباره‌ی قواعد مختلف طراحی وب یکی‌یکی
باید شروع کنیم به صحبت کردن
درباره‌ی اینکه طراحی وب واقعاً چیه و چرا این‌قدر مهمه
و همین‌طور چرا و چگونه هر کسی می‌تونه طراحی وب خوب رو یاد بگیره
پس اول از همه باید تفاوت قائل بشیم
بین طراحی وب و توسعه‌ی وب
در اصل طراحان وب همون‌هایی هستن که ظاهر کلی
و حس وبسایت‌ها رو خلق می‌کنن
در حالی که از طرف دیگه توسعه‌دهنده‌های وب
همون کسایی هستن که بعداً اون طراحی رو با استفاده از HTML
و کدهای CSS و JavaScript پیاده‌سازی می‌کنن
قبلاً
طراح‌ها فقط با استفاده از برنامه‌های طراحی وب مثل
Sketch Figma یا Photoshop طراحی می‌کردن
بعد توسعه‌دهنده اون طراحی رو می‌گرفت و پیاده‌سازی می‌کرد
در کد با استفاده از نرم‌افزاری مثل VS Code
تا در نهایت وبسایت برای کاربر
در مرورگر نمایش داده بشه
اما امروزه طراح‌های زیادی هستن که کدنویسی هم می‌کنن
و توسعه‌دهنده‌های زیادی هم طراحی می‌کنن
پس هدف این بخش اینه که شما رو تبدیل کنیم
به توسعه‌دهنده‌ای که طراحی هم می‌کنه طوری که در واقع
بتونید هم طراح باشید و هم توسعه‌دهنده‌ای که می‌تونه بنویسه
و بسازه و طراحی کنه وبسایت‌ها رو فقط با استفاده از کد
پس تمرکز ما در این دوره طبیعتاً یادگیری HTML خواهد بود
و CSS یعنی اساساً نوشتن کد
اما به نظر من یک توسعه‌دهنده‌ی وب مدرن باید بتونه
طراحی‌های ساده و خوش‌ظاهر هم ایجاد کنه
و این همون چیزیه که می‌خوام تو این بخش بهت یاد بدم
اما اول بیایم کمی بررسی کنیم که چرا طراحی
واقعاً این‌قدر مهمه
وقتی کاربر وارد یه وبسایت یا وب‌اپلیکیشن خوب طراحی‌شده میشه
اون طراحی خوب فوراً باعث میشه
یک برداشت مثبت و ماندگار از برند
یا محصولی که پشت اون وبسایته شکل بگیره
اما اگر سایت بد طراحی شده باشه
کاربر فکر می‌کنه که اون برند
واقعاً اهمیتی به محصول نمی‌ده
یا به خدمتی که ارائه می‌ده
پس وقتی شما دارید وبسایت می‌سازید طبیعتاً نمی‌خواید
چنین برداشتی رو ایجاد کنید درسته؟
همچنین طراحی خوب باعث میشه کاربر فوراً به برند اعتماد کنه
در حالی که از طرف دیگه وبسایتی با طراحی ضعیف
باعث میشه کاربر حتی در اعتماد به اون شرکت
یا برند مردد بشه
یکی دیگه از دلایل خیلی مهم برای صرف وقت زیاد
و تلاش روی یک محصول خوب طراحی‌شده
این است که طراحی خوب ارزشِ ادراک‌شده را افزایش می‌دهد
برای برندی یا محصولی که کاربر از آن بازدید می‌کند
در حالی که طراحی بد به سادگی برند را ارزون‌قیمت نشان می‌دهد
و مطمئنم خودتون این را تجربه کردید
وقتی مثلاً دو وبسایت رقیب از دو محصول مشابه رو بررسی می‌کنید
پس احتمالاً برداشت بهتری می‌گیرید
از محصولی که وبسایت خوش‌ظاهرتر داره
و همچنین بیشتر به اون برند اعتماد می‌کنید و تا حدودی حس می‌کنید
که اون محصول ارزش بیشتری داره حداقل برای من
برای من واقعاً این‌طور عمل می‌کنه
و تحقیقات زیادی هم نشون میده
که برای کاربران عادی هم همین‌طوره
پس دوباره واقعاً مهمه که شما یا شرکت‌تون
یا هر کسی که براش کار می‌کنید
روی طراحی واقعاً خوب سرمایه‌گذاری کنین
برای وبسایت‌ها و وب‌اپلیکیشن‌ه‌شون
در نهایت طراحی خوب دقیقاً همون چیزی رو به کاربر می‌ده
که عملاً دنبال‌ش بوده
وقتی تصمیم گرفته وارد سایت بشه
مثلاً فرض کنید دنبال خرید یه تلویزیون هستید
در این حالت شما می‌خواید صفحه مربوط به تلویزیون
تا حد امکان سریع همه اطلاعات لازم رو بهتون بده
و برای همین مهمه که اون صفحه طراحی خوبی داشته باشه
نمی‌خواید گیج بشید و مجبور شید صفحه رو ترک کنید
چون به هدفتون نمی‌رسید درستِ؟
و این دقیقاً چیزی است که اتفاق می‌افته اگر صفحه بد طراحی شده باشه
خب امیدوارم با این توضیحات تونسته باشم قانعتون کنم
که طراحی وب نمی‌تونه یه چیزِ بعدی یا حاشیه‌ای باشه
باید بخش مرکزی ساخت هر محصول باشه
چه یک وبسایت باشه چه یک وب‌اپلیکیشن
پس باید در مرکز فرایند ساخت قرار بگیره
پس هر وبسایت یا هر وب‌اپلیکیشن
الان خیلی‌ها از قبل می‌دونن که
طراحی وب چقدر اهمیت داره
اما معمولاً میگن چیزایی مثل:
«من خلاق نیستم» یا «من هنرمند نیستم»
و بنابراین هیچ‌وقت نمی‌تونم طراحی یاد بگیرم
اما به نظر من این واقعاً درست نیست
چون طراحی وب خوب در واقع سلیقه‌ای نیست
و خیلی ربطی به خلاقیت نداره
مثلاً خودم اصلاً هنرمند نیستم
و خیلی هم آدم خلاقی نیستم
اما با این حال می‌تونم
یه رابط کاربری قابل‌قبول طراحی کنم
فقط با دنبال کردن یک چارچوب ساده یا یک سیستم
مثل همونی که می‌خوام تو این دوره بهتون یاد بدم
پس واقعاً معتقدم که هر کسی
می‌تونه طراحی وب خوب رو یاد بگیره
لازم نیست خلاق باشید
و لازم نیست هنرمند باشید
شما هم می‌تونید یاد بگیرید
تنها کاری که باید بکنی اینه که یک‌سری قوانین یاد بگیری
و چند دستورالعمل به همراه یک سیستم
که باید از اون پیروی کنی تا بتونی بسازی
یک رابط کاربری زیبا برای پروژه‌های خودت
خب چه چارچوب یا سیستمی رو
قراره واقعاً بهت یاد بدم و چطور این کارو می‌کنم؟
کاری که من انجام دادم این بود که صدها
یا شاید هزاران وب‌سایت واقعاً خوش‌طراحی شده رو بررسی کردم
پس با دقت طراحی همه این وب‌سایت‌ها رو
تحلیل و تجزیه کردم
و بعد همه چیزهایی که یاد گرفتم رو
به چند قانون خلاصه کردم که
یاد گرفتنش برای تو آسونه و مهم‌تر از اون به‌کار بردنش هم آسونه
این قوانین در ۹ بخش مختلف طراحی وب تقسیم شدن
که من بهشون می‌گم «مواد اولیه»
و تو خیلی زود می‌بینی این مواد اولیه چی هستن
اما چیزی که مهمه اینه که برای هر کدوم از این مواد اولیه
قوانین زیادی وجود داره
و وقتی این قوانین رو یاد گرفتی
می‌تونی اون‌ها رو روی هر وب‌سایتی اعمال کنی
بر اساس چیزی که من بهش می‌گم «شخصیت وب‌سایت»
اما درباره اون هم کمی بعدتر در همین درس صحبت می‌کنم
فعلاً بیایم یه نگاه بندازیم
به چیزی که من بهش می‌گم «مواد اولیه طراحی وب»
پس مواد اولیه طراحی وب شاید کمی انتزاعی به‌نظر بیان
و بنابراین الان بذار بهت نشون بدم
که منظورم چیه در این وب‌سایت خوش‌طراحی شده
پس اولین ماده اولیه «تایپوگرافی» هست
که کاملاً مربوط به فرمت‌دهی و طراحی متنه
بعدی رنگ‌هاست که بخش بسیار مهم دیگه‌ایه
و بعد قراره درباره تصاویر و ایلاستریشن‌ها صحبت کنیم
که یکی دیگه از جنبه‌های اساسی هستن
و هیچ وب‌سایتی نمی‌تونه بدون اون‌ها باشه
پس هیچ وب‌سایتی نمی‌تونه بدون تصویر وجود داشته باشه
و بنابراین قوانینی وجود دارن درباره اینکه
چطور می‌تونیم تصاویر رو به‌طور مؤثر استفاده کنیم
همچنین بسیاری از وب‌سایت‌های مدرن آیکون دارن
پس باید درباره اون هم صحبت کنیم
و همین‌طور درباره سایه‌ها و گردی گوشه‌ها (border-radius)
حالا border-radius
که در اصل میزان گرد بودن کلی عناصر
روی صفحه است
شاید کمی بی‌اهمیت به‌نظر برسه
اما در واقع اینطور نیست
چون میزان‌های مختلف border-radius واقعاً
ظاهر و حس کاملاً متفاوتی به یک وب‌سایت می‌دن
بعدش ما درباره فضای خالی (whitespace) صحبت می‌کنیم
و همین‌طور موضوع خیلی مرتبط دیگه‌ای به نام
سلسله‌مراتب بصری (visual hierarchy)
در نهایت یک درس هم خواهیم داشت
درباره تجربه کاربری و همچنین اجزاء (components) و چیدمان‌ها
پس در اصل یاد می‌گیریم چطور
می‌شه اجزاء مختلف و انواع چیدمان‌ها رو
برای نمایش انواع مختلف اطلاعات استفاده کرد
و اینجا ما تعداد زیادی
نمونه‌های مختلف و انواع اجزاء خواهیم داشت
و در واقع این درس رو می‌ذاریم
برای بخش بعدی چون این یک نوع خاص از ماده اولیه است
که واقعاً هیچ قانون مشخصی نداره
اما همچنان تحت تأثیر شخصیت وب‌سایت قرار می‌گیره
و بنابراین من اینجا هم اون رو فهرست کردم
و حالا که درباره شخصیت وب‌سایت صحبت کردیم
این مفهومی هست که خودم ابداع کردم و باعث می‌شه
که ما تصمیم‌های طراحی هرکدوم از این مواد اولیه رو
بر اساس همون شخصیت وب‌سایت بگیریم
حالا یک درس کامل درباره شخصیت‌های وب‌سایت وجود داره
در پایان این بخش اما فعلاً
بیا این درس رو با یه مرور کلی تموم کنیم
درباره هر کدوم از ۷ شخصیت مختلف وب‌سایت
اولین شخصیت شخصیت جدی یا شیک و برازنده است
که می‌تونیم ازش برای القای لوکس بودن و ظرافت استفاده کنیم
و این کار رو با استفاده از فونت‌های سریف باریک
رنگ‌های طلایی یا پاستلی و تصاویر بزرگ با کیفیت بالا انجام می‌دیم
بعدی شخصیت مینیمال یا ساده است
این یکی روی محتوای متنی مهم تمرکز می‌کنه
و از متن مشکی کوچک یا متوسط استفاده می‌کنه
خیلی وقت‌ها از چند خط هم استفاده می‌کنه
و تصاویر و آیکون‌های خیلی کمی داره
و اگه آیکونی داشته باشه خیلی کوچیکه
و اگر هم آیکونی داشته باشه بسیار کوچیکه
بعدی شخصیت ساده یا خنثی هست
که خیلی وقت‌ها استفاده می‌شه
توسط شرکت‌های بزرگ و تثبیت‌شده
مثل مایکروسافت یا ادوبی
و در این شخصیت طراحی با استفاده از
فونت‌های خنثی و کوچک و یک چیدمان خیلی ساختاریافته
خودش رو کنار می‌کشه و مزاحم نمی‌شه
بعدی شخصیت جسور یا بااعتمادبه‌نفسه
که با ایجاد تأثیرگذاری
از طریق تایپوگرافی بزرگ و پررنگ به همراه
بلوک‌های رنگی بزرگ و روشن
مثل همونی که اینجا روی این صفحه می‌بینی
حالا شخصیت شماره پنج برعکس اینه
که همون شخصیت آرام و صلح‌آمیزه
این شخصیت خیلی وقت‌ها برای محصولاتی استفاده می‌شه
که می‌خوان این ایده رو برسونن که به مصرف‌کننده اهمیت می‌دن
و این کارو با استفاده از رنگ‌های پاستلی آرامش‌بخش انجام می‌دن
مثل همین رنگ‌های پس‌زمینه روی این صفحه
و همچنین تیترهای سریف نرم به همراه
تصاویر و ایلاستریشن‌هایی
که با فونت یا رنگ‌ها هماهنگ هستن
حالا بعدی شخصیت بسیار مهمِ استارتاپی هست
و پرانرژی
و همان‌طور که از اسمش پیداست این یکی خیلی استفاده می‌شه
در شرکت‌های استارتاپی
و این «شخصیتِ وب‌سایت»
از تایپ‌فیس‌های مدرنِ بدون سریف استفاده می‌کنه
متن‌ها و پس‌زمینه‌های خاکستریِ روشن رو همراه با
المان‌های گرد به‌کار می‌بره
در نهایت برای جمع‌بندی یک شخصیت بازیگوش یا سرگرم‌کننده هم هست
که شامل طراحی‌های رنگی و با فرم‌های گرده
این‌ها اساساً با استفاده از عناصر خلاقانه‌ای مثل
آیکون‌ها یا تصویرسازی‌های دستی و تعداد زیادی انیمیشن ساخته می‌شن
و همچنین زبانِ خودِ محتوا هم به انتقالِ
حسِ بازیگوشی / سرگرم‌کنندگی کمک می‌کنه
خب این فقط یه مرور کلی از انواعِ
شخصیت‌های وب‌سایته اما دوباره ایده اینه که
تصمیمات طراحی مختلف برای مثال
در رنگ‌ها یا تایپوگرافی یا تصاویر
که قراره استفاده بشن بستگی داره به
اینکه چه «شخصیتِ وب‌سایتی» رو برای طراحی‌تون می‌خواین
چون همون‌طور که امیدوارم از این مرور
دریافت کرده باشین انواع مختلف محصولات
یا وب‌سایت‌ها نیازمندِ شخصیت‌های کاملاً متفاوتی هستن
یعنی شخصیت‌های وب‌سایت متفاوت
پس باید این موضوع رو همیشه در ذهن داشته باشیم
ولی باز هم بعداً درباره‌اش مفصل صحبت می‌کنیم
فعلاً می‌خوایم قوانین مربوط به هرکدوم رو مطالعه کنیم
از «مواد اولیه طراحی» که قبلاً درباره‌شون یاد گرفتیم
پس حالا بزن بریم و این کارو انجام بدیم
در درس بعد که با فن تایپ شروع می‌کنیم