Người đăng: Unknown

vào lúc 07:48

Thực ra thế giới web không dùng nhiều font, bạn sẽ bất ngờ khi biết có khoảng 100 ngàn các loại font chữ khác nhau, nhưng hàng tỷ trang web mà chúng ta thấy ngày nay vẫn chỉ dùng khoảng 10 font phổ biến - còn gọi là font web an toàn (web safe font).

Danh sách các font web an toàn

Bao gồm:

Arial
Time New Roman
Georgia
Tahoma
Verdana
Trebuchet MS
Courier New
Comic Sans MS
IMPACT

Trong thiết kế web, nhiều khi người thiết kế muốn sử dụng một vài phông độc đáo nhằm gây hiệu ứng về mặt thẩm mỹ đối với người xem. Nhưng trước kia khi việc nhúng font là không thực hiện được, người thiết kế đành ngậm ngùi chịu gò bò chỉ sử dụng các font chữ mà trên máy tính người truy cập web có, và điều đấy làm nảy sinh ra thuật ngữ font web an toàn - chính là các font hay được cài nhất trên máy tính toàn cầu.

Giờ đây mọi chuyện được giải quyết thật đơn giản, người thiết kế chỉ cần đưa font độc đáo của mình lên host của trang web. Khi người dùng duyệt web, họ sẽ tải font về (giống như tải ảnh vậy) và xem được các hiệu ứng font lạ mắt trên trang web.

Nhúng font bằng @font-face trong CSS đã mở bung sức sáng tạo của nhà thiết kế, kết hợp với các khả năng của CSS3, typography trên web đã lên một tầm cao mới.

Code mẫu nhúng font

Đoạn code sau đây được đưa vào file CSS, đừng lo nếu bạn không hiểu luôn, ngay phía dưới có phần giải thích chi tiết:

@font-face {
font-family:font_strong;
src:url('../fonts/Captureit.ttf') format('truetype'),
url('../fonts/Captureit.eot#iefix') format('embedded-opentype'),
url('../fonts/Captureit.woff') format('woff');
font-weight:normal;
font-style:normal;
}

Với code trên thì cấu trúc thư mục trang web của bạn phải giống như hình sau:

Đây là cấu trúc mà đa số mọi người thường dùng, trong đó các file html ở bên ngoài, và từng phần chuyên biệt có thư mục riêng như css để chứa các file CSS, fonts để chứa các Fonts lạ mắt của chúng ta...

Giải thích code

Dòng đầu tiên: font-family:font_strong là tên mà ta muốn đặt cho font mình nhúng, bạn đặt tên như thế nào là tùy ý bạn.
Dòng thứ hai src:url('../fonts/Captureit.ttf') đây là nguồn dẫn của font. Bạn chú ý 2 dấu chấm và thanh xuộc. Đường dẫn sai thì chắc chắn sẽ không lên cho nên phần này phải đặc biệt chú ý thật chính xác. format('truetype') là định dạng của font, đuôi .ttf là truetype
Các dòng tiếp theo url('../fonts/Captureit.eot#iefix') format('embedded-opentype') url('../fonts/Captureit.woff') format('woff'); cũng tương tự, chỉ khác đây là định dạng font khác. Nếu bạn chỉ có font .ttf thì chạy trên Google Chrome và FireFox thì được nhưng sẽ không chạy được trên IE. Để chạy được trên IE phải có font dạng .eot
font-weight:normal; font-style:normal; nghĩa là mình để font ở dạng thường (regular)

Vậy là xong, giờ ta dùng font cũng y như bình thường, nghĩa là chỗ nào cần dùng font nhúng ta khai báo font-family là tên font mà ta đã đặt vừa nãy là được, giả dụ giờ mình đặt các tiêu đề .title là font nhúng ở trên thì mình viết như sau trong CSS:

.title {
font-family:font_strong;
}

Trình duyệt hỗ trợ

Tất cả các trình duyệt phổ thông gồm Chrome, FireFox, Opera, Safari và IE đều hỗ trợ nhúng font, tuy nhiên loại font mà chúng support thì có khác nhau.

Internet Explorer 9+, Firefox, Chrome, Safari và Opera hỗ trợ WOFF (Web Open Font Format) font.
Firefox, Chrome, Safari và Opera cũng hỗ trợ TTF (True Type Fonts) và OTF (OpenType Fonts).
Chrome, Safari và Opera hỗ trợ SVG fonts/shapes.
Internet Explorer hỗ trợ EOT (Embedded OpenType) fonts.

