Giáo trình môn học: Thiết kế giao diện web (Ngành/nghề: Thiết kế trang web) - Trường CĐN Đà Lạt

Chia sẻ: _ _ | Ngày: | Loại File: PDF | Số trang:63

Thêm vào BST

Báo xấu

61
lượt xem 12
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Căn cứ vào chương trình đào tạo nghề Thiết kế trang web, giáo trình giúp cung cấp cho người học những kiến thức cơ bản về thiết kế web cũng như kỹ năng sử dụng phần mềm Photoshop để thiết kế trang web. Để học được mô đun này người học cần có kiến thức cơ bản về ngôn ngữ HTML và kỹ thuật vẽ đồ họa (Corel Draw).

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Giáo trình môn học: Thiết kế giao diện web (Ngành/nghề: Thiết kế trang web) - Trường CĐN Đà Lạt

ỦY BAN NHÂN DÂN TỈNH LÂM ĐỒNG TRƯỜNG CAO ĐẲNG NGHỀ ĐÀ LẠT GIÁO TRÌNH MÔN HỌC/ MÔ ĐUN: THIẾT KẾ GIAO DIỆN WEB (PHOTOSHOP) NGÀNH/ NGHỀ: THIẾT KẾ TRANG WEB TRÌNH ĐỘ: CAO ĐẲNG Ban hành kèm theo Quyết định số:1157/QĐ-CĐNĐL ngày 11 tháng 12 năm 2019 của Hiệu trưởng Trường Cao đẳng Nghề Đà Lạt (LƯU HÀNH NỘI BỘ) Lâm Đồng, năm 2019
TUYÊN BỐ BẢN QUYỀN Tài liệu này thuộc loại sách giáo trình nên các nguồn thông tin có thể được phép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo. Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh thiếu lành mạnh sẽ bị nghiêm cấm. Giáo trình được lưu hành nội bộ Trường Cao đẳng Nghề Đà Lạt. 1
LỜI GIỚI THIỆU Vài nét về xuất xứ giáo trình: Giáo trình này được viết theo căn cứ Thông tư số 03/2017/TT-BLĐTBXH ngày 01 tháng 03 năm 2017 của Bộ Lao động – Thương binh và Xã hội về việc Quy định về quy trình xây dựng, thẩm định và ban hành chương trình; tổ chức biên soạn, lựa chọn, thẩm định giáo trình đào tạo trình độ trung cấp, trình độ cao đẳng. Quá trình biên soạn: Giáo trình này được biên soạn có sự tham gia tích cực của các giáo viên có kinh nghiệm, cùng với những ý kiến đóng góp quý báu của các chuyên gia về lĩnh vực công nghệ thông tin. Mối quan hệ của tài liệu với chương trình, mô đun/môn học: Căn cứ vào chương trình đào tạo nghề Thiết kế trang web, giáo trình giúp cung cấp cho người học những kiến thức cơ bản về thiết kế web cũng như kỹ năng sử dụng phần mềm Photoshop để thiết kế trang web. Để học được mô đun này người học cần có kiến thức cơ bản về ngôn ngữ HTML và kỹ thuật vẽ đồ họa (Corel Draw). Cấu trúc chung của giáo trình này bao gồm 2 bài chính: Bài 1: Giới thiệu về thiết kế giao diện web Bài 2. Tạo layout trang web chuyên nghiệp Lời cảm ơn Giáo trình được biên soạn trên cơ sở các văn bản quy định của Nhà nước và tham khảo nhiều tài liệu liên quan có giá trị. Song chắc hẳn quá trình biên soạn không tránh khỏi những thiếu sót nhất định. Ban biên soạn mong muốn và thực sự cảm ơn những ý kiến nhận xét, đánh giá của các chuyên gia, các thầy cô đóng góp cho việc chỉnh sửa để giáo trình ngày một hoàn thiện hơn. Lâm Đồng, ngày 10 tháng 12 năm 2019 Tham gia biên soạn 1. Phạm Đình Nam 2. Ngô Thiên Hoàng 3. Nguyễn Quỳnh Nguyên 4. Phan Ngọc Bảo 2
Bài 1: Giới thiệu về thiết kế giao diện web ................................................................ 4 1. Tạo theme cho cửa hàng bán đồ thủ công ............................................................. 4 Xác định mục tiêu kinh doanh .................................................................................... 4 Chuẩn bị ...................................................................................................................... 4 Chọn typeface (kiểu chữ) ............................................................................................ 6 Chuẩn bị tài liệu .......................................................................................................... 6 Chào đón khách hàng mới .......................................................................................... 6 Tạo lòng tin cho khách hàng ..................................................................................... 10 Thu thập thông tin người mua .................................................................................. 13 2. Tạo Landing page cho trang web du lịch ......................................................... 17 Tài liệu ...................................................................................................................... 17 Chuẩn bị tài liệu ........................................................................................................ 17 Thiết kế khu vực Header (tiêu đề) ............................................................................ 19 Thiết kế khu vực Features (Tính năng) ..................................................................... 22 Thiết kế khu vực Social Proof (Lời chứng thực) ...................................................... 23 Thiết kế cho khu vực Final CTA (Lời kêu gọi hành động) ...................................... 24 Thiết kế khu vực Footer (chân trang) ....................................................................... 26 Bài 2. Tạo layout trang web chuyên nghiệp............................................................. 27 1. Sử dụng Mockup ................................................................................................... 27 2. Thiết lập Canvas ................................................................................................... 28 3. Tạo tiêu đề ............................................................................................................ 31 4. Tạo mẫu texture .................................................................................................... 36 5. Thêm logo ............................................................................................................. 38 6. Thêm thanh điều hướng ........................................................................................ 40 7. Thanh trượt nội dung ............................................................................................ 42 8. Thêm một số dòng chào mừng ............................................................................. 47 9. Hoàn thiện tiêu đề ................................................................................................. 48 10. Sử dụng Gradient cho nền .................................................................................. 49 11. Thêm thanh trượt xoay........................................................................................ 50 12. Tạo đường phân chia nội dung ........................................................................... 51 13. Thêm nội dung chính .......................................................................................... 51 3
Bài 1: Giới thiệu về thiết kế giao diện web 1. Tạo theme cho cửa hàng bán đồ thủ công Trong hướng dẫn này, chúng ta sẽ tạo ra một bố cục cho một cửa hàng bán đồ thủ công. Bài viết sẽ không nói chi tiết về kích thước phông chữ hoặc mã màu cụ thể, nhưng thay vào đó sẽ tập trung vào việc giải thích các lựa chọn phông chữ, màu sắc, tỷ lệ và các yếu tố khác. Bạn cần:  Hình ảnh giao diện chính và hình ảnh sản phẩm  Phông chữ, ở ví dụ này sử dụng hai phông chữ Source Sans Pro và Source Serif Pro từ Font Squirrel Xác định mục tiêu kinh doanh Trước khi bắt đầu thiết kế bố cục, trước tiên bạn cần xác định mục tiêu kinh doanh. Ưu tiên hàng đầu để nâng cao nhận thức về thương hiệu hay để bán sản phẩm cho khách hàng mới, hoặc cung cấp giá trị đầu tiên, có được thông tin và sau đó bán sản phẩm. Bạn cần phải suy nghĩ về mục tiêu kinh doanh và nhu cầu người dùng để thiết kế bố cục thuyết phục khách hàng. Bắt đầu xác định mục tiêu kinh doanh bằng cách đặt những câu hỏi sau:  Bạn định bán gì?  Ai sẽ quan tâm đến sản phẩm?  Tại sao họ nên mua từ bạn?  Làm thế nào để cung cấp giá trị? Bài hướng dẫn này tập trung vào hình ảnh mạnh mẽ và sử dụng rộng rãi không gian âm để tạo cảm giác thoải mái cho thiết kế sang trọng và hấp dẫn những người quan tâm đến hình ảnh. Chuẩn bị Trước khi bắt tay vào sử dụng Adobe Photoshop, hãy xác định màu sắc, phong cách và định hướng chung. Bước 1 Thu thập hình ảnh bạn thích cho bảng moodboard và bảng màu color palette. Nhiều người sử dụng Pinterest, nhưng gomoodboard.com rất hữu ích và được thiết kế hoàn toàn để tạo các bảng moodboard. 4
Bước 2 Tiếp theo hãy tạo một bảng màu cho thiết kế vì một sản phẩm có liên quan đến thương hiệu và sẽ thu hút khách hàng. Tốt nhất nên sử dụng công cụ tạo bảng màu như Adobe Color CC (trước có tên là Kuler) để tiết kiệm thời gian chọn màu sắc. Tải hình ảnh lên bảng moodboard và xem màu nào được tạo ra. Điều chỉnh bảng màu để phù hợp với nhu cầu và lưu lại màu sắc để tham khảo trong tương lai. 5
Chọn typeface (kiểu chữ) Lấy cảm hứng từ một số mục trong bảng moodboard, chúng ta sẽ chọn phông chữ Source Pro, bao gồm cả phiên bản sans và serif. Sử dụng hỗn hợp hai phông chữ sẽ tạo cảm giác cân bằng và làm tiêu đề trông mạnh mẽ. Chuẩn bị tài liệu Bước 1 Mở Adobe Photoshop và tạo một tài liệu mới CMD + N. Xác định kích thước theo ý bạn, trong ví dụ này là 1400x3564px. Bước 2 Sau đó truy cập vào View > New Guide… để thiết lập một số đường dẫn (guideline) để bố cục có đủ không gian và cân bằng. Thông thường, người dùng hay chọn 1000px làm điểm khởi đầu và thêm một số đường dẫn từ góc. Lưu ý: Các đường dẫn được sử dụng cho hướng dẫn này: dọc với 200px, 500px, 550px, 700px, 850px, 900px và 1200px. Mẹo: Bạn cũng có thể sử dụng plugin GuideGuide Photoshop để làm cho quá trình này nhanh hơn. Chào đón khách hàng mới Chúng ta sẽ bắt đầu thiết kế cửa hàng bằng cách tạo ra một khu vực phía trên hấp dẫn thu hút sự chú ý của khách truy cập và gửi một tin nhắn tức thời giới thiệu về trang web. Bước 1 Tạo một nhóm mới gọi là "Navigation" và đặt đường dẫn ngang mới với giá trị 130px. Đây là nơi logo, liên kết điều hướng và tìm kiếm sẽ "cư trú". Đặt logo ở bên trái, nếu không có, hãy tạo một hình chữ nhật và đặt văn bản vào đó. 6
Bước 2 Bây giờ hãy đặt các mục điều hướng dưới dạng văn bản thuần. Từ giai đoạn lập kế hoạch, bạn nên biết những gì cần đưa vào điều hướng để khách hàng tiềm năng thấy hữu ích. Sử dụng công cụ Horizontal Type Tool (T) để viết các tiêu đề liên kết và đặt chúng bên cạnh logo với một khoảng cách hợp lý. Bước 3 Tìm kiếm là một chức năng vô cùng quan trọng. Làm cho trường tìm kiếm của bạn trở nên nổi bật và có thể dễ dàng truy cập bằng cách đặt nó ở bên phải trên thanh điều hướng trên cùng. Để tạo nó sử dụng công cụ Rectangle Tool (U) và Horizontal Type Tool (T). Lưu ý rằng màu sắc được lấy cảm hứng từ hình ảnh chúng ta đã sử dụng với Adobe Color CC. 7
Bước 4 Bây giờ đã đến lúc đặt một hình ảnh nổi bật sẽ là điểm nhấn cho toàn bộ trang web khi khách truy cập lần đầu tiên nhìn thấy nó. Như bạn thấy trong các trang web ngày nay, chúng ta nên chọn hình ảnh chất lượng cao với trọng tâm rõ ràng, cho phép các phần văn bản và giao diện người dùng được phủ lên. Sử dụng công cụ Rectangle Tool (T) để vẽ một hình chữ nhật với kích thước 1400x700px (màu bất kỳ) và đặt nó ngay bên dưới thanh điều hướng trên cùng (nhớ đặt đường dẫn ngang là 130px cho hình này). Sau đó, kéo một hình ảnh đã chọn và đặt lớp này lên trên lớp hình chữ nhật. Giữ phím Alt và di chuột qua lớp hình ảnh cho đến khi bạn thấy một mũi tên nhỏ trỏ xuống, sau đó nhả chuột để tạo một Clipping Mask để hình ảnh chỉ hiển thị trong vùng hình chữ nhật. Nhấn CMD + T để thay đổi kích thước ảnh, lưu ý nhớ giữ phím Shift để thay đổi kích thước của ảnh. 8
Bước 5 Để khiến hình ảnh thêm thu hút, hãy thêm một gradient màu đi từ màu trong suốt sang màu đen ở phía dưới. Chọn công cụ Gradient Tool (G) và tùy chỉnh nó để đi từ màu đen #000000 đến trong suốt. Sau đó giữ phím Shift và kéo chuột từ dưới cùng của hình ảnh tới khoảng giữa để tạo một gradient. Sau đó, đưa nó vào một Clipping Mask và giảm Opacity xuống còn 50%. Đổi tên lớp này thành "Shadow" để dễ dàng xác định. Bước 6 Bây giờ là lúc sử dụng một dòng tiêu đề mạnh mẽ thu hút ánh mắt của khách truy cập và khuyến khích họ tìm hiểu thêm. Sử dụng cỡ chữ Sans Pro lớn và bôi đậm với tiêu đề ngắn. Ở đây sử dụng phông chữ Source Sans Pro (Black) kích thước 70px và 160 cho tracking chữ. 9
Bước 7 Bạn đã thu hút sự chú ý của người dùng, bây giờ cung cấp một tiêu đề phụ và quan trọng nhất là một lời mời gọi. Ở đây, ví dụ sử dụng kích thước 28px cho phông chữ Source Serif Pro (định dạng Regular) cho tiêu đề phụ và được sử dụng lại nút tìm kiếm để giữ giao diện tính thống nhất. Lưu ý đến khoảng trống được sử dụng ở đây. Luôn luôn để không gian đủ xung quanh các yếu tố để chúng có thể nhìn thấy nhanh và trông tổ chức hơn. Ngoài ra, nếu nhìn kỹ, bạn sẽ thấy rằng các lớp văn bản gần nhau hơn. Tạo lòng tin cho khách hàng Vậy là bạn đã xong phần chào đón khách hàng. Sau khi đã thu hút sự chú ý và quan tâm của khách, đã đến lúc chúng ta cho thấy một số lợi ích mà cửa hàng cung cấp. Bước 1 Giữ phần đầu của trang web ở mức tối thiểu để tạo tính thẩm mỹ đơn giản và sạch sẽ cho phần còn lại của bố cục. Đặt tiêu đề thu hút khách truy cập và một mô tả ngắn gọn sẽ khuyến khích họ nhiều hơn. Ở đây sử dụng phông chữ Source Sans Pro (Semibold) 24px và màu xám đậm #282723. Đảm bảo để lại nhiều khoảng trống phía trên dòng tiêu đề sao cho phù hợp với khu vực trên đầu. Đối với mô tả sử dụng màu sáng để làm yếu tầm nhìn và biết đây là tiêu đề phụ. Trong ví dụ này, sử dụng phông chữ Source Serif Pro (Regular) kích thước 16px và màu xám #adadad. 10
Bước 2 Một cách hiệu quả để tạo lòng tin là sử dụng hình ảnh hấp dẫn chất lượng cao kích thích và tạo mong muốn từ khách. Đảm bảo đầu tư thời gian để chụp những bức ảnh tuyệt vời về sản phẩm của bạn hoặc thuê được một nhiếp ảnh gia chuyên nghiệp. Đối với hướng dẫn này, chúng ta sẽ sử dụng các sản phẩm hư cấu được lấy từ Unsplash và Stock Up. Chọn công cụ Rectangle Tool (U) và vẽ một hình chữ nhật. Sau đó kéo ảnh sản phẩm vào Photoshop, đặt nó trên hình chữ nhật và tạo một Clipping Mask. Thay đổi kích thước hình ảnh nếu cần thiết bằng cách nhấn CMD + T. Bước 3 11
Để giữ mọi thứ đơn giản, chúng ta sẽ chỉ cung cấp thông tin cơ bản về sản phẩm bao gồm tiêu đề và giá (điều này có thể gây sự tò mò cho người mua). Chọn cùng một phông chữ Source Serif Pro và nhập tiêu đề bằng màu xám đậm như sử dụng cho dòng tiêu đề của phần này. Sau đó sử dụng màu xám sáng hơn cho giá, vì nó là một thông tin phụ và không đòi hỏi quá nhiều sức mạnh thị giác. Một điều nữa cần ghi nhớ là các yếu tố cửa hàng như tiêu đề, nút kêu gọi hành động (call to action) và các khối mô tả cần được tập trung. Bước 4 Bây giờ đặt tất cả các lớp sản phẩm vào một nhóm và sao chép chúng bằng cách nhấn CMD + J, đặt chúng giữa các đường dẫn dọc được xác định trước đó để tạo khoảng cách giữa. Bước 5 Trong phần "Trending" (Xu hướng), bạn nên để ba sản phẩm vì đó là lựa chọn thuyết phục hơn. Bây giờ chúng ta sẽ thiết lập đường phân cách để chia bố cục thành 12
các phần. Trong ví dụ này sử dụng công cụ Line Tool (U) 1px màu xám nhạt #e6e6e6 để hiển thị nhưng không quá mạnh. Mẹo: Giữ phím Shift để dễ dàng vẽ một đường ngang hoàn hảo. Bước 6 Bây giờ chúng ta hãy tạo ra một phần khác cho thấy nhiều sản phẩm hơn và gọi nó là "Popular". Phần này bạn nên chọn những sản phẩm phổ biến và thu hút người dùng. Tạo bản sao bằng cách nhấn CMD + J và tùy chỉnh tiêu đề, mô tả và sản phẩm của phần "Trending". Sao chép nhiều sản phẩm hơn và tạo lưới 3x2 cho sản phẩm tốt nhất. Thu thập thông tin người mua Sau khi phơi bày hầu hết các hình ảnh để gợi lên sự quan tâm từ khách mua, bây 13
giờ là thời gian để thu thập thông tin của khách truy cập trong trường hợp họ không muốn mua ngay bây giờ, vì vậy bạn có thể tiếp cận sau. Bước 1 Chúng ta sẽ tạo một phần blog đơn giản bằng cách sử dụng cùng một định dạng tiêu đề, mô tả và một số đoạn trích của các bài đăng trên blog để chuyển hướng người dùng tới nội dung có thể khiến họ quan tâm. Chọn công cụ Rectangle Tool (U) và vẽ một hình chữ nhật lớn sẽ làm nền cho phần mới này. Sử dụng màu xám nhạt tinh tế để tạo ra một sự tách biệt nhẹ giữa các sản phẩm, màu được sử dụng ở đây là #fbfafa. Bây giờ sao chép tiêu đề và mô tả của phần trước và đặt chúng lên trên nền mới. Bước 2 Bây giờ chọn công cụ Horizontal Type Tool (T) và nhập tiêu đề, ngày tháng và trích đoạn ngắn của bài đăng blog. Lại một lần nữa sử dụng phông chữ Source Serif Pro cho tiêu đề và mô tả và Source Sans Pro cho ngày. Ngay cả trong khối blog này, bạn sẽ nhận thấy hệ thống phân cấp thị giác rõ ràng, tiêu đề là màu tối nhất và lớn nhất và các yếu tố khác nhỏ hơn và nhạt hơn về màu sắc. Luôn luôn sử dụng hệ thống phân cấp thị giác để đạt được sự hợp lý và giữ tính nhất quán cho bài đăng trên blog lớn như các khối sản phẩm. 14
Bước 3 Bây giờ đặt tất cả các lớp đăng bài trên blog vào một nhóm và sao chép nó hai lần bằng cách nhấn CMD + J, đặt nó giữa các đường dẫn đứng để lại khoảng trống như với các sản phẩm. Bước 4 Sau khi hiển thị một số sản phẩm và các bài viết trên blog có giá trị, giờ là lúc tạo một mẫu với lời kêu gọi hành động rõ ràng để đăng ký. Sử dụng công cụ Rectangle Tool (U), chọn một màu sẫm, như màu #282723 và vẽ một nền cho mẫu đăng ký. Bằng cách sử dụng nền tối hơn, bạn sẽ tạo độ tương phản thu hút sự chú ý của người xem. 15
Bước 5 Bây giờ viết một lời quảng cáo ngắn giải thích tại sao mọi người nên đăng ký, thể hiện lợi ích hơn là các tính năng. Sau đó điều hướng đến thiết kế và sao chép trường nút tìm kiếm để sử dụng lại cho mẫu đăng ký. Kéo các lớp đã sao chép và đặt chúng lên trên nền vừa tạo sau đó tùy chỉnh trường nhập và nút gọi hành động. Bước 6 Cuối cùng, mỗi mẫu phải có một chân trang có liên kết để mọi người có thể cuộn xuống và tìm điều hướng tới các trang chính như hỗ trợ khách hàng, thông tin liên hệ, mạng xã hội và nhiều hơn thế nữa. Sao chép các lớp văn bản đăng blog và tuỳ chỉnh chúng để hiển thị liên kết bạn chọn. Chia các nhóm liên kết khác nhau và tạo các cột có khoảng cách đều nhau trong một hàng. Lưu ý, bạn nên thêm dòng bản quyền ở cuối cùng của bố cục. Vậy là chúng ta đã hoàn thành thiết kế theme cho cửa hàng bán đồ thủ công, bây giờ hãy tiếp tục và xem lại các lớp tài liệu, xóa các tài liệu không cần thiết để khiến nó hoàn hảo hơn. 16
2. Tạo Landing page cho trang web du lịch Trong hướng dẫn này, chúng ta sẽ sử dụng Photoshop CS6 để thiết kế một Landing page đơn giản, sạch sẽ cho một trang web du lịch. Trong quá trình này, các bạn sẽ được hướng dẫn cách tạo lưới tùy chỉnh với các đường dẫn, tạo kiểu chữ, sử dụng rất nhiều không gian trắng và sáng tác nội dung trang web theo cách chuyên nghiệp. Tài liệu Để tiện theo dõi hướng dẫn, bạn sẽ cần những tài liệu sau (có sẵn miễn phí):  Hình ảnh liên quan đến du lịch  Phông chữ PT Serif, Aller, Open Sans từ Fontsquirrel.com  Hình đại diện Xem thêm:  5 trang web tìm và tải font chữ miễn phí  8 công cụ "nhận diện" font chữ sử dụng trên ứng dụng hoặc trang web Chuẩn bị tài liệu Bước 1 Bắt đầu bằng cách tạo một tài liệu mới (File > New ...) bằng cách sử dụng các cài đặt được hiển thị bên dưới. 17
Bước 2 Hãy thiết lập một số đường dẫn để bố cục có đủ không gian và trông cân bằng. Việc này sẽ đảm bảo sự hoàn hảo cho pixel và xác định chiều rộng trang web. Chia khoảng trống thành hai nửa theo chiều dọc để có thể tạo một thành phần trung tâm. Đi tới View > New Guide… và đặt một số đường dẫn. Nhiều người thường chọn 1000px làm chiều rộng trang web và thêm một số đường dẫn từ góc để tạo không gian. Lưu ý: Các đường dẫn được sử dụng cho hướng dẫn này: theo chiều dọc ở 200px, 260px, 700px, 1140px và 1200px. Mẹo: Bạn cũng có thể sử dụng plugin GuideGuide Photoshop để làm cho quá trình này nhanh hơn. Bước 3 Tiếp theo chúng ta sẽ tạo ra nhóm lớp có tiêu đề Header, Features, Social Proof, CTA và Footer. Giữ nguyên phong cách Photoshop này sẽ giúp mọi thứ được sắp xếp và dễ dàng điều hướng hoặc chỉnh sửa. Để tạo nhóm, vào Layer > New > Group ... và đặt tên mỗi một tiêu đề như đã đề cập. Để tạo nhóm nhanh chóng chỉ cần nhấp vào biểu tượng. 18