Bảy lời khuyên từ các nhà thiết kế chuyên nghiệp

♠ Posted by Hà Phạm in lời khuyên của các nhà thiết kế web,thiết kế web,thiet ke web chuyen nghiep,thiết kế website chuyên nghiệp at 9:28 AM

Làm thế nào để bạn giữ chân được những người lướt web ở lại trang web của bạn lâu hơn và tiếp tục trở lại? Bảy lời khuyên từ các nhà thiết kế web chuyên nghiệp.

Đảm bảo khách hàng của bạn hài lòng với thiết kế trang web của bạn chỉ là bước đầu tiên. Một khi nó ra trên thế giới, trang web của bạn đang cạnh tranh cho sự chú ý với hàng triệu người khác, và bạn cần phải tìm cách để khuyến khích du khách ở lại lâu hơn và sẽ trở lại.

Để người dùng biết đến trang web của bạn là một việc cũng tương đối khó khăn nhưng để giữ chân được họ khi đã vào web của mình rồi lại là việc khó hơn. Vì vậy đòi hỏi không chỉ chất lượng nội dung trang web, mà còn cần những cách thông minh và thú vị để trình bày nội dung đó.

Nếu trang web của bạn cảm thấy một chút vô hồn, những lời khuyên này sẽ giúp hít thở không khí mới vào nó và giành lại những du khách!

1. Parallax: chuyển di chuyển đến tham gia

Hãy tưởng tượng nếu bạn có thể nhận được nhiều hơn sự tham gia của nhiều khách như 70% so với một sự thay đổi duy nhất. Một điều như vậy có thể tồn tại? Như một vấn đề của thực tế, nó không!

Di chuyển sai là một xu hướng đó là quét ngành công nghiệp thiết kế, và với lý do tốt, nó cung cấp một cách độc đáo và bắt mắt để trực quan cung cấp một tin nhắn.

Sai đề cập đến việc sử dụng một số yếu tố cá nhân di chuyển khi bạn di chuyển xuống trang, kết quả là một trải nghiệm động khuyến khích di chuyển xa hơn.

Nền tảng thiết kế website miễn phí mã tiên tiến, như Webydo, có nghĩa là bây giờ bạn có thể thiết kế tuyệt vời, các trang web sai với điểm ảnh độ chính xác hoàn hảo. Mới đây họ đã công bố mã miễn phí của họ, Parallax Scrolling Animator, tạo thuận lợi cho việc sản xuất các điểm ảnh hoàn hảo, các trang web sai.

2. Biểu tượng và hình tượng: hình ảnh chất bôi trơn

Trên các trang web thông tin phong phú, bạn cần rất nhiều văn bản để mô tả sự vật. Điều này có nghĩa các nhà thiết kế phải nghĩ ra cách để trình bày rằng văn bản với tác động tối đa.

Việc sử dụng các biểu tượng có thể giúp người truy cập website của bạn tìm thấy những gì họ đang tìm kiếm nhanh hơn nhiều. Các hình ảnh nhỏ không chỉ minh họa cho các khái niệm họ đi cùng, nhưng cái nhìn khác biệt của họ giúp hướng dẫn mắt từ nơi này đến nơi khác, giống như biển chỉ dẫn trực quan.

Trong những ngày đầu, biểu tượng đã được thực hiện như đồ họa bitmap, đó là cồng kềnh để thực hiện và sửa đổi, và không có cách nào đơn giản để tạo kiểu cho các biểu tượng.

Ngày nay, các nhà thiết kế sử dụng các phông chữ biểu tượng để tạo hình tượng y hệt như văn bản: dựa trên vector, khả năng mở rộng vô hạn, và tùy chỉnh thông qua CSS. Một trong những đẹp nhất chắc chắn là Glyphter. Với các công cụ hấp dẫn và trực quan của nó, Glyphter cho phép bạn vẽ biểu tượng từ bộ mã nguồn mở khác nhau (bao gồm cả Font Awesome!) Hoặc tải lên SVGs của riêng bạn để tạo phông chữ biểu tượng tùy chỉnh mà bạn có thể tự do tải về và sử dụng trên trang web tiếp theo của bạn.

Với các biểu tượng hỗ trợ nội dung văn bản của bạn, đoạn văn và các yếu tố giao diện trở nên đơn giản hơn so với các đốm màu của văn bản, và kết hợp với việc sử dụng các kiểu chữ năng động, trang web của bạn trở nên thú vị và dễ dàng để đọc.