Nhúng font trực tuyến

Cái này vừa có điểm giống với @font-face mà cũng vừa khác nữa:

Giống ở chỗ, font sử dụng đều tải từ nơi khác về, và được dự trù là không có trên máy người dùng
Khác ở chỗ, @font-face là tải từ host của bạn, trong khi nhúng font trực tuyến thì tải từ server dịch vụ riêng

Hôm nay tôi sẽ giới thiệu với các bạn cách nhúng font bằng Google Font, ưu điểm:

Nhanh, đảm bảo: Vâng, vì nó là host của Google, nên tốc độ ổn định, hầu như không bị hỏng hóc, nên bạn có thể an tâm gần như 100%
Miễn phí: Bạn không phải mất tiền để sử dụng dịch vụ này. Thêm vào đó bạn cũng giúp giảm băng thông cho host của bạn
Đơn giản: Code nhúng của nó thậm chí còn đơn giản hơn @font-face. Kết quả demo bạn có thể xem ngay ở dưới.

Blog Mang Luoi Toan Cau - Nguyen Duc Anh

Cách làm:

Truy cập trang web http://www.google.com/fonts để chọn font mà bạn thích. Sau đó nhấn vào hình mũi tên trỏ (Quick-use)

Một cửa sổ bật ra, và Google cho bạn đoạn code để đưa vào trong thẻ head của trang HTML (nó gần giống với liên kết CSS), code đó có dạng như sau: <link href='http://fonts.googleapis.com/css?family=Ruge+Boogie' rel='stylesheet' type='text/css'>
Bạn có thể thấy tên font trong ví dụ này là Ruge Boogie, tiếp theo, muốn sử dụng font này, thì trong CSS, bạn viết như sau: body {font-family: 'Ruge Boogie', cursive;font-size:20px;}
Như vậy là đã xong rồi, rất đơn giản phải không. Thông tin thêm là Google Font có khoảng hơn 600 font, nhưng font tiếng Việt thì không nhiều lắm

Một số lưu ý:

Google Font có đến 3 kiểu nhúng: tiêu chuẩn là kiểu link ở trên, thứ hai là @import và cuối cùng là dùng JavaScript - cả 3 đều cho kết quả tương đương nhau, nhưng kiểu đầu tiên được khuyên dùng
Nếu muốn đồng bộ hóa font trên Google Font với Desktop hãy sử dụng tiện íchSkyFonts
Lời cuối: hãy thận trọng với nhúng font, đừng nhúng quá nhiều font khác nhau, vì nhúng font nghĩa là người dùng phải tải font về, nhúng các font quá nặng chắc chắn làm tăng thời gian tải trang, cái này là áp dụng chung chứ không riêng gì cho Google Font

Trả lời câu hỏi phụ (Mà cũng có khi là chính)

Tôi có thể tìm font độc và lạ ở đâu? => Trên mạng có rất nhiều trang web cung cấp font miễn phí cho phép bạn tải về. Bạn không nên tải font có phí bất hợp pháp vì nó có thể làm ảnh hưởng rất xấu đến trang web của bạn nếu chủ sở hữu font khởi kiện. Nhiều font miễn phí chất lượng tương đương thì tội gì chúng ta tải lậu đúng không ạ? Bạn có thể vào trang http://www.dafont.com/ để tìm font ưa thích nhé.
Font đẹp cho tiếng Việt có nhiều không? => Đáng tiếc là không! Bạn có khá ít lựa chọn độc đáo với tiếng Việt. Ở phía ngược lại, tiếng Anh và các ngôn ngữ châu Âu nói chung lại rất phong phú.
Tại sao tôi nhúng mãi font mà chẳng được, trình duyệt lởm rồi, bực mình quá! => Bạn nên dùng Google Chrome hoặc FireFox để kiểm tra nhúng thành công hay chưa. Cả 2 trình duyệt này mà không thành công thì là tại bạn nhúng sai chứ không phải tại trình duyệt. Lỗi không nhúng được font, 10 người thì 9 người là do sai đường dẫn ở cái src: url('đường dẫn font'). Nếu Font nhúng để cùng cấp với file HTML đường dẫn sẽ khác với Font nhúng bạn để ở trong thư mục Font riêng. Mình từng bị rồi, không biết thế là loay hoay cả tiếng!
Tôi có mỗi font định dạng .ttf, làm sao để tôi có định dạng .eot cho ông bạn IE bây giờ? => Giống như video có thể chuyển đổi (convert) định dạng, font cũng vậy. Bạn có thể search trên mạng hoặc vô trang này để chuyển đổi:http://www.fontsquirrel.com/tools/webfont-generator
Tôi thấy vài font rất đẹp trên một số trang web, tôi muốn dùng mấy font đó nhưng không biết thông tin về nó, vậy tôi phải làm gì? => Để tìm một font nào đó thì cách đơn giản nhất là biết tên của font, rồi google để tải về. Có một tiện ích mở rộng cho trình duyệt Google Chrome tên là WhatFont giúp bạn làm được điều đó. Địa chỉ ở đây. Cách sử dụng rất đơn giản, bạn chỉ cần di chuột qua chữ cần biết font, nó sẽ thông báo tên font cho bạn, ngoài ra bạn sẽ biết thêm các thông tin khác như kích cỡ, line height và màu chữ đang dùng.

