Tạo bố cục trang web hoàn hảo trong 27 bước

Thiết kế bố cục trang web không phải là khó khăn, đặc biệt là nếu bạn biết những lỗi phổ biến cần tránh. Trong bài đăng này, BrandTechup thực hiện các bước bạn cần thực hiện để đạt được bố cục trang web hoàn hảo. Chúng tôi sẽ đề cập đến những gì mọi người xây dựng trang web mới nên biết và làm trước khi bắt đầu một dự án mới và những điều họ nên chú ý.

Các bước này không chỉ bao gồm các khía cạnh thiết kế mà còn các mẹo về quy trình làm việc chung. Bạn sẽ tìm thấy lời khuyên chung để tiếp cận thiết kế bố cục trang web và mẹo để hoàn thành dự án. Thực hiện theo lời khuyên này và bạn sẽ sớm trên đường tạo bố cục trang web chuyên nghiệp.

Bắt đầu

1. Xác định ý nghĩa của kết quả

Trước khi bắt đầu công việc, bạn cần biết bạn đang thiết kế để làm gì? Bên cạnh mô tả của trang web, bạn cần biết những kỳ vọng cho nó là gì? Lấy một trang web tin tức chẳng hạn. Mục tiêu là gì? Là để tạo ra càng nhiều ấn tượng quảng cáo càng tốt hay là để cung cấp trải nghiệm đọc tốt nhất? Những mục tiêu sẽ được đo lường như thế nào?

Thiết kế tốt không nhất thiết là những thứ hào nhoáng nhất, mà là những thứ cải thiện hiệu suất 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 tìm hiểu những mối quan tâm và mục tiêu của họ ngoài SOW (tuyên bố công việc) là gì.  

2. Hiểu trang web hiện tại

Thường xuyên hơn, sự tham gia của một nhà thiết kế vào một dự án không phải là điều gì đó xảy ra trong sự cô lập. Khách hàng sẽ không liên lạc với bạn để bắt đầu một cái gì đó từ đầu. Trong hầu hết các trường hợp, bạn sẽ phải hiểu hệ thống hiện tại và nếu dự án của bạn có ý định thách thức nó, hãy tìm cơ hội để phát triển nó hoặc theo nó như hiện tại.  

Các tùy chọn là vô hạn. Hiểu những gì diễn ra từ góc độ thiết kế là chìa khóa nếu bạn tiến nhanh và nhận ra cơ hội đổi mới ở đâu, trái ngược với việc cần phải thách thức những gì đã được thiết lập và đưa ra khi ai đó không thể hiểu được các yêu cầu. 

3. Chia sẻ thiết kế với khách hàng sớm

Khi đề xuất một ý tưởng tương tác hoặc một thiết kế ‘trực quan và cảm xúc’, bạn cần đảm bảo rằng cả bạn và khách hàng đều có cùng một góc nhìn. Tránh dành quá nhiều thời gian cho một ý tưởng trước khi chia sẻ nó với khách hàng.  

Khi ý tưởng ban đầu được chấp thuận, bạn có thể thư giãn một chút và bắt đầu sản xuất. Nhưng sau khi trình bày ý tưởng đầu tiên, nếu khách hàng không yêu thích nó, bạn nên thu thập đủ thông tin phản hồi để đưa ra ý tưởng thứ hai, phù hợp hơn để bàn.

Quy trình thiết kế

4. Giải quyết bố cục trước

Điều này có vẻ rất rõ ràng, nhưng tôi đã thấy quá thường xuyên rằng 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ĩ nào cho vấn đề mà họ đang cố gắng giải quyết. Thiết kế là về giải quyết các vấn đề và những vấn đề đó không thể được giải quyết thông qua gradients hoặc shadows, mà là thông qua một bố cục tốt và phân cấp rõ ràng. 

Hãy suy nghĩ về nội dung, bố cục và chức năng. Hãy chắc chắn rằng những suy nghĩ đó phù hợp với mục tiêu của khách hàng của bạn và thoải mái chia sẻ chúng.

5. Bắt đầu phác thảo một framework cấp cao nhất

