Thứ Hai, 22 tháng 12, 2014

Thiết kế giao diện website chuyên nghiệp chỉ với 5 bước

Thiết kế layout website - giao diện là bước cực kỳ quan trọng của nhà phát triển website. Sau đây Thiet ke website tai Da Nang xin chia sẻ một số thiết kế giao diện website chuyên nghiệp chỉ với 5 bước sau:

1. Lựa chọn chủ đề màu sắc cho trang web

Trong suốt quá trình lựa chọn một tập hợp các kiểu chữ để sử dụng, bạn nên bắt đầu khám phá những màu sắc mà bạn sẽ sử dụng trong giao diện web, hình nền, và văn bản. Về màu sắc, tôi khuyên bạn nên sử dụng hạn chế một số màu sắc và tông màu cho giao diện người dùng chung.

Điều quan trọng là phải áp dụng một cách nhất quán trên các giao diện người dùng tùy thuộc vào chức năng của phần tử. Hãy suy nghĩ về cách bố trí màu sắc của các trang web như Facebook, Twitter, Quora, và Vimeo.

2. Chia bố cục

Mỗi khu vực trên trang web cần thực hiện một chức năng kể chuyện riêng. Nó cần có một lý do và kết quả đối với người dùng. Cách bố trí cần thiết để giúp các nội dung nêu bật những phần quan trọng nhất trong câu chuyện đó là gì. Trong thực tế không nên có quá nhiều lời kêu gọi trên một trang, vì vậy tất cả mọi thứ nên tập trung vào điều đó cuối cùng "Tôi có thể làm gì ở đây".

Hãy suy nghĩ về cách bố trí web đơn giản nhất mà bạn có thể tưởng tượng cho một mục đích đơn giản và bắt đầu thêm các thành phần cần thiết. Cuối cùng bạn có thể ngạc nhiên vì đã tạo ra một web layout đơn giản.
Bản phác thảo trên giấy ban đầu rất quan trọng khi thiết kế bố cục hoàn hảo

Điều này có vẻ hiển nhiên, tuy nhiên có một số nhà thiết kế web thường xuyên nhảy thẳng vào Photoshop trước khi đưa ra các vấn đề mà họ đang cố giải quyết. Thiết kế là giải quyết vấn đề và những vấn đề không thể được giải quyết thông qua gradient hoặc shadows mà phải thông qua một bố cục tối và hệ thống phân cấp rõ ràng. Hãy suy nghĩ về nội dung, bố cục và các chức năng trên giấy trước khi bắt đầu thực hiện các shadows.

3. Bắt đầu phác hoạ các framework cấp cao nhất

Phác thảo một dây cơ bản sẽ giúp bạn giải quyết vấn đề UX và cơ cấu về bố cục

Khi nghĩ về cái nhìn và cảm nhận cho một dự án web, điều đầu tiên cần phải làm là thực hiện một framework ở cấp độ cao nhất để có thể giải quyết tất cả các vấn đề thiết kế. Framework là một UI mà bao quanh nội dung và giúp thực hiện các hành động và điều hướng. Nó bao gồm các menu và các thành phần như sidebars và thành công cụ bên dưới.

Nếu bạn tiếp cận thiết kế web của bạn từ góc độ này, bạn sẽ có một hiểu biết rõ ràng về những nhu cầu bố cục sẽ được tạo thành khi thiết kế các khu vực bên ngoài trang chủ.

4. Thêm một grid vào PSD của bạn

Trước khi thực hiện thiết kế bất cứ điều gì trong Photoshop, bạn cần một grid thích hợp để bắt đầu. Không có lý do hợp lệ để bắt đầu mà không có một grid và nếu bạn không có, bằng cách này hay cách khác, tôi đảm bảo thiết kế của bạn sẽ không thể nào nhìn tốt được.

Một grid sẽ giúp bạn cấu trúc bố cục của các khu vực khác nhau, nó sẽ hướng dẫn bạn thông qua các yêu cầu kích thước màn hình đặc trưng, và giúp bạn tạo ra các template thích ứng, để phù hợp với các khoảng cách cũng như các vấn đề thiết kế khác.

5. Chọn phông chữ typography

Một quy luật chung là không được sử dụng quá hai kiểu chữ khác nhau trong một bố cục trang chủ

Typography là một xu hướng thiết kế web nổi trội trong năm 2014. Tìm hiểu  những kiểu chữ và máu sắc khau nhau là một phần của giai đoạn khám phá trong một dự án thiết kế web. Một quy luật chung là bạn không được sử dụng nhiều hơn hai kiểu chữ khác nhau trong một thiết kế web, tuy nhiên nó cũng phụ thuộc vào bản chất của website, bạn có thể sử dụng nhiều hơn hoặc ít hơn. Tất nhiên là phải thật tinh tế và khéo léo.

Tổng thể hãy chọn một phông chữ là dễ dàng để đọc cho một đoạn văn bản dài và nhiều hơn là sự vui tươi, sinh động cho tiêu đề và call to action. Đừng ngại sử dụng phông chữ lớn, vui tươi và phù hợp khi sử dụng typography.
Thiết kế website chúc bạn thành công!

Không có nhận xét nào:

Đăng nhận xét