-----------------------------

THÊM FONT LẠ VÀO WEBSITE

Broken Smile 3 bình luận

Thông thường việc thiết kế web bị giới hạn bởi ngân hàng font của máy tính, website không thể dùng có font chữ lạ mà chỉ dùng những định dạng phổ biến để tất cả các máy đề có thể xem được website. Vì vậy với công nghệ cũ ta phải nhúng java vào hoặc bó tay đành phải chịu với những mẫu font cơ bản nhàm chán. Với kỹ thuật mới của HTML5 và CSS3 chúng ta có thể add những font lạ, đẹp và website mình một cách rất đơn giản.

Để tiến hành thêm font, bạn cần upload font lên host (hoặc bỏ vào thư mục nào đó trong website nếu đang lập trình trong máy). Sau đó thêm vào file css theo cấu trúc như sau:

1

2

3

4

@font-face {

    font-family: "Tên font";

    src: url(đến font cần thêm) format("định dạng của font");

}

Ví dụ:

1

2

3

4

@font-face {

    font-family: "My Font";

    src: url(http://localhost/example/font/MyriadPro-Bold.otf) format("truetype");

}

Sử dụng font vừa thêm vào bằng cách:

1

font-family: "My Font";

Như vậy, ta đã có thể thêm được nhiều định dạng font làm cho website trở nên lung linh đẹp mắt rất đơn giản. Chúc các bạn thành công.

Nguồn: Thiết kế web HTML5

Người đăng: Unknown

vào lúc 07:38

in codeweb

0 nhận xét

Khi lướt web bạn thường thấy một icon nhỏ trước địa chỉ website trên thanh address của trình duyệt hoặc trước tiêu đề của trang trên mỗi tab. Đó chính là favicon. Favicon cũng xuất hiện trong Bookmarks. Bài viết dưới đây sẽ giới thiệu với các bạn một vài nét cơ bản về favicon và bạn có thể nhanh chóng tạo một cái cho blog của mình.

Kích cỡ của favicon
Favicon là một icon nhỏ có kích thước 16x16 pixels. Nó thường là một biểu tượng đặc trưng cho web, blog, giúp người truy cập có thể dễ dàng nhận biết.

Tạo favicon
Nếu bạn có thể sử dụng các chương trình đồ họa như Illustrator hay Photoshop thì việc tạo ra một favicon rất đơn giản. Nếu không chỉ cần chọn một bức hình phù hợp với tiêu chí của bạn, có kích cỡ vừa phải và sử dụng các chương trình tạo favicon có sẵn. Một số trang web giúp tạo favicon miễn phí

Favicon.cc
Favicongenerator.com
Genfavicon.com
Myfaves.in
Dynamicdrive.com
Favicon-generator.org
Favicon.co.uk
Degraeve.com
- Các trang web này cho phép bạn tạo favicon dưới định dạng *.ico. Tuy nhiên không có nhiều trang web hỗ trợ upload định dạng ảnh này trừ khi bạn có host riêng.
Bạn có thể sử dụng favicon có định dạng PNG, GIF để thay thế.

Đưa favicon vào web, blog
Bạn copy đoạn code sau vào trong phần <head>....</head> , cụ thể mình đặt nó ngay sau ]]></b:skin>
<link href='favicon URL' rel='shortcut icon'/>

