23 bước để thiết kế một trang web hoàn hảo (p1)

23 bước để thiết kế một trang
web hoàn hảo
Khi thiết kế bố cục cho 1 trang web, có một số lỗi phổ biến
thường xuất hiện, đặc biệt với interns và new designers.
Trong danh sách các bước hướng dẫn thiết kế bố cục
trang web hoàn hảo, mình sẽ đề cập đến những kiến thức
cũng như kĩ năng cần thiết để có thể tạo nên 1 website
vừa đẹp vừa chuyên nghiệp cũng như các lỗi cần tránh
khi thiết kế website. Những nguyên tắc này bao gồm
không chỉ các khía cạnh thiết kế mà còn các mẹo làm việc
tổng quát để công việc đi theo 1 luồng ổn định. Thành
thạo các bước này sẽ giúp bạn càng gần hơn với con
đường trở thành lập trình viên front-end chuyên nghiệp.
01. Define what success means


Trước khi bắt đầu công việc bạn cần biết là bạn đang thiết
kế cái gì? Bên cạnh các mô tả về trang web, bạn cần phải
biết những gì khách hàng đang mong đợi từ trang web
đó(họ muốn giao diện thân thiện, sản phẩm phải được nổi
bật, hay truyền tải 1 thông điệp gì đó...). Ví dụ: lấy trang
web tin tức, mục tiêu là gì? Liệu nó phải làm được càng
nhiều lần hiển thị quảng cáo càng tốt hay phải mang lại
trải nghiệm đọc tốt nhất cho người dùng? Các mục tiêu đó
sẽ được đo lường như thế nào?
Các thiết kế tốt không nhất thiết phải là những thiết kế mới
mẻ nhất mà là các thiết kế giúp cải thiện hiệu năng theo
thời gian. Nói chuyện với khách hàng của bạn trước khi
bắt đầu thiết kế của bạn là chìa khóa để xác định tất cả
điều này. Bạn cần phải tìm hiểu những gì họ quan tâm và

mục tiêu mà họ hướng đến đối với trang web.
02. Put your thoughts on paper first

Điều này có vẻ rất rõ ràng nhưng tôi đã nhìn thấy rất nhiều
các nhà thiết kế nhảy thẳng vào công việc của họ trước
khi đưa ra bất kỳ suy nghĩ về vấn đề họ đang cố gắng để
giải quyết. Thiết kế đơn giản là giải quyết 1 vấn đề, và
những vấn đề đó không thể được giải quyết thông qua
việc chỉnh sửa hoặc thay đổi bố cục sau khi hoàn thành
mà là thông qua việc thiết kế 1 layout tốt ngay từ ban đầu
và một hệ thống phân cấp các thuộc tính, class, thẻ tags 1
cách rõ ràng.
Hãy suy nghĩ về nội dung, bố cục và chức năng trước khi
bắt đầu viết 1 dòng code nào đó. Đảm bảo rằng những ý


tưởng đó phù hợp với mục tiêu của khách hàng bạn và
bạn có thể cảm thấy thoải mái khi chia sẻ chúng với người
khác. Không khách hàng nào phàn nàn với tôi về việc trao
đổi các ý tưởng.
03. Start sketching a top-level framework

Wireframe được ví như "xương sống" của một thiết kế, nó
chứa tất cả các phần quan trọng của sản phẩm cuối cùng.
Nó là một dạng hình dung nguyên sơ nhất về sản phẩm.
Thông thường wireframe sử dụng các yếu tố đồ hoạ đơn
giản, như đường thẳng, hình hộp, hình học cơ bản với
tông màu xám, đen, trắng để biểu thị thông tin về kiến
trúc, nội dụng hay bố cục.

Khi tôi được yêu cầu phác thảo xây dựng một dự án, điều
đầu tiên tôi làm là đưa ra một khung nhìn bao quát cả dự


án để giải quyết tất cả các vấn đề về thiết kế. Khung này
là giao diện người dùng bao quanh nội dung và giúp
người dùng thực hiện các hành động và điều hướng qua
nó. Nó bao gồm các menu và các thành phần như
sidebars và bottom bars.
Nếu bạn tiếp cận thiết kế của bạn từ quan điểm này, bạn
sẽ có một sự hiểu biết rõ ràng về những gì mà bố cục của
bạn sẽ cần khi thiết kế các phần ngoài trang chủ.
04. Add a grid

Nó đơn giản như tên gọi của nó. Trước khi bắt đầu thiết
kế bất cứ điều gì bạn cần một grid thích hợp. Không có lý
do nào thích hợp để bạn bắt đầu mà không sử dụng grid nhưng nếu bạn vẫn khăng khăng không dùng tới nó, tôi có
thể đảm bảo với bạn, mẫu thiết kế sẽ không tốt đẹp gì.
Grid sẽ giúp bạn sắp xếp, bố trí các phần khác nhau; nó
sẽ điều chỉnh layout bạn theo kích thước màn hình cụ thể
và giúp bạn tạo 1 responsive template, vì vậy bạn sẽ


không quá khổ sở với vấn đề thiết kế trên nhiều kích
thước màn hình.
05. Choose your typography

