Thiết kế giao diện với Photoshop

11:38 sáng04/07/2016

Môn học được xây dựng với mục tiêu giúp Học viên làm chủ Photoshop để thiết kế giao diện website, đồng thời trang bị những kiến thức về giao diện người dùng, các thành phần của web và site map, các quy tắc cơ bản về chia cột, tạo layout, tính tương tác, phù hợp với thiết bị di động ….

Học viên làm quen được giao diện Photoshop, các phần Setup thông số, giao diện cơ bản trong thiết kế Website.

Nắm được các công cụ trong Photoshop cho người mới bắt đầu, tập trung vào các công cụ dùng nhiều trong Photoshop thiết kế giao diện và website ( Typography, Color, Shape, Layer mask, Adjustment, Transform, Guide, Grid …)

Có thể hoàn thiện tự thiết kế 1 giao diện website cơ bản (Gồm phần dựng bố cục, tạo thành phần, sắp xếp,…)

 
Công cụ thực hành: Adobe Photoshop, Wireframe, MindMup
 

Nội dung chi tiết môn Thiết kế giao diện web với Photoshop:


Buổi 1:

•  Giới thiệu tổng quan
•  Quy trình thiết kế giao diện Website
•  Các thành phần giao diện Photoshop và Kỹ năng cơ bản (Layer, Move, Zoom, Pan, Guide, Align)
•  Công cụ cơ bản Photoshop cho thiết kế giao diện Website (Text, Shape, Image)


Buổi 2: 

•  Công cụ đồ hoạ hỗ trợ thiết kế Web (Grid System, Baseline, Transform)
•  Tìm hiểu về điều chỉnh Typography trong Photoshop


Buổi 3: 

•  Tìm hiểu về Mask, Shape và ứng dụng với Layer (Image, Shape, Text…) 
•  Kết hợp với Adjustment tạo hiệu ứng đặc biệt 


Buổi 4: 

•  Nghiên cứu nhóm người dùng và Phân tích mục đích sử dụng 
•  Xây dựng Chức năng và vẽ hệ thống Sitemap
•  Phân tích hành vi và vẽ sơ đồ tương tác FlowChart


Buổi 5:

•  Định hình các thành phần bố cục – UI Element
•  Phác thảo các Section chính và vẽ Wireframe


Buổi 6:

•  Tìm cảm hứng và Ý tưởng thiết kế
•  Nhận diện các thành phần Style Guide (Font, Color, Image, Shape, Concept)


Buổi 7:

•  Tìm hiểu hiệu ứng đặc biệt Photoshop (Layer Style) và ứng dụng
•  Áp dụng một số kỹ thuật đặc biệt (Filter) trong thiết kế web


Buổi 8:

•  Các thành phần giao diện thông dụng (Hero Text, Image, Button, Menu, Slide)
•  Kết hợp các thành phần với nhau tạo Section


Buổi 9:

•  Các thành phần thiết kế cơ bản cho Web

  • Space – khoảng trắng,
  • Space – hình dáng,
  • Space – Tỉ lệ,
  • Line – đường nét
  • Color – Màu sắc)

•  Kết hợp công cụ và Ứng dụng vào cải thiện giao diện Web 


Buổi 10:

•  Nguyên tắc thiết kế cơ bản cho Web

  • Visual Hierarchy – Phân cấp,
  • Contrast – Tương phản,
  • Balanced – Cân bằng,
  • Consistency – Nhất quán,
  • Proximity – Gần,
  • Aligment – Căn gióng

•  Kết hợp với công cụ và Ứng dụng vào việc thiết kế giao diện hiệu quả


Buổi 11:

•  Nguyên tắc xây dựng kịch bản thiết kế Design Story
•  Áp dụng kết hợp với các thành phần và nguyên tắc thiết kế tạo dựng giao diện


Buổi 12:

•  Áp dụng nguyên tắc AIDA (Attention, Interest, Desire, Action) trong thiết kế Web 
•  Xây dựng Landing Page


Buổi 13:

•  Kiểm tra cuối môn

Facebookgoogle_plusmail

Tin cùng chuyên mục

Tin cùng chuyên mục

  • Không có chuyên mục