Thay favicon URL bằng đường link tới file favicon mà bạn đã upload, có thể sử dụng định dạng ICO. PNG, GIF.

Sau khi lưu thay đổi, bạn vào trang web để kiểm tra, nếu chưa thấy xuất hiện favicon bạn cần xóa cache và khởi động lại trình duyệt.
- IE: vào Tools, Delete browsing History, (Shortcut: Ctr+Shift+Del),
- Firefox: Tools, Clear recent History, (Shortcut: Ctr+Shift+Del).
- Chrome: Setting (Biểu tượng cái cờ lê), Clear browsing data, (Shortcut: Ctr+Shift+Del).

Đoạn code trên mình sử dụng trong Blogspot, nếu bạn dùng các dịch vụ khác và không thấy favicon hiển thị thì có thể thử một trong những đoạn code sau.<link href='Favicon URL' rel='icon' type='image/x-icon'/>

Hoặc<link href='Favicon URL' rel='icon' type='image/png'/>

Hoặc<link href='Favicon URL' rel='icon' type='image/gif'/>

Với Wordpress, tham khảo tại đây.Chúc các bạn thành công!

Người đăng: Unknown

vào lúc 02:22

in logo

0 nhận xét

Bạn không nhất thiết phải đi theo những xu hướng thiết kế logo năm 2014 giới thiệu dưới đây, nhưng bạn nên biết chúng để có thêm những ý tưởng hay cho logo design.

Thiết kế logo là một lĩnh vực không hề đơn giản. Tháng 10/2012, trường Đại học California đã cho ra mắt logo mới đơn giản, hiện đại hơn logo cũ (từ năm 1860). Tuy nhiên việc thay đổi logo này đã nhận được một làn sóng phản đối mạnh mẽ. Đơn kiến nghị, không chấp nhận sử dụng logo mới đã nhanh chóng thu thập được hơn 37.000 chữ ký của sinh viên, cựu sinh viên và các tổ chức liên quan. Ví dụ trên cho thấy một điều rằng: thiết kế một logo có thể làm hài lòng tất cả mọi người, trong mọi thời đại là rất khó. Một trong những thử thách của các designer hiện nay là nắm bắt được những xu hướng thiết kế logo mới. Chắc chắn bạn luôn mong muốn tạo ra những logo đẹp, bắt mắt, hiệu quả, có đời sống riêng của nó nhưng cũng không lỗi thời. Việt Designer xin chia sẻ với bạn 10 xu hướng thiết kế logo 2014. Đừng mù quáng đi theo những xu hướng thiết kế logo này, hãy ghi nhớ, chọn lọc và vận dụng chúng thật khéo léo để tạo ra một logo cân bằng, đáng nhớ và không cần phải tái thiết kế bạn nhé.

1. Negative space (Không gian âm)

Dĩ nhiên sử dụng Negative space không phải là xu hướng thiết kế logo mới mẻ. Tuy vậy, nó vẫn luôn được đánh giá cao bởi sự thông minh, cô đọng và hiện đại. Năm 2014 hứa hẹn sẽ có thêm nhiều logo với những khoảng không gian âm sáng tạo và sử dụng 2 màu chủ đạo trắng - đen.

2. Line art (Xu hướng logo thanh mảnh)

Những logo với đường nét thanh mảnh được tạo bằng công cụ Pen Tool trong Illustrator có thể sẽ là một xu hướng thiết kế logo 2014 nổi bật

3. Tạo độ sâu theo kiểu dập nổi

Kỹ thuật dập nổi không chỉ quen thuộc trong lĩnh vực in ấn mà nay còn được áp dụng để tạo độ sâu cho logo. Một xu hướng thiết kế logo 2014 đáng để bạn lưu tâm.

4. Đa giác

Xu hướng sử dụng những hình dạng đa giác trong thiết kế logo vẫn tiếp tục được ưa chuộng trong năm tới. Bên cạnh đó, Mosaic pattern (tạm dịch: họa tiết ghép mảnh) cũng được dự đoán sẽ trở thành một xu hướng thiết kế logo 2014 mới mẻ và hấp dẫn.

Hình trên là một logo sử dụng Mosaic pattern. Họa tiết ghép mảnh tương tự như vậy đang dần trở nên phổ biến hơn. Mosaic pattern minh họa cho những ý tưởng liên quan đến "phát triển", "giá trị chung", "hợp tác", "đa dạng", "đa văn hóa".