3. Kiểu chữ linh hoạt: thiết kế đáp ứng cho nội dung

Thiết kế đáp ứng không chỉ là về bố trí - nó phải là về cả nội dung. Thật tuyệt vời nếu một bố cục thích hợp với kích thước màn hình cần thiết, nhưng nội dung cũng phải thích ứng cho phù hợp:

Người sử dụng điện thoại di động không có thời gian để đọc đoạn văn dài, do đó hãy chắc chắn rằng phiên bản di động của bạn là chính xác và cung cấp các cuộc gọi rõ ràng để hành động. Đọc sách trên một màn hình nhỏ là không được vui vẻ nếu văn bản là quá nhỏ; nên sử dụng các kỹ thuật loại năng động để giữ văn bản tại một kích thước thoải mái - không làm cho người dùng phóng to!

Ví dụ tốt nhất của điều này có thể được nhìn thấy trong các thiết kế của kiến trúc sư trang web thông tin - một trong những người đưa ra thực hành. Blog của họ thảo luận về các lý thuyết và kỹ thuật của kiểu chữ đáp ứng thật dài và làm cho một trường hợp rõ ràng cho lý do tại sao nó thích hợp hơn với kích thước kiểu tĩnh.

Có nội dung đáp ứng tình hình đọc sách của khách truy cập làm cho trang web riêng của mình cảm thấy chất lỏng hơn, ý thức hơn, và tổng thể hấp dẫn hơn. Ý tưởng này cùng kéo dài đến hình ảnh quá

Văn bản chỉ là một phần của thiết kế web câu đố, hình ảnh thường chỉ là quan trọng. Thông thường, hình ảnh này đã đến dưới hình thức các tập tin bitmap như JPG, PNG, GIF và tất nhiên.

Vấn đề với những hình ảnh bitmap gồm hai phần:

Ảnh bitmap với một kích thước cố định, vì vậy họ có thể không losslessly quy mô để phù hợp với kích thước bố trí mới hoặc nghị quyết, yêu cầu bổ sung nhiều tài sản đồ họa vào tài khoản cho điện thoại di động, màn hình Retina, vv
Mỗi lần một hình ảnh như thế này được sử dụng, nó cho biết thêm một yêu cầu HTTP để quá trình tải của trang web của bạn. Như hình ảnh ngày càng trở nên phổ biến trên các trang web, điều này có thể bắt đầu sưng lên thời gian tải của bạn đáng kể, chưa kể thêm vào số lượng dữ liệu cần phải được nạp để làm cho trang web của bạn.
Giải pháp: đồ họa vector. Kể từ khi hình ảnh vector chỉ đơn giản là hướng dẫn toán học để biểu diễn một cách trực quan, họ có thể được thu nhỏ theo kích cỡ và độ phân giải không có nỗ lực và không có suy thoái.

SVG là một định dạng hình ảnh vector ngày càng phổ biến, một trong những nhà thiết kế web là đặc biệt thích vì nó có thể được tích cực theo kiểu và thao tác giống như bất kỳ đánh dấu khác, dẫn đến một số đẹp và tương tác triển khai thực hiện.

Trên tất cả, đây là trọng lượng nhẹ và được cung cấp trực tiếp bởi trình duyệt, nghĩa là không có tải không liên quan tài sản!

5. Gamification

Một trong những kỹ thuật khó khăn nhất để thực hiện cũng là gamification, hoặc giới thiệu những yếu tố trò chơi giống như trong thiết kế của bạn có thể trợ giúp cho du khách một cảm giác tương tác và phần thưởng khi họ di chuyển.

Gamification thường xuất hiện trong các hình thức phù hiệu mà bạn có thể mở khóa để hoàn thành nhiệm vụ khác nhau; trên các trang web như Treehouse nơi bạn đi qua các khóa học, điều này làm cho rất nhiều ý nghĩa. Nhưng nếu bạn không có các khóa học hoặc cấu trúc tương tự để làm việc với?

Đối với các blog, các trang web thương mại điện tử, và các thuộc tính web nhiều hơn tiêu chuẩn khác, gamification có thể mang hình thức phiếu giảm giá hoặc giảm giá được cung cấp cho du khách trong những trường hợp cụ thể. Ví dụ, một blog có thể cung cấp một ebook miễn phí tải về cho tweet một liên kết đến trang web, hoặc một trang web thương mại điện tử có thể cung cấp một phiếu giảm giá khi một người truy cập đã khám phá các cửa hàng đầy đủ.

