آموزش طراحی بصری برای وب

مقدمه و بررسی اجمالی پروژه Introduction and Project Overview

• مقدمه و بررسی اجمالی پروژه Introduction and Project Overview

طراحی بصری برای وب Visual Design for the Web

• تنظیم ساختار فایل Setting up the File Structure

• ایجاد پرونده های پایه Creating Our Base Files

• شبکه ها Grids

• قرار دادن آرم و ایجاد پیمایش اولیه Placing the Logo and Creating the Primary Navigation

• انتخاب تایپوگرافی برای پیمایش اولیه Making the Typographic Selection for Your Primary Navigation

• اصول دسترسی و رها کردن متن در محتوای اصلی خوب است Accessibility Basics and Dropping Text in the Main Content Well

• تایپوگرافی از سبک پاراگراف و سربرگ Typography of Paragraph and Header Styles

• ادامه تایپوگرافی در فهرست مقدمه ای و لیست غیر منظم Continuing Typography on the Intro Copy and Unordered List

• ادامه تایپوگرافی در عنوان عکس و نقل قول از تصویر Continuing Typography on the Image Caption and Pull Quote

• Thinking Through Padding و حاشیه با محتوای متغیر Thinking Through Padding and Margin with Variable Content

• طراحی تعاملات Designing Interactions

• ادامه تعاملات با سبک های پیوند Continuing Interactions with Link Styles

• رنگ - ملاحظات هنگام استفاده از پالت های رنگ مارک در وب Color - Considerations When Using Brand Color Palettes on the Web

• طراحی فضای سفید برای متن وب Designing White Space for the Context of the Web

• شروع طراحی عناصر نوار کناری سمت راست با بلوک مربوطه Beginning Design of the Right Sidebar Elements with the Related Block

• در حال اتمام عناصر طراحی نوار کناری سمت راست ماست Finishing Our Right Sidebar Design Elements

• طراحی پاورقی و افزودن عنصر نهایی طراحی به Mockup Designing the Footer and Adding in a Final Design Element to the Mockup

• اصول طراحی پاسخگو Responsive Design Principles

• شروع به اجرای طراحی پاسخگو در اولین مدل ما Beginning to Implement Responsive Design on Our First Mockup

• پیاده سازی تلفن همراه برای اولین ساخت ما Continuing Mobile Implementation for Our First Mockup

• تنظیم نوار کناری سمت راست و عناصر پاورقی برای طراحی موبایل Adjusting the Right Sidebar and Footer Elements for the Mobile Design

• طراحی بصری - شخصیت پشتیبانی کننده؟ Visual Design - the Supporting Character?

• وارد شدن به ماکت دوم ما Getting into Our Second Mockup

• چرا از یک طرح بندی معمول برای صفحه (و وب سایت) خود استفاده کنید؟ Why Use a Conventional Layout for Your Page (And Website)?

• انتخاب های زیبایی شناسانه متمایز که مدل دوم ما را از مدل اول ما جدا می کند Distinct Aesthetic Choices That Separate Our Second Mockup from Our First

• پالت های رنگی و وب Color Palettes and the Web

• تعامل ناوبری در طراحی پاسخگو - آیا بهترین روش وجود دارد؟ Navigation Interaction in Responsive Design - Is There a Best Practice?

• ایجاد مشخصات طراحی Creating Design Specs