5. Sử dụng những hình dạng đặc biệt

6. 2D mà như 3D

Bạn nghĩ sao về xu hướng thiết kế logo thú vị này? Hãy thử tài thiết kế của bạn với những logo 2D mà ngỡ tưởng là 3D nhé.

7. Đơn giản
Đơn giản vẫn luôn là một trong những tiêu chí hàng đầu của những thiết kế logo hiệu quả.

8. Blend (pha trộn màu sắc)

Một xu hướng sử dụng màu sắc khá thú vị mà những nhà thiết kế logo nên biết.

9. Chồng lấp
Những logo với những chi tiết chồng lấp lên nhau là một xu hướng thiết kế mới và đầy hứa hẹn của năm 2014.

10. Không hoàn thiện

Nguồn: Designs.vn

Người đăng: Unknown

vào lúc 16:32

0 nhận xét

Tờ gấp (Flyer), tờ rơi đã từ lâu trở thành vật phẩm quảng cáo quen thuộc được các công ty sử dụng để quảng cáo bán hàng.

Flyer (tờ gấp) là một dạng thiết kế thường có hai mặt, với kích thước nào đó. Flyer có các dạng như là một tờ rơi hay brochure, ngoài ra nó cũng có thể được tách rời thành những mẫu giấy nhỏ đã được định kích thước để làm mẫu thử, hay dán vào bao bì sản phẩm giống như một loại tem.

Flyer, tờ rơi, brochure là những ấn phẩm marketing, khi chúng được thiết kế bắt mắt gây ấn tượng sẽ đẩy mạnh sự phát triển của công việc kinh doanh và chúng tôi tự hào là những chuyên gia có thể thiết kế ấn phẩm marketing Flyer cho bất cứ lĩnh vực kinh doanh nào.

Bên cạnh kích thước nhỏ gọn, thông tin đầy đủ thì một tờ flyer cũng cần được đầu tư xứng đáng về mặt ý tưởng và design. Khách hàng chỉ có chưa đầy 5 giây để đế ý đến “tờ giấy” của bạn, nên việc có một mẫu thiết kế tờ rơi sao cho nổi bật là điều vô cùng quan trọng. Tạo được sự chú ý, thích thú thì dù đối tượng nhận không có nhu cầu đối với sản phẩm ấy, họ cũng có động lực để chuyển thông tin này cho bạn bè mà họ nghĩ phù hợp hơn.

Có thể nói flyer là công cụ truyền bá thông tin trực tiếp đến khách hàng. Vì thế, nội dung trình bày trên flyer cần ngắn gọn, xúc tính và tạo sự hứng thú cho khách hàng với sản phẩm hay dịch vụ. Các thiết kế truyền thống như tờ gấp 2, gấp 3 thuận tiện cho việc mang flyer theo bên người. Tuy vậy, trong nhiều trường hợp, các thiết kế phá cách theo đặc trưng sản phẩm sẽ gây ấn tượng thị giác hơn.

Kỹ thuật in ấn hiện đại cho phép thử nghiệm nhìêu hình thức mới lạ bắt mắt. Với đội ngũ thiết kế kinh nghiệm, Ohha chắc chắn sẽ tư vấn giúp bạn có được ấn phẩm hiệu quả nhất.

Bài viết tham khảo từ ilovedesign.vn và ohhabrochure.com

Người đăng: Unknown

vào lúc 16:31

in webdesign

0 nhận xét

Khi được yêu cầu tạo ra một thiết kế mới, bạn hãy hãy dừng lại và đặt câu hỏi cho bản thân và đồng đội của bạn: "Những định hướng người dùng nào bạn sẽ tạo ra trên website và để nó thúc đẩy quá trình thiết kế?"

Nhà thiết kế web thường có tư duy cũng thói quen “chiều” lòng khách hàng, lựa chọn an toàn là “dập khuôn” mẫu giao diện đang phổ biến hoặc lao vào công đoạn thiết kế web mà không quan tâm tới việc định hướng người dùng (user flows).

Web Designers thường chỉ tập trung vào đặc trưng lĩnh vực hoạt động của khách hàng, phong cách, chi tiết thiết kế và bày trí thông tin, trong khi đó, lẽ ra, việc quan trọng hơn cả là xây dựng các định hướng người dùng. Với tốc độ phát triển của ngành web hiện nay, để có vị trí nhất định trong thị trường đầy cạnh tranh, đây là thời điểm mà các nhà thiết kế web nên nhìn lại và ưu tiên việc thiết kế định hướng người dùng trong thiết kế website (gọi tắt là định hướng thiết kế).

