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 frontend chuyên nghiệp.
Trang 123 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
Trang 2Trướ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à
Trang 3mụ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 ý
Trang 4tưở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ự
Trang 5á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ẽ
Trang 6khô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
Trang 7Trong 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ạ
Trang 807 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
Trang 9Liệ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
Trang 10Chuyể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
Trang 11Prototype 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
Trang 12Tô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