آموزش مقدمه ای بر طراحی وب: طراحی دوستانه برای استارتاپ ها و کسب و کارهای کوچک

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

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

شوخی کردم، حق با شماست! با چند نکته و ترفند ساده فتوشاپ، می توانید یاد بگیرید که چگونه دکمه ها و ظروف زیبا، آواتارهای خیره کننده و جفت رنگ های جذاب بسازید تا کاربر را وادار به گفتن "Oh my!"

آنچه خواهید آموخت

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

آنچه خواهید ساخت

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

لوازم مورد نیاز کلاس
Adobe Photoshop. اگر برنامه را ندارید، می‌توانید یک دوره آزمایشی رایگان 30 روزه را دانلود کنید. تمام آموزش های کلاس با استفاده از Photoshop CS6 در مک ضبط می شوند. برای دنبال کردن، نیازی به مک یا جدیدترین نسخه فتوشاپ (CS6) ندارید. اکثر ابزارها در تمام نسخه های فتوشاپ سازگار هستند.

لطفاً توجه داشته باشید: Photoshop Elements یک نسخه محدود از فتوشاپ است و برای این دوره توصیه نمی شود.

فتوشاپ را نمی شناسید؟ کلاس من را امتحان کنید!

* این دوره فقط طراحی است. هیچ توسعه ای آموزش داده نخواهد شد!

صفحه اصلی را برای کسب و کار انتخابی خود طراحی کنید

شروع با طراحی وب

1. با طراحی آشنا شوید

   1. با طراحی UI و تکنیک های جدید فتوشاپ آشنا شوید.

   2. منابع موجود در زیر در منابع اضافی را بخوانید و ببینید.

   3. فراموش نکنید که فایل های منبع را دانلود کنید!

2. دکمه ها، آواتارها، کانتینرها را ایجاد کنید

   از تکنیک‌هایی که آموخته‌اید برای ایجاد مؤلفه‌ها برای سایت تک صفحه‌ای Partystarters (یا شرکت دیگر) خود استفاده کنید.

   • دکمه های خود را بسازید
   • آواتارهای خود را بسازید (دایره و مربع)
   • سبک ظرف خود را بسازید

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

   نمونه ای از دارایی ها.

3. دارایی های پروژه خود را به اشتراک بگذارید

   هر یک از دارایی هایی را که برای سایت خود طراحی کرده اید به اشتراک بگذارید. در مورد انتخاب پروژه همتایان خود بازخورد ارائه دهید.

   نمونه‌ای از دارایی‌ها از .

همه چیز را در کنار هم قرار می دهیم

1. سایت خود را بسازید

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

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

   پیشرفت خود را در بخش پروژه خود به اشتراک بگذارید تا از سایر دانش آموزان بازخورد دریافت کنید

   طراحی نهایی

منابع اضافی

• بخوانید

  •  - بسیار مقدماتی، خواندن سریع اصول اولیه طراحی وب
  •  - نوشتن آنلاین درباره یکی از محبوب‌ترین سبک‌های رابط کاربری امروزی
  •  - نگاه انتقادی به UI/UX فیسبوک

  منابع

  •  - این سیستم شبکه ای است که من استفاده می کنم! آن را دانلود کنید و 'er up
  را باز کنید
  • - من از این برای نمادهای ساده استفاده می کنم. اینجاست که من پین قلب و نقشه را از
  گرفتم
  •  - ابزار وایرفریمینگ عالی.
  • - برای تمسخرهای تعاملی قابل کلیک برای اشتراک گذاری با مشتریان.
  • - آموزش برش PSD زوئی رونی (برای انتقال طرح شما به HTML/CSS برای غیر کدنویسان مفید است).

• دانلودها

  • فایل های منبع سخنرانی

• اختیاری: (24:46)
  در ابتدا در 2013/3/18 ضبط شد