Định hướng thiết kế gắn liền với những mục tiêu rõ ràng cho phép chúng ta tạo ra trải nghiệm người dùng tốt và giá trị kinh doanh lớn. Việc đầu tư nhiều thời gian vào xây dựng định hướng người dùng lúc đầu sẽ dẫn tới kết quả tích cực cho cả khách hàng và công việc của người thiết kế web về sau.

1. Xác định mục tiêu người dùng và mục tiêu kinh doanh

Thông thường, khi bắt đầu một dự án thiết kế web mới, người thiết kế thường được giao một bản tóm tắt yêu cầu thiết kế, các tiêu chuẩn về thương hiệu, mục tiêu to tát và các tính năng. Những thông tin đó chẳng khác gì bảng liệt kê các đặc điểm kỹ thuật của dự án và thực sự không liên quan gì tới yếu tố quan trọng nhất: “Làm thế nào website có thể đáp ứng được các mục tiêu sử dụng dẫn tới tương tác thành công?”

Do đó, để bắt đầu với việc nghiên cứu mục tiêu của người dùng và mục tiêu kinh doanh, bạn cần phác thảo ra được rất nhiều định hướng thiết kế nhằm đạt mục đích của cả hai bên. Một thực tế là, mục tiêu của người dùng rất phong phú nên việc thẩm định kỹ mục tiêu của người dùng và mục tiêu kinh doanh là bước đầu tiên tạo ra định hướng thiết kế đáp ứng được nhu cầu các bên.

2. Định hướng người dùng vào các kênh chuyển đổi

Một thực tế cho thấy, khách ghé thăm website thường không giống nhau. Họ đến từ nhiều nguồn với sự đa dạng khác nhau về kiến thức và mục đích. Là một nhà thiết kế giao diện UI, bạn có quyền quyết định hướng những vị khách đó vào các kênh chuyển đổi nhằm cung cấp giá trị cho họ và việc kinh doanh của bạn.
Web Designers nên ưu tiên thiết kế các định hướng người dùng, tập trung vào những yếu tố ảnh hưởng nhiều nhất lên người dùng và đem lại hiệu quả tối đa cho kinh doanh. Đặc biệt lưu ý, mỗi vị khách ghé thăm web của bạn có những yêu cầu, mong muốn và mức độ kiến thức khác nhau, nên họ cần được tiếp đãi theo các cách khác nhau.

Phân loại nhóm người dùng tiêu biểu qua các kênh chuyển đổi:

Quảng cáo thương mại (paid advertising): Người dùng được thu hút từ các kênh quảng cáo thương mai như: click vào quảng cáo banner hay từ khóa Google AdWord, người dùng bị tác động bởi các chiến dịch marketing (tờ rơi hay các phướn quảng cáo…)
Social Media: Người dùng là thành viên hoặc được thu thút và click vào chia sẻ trên một mạng xã hội nào đó
Email: Người dùng đến từ một email newsletter hay thư giới thiệu
Tìm kiếm tự nhiên (organic search): Người dùng đến từ các kênh tìm kiếm
Trang tin hay blog: Người dùng click vào một liên kết đề cập đến bạn trên một bài báo hay blog.

3. Các kênh chuyển đổi: Hướng người dùng tới việc mua hàng

Những website thương mại điện tử thường có rất nhiều kênh chuyển đổi người dùng.

Hình ảnh này cho thấy đó là những định hướng người dùng cho một website mua bán trực tuyến. Trong ví dụ này, hãy cùng phân tích trải nghiệm của những người từ lúc ghé thăm website cho tới khi trở thành người mua hàng hoặc đăng ký email. Công ty này sử dụng quảng cáo hiển thị để tăng lượng khách hàng cho việc kinh doanh của họ.

Quảng cáo hiển thị (display media): Với quảng cáo hiển thị, Banner luôn là điểm khởi đầu. Thiết kế của banner cần đạt được một mục tiêu quan trọng: được click bởi đối tượng chính xác. Đây là một vài câu hỏi quan trọng cần trả lời khi thiết kế quảng cáo thể hiện sự ưu tiên cho định hướng người dùng:

