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
 |
| Phác thảo các basic wireframe sẽ giúp bạn xây dựng kết cấu của layout dễ dàng hơn. |
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
 |
| Một quy tắc chung là không nên dùng quá 2 kiểu chữ trên 1 website |
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
 |
| Bạn có thể sử dụng Tools như colorhunt để chọn bảng màu phù hợp cho mình |
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
 |
| Search button đang trở nên lỗi thời |
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
 |
| Hiệu ứng chuyển động là yếu tố thiết yếu trong trải nghiệm tương tác |
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.
Đang viết tiếp.....
Nhận xét
Đăng nhận xét