Những việc nhỏ như giúp đỡ này kinh nghiệm cá nhân của khách truy cập, và ý thức nhận được sự chú ý của cá nhân là chìa khóa để tăng cường ý thức tham gia và khuyến khích họ quay trở lại.

6. Hình ảnh nén: sự cần thiết cho tốc độ


Không có gì giết chết tham gia như thời gian tải chậm trên trang web của bạn. Trong một thế giới của sự chú ý rất ngắn, nếu một trang web là dùng quá lâu để tải, truy cập của bạn sẽ hầu như luôn để lại - người có đủ kiên nhẫn để chờ đợi cho các trang chậm?

Với các trang web ngày càng trở nên phức tạp hơn và trực quan hấp dẫn, thời gian nạp được chắc chắn bị ảnh hưởng. May mắn thay, có một số kỹ thuật có thể giúp giảm thiểu các vấn đề:

• Giảm bớt nội dung
• Tối ưu hóa hình ảnh cho web
• Phục vụ trang web của bạn thông qua một giao Mạng Nội dung
• Để bắt đầu, nhiều nhà thiết kế muốn Giảm bớt tài sản trang web của họ khi xuất bản. Dải giảm thiểu tất cả khoảng trắng, các ý kiến, và dự phòng từ CSS và JS Bức ảnh, kết quả là phiên bản nhỏ mà tải nhanh hơn một chút.

Tương tự như vậy, có một số thuật toán có thể giúp giảm kích thước của tài sản hình ảnh trang web của bạn mà không ảnh hưởng chất lượng hình ảnh của họ. Nhiều thuật toán có thể được chạy theo thứ tự, và các ứng dụng như ImageOptim (Mac) có thể làm cho hình ảnh chuẩn bị một quá trình một cú nhấp chuột.

Cuối cùng, các trang web thường xuyên sử dụng mạng Giao hàng tận nơi Nội dung (CDN) để phân phối các tập tin một cách nhanh chóng hơn. CDN công việc bằng cách trải dữ liệu trang web của bạn trên nhiều máy chủ trên toàn thế giới, đảm bảo rằng các máy chủ gần nhất với khách truy cập của bạn là một trong đó phục vụ các tập tin. CDN tạo ra khác biệt đáng chú ý nhất trong lần tải trang, và thường được sử dụng để giúp giữ cho các trang web lớn từ oằn dưới tải trọng của hàng ngàn du khách từ khắp nơi trên thế giới.

Một trong những ưu điểm của làm việc trong một đám mây lưu trữ, nền tảng thiết kế web như Webydo là loại tối ưu hóa được xử lý tất cả cho bạn.

7. Thông báo đẩy

Trên nhiều trang web, mục tiêu cam kết đi theo hình thức chào đón du khách trở lại như bạn đăng nội dung mới, cho dù họ có bài đăng trên blog, video, hoặc một cái gì đó hoàn toàn khác nhau.

Thông thường, các nhà thiết kế sử dụng hình thức để mọi người đăng ký bản tin email. Trong khi những vẫn còn phổ biến, một công nghệ mới đang nổi lên có 30x tốt hơn lựa chọn trong hơn email, và đáng kể hấp dẫn hơn: thông báo trình duyệt đẩy.

Sử dụng các công cụ như Roost , thiết kế có thể dễ dàng thực hiện thông báo trình duyệt mà du khách cảnh giác với nội dung mới ngay cả khi họ không phải là trên trang web của bạn!

Còn bây giờ, chỉ có Safari được hỗ trợ đầy đủ trên OS X mới nhất, nhưng cả hai Chrome và Firefox đang phát động hỗ trợ thông báo đẩy trong năm nay, vì vậy bây giờ là thời điểm hoàn hảo để có được trong kỹ thuật này mới thú vị.

Chào mừng trở lại với cuộc sống!

Các kỹ thuật nói trên luôn luôn có một vị trí trong quá trình thiết kế và cần được xem xét trước khi bạn bắt đầu thiết kế website của bạn.

Trên đây là bảy lời khuyên từ các nhà thiết kế chuyên nghiệp, đảm bảo trang web của bạn được nhanh chóng, đẹp, năng động và khuyến khích du khách đến tham gia với các nội dung toàn diện hơn! Có rất nhiều công cụ hiện có trên thị trường, mà cung cấp cho bạn những cách hiệu quả để thiết kế và thiết kế lại tiên tiến, tham gia trang web mà sẽ tự tay chống lại các cam kết thấp.