20 bước sở hữu một layout thiết kế web hoàn hảo (phần 1)

20 bước sở hữu một layout thiết kế web hoàn hảo (phần 1)
     

Layout web đóng vai trò quan trọng trong giao diện thiết kế web và ảnh hưởng nhiều đến người truy cập trong quá trình tương tác website. Hôm nay, Vivicorp sẽ cung cấp một tài liệu thiết kế web hướng dẫn các bước tạo ra một layout web từ đầu đến cuối.

Layout web đóng vai trò quan trọng trong giao diện thiết kế web và ảnh hưởng nhiều đến người truy cập trong quá trình tương tác website. Hôm nay, Vivicorp sẽ cung cấp một tài liệu thiết kế web hướng dẫn các bước tạo ra một layout web từ đầu đến cuối.


Khi tiếp cận các chủ đề về thiết kế layout web, các nhà thiết kế web mới hoặc thực tập sinh có thể mắc nhiều sai lầm. Trong danh sách ngắn gọn này, các bước hướng dẫn thiết kế web sẽ giúp cho nhà thiết kế web nhắm đến đúng những công việc cần phải làm, liên quan đến các kỹ thuật và mỹ thuật, để có thể bắt đầu một dự án mới thành công và hiệu quả hơn.


Những nguyên tắc này không chỉ bao gồm khía cạnh thiết kế trang đích mà còn thể hiện độc đáo các trang chung trên thiết kế web. Đi theo các hướng dẫn này, bạn sẽ tạo ra một web layout chuyên nghiệp hơn.


1) Thể hiện ý tưởng của bạn lên giấy


ban phac thao tren giay

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.


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


giup giai quyet van de ux

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ư sidebar 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ủ.


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


mot vi du ve Grid 978

Một ví dụ về Grid 978 với cơ sở 10px


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.


4) Chọn phông chữ typography


mot quy luat khong duoc su dung 2 co chu

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.


Xem thêm: 5 giao diện web có kết hợp font chữ headline và body tuyệt vời


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


su dung han che mau sac

Sử dụng hạn chế màu sắc để tránh quá tải hình ảnh


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.


6) Chia bố cục


cau truc cang don gian nguoi dung cang de dieu huong

Cấu trúc trang web càng đơn giản thì người dùng càng điều hướng dễ dàng


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.


7) Suy nghĩ lại về những việc đã thiết lập


xem xet lai nhung gi da thiet lap

Hãy xem xét lại những gì đã thiết lập


Là một nhà thiết kế web, chúng ta thường hình dung về cách mà người dùng sử dụng internet, và thao tác trên internet. Điều này sẽ giúp chúng ta quyết định có bao nhiêu bước hành động đơn giản, hiệu quả mà trang có thể có. Có thể sử dụng các mô hình và công ước thiết kế có sẵn nhưng cần phải dành thời gian đánh giá và suy nghĩ về hiệu quả của chúng.  Điều quan trọng là phải xem xét lại các mô hình tương tác được thiết lập trên bất cứ thành phần và xem làm thế nào chúng ta có thể cải thiện chúng.


8) Thách thức chính mình


Tôi khuyến khích tất cả các nhà thiết kế web phải luôn thách thức chính mình trên tất cả các dự án. Sự đổi mới không phải lúc nào cũng là một yêu cầu đối với dự án, do đó hãy thể hiện chúng tương tác hoặc thiết kế liên quan. Ví dụ về các thách thức khác nhau có thể sử dụng bao gồm một hệ thống lưới điện mới, tạo ra một thành phần mới, hoặc thậm chí thách thức nhỏ như không sử dụng các chế độ màu pha trộn hoặc sử dụng một màu sắc cụ thể.


9) Chú ý đến mọi chi tiết


chu y den tung chi tiet ma minh tao ra

Chú ý đến từng chi tiết trên bố cục mà mình đã tạo ra


Câu nói có vẻ quen thuộc nhưng không phải nhà thiết kế nào cũng thực hiện. Tuỳ thuộc vào mỗi concept đằng sau của dự án web, bạn có thể triển khai chúng theo nhiều cách khác nhau.


Hãy chú ý đến mọi tương tác nhỏ, một yếu tố animation hay một gradient nhỏ trong một nút hoặc các các phụ đề tinh tế bao quanh một hộp trên background. Nhìn chung, cảm ứng này là cần thiết và cũng rất tự nhiên nếu bạn thực sự thích những gì mình làm ra.


10) Hãy quan tâm đến mọi yếu tố trên bố cục như thể nó được thực hiện trong một cuộc thi thiết kế


chu y den moi thanh phan bo cuc

Đặt chú ý đến mọi thành phần, và toàn bộ tổng thể của chúng


Mỗi thành phần cần được thiết kế như thể nó có thể đứng một mình, là một thành phần tốt hơn bao giờ hết. Đôi khi các nhà thiết kế để lại một số phần của trang để thực hiện cuối cùng trong danh sách cần làm và đặt rất ít chú tâm và công sức đối với chúng.


Xem thêm:5 lời khuyên cho nhà phát triển giao diện web


Xem tiếp 20 bước sở hữu một layout thiết kế web hoàn hảo (phần 2)