Khi tôi được yêu cầu tạo giao diện cho bố cục trang web, điều đầu tiên tôi làm là đưa ra một framework cấp cao nhất để giải quyết tất cả các vấn đề thiết kế. Khung 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 navigation 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 mình từ quan điểm này, bạn sẽ hiểu rõ về nhu cầu bố trí của bạn sẽ là gì khi thiết kế các phần bên ngoài trang chủ.

6. Thêm một grid

Nó đơn giản như được nghe. 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 hợp lệ nào để bắt đầu mà không có grid – và nếu không, tôi có thể đảm bảo với bạn, thiết kế sẽ không đẹp như vậy. Một grid sẽ giúp bạn cấu trúc bố cục của các phần khác nhau; nó sẽ dẫn dắt bạn thông qua các ranh giới kích thước màn hình cụ thể và giúp bạn tạo các mẫu responsive, từ đó bạn nhất quán về khoảng cách cũng như nhiều vấn đề thiết kế khác.

7. Chọn font chữ để thiết kế

Khám phá các kiểu chữ và màu sắc khác nhau là một phần của giai đoạn khám phá của một dự án. Nói chung, tôi khuyên bạn không nên sử dụng nhiều hơn hai kiểu chữ khác nhau trong một trang web, mặc dù nó thực sự phụ thuộc vào bản chất của nó. Chọn một phông chữ dễ đọc cho các đoạn văn bản lớn và vui tươi hơn với các tiêu đề và lời kêu gọi hành động. Tìm kiếm cảm hứng? Đừng sợ sử dụng các phông chữ lớn, và hãy sáng tạo và nhất quán khi sử dụng kiểu chữ.

8. Chọn chủ đề màu của bạn

Trong quá trình chọn một bộ font chữ, bạn nên bắt đầu khám phá những màu sắc bạn sẽ sử dụng trong giao diện, hình nền và văn bản. Tôi khuyên dùng một bộ màu sắc và tông màu giới hạn cho giao diện người dùng chung. 

Điều quan trọng là áp dụng những cách nhất quán trên bố cục trang web, tùy thuộc vào chức năng của từng yếu tố. Hãy suy nghĩ về cách bố trí của các trang web như Facebook, Twitter, Quora và Vimeo. Bên cạnh UI không nên có bất kỳ hạn chế màu nào đối với hình minh họa hoặc chi tiết đồ họa, miễn là chúng không can thiệp vào chức năng của các thành phần.

9. Đơn giản hóa bố cục

Cấu trúc của trang web càng đơn giản, người dùng càng dễ điều hướng. Mỗi phần cần kể một câu chuyện; nó cần một lý do và kết quả cuối cùng cho người dùng. Bố cục sẽ giúp nội dung làm nổi 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 hành động trên một trang – mọi thứ nên hướng đến trận chung kết đó ‘Tôi có thể làm gì ở đây?’ 

Hãy suy nghĩ về cách bố trí đơ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ẽ ngạc nhiên về việc làm cho nó đơn giản đến mức nào.

10. Tinh chỉnh mọi thành phần

Đối xử với mọi thành phần như thể nó có thể được trình bày cho một cuộc thi thiết kế. Nếu bạn chú ý đến mọi thành phần, tất cả sẽ nhiều hơn tổng của các bộ phận của nó. Tôi phải thừa nhận rằng lời khuyên này không phải của tôi. Tôi đã nghe nó tại một cơ quan trước đó và tôi đã bị sốc bởi tuyên bố này rõ ràng và đúng như thế nào. 

Mỗi thành phần cần phải được thiết kế như thể nó có thể độc lập như là thành phần tốt nhất từng có. Đôi khi các nhà thiết kế để lại một số phần nhất định của trang web cho đến cuối cùng trong danh sách việc cần làm của họ và cuối cùng họ không thể hiện họ đáng dành được nhiều sự tôn trọng.

11. Dẫn dắt khách hàng qua các giải pháp của bạn