Kiểu người dùng nào tôi đang hướng tới?
Họ có đang chủ động tìm kiếm lời giải cho vấn đề không, hay họ chỉ lướt qua thôi?
Họ đang cố gắng giải quyết vấn đề gì?
Tôi có thể nắm bắt sự chú ý của người dùng như thế nào?
Làm thế nào để gắn kết nhiều hơn với người dùng?
Có thông điệp nào giúp cộng hưởng với người sử dụng không?
Người dùng có vấn đề khó khăn gì mà sản phẩm hay website của tôi có thể tháo gỡ được không?
Làm thế nào tôi có thể diễn đạt giải pháp này một cách rõ ràng và nhanh chóng nhất?
Lời kêu gọi nào (call-to-action) hấp dẫn nhất khiến người dùng click?

Quảng cáo của bạn nên hướng đến những động lực này và gây ấn tượng tức thì để thu hút được nhiều clicks. Nghiên cứu kỹ lưỡng định hướng người dùng trong giai đoạn đầu và kiểm nghiệm thực tế sau đó sẽ giúp bạn tối ưu hóa trải nghiệm người dùng.

Trang đích: Thời điểm khách hàng tiềm năng vào tới trang đích là khi quá trình trải nghiệm của họ bắt đầu. Vì những người này đến từ những nguồn ít thông tin như Banner (ngược lại với một bài blog kỹ lưỡng) nên bạn phải thiết kế một quy trình cung cấp đủ thông tin cần thiết cho người dùng để có thể dẫn tới sự chuyển đổi (mua hàng, đăng ký email…). Khách vào website được kỳ vọng sẽ chuyển đổi thành người đăng ký email. Tùy vào mục đích kinh doanh, sự chuyển đổi có thể là người dùng lập tài khoản, download whitepaper hoặc mua một món hàng. Dù mục tiêu chuyển đổi trong kinh doanh là gì, điểm mấu chốt vẫn là cho họ một lý do để tiếp tục quy trình chuyển đổi:

Xây dựng lòng tin cho khách hàng bằng cách chỉ ra rõ ràng các lợi ích chính, kết hợp với các ví dụ dễ hiểu.
Hạn chế tối đa nội dung và chi tiết thiết kế để tập trung vào thông điệp kêu gọi rõ ràng (trong ví dụ này là đăng ký email newsletter).
Loại bỏ những thứ gây nhiễu trong mỗi bước.
Chỉ nên hỏi lượng thông tin cần thiết tối thiểu, giảm số lượng các ô câu hỏi, số lần clicks và thời gian tải trang.
Tạo ra thứ có sức hấp dẫn mạnh mẽ mà chỉ có thể lấy được bằng cách hoàn thành các bước đăng ký (ví dụ như e-book hay free app).

Để đáp ứng được yêu cầu người dùng và thúc đẩy chuyển đổi trong kinh doanh, web designers cần chú ý tới cách thiết kế một trang đích hiệu quả chính. Đó là, các chi tiết về thiết kế, giao diện người dùng và các yếu tố ngôn từ…

4. Tạo một vòng trải nghiệm người dùng hoàn chỉnh

Một kênh chuyển đổi từ Click Quảng cáo banner → Vào trang web → Đăng ký email có vẻ dễ dàng, nhưng thiết kế và sắp xếp những quy trình lại với nhau để thúc đẩy mục tiêu kinh doanh tối hậu cần đầu tư nhiều công sức hơn. Như vậy, một người đăng ký email đến từ chiến dịch quảng cáo Banner đã đạt được mục tiêu kinh doanh thực sự là tạo ra lợi nhuận qua việc bán hàng. Coi quy trình đăng ký email và quy trình bán hàng như hai kênh chuyển đổi riêng biệt là điều nhiều người vẫn lầm tưởng. Trên thực tế, hai kênh này có liên quan đến nhau, và bằng cách coi chúng như những quy trình được sắp xếp liên tiếp, chúng ta có thể tạo ra liên kết chặt chẽ hơn có khả năng tối ưu hiệu quả kinh doanh.

Hình ảnh cho thấy sự sắp xếp được tạo nên bởi kênh bán hàng và quy trình quản lý quan hệ khách hàng (CRM)

Khi thiết kế quy trình này, bạn cần xem đâu là động lực lớn nhất chuyển người đăng ký thành người mua hàng. Bạn cũng cần xem lại tất cả yếu tố của chiến thuật quản lý quan hệ khách hàng và kênh bán hàng trên website của bạn, bao gồm:

