Home Trangtd Website 4 phần Phần 2

11
7 Digital Platforms
Mobil
Website
e

Domain - Design
Gam
e
22

Ema MORE INFO

Search
il
Digital
Media

Thiết kế bởi Nguyễn Mạnh

 Domain
Make it easy for consumers to find you – Phải sở hữu một
tên miền gắn ngọn, đẹp, dễ nhớ. Cần có chiến lược sở hữu
tên miền từ rất sớm.

Design
Have them go inside and be impressed – Phải hiệu quả,
không chỉ đẹp mà còn phải vận tốt, quan trọng nhất là đem
lại trải nghiệm tốt nhất cho người tiêu dùng.
Domain

Content
Make them stay longer and come back often – Đủ sự thú vị
Content và mới mẻ để giữ chân người dùng và khiến họ quay lại
thường xuyên hơn..

Technology Design Technology

Make the website durable, visible, accessible – Website phải
tải nhanh, xem tốt trên nhiều thiết bị và khả năng đáp ứng
cao để phục vụ cho nhiều người dùng một thời điểm.

Engage and convert!

Thiết kế bởi Nguyễn Mạnh
 Domain
Make it easy for consumers to find you – Phải sở hữu một
tên miền gắn ngọn, đẹp, dễ nhớ. Cần có chiến lược sở hữu
tên miền từ rất sớm.

Design
Have them go inside and be impressed – Phải hiệu quả,
không chỉ đẹp mà còn phải vận tốt, quan trọng nhất là đem
lại trải nghiệm tốt nhất cho người tiêu dùng.
Domain

Content
Make them stay longer and come back often – Đủ sự thú vị
Content và mới mẻ để giữ chân người dùng và khiến họ quay lại
thường xuyên hơn..

Technology Design Technology

Make the website durable, visible, accessible – Website phải
tải nhanh, xem tốt trên nhiều thiết bị và khả năng đáp ứng
cao để phục vụ cho nhiều người dùng một thời điểm.

Engage and convert!

Thiết kế bởi Nguyễn Mạnh
Domain
Make it easy for consumers to find you

Thiết kế bởi Nguyễn Mạnh

 Microsite
Short and concise

Easy to type and remember

Vd: Tangbongnghethuat.com,….

Thiết kế bởi Nguyễn Mạnh

Tên miền cho thương hiệu
Là dài hạn nên cần có chiến lược mua sớm và mua đầy đủ

Corporate Domains: Variation Names

• TrungNguyen.com • TrungNguyenCoffee.com (category name)
• TrungNguyen.com.vn • TrungNguyenCafe.com (different spelling)
• TrungNguyencorp.vn • CapheTrungNguyen.com
• …
....

Brand Domains: SEO Doamins

• G7.vn • DungLeNguyenVu.com (CEO Name)
• G7Mart.com • Cafe.net.vn (e-commerce Platform)
• Passiona.com • ThegioiCafe.com
• …
....

Thiết kế bởi Nguyễn Mạnh

 Buy early. Buy all.

• Important: Secure corporate and brand domain

1• If conditioned, buy all extensions (.COM, .NET, .VN, .COM.VN, etc) including target countries
(.CO.UK, .COM.SG, .EU, etc)

Thiết kế bởi Nguyễn Mạnh

DESIGN

Thiết kế bởi Nguyễn Mạnh

Một website tốt - Không chỉ là đẹp,
mà còn là cách thiết kế website vận
hành như111 thế nào.
Có hợp lí hay không?
Hiệu quả hay không?

Thiết kế bởi Nguyễn Mạnh

10 bước Design & Development Process

1. Objectives 2. Features 3. Sitemap 4.Wireframes 5. User – flow

6. DESIGN 7. HTML 8. Code 9. Test 10. Content

Thiết kế bởi Nguyễn Mạnh

 1. Objectives Cần xác định mục tiêu của website

Website đóng vai trò gì trong chiến dịch? Cung cấp thông tin gì?

Nhắm đến đối tượng nào? Mang lại trải nghiệm gì?

Giải quyết vấn đề gì?

1. Objectives Truyền tải thông điệp gì?

Thiết kế bởi Nguyễn Mạnh

 2. Features

Là nhưng công cụ, giải pháp, những hoạt động, nội dung mà website cần có để giải quyết các mục tiêu đặt
ra ở bước 1 (Objectives)

2. Features

Thiết kế bởi Nguyễn Mạnh

 3. Sitemap

Sitemap là một bản đồ cây thư mục trực quan rõ ràng và đơn giản, thể hiện các mối liên
kết với các trang cần có trong một website. Giúp chúng ta hình dung rõ ràng hơn các
thành phần, các khu vực của một website, số lượng trang cần có để thỏa mãn các tính
năng đề ra.

3. Sitemap

Thiết kế bởi Nguyễn Mạnh

3. Sitemap

Thiết kế bởi Nguyễn Mạnh

 4. Wireframes

Vẽ khung sườn. Giống như vẽ kiến trúc, nó cho chúng ta biết cách bố trí, cách sắp đặt các thành phần như
thế nào trong một trang

Logo đặt ở đâu? Banner đặt ở đâu? Tin túc trình bày như thế nào?

Menu chính, phụ đặt như thế nào? Nút thanh toán to hay nhỏ?,...

Chú ý:
4. Wireframes
• Tính hợp lý cua các bố cục
• Tỷ lệ giữa các thành phần
• Mức độ phân bố giữ các thông tin và mức độ quan trọng của các thành phần đó.
Thiết kế bởi Nguyễn Mạnh
4. Wireframes

Thiết kế bởi Nguyễn Mạnh

 5. User – flow Xác định hành trình người dùng

Xác định các bước, các click người dùng cần phải qua để hoàn thành tác vụ nào đó.