Tránh tiết lộ nhiều về công việc của bạn. Một trong những mục tiêu của việc giao tiếp thường xuyên với khách hàng là tránh những điều bất ngờ khi tiết lộ công việc của bạn. Những lần tôi trình bày sự tiến bộ của mình, tôi thấy hữu ích hơn khi đưa họ vào cuộc hành trình và cho thấy tôi bắt đầu từ đâu, những cân nhắc tôi có trong khi điều hướng thử thách này hay thử thách đó và nơi cuối cùng tôi đã hạ cánh, thay vì chỉ cho thấy kết thúc cuộc hành trình không có bối cảnh.

Bằng cách này, bạn sẽ thấy họ đồng ý với kết luận của bạn hoặc tại một số điểm trong quá trình bạn đi sẽ chỉ ra một lỗ hổng hoặc một biến thể bổ sung mà bạn có thể chưa xem xét. Trong cả hai trường hợp, bạn sẽ có một cuộc trò chuyện và khách hàng sẽ cảm thấy được đầu tư nhiều hơn vì chúng là một phần của quá trình.

12. Suy nghĩ về sự chuyển động

Chuyển động là rất cần thiết khi thiết kế trải nghiệm tương tác. Không có thiết kế nào có thể được đánh giá đơn điệu hoặc như một comp tĩnh nữa; 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 chuyển động để được chuyển tải đúng cách. Chuyển động có thể minh họa các hiệu ứng động trên nội dung hoặc trạng thái tương tác trong bố cục của bạn. Với mục đích thứ hai đó, tôi khuyên bạn nên đưa các thiết kế của mình đi xa hơn một chút về prototyping.

13. Prototype, prototype, prototype

Prototyping là cách tốt nhất để kiểm tra các tương tác và công nghệ. Hiện nay có rất nhiều công cụ tạo mẫu giúp việc này trở nên dễ dàng và bạn không cần phải là một chuyên gia mã hóa để tạo ra các prototype hiệu quả. Đây là một cách khác để bạn có thể khiến khách hàng của mình phấn khích và đồng ý với các ý tưởng và không cần phải giải thích nhiều.

Cách tiếp cận thiết kế

14. Suy nghĩ lại về việc thiết lập

Chúng ta có thực sự cần một nút tìm kiếm nữa không? Trong hầu hết các trường hợp, câu trả lời là không. Khi các nhà thiết kế chúng tôi định hình cách người dùng duyệt internet, chúng tôi sẽ quyết định bao nhiêu bước một hành động đơn giản sẽ thực hiện và hiệu quả trang web của chúng tôi. 

Một số quy ước ở đó vì chúng hoạt động, nhưng một số ở đó vì không ai dành đủ thời gian để đánh giá chúng. Điều quan trọng là phải xem xét lại các mẫu tương tác đã được thiết lập của tất cả các thành phần để xem cách chúng tôi có thể cải thiện chúng.

15. Thử thách bản thân

Tôi khuyến khích mọi nhà thiết kế ngoài kia thử thách bản thân trong mọi dự án. Đổi mới không phải luôn luôn là một yêu cầu cho dự án, do đó, tùy thuộc vào chúng ta để đưa ra một cái gì đó mới mẻ. Ví dụ về các thách thức khác nhau có thể bao gồm sử dụng hệ thống grid mới, tạo ra một thành phần mới hoặc thậm chí các thách thức nhỏ như tránh các chế độ hoà trộn hoặc sử dụng một màu cụ thể.

16. Chú ý đến các chi tiết

Tuyên bố này đã được sử dụng quá mức gần đây nhưng nó không phải lúc nào cũng có thể nhìn thấy trong sản phẩm cuối cùng. Tùy thuộc vào khái niệm đằng sau dự án, ‘chú ý đến chi tiết’ có thể có nghĩa là những điều khác nhau. 

Nó có thể là một tương tác nhỏ, một hình ảnh động bất ngờ hoặc một liên kết thẩm mỹ như một gradient nhỏ trong một nút hoặc một nét vẽ tinh tế xung quanh một box trong nền. Nhưng nhìn chung, cảm ứng này rất 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 làm.

17. Thiết kế trường hợp tốt nhất; chuẩn bị cho tình huống xấu nhất