Email liên lạc lại với những người đăng ký
Những trang người đăng ký hay ghé vào khi quay lại website
Quy trình từ những trang nội dung bên trong cho tới khi check-out

Đây là một số lưu ý khi thiết kế một quy trình chuyển người đăng ký thành người mua hàng:

Kể một câu chuyện hình ảnh mà người đăng ký có thể hiểu và muốn trở thành một phần của nó.
Chắc chắn rằng email của họ giúp thúc đẩy câu chuyện, và đưa ra những điểm chứng minh nhắc nhở người dùng vì sao họ đăng ký.
Có các lời kêu gọi (call to action) tạo cho người dùng cơ hội đóng góp và trở thành một phần của câu chuyện.
Thiết kế những nút call to action nổi bật và hướng đi trực tiếp, dễ dàng dẫn tới quá trình check-out từ những trang nội dung bên trong của websites và bài viết trên blog. Điều này khiến người dùng cảm nhận được vai trò của mình trong câu chuyện.
Làm cho quá trình check-out càng trơn tru càng tốt, nâng cao sự tự tin cho người dùng để hướng họ tới cam kết cuối cùng.

Bằng cách xem xét hai quá trình tương tác với nhau như thế nào, bạn có thể tạo ra trải nghiệm liên tục cho người dùng, xây dựng lòng tin và kết nối họ sâu hơn vào website, dẫn tới sự chuyển đổi cuối cùng. Quan trọng không kém, quá trình này cũng tăng sự hài lòng cho khách hàng bởi vì những quy trình được sắp xếp sẽ khiến trải nghiệm người dùng nối tiếp mượt mà hơn và đi đúng hướng đáp ứng nhu cầu của khách hàng mà không khiến họ cảm thấy bối rối và mơ hồ.

5. Áp dụng định hướng người dùng trong thiết kế của bạn

Cho dù bạn đang lên kế hoạch thiết kế một website hoàn toàn mới hay tối ưu hóa trải nghiệm người dùng đang có, định hướng người dùng sẽ giúp bạn tránh được bẫy thiết kế những webpage và kết nối riêng lẻ. Thay vào đó, nó giúp bạn tập trung đáp ứng những yêu cầu của khách hàng.

Bằng cách ưu tiên định hướng người dùng và tập trung vào những thứ tạo ra giá trị cho khách hàng và việc kinh doanh của bạn, bạn có thể gây ảnh hưởng lớn với định hướng ban đầu của mình.

Khi xem xét những định hướng người dùng, hãy nghĩ xa hơn sự chuyển đổi đầu tiên và thiết kế đạt mục tiêu chuyển đổi cuối cùng. Điều này cực kỳ quan trọng với bất kỳ mô hình kinh doanh thương mại nào, trong đó sự chuyển đổi đầu tiên chỉ là màn mở đầu cho toàn sự kiện tạo ra lợi nhuận chính.

Sắp xếp những kênh bổ xung này giúp bạn tạo ra trải nghiệm người dùng chặt chẽ hơn giúp thúc đẩy kết quả cho cả người dùng và việc kinh doanh.

Vì thế, lần sau khi được yêu cầu tạo ra một thiết kế mới, hãy dừng lại, đặt câu hỏi cho bản thân và đồng đội của bạn: Những định hướng người dùng nào bạn sẽ tạo ra trên website và để nó thúc đẩy quá trình thiết kế?

(theo SmashingMagazine)

Thiết kế website Hội An

Quảng cáo

Chúng tôi là ai ?

Cách nhúng font vào web với @font-face, kỷ nguyên của Typography đã đến

Danh sách các font web an toàn

Code mẫu nhúng font

Giải thích code

Trình duyệt hỗ trợ

Nhúng font trực tuyến

Trả lời câu hỏi phụ (Mà cũng có khi là chính)

THÊM FONT LẠ VÀO WEBSITE

Tạo favicon cho web, blog

10 xu hướng thiết kế logo trong năm 2014

Flyer là gì? Người ta thiết kế flyer nhằm mục đích gì?

Định hướng người dùng trong thiết kế website

facebook

Quảng cáo

Labels

Popular Posts

Trang

Giới thiệu về tôi

Lưu trữ Blog

About

Link List

Nhận xét

Contact Details