Vd: Một ứng viên muốn tìm việc trên một website

-> Vào trang chủ > Vào trang tuyển dụng để tìm vị trí > Xem chi tiết vị trí đo > Đăng nhập để nộp
hồ sơ.

5. User – flow
Như vậy họ phải trải qua ít nhất là 5 trang

-> Trang chủ > Trang danh sách vị trí > Trang chi tiết vị trí > Trang đăng nhập > Trang nộp hồ sơ.

Thiết kế bởi Nguyễn Mạnh

 5. User – flow Xác định hành trình người dùng
Mục tiêu

Xem hành trình của người dùng đã được tối ưu hóa nhất chưa?

Có cách nào rút ngặn lại không? Tối ưu hóa thao tác mà vẫn giúp người dùng hoàn thành tác vụ một cách
tiên lợi, dễ dàng nhất.

Thiết kế bởi Nguyễn Mạnh

 6. Design User Interface (UI) - User Experience (UX)

UI: Bố cục, Thiết kế giao diện, thẩm mỹ của thiết

UX
kế

UX: Lớn hơn UI để tạo ra trải nghiệm người UI

dùng một cách xuyên suốt
6. DESIGN

Thiết kế bởi Nguyễn Mạnh

 6. Design Gồm 8 yếu tố sau

Thiết kế giao diện UI Thiết kế tương tác

Tính năng Chiến lược nội dung

Thiết kế thông tin (IA) information architecture Cách minh họa nội dung

Mức độ dễ sử dụng Tâm lý người dùng

Thiết kế bởi Nguyễn Mạnh

7. HTML Hypertext Markup Language

6. DESIGN 7. HTML

Biến thiết kế thành html

Thiết kế bởi Nguyễn Mạnh

 8. Code

Đưa file Html vào cơ sở dữ liệu

Quản lý nội dung

Thực hiện lập trình, giúp website hoạt động

8. Code

Thiết kế bởi Nguyễn Mạnh

 9. Test

Chạy thử nhiệm, kiểm tra các tính năng Kiểm tra khả năng chịu tải

Kiểm tra lỗi Khả năng bị phá hoại

Kiểm tra các phương thức bảo mật Lỗi hổng bảo mật, lập trình

9. Test

Thiết kế bởi Nguyễn Mạnh

10. Content Cập nhật nội dung, dữ liệu thực tế vào website để vận hành

10. Content

Thiết kế bởi Nguyễn Mạnh

Đó là 10 bước tạo ra một Website

Thiết kế bởi Nguyễn Mạnh

10 bước Design & Development Process

1. Objectives 2. Features 3. Sitemap 4.Wireframes 5. User – flow

6. DESIGN 7. HTML 8. Code 9. Test 10. Content

Thiết kế bởi Nguyễn Mạnh

Web Design Evaluation

Thiết kế bởi Nguyễn Mạnh

 1. Follow the ABC rules

5 Tiêu chí 2. Clear Navigation & Structure

quan trọng 3. Logical UX

để đánh giá 4. Aesthetic UI

một website
5. Call-to-action where possible

Thiết kế bởi Nguyễn Mạnh

1. Follow the ABC rules
Grab users’ Attention (wow)? Branding (correct)? Communication (message)?

Attention Branding Communication

Thiết kế bởi Nguyễn Mạnh

 Attention Sự chú ý

Website có đủ thu hút đối với bạn không?

Bạn có ấn tượng hay muốn click khám phá

webstie không?

Bạn có wow không?

Thiết kế bởi Nguyễn Mạnh

 Branding Nhận diện thương hiệu

Nhìn vào website có nhận ra thương hiệu không?

Nó có tạo được ấn tượng đúng về thương hiệu

hay không?

Có đúng tính cách, định vị thương hiệu bạn

hướng đến không?

Thiết kế có đúng với Brand Guideline hay bộ

nhận diện thương hiệu hay không?

Thiết kế bởi Nguyễn Mạnh

 Communication Thông điệp

Thông điệp muốn truyền đạt đã thực hiện được

trên thiết kế chưa?

Có thể hiện ngay trong những yếu tố đầu tiên

người dùng sử dụng không?

Thiết kế bởi Nguyễn Mạnh

2. Clear Navigation & Structure
Điều hướng & Cấu trúc rõ ràng

Where am I? Tôi đang ở đâu?

Where should I go next? Tôi nên đi đâu tiếp theo?

How to get there fastest? Làm cách nào để đến đó nhanh nhất?

Thiết kế bởi Nguyễn Mạnh

3. Logical UX
Trải nghiệm người dùng

Why do I have to go this way?

What should I do?

UX
Is it easy to find the things I need?

Don't make me think

Thiết kế bởi Nguyễn Mạnh

4. Aesthetic UI
Trải nghiệm đồ họa

Thể hiện đúng tính cách và thương hiệu chưa?

Đủ hấp dẫn với người dùng mục tiêu chưa?

Thể hiện được yếu tố và ngành hàng, sản phẩm mong

UI
muốn hay không?

Sau cùng là: Thiết kế đẹp hay xấu hay chưa phù hợp

Thiết kế bởi Nguyễn Mạnh

5. Call-to-action where possible
Kêu gọi hành động

Tận dụng cơ hội để thúc đẩy người dùng hành động

Ở những thời điểm nào, trang nào, vị trí nào là quan trọng với người dùng?

Có những nút CTA đặt đúng chỗ để kích thích hành động hay không?

Thiết kế bởi Nguyễn Mạnh

KẾT THÚC PHẦN 2

Thiết kế bởi Nguyễn Mạnh

Cảm ơn các bạn đã lắng nghe

Thiết kế bởi Nguyễn Mạnh