Hãy nhớ cách bố trí của bạn sẽ hoạt động trên các thiết bị và kích thước màn hình khác nhau. Là nhà thiết kế, công việc của chúng tôi là giải quyết các vấn đề thông qua các ràng buộc khác nhau. Với thiết kế web, các ràng buộc bao gồm từ các vấn đề về khái niệm và kỹ thuật đến các vấn đề liên quan đến nội dung. 

Chúng ta cần xây dựng một trang web có thể hoạt động không chỉ trong kịch bản lý tưởng, mà cả trong trường hợp xấu nhất. Chẳng hạn, người dùng có thể đang sử dụng một màn hình thực sự nhỏ và kiểm tra trang web khi hầu như không có bất kỳ nội dung nào trên đó để nó trông như bị hỏng. 

Tuy nhiên, với mục đích trình bày công việc của bạn, tôi thực sự khuyên bạn nên xây dựng kịch bản trường hợp tốt nhất cho nó (cũng nên là kịch bản phổ biến nhất cho hầu hết người dùng). Bạn muốn hiển thị số lượng văn bản lý tưởng và hiển thị trang web bên trong kích thước trình duyệt lý tưởng.

18. Đừng quá gắn bó với ý tưởng của bạn

Có một ranh giới mỏng giữa việc biết khi nào nên ủng hộ ý tưởng của mình và học cách nhận ra khi nào nhóm hoặc khách hàng của bạn không xem chúng là “cái duy nhất”. Là một nhà thiết kế, bạn cần tin tưởng vững chắc vào những gì bạn làm, nhưng bạn cũng nên cởi mở để nhanh chóng chuyển qua bất kỳ ý tưởng nào khác của bạn và đưa ra một cái gì đó khác. Đừng quên rằng có nhiều hơn một giải pháp.

19. Ám ảnh về thiết kế cho đến khi bạn ghét nó

Nếu bạn đam mê thiết kế, tôi chắc chắn đây là điều bạn đang làm. Bất cứ khi nào tôi hoàn thành một comp tôi cảm thấy tự hào, tôi có xu hướng biến comp đó thành một phần của cuộc sống của tôi. Tôi chụp ảnh màn hình của nó, kiểm tra nó trên các thiết bị khác nhau, làm hình nền của nó và thậm chí in nó và treo nó trên tường.

Kết quả của quá trình này, tôi đã đến một điểm mà cuối cùng tôi ghét thiết kế của mình. Tôi bắt đầu thấy mọi thứ không ổn với nó và cuối cùng tôi thay đổi nó. Không thích công việc trước đây của bạn là một dấu hiệu của sự trưởng thành và điều đó có nghĩa là cuối cùng bạn cũng học được từ những sai lầm của chính mình.

20. Hãy là người bạn tốt nhất của nhà phát triển của bạn

Các nhà phát triển là những người sáng tạo và họ yêu thích công việc của họ nhiều như bạn. Nhưng chúng không phải lúc nào cũng được đưa vào một dự án ngay từ đầu và thường chỉ tham gia khi ý tưởng được quyết định và vai trò sáng tạo của chúng đã bị thay thế. 

Quá trình này là sai; một số ý tưởng tốt nhất đến từ nhóm phát triển, vì vậy hãy chắc chắn rằng bạn hợp tác với chúng ngay từ khi bắt đầu dự án. Chia sẻ khái niệm và hứng thú của bạn với họ sẽ dẫn đến những ý tưởng tốt hơn và cuối cùng thực hiện tốt hơn.

21. Giao tiếp quá mức

Tôi chưa bao giờ hối hận vì giao tiếp quá nhiều với khách hàng của mình. Đừng ngần ngại nói với họ ngay khi có điều gì đó không rõ ràng hoặc bạn cảm thấy bị bí. Hãy nhớ rằng đó là lợi ích tốt nhất của họ để đảm bảo bạn sử dụng thời gian của mình theo cách hiệu quả nhất. Tôi có xu hướng giao tiếp khá thường xuyên với khách hàng của mình vào đầu mỗi dự án, cho đến khi cả hai chúng tôi cảm thấy thoải mái với quy trình làm việc và hiểu được sự mong đợi từ cả hai phía.

22. Trình bày những điều rõ ràng nhất có thể 