Khám phá các kiểu chữ và màu sắc khác nhau là một việc
tất yếu trong giai đoạn phát hiện của một dự án. Tôi
khuyên bạn nên không sử dụng nhiều hơn hai kiểu chữ

khác nhau trong một trang web, hãy chọn một phông chữ
dễ đọc cho những phần văn bản có nhiều chữ và năng
động hơn với phần chữ ở tiêu đề và lời gọi hành
động(calls to action). Đừng ngại sử dụng những phông
chữ lớn và sáng tạo và đột phá.
06. Select your colour theme


Trong quá trình chọn một tập hợp các kiểu chữ cho
website, bạn nên bắt đầu khám phá mã màu nào sẽ được
sử dụng trong UI, nền và văn bản. Tôi khuyên bạn nên sử
dụng một tập hợp giới hạn các màu sắc và tông màu cho
giao diện người dùng.
.
Điều quan trọng là áp dụng những điều này một cách hợp
lí trên giao diện người dùng tùy thuộc vào chức năng của
phần tử. Hãy tìm hiểu về cách bố trí các trang web như
Facebook, Twitter, Quora và Vimeo. Bên cạnh giao diện
người dùng, không nên sử dụng bất kỳ màu nào có thể
gây nhiễu loạn cho các hình ảnh minh hoạ hoặc chi tiết đồ
hoạ.


07. Divide the layout

Cấu trúc của trang web càng đơn giản, càng giúp người
dùng dễ dàng điều hướng hơn. Mỗi section trong trang
web của bạn được ví như kể một câu chuyện và bố cục
sẽ giúp làm nổi bật các phần nội dung quan trọng nhất
trong câu chuyện đó.

Trên thực tế, không nên có quá nhiều lời kêu gọi hành
động trên một trang (calls to action)- mọi thứ bạn làm nên
đi đến một kết luận cuối cùng 'Tôi có thể làm gì ở chỗ
này?' Hãy tìm một bố cục đơ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 sẽ rất đau đầu
khi muốn giữ mọi thứ đơn giản.
08. Rethink the established


Liệu chúng ta có thực sự cần một nút tìm kiếm nữa?
Trong hầu hết các trường hợp, câu trả lời là không. Là
nhà thiết kế, chúng ta định hình cách người dùng sử dụng
Internet, chúng ta quyết định có bao nhiêu bước để thực
hiện một hành động đơn giản và mức độ hiệu quả của
một trang web nào đó.
Một số quy ước có ở đó vì chúng được mọi người quy
định vậy(như menu phải nằm ở trên, footer nằm ở dưới,
màu nền là trắng, màu chữ là đen...), nhưng một số khác
ở đó vì không ai dành thời gian để đánh giá chúng, họ
lười nên cứ đặt ở đó. Điều quan trọng là bạn phải suy
nghĩ lại các mô hình tương tác đã được thiết lập trong
trang web của bạn, kiểm tra tất cả các thành phần để xem
chúng ta có thể cải tiến chúng như thế nào.
09. Think in motion


Chuyển động là điều cần thiết khi thiết kế các giao diện
trải nghiệm tương tác.Các thiết kế không còn sử dụng các
component tĩnh nữa thay vào đó mỗi thành phần được

xác định bởi mối quan hệ của nó với hệ thống, và mối
quan hệ đó cần thêm các motion để được chuyển tải đúng
cách. Motion có thể minh hoạ các hiệu ứng động trên nội
dung hoặc các trạng thái tương tác trong bố cục của bạn.
10. Prototype, prototype, prototype


Prototype thường bị nhầm lẫn với wireframe, là nằm trong
phân đoạn từ giữa tới cao về sự chân thật của sản phẩm
cuối cùng,mô phỏng tác động giao diện người dùng. Nó sẽ
cho phép người sử dụng để:
•
Trải nghiệm nội dung và tương tác với giao diện
•
Kiểm tra sự tương tác chính một cách tương tự như
sản phẩm cuối cùng
Prototype giúp khách hàng của bạn hứng thú hơn với
project cũng như mất ích thời gian hơn để giải thích về ý
tưởng.
11. Challenge yourself


Tôi khuyến khích mỗi designer đặt ra thử thách cho bản
thân mình trong mọi dự án. Sự mới mẻ là điều cần thiết
cho mỗi dữ án. Ví dụ về những thách thức khác nhau có
thể bao gồm việc sử dụng một hệ thống lưới(grid) mới, tạo
ra một thành phần mới, hoặc thậm chí những thách thức
nhỏ như tránh chế độ hòa trộn(blend modes) hoặc sử
dụng một màu cụ thể.
12. Pay attention to the details

Hãy chú ý đến các chi tiết dù là nhỏ trên thiết kế của bạn.
Nó có thể là một tương tác nhỏ như lúc ấn một button, một
chuyển động animation không mong muốn hoặc một cảm
giác dễ chịu khi hover qua một đăng ký hoặc một nét tinh
tế xung quanh một box trong background thông qua thuộc
tính border. Do đó, cảm giác mà các chi tiết nhỏ này mang
lại là điều cần thiết - và nó sẽ đến một cách tự nhiên nếu
bạn thực sự thích những gì bạn đang làm.