Nó cũng quan trọng để tạo ra công việc tuyệt vời như nó là để trình bày nó. Thiết kế tốt nhất của bạn có thể bị bỏ qua hoặc vứt đi nếu bạn không trình bày nó đúng cách. Khi nói đến bài thuyết trình, bạn muốn giải thích công việc của mình giống như bạn đang trình bày nó cho một đứa trẻ bốn tuổi. Luôn luôn nhớ rằng những gì hoàn toàn rõ ràng với bạn có thể không rõ ràng với ai đó lần đầu tiên nhìn thấy thiết kế của bạn.

Đóng gói

23. Làm sắc nét công việc của bạn

Để tránh các pixel bị mờ, hãy thử đặt độ tương phản phù hợp giữa các nét và màu nền hoặc màu nền. Bên cạnh bất kỳ cân nhắc thẩm mỹ, có một số điều phổ biến phải tránh để tạo ra một tác phẩm sạch sẽ và chính xác. 

Một số điều bạn cần chú ý khi cố gắng làm sắc nét công việc của mình bao gồm dải màu, cạnh mờ, tùy chọn hiển thị phông chữ (một số phông chữ, tùy thuộc vào kích thước của chúng được xem tốt nhất, trên chế độ kết xuất cụ thể) và nét vẽ hợp nhất với bối cảnh. 

Đây chỉ là một vài ví dụ cơ bản về các vấn đề cần tìm, nhưng trong thực tế, danh sách này là vô tận. Luôn luôn nhìn vào thiết kế của bạn một cách tổng thể để xem mọi thứ có hoạt động tốt không và sau đó phân tích từng thành phần một cách cẩn thận hơn.

24. Dọn dẹp tập tin thiết kế của bạn

Điều này (cùng với việc sử dụng grid) là một trong những lời khuyên quan trọng nhất, bất kể bạn đang sử dụng công cụ thiết kế nào. Bất kể quy mô của dự án và số lượng nhà thiết kế làm việc với nó, bạn cần giữ cho các tệp của bạn sạch sẽ. Điều này sẽ giúp việc xuất các phần khác nhau trở nên dễ dàng hơn, để tăng tốc quá trình thiết kế và hợp tác với các nhà thiết kế khác.

25. Theo thiết kế của bạn vào phát triển

Nếu bạn làm việc trong một đại lý, có lẽ bạn sẽ dễ dàng thấy mình đang vật lộn với thiết kế của một dự án mới khi dự án trước đó đang được phát triển. Trái với niềm tin chung, công việc của bạn trong một dự án không kết thúc khi PSD và style sheet được phân phối.

Nếu bạn thực sự quan tâm đến các thiết kế và ý tưởng tương tác của mình được thực hiện tốt, thỉnh thoảng hãy kiểm tra những người bạn tốt nhất của bạn, các nhà phát triển và giúp họ nhiều như họ cần để đảm bảo mọi pixel nhỏ đều hoàn hảo.

26. Hiển thị công việc của bạn trong tiến trình

Là một phần của cộng đồng các nhà thiết kế, tất cả chúng ta đều thích nhìn thấy không chỉ kết quả cuối cùng mà cả công việc đang tiến triển. Đôi khi phần tốt nhất của một dự án bị bỏ qua vì một số lý do và bị mất trong thư mục Lưu trữ của bạn. Chia sẻ quá trình phát triển dự án của bạn để cung cấp một số cái nhìn sâu sắc về cách bạn lên bố cục trang web cuối cùng của mình.

27. Hoàn thành dự án

Bây giờ bạn đã hoàn thành dự án của mình, đã đến lúc đưa ra và quảng bá trực tuyến. Hiển thị công việc của bạn là cách tốt nhất để thu hút khách hàng mới và gây sự chú ý cho nghề của bạn. Trong một số trường hợp, tôi đã hợp tác với khách hàng để chuẩn bị các tài sản cần thiết để thúc đẩy công việc chúng tôi đã thực hiện cùng nhau như một phần của dự án. Vào cuối ngày, đó là một tình huống có lợi cho cả bạn và khách hàng của bạn. Nhận được bình luận cũng sẽ gây chú ý cho doanh nghiệp của họ.