=> 10 nguyên tắc cốt lõi để có một thiết kế Website tốt
Cấu trúc của một hệ lưới trong thiết kế website
Container
Trong thiết kế website nói chung, container là phần không gian bao bọc các thành tố graphic và content, được sử dụng để kiểm soát chiều rộng của layout. Khi công nghệ phát triển, ngày càng có nhiều kích cỡ màn hình hiển thị, và khái niệm responsive design ra đời như một cứu tinh giúp các designer bớt đau đầu trong việc nhân bản thiết kế cho phù hợp với nhiều cỡ màn hình khác nhau. Với những website được thiết kế dạng responsive, container sẽ tự thay đổi kích thước khi hiển thị trên các cỡ màn hình khác nhau sao cho phù hợp. Chiều rộng của container như thế nào là tùy thuộc vào ý đồ của designer cũng như bài toán mà khách hàng mang lại, nó có thể nhỏ hơn chiều width màn hình [fixed container] hoặc trải dài toàn bộ màn hình [fluid container hay còn gọi là full-width container].
*Hình động responsive layout
Column
Column là các cột dọc trải dài suốt chiều ngang container và cũng là nền tảng của lưới. Lưới càng được chia thành nhiều cột nhỏ thì càng linh hoạt. Chiều rộng cột và số lượng cột tạo nên hệ lưới là phụ thuộc vào ý đồ của designer, tuy nhiên phổ biến nhất là 12 cột trên desktop, 8 cột trên tablet và 4-6 cột trên mobile. Chiều rộng cột lớn hay nhỏ có ảnh hưởng trực tiếp đến kích thước các element mà ta sử dụng trong thiết kế.
Gutter
Gutter đơn giản là khoảng cách giữa 2 cột. Việc sử dụng một thông số hợp lí cho gutter sẽ ảnh hưởng rõ nhất trên thiết kế sử dụng 1 chuỗi các thẻ sản phẩm, thẻ news hay đơn giản là các gallery ảnh dưới dạng grid. Trong một vài trường hợp, khi thiết kế website responsive, người ta có thể sẽ gia tăng kích thước gutter tuyến tính theo kích thước của container khi độ phân giải màn hình lớn dần.
Offset [Margin]
Có thể hiểu đây là phần lề 2 container, là phần không gian còn lại của artboard nằm ngoài container. Phần không gian lề này sẽ được coi như khoảng cách tối thiểu cần có khi thu nhỏ cỡ màn hình. Tương tự như kích thước cột hay gutter, giá trị phần lề này cũng có thể tăng lên theo độ phân giải và kích cỡ màn hình thiết bị. Thông thường nếu như trên mobile phần lề này chiếm khoảng 20-30px thì với phiên bản desktop tương ứng con số này sẽ gia tăng lên rất nhiều.
Khi sử dụng lề thay vì để container dạng full-width, thiết kế sẽ mang lại cảm giác đi vào khuôn khổ hơn. Tuy nhiên, cũng như các thành tố khác của hệ lưới, sử dụng lề hay không cũng phải xem xét đến ý đồ design. Trong trường hợp khách hàng yêu cầu một bản thiết kế với kích thước cho trước, chẳng hạn như chiều rộng 1400px, thì điều này không bắt buộc là container phải kéo dài toàn bộ kích thước đó, mà hoàn toàn có thể là những con số thấp hơn như 960px hay 1200px để chừa lại phần lề.
Sử dụng lưới trong thiết kế website
Cách xây dựng hệ lưới trong thiết kế website
Từ lâu lưới đã được ứng dụng trong thiết kế dàn trang in ấn, chính vì vậy khi internet bùng nổ, nó đã trở thành một phần không thể thiếu trong quá trình tổ chức giao diện website. Trong quá trình làm việc với lưới và wireframe, trong tiềm thức người designer sẽ hình thành tư duy miếng mảng – module, tức là nhìn mọi thứ dưới dạng các block sắp xếp lại với nhau trước khi nhìn vào chi tiết của từng thành tố thiết kế đó [ví dụ 1 cụm text đặt cạnh bức ảnh chỉ đơn thuần xuất hiện trong tư duy designer như 2 hình chữ nhật kế bên nhau]. Trong thời đại ngày nay, để thuận tiện hơn khi xây dựng trang web, boostrap – một framework hỗ trợ các developer – đã ra đời và được đông đảo cộng đồng dev đón nhận. Trong boostrap, mọi vị trí đặt element đều được quy định gắn với lưới. Chính vì vậy, người làm thiết kế cũng cần phải học cách sử dụng lưới sao cho “chuẩn” để tránh xung đột với khâu lập trình. Vậy thì như thế nào là lưới “chuẩn”? Câu trả lời là hoàn toàn không có bộ thông số nào là cố định buộc các designer cũng như developer phải tuân theo. Trong quá trình nghiên cứu dự án, cụ thể hơn là phác họa chân dung khách hàng và phân tích bài toán, đầu tiên chúng ta sẽ hình thành những suy nghĩ về container, dù ở bước đầu hình ảnh này khá mơ hồ. Những kết quả nghiên cứu sơ bộ này sẽ làm rõ ý tưởng thiết kế hơn, một website cho công ty luật sẽ đòi hỏi sự chỉn chu ngăn nắp, thậm chí là có phần nghiêm túc, thì container với kích thước khoảng 1200px chừa lại 2 bên margin sẽ thể hiện tinh thần này tốt hơn là những container có kích thước hoành tráng 1700-1800px hay thậm chí là full-width – vốn rất phù hợp với các website thể hiện sự sáng tạo bay bổng của một studio hay một thương hiệu thời trang giới trẻ. Cũng phải nói thêm về mặt kĩ thuật, kích thước màn hình ngày một to ra, độ phân giải ngày càng cao, nên kích thước lưới cũng bắt đầu nở ra để tận dụng tốt hơn không gian dư thừa trên những thiết bị hiện đại. Đầu những năm 2000 khi internet mới bùng nổ ở Việt Nam, hệ lưới chỉ loanh quanh vài trăm pixel thì bây giờ với sự xuất hiện của màn hình 4k, 5k, lưới đã chiếm cả ngàn pixel, cao hơn trong quá khứ rất nhiều.
Có được khoảng container thích hợp rồi, bước tiếp theo là xác định kích cỡ column và gutter. Vẫn đi ra từ quá trình phân tích brief, chúng ta sẽ ước lượng được hệ thống typography cần dùng trên trang, cỡ lớn nhất Heading 1 là khoảng bao nhiêu, cỡ cho phần description nhỏ nhất là khoảng nào. Bên cạnh đó, tinh thần của doanh nghiệp và nội dung muốn truyền tải cũng ảnh hưởng tới quyết định sử dụng nhịp khoảng [negative space/spacing] trên trang ra sao. Những site tin tức, site tập đoàn sẽ có mật độ thông tin dày hơn những site được thiết kế theo phong cách tối giản với rất khiều khoảng thoáng, nên kích thước column và gutter cho các trang khác nhau sẽ được điều chỉnh khác nhau sao cho phù hợp với tổng thể. Một trong những mẹo tìm ra gutter với lưới 12 cột là tạo ra 4 textbox với fontsize của phần description ở mức thấp nhất, mỗi textbox này sẽ “ăn” 3 cột và 2 gutter, sau đó phân bố đều chúng theo chiều ngang container, thông số gutter cần sử dụng và khoảng cách các textbox này sẽ là 2 giá trị rất gần nhau, đôi khi chúng là một, đôi khi cần điều chỉnh một chút ở các cấu phần khác trên site mới tạo ra giá trị gutter phù hợp. Tìm được gutter tương ứng với giá trị container cho trước, giá trị column còn lại cũng không khó khăn để tính toán ra. [Lưu ý rằng công việc này cần hoàn thiện trước khi đi vào làm hifi wireframe, tránh việc thay đổi kích thước lưới khi đã sắp xếp xong phần lớn các element].
Một số lưu ý khi dùng lưới trong thiết kế website
Song song với website, webapp cũng đang phát triển không ngừng và trở thành một kiểu trang đặc thù không thể thiếu. Sử dụng lưới cho webapp đôi lúc có thể hơi khác một chút so với các website thông thường, thay vì 12 cột dàn đều container thì phần sidebar và dashboard sẽ chiếm lĩnh lượng không gian khác nhau trên artboard, và người designer có thể sử dụng 2 hệ lưới riêng tương ứng với 2 cấu phần này.
Ngoài ra có một trường hợp mà phần lớn các designer không am hiểu về code/bootstrap rất dễ mắc phải, đó là khi sử dụng các section full-width với các element trong nó không “bám lưới” để đạt được mục đích thị giác mong muốn. Chính vì không theo lưới nên việc develop sẽ gặp rất nhiều khó khăn trong khâu xử lí responsive. Điều này không hoàn toàn là bất khả thi, tuy nhiên sẽ trở thành mối xung đột nội bộ trong công việc với nếu như người developer không thể handle được tác vụ này. Như trong ví dụ dưới đây, vì phần text không bám lưới nên khi thu nhỏ cỡ màn hình, nếu developer không xử lí được sẽ khiến ảnh và text đâm vào nhau.
Xem thêm: Kiểm soát thiết kế của bạn với góc nhìn trục Z trong thiết kế phẳng
Kích thước danh nghĩa:
Là kích thước có thể ứng với các kích thước cơ bản cũng có thể là độ dài quy ước của bộ phận kiến trúc, kết cấu có dự kiến các khe hở thi công, các yêu cầu lắp ghép cấu tạo.
Kích thước cấu tạo:
Là kích thước do bản vẽ thiết kế cung cấp cho các nhà chế tạo, nó thường bằng kích thước danh nghĩa trừ đi các khe hở thi công, các bề dày kết cấu hay cấu tạo hoàn thiện.
Kích thước thực tế:
Là kích thước có thật của sản phẩm thường là kích thước cấu tạo cộng hoặc trừ đi những dung sai cho phép của quá trình sản xuất.
3.4.2. Hệ trục định vị và lưới môđun
Các kích thước cơ bản của nhà thường tạo nên một mạng lưới trục định vị xác định vị trí các tường chịu lực hay cột chịu lực chính của công trình còn gọi là hệ trục phân. Các trục phân cần được mang tên theo một chiều hướng cụ thể để tiện gọi. Trục định vị được quy định như sau:
– Với cột và tường ngoài trục định vị trùng với tim, với mép trong hay mép ngoài đều được tùy theo sơ đồ kết cấu, điều kiện làm việc của tường hay cột, quan hệ giữa tầng trên và dưới để đảm bảo mỹ quan mặt đứng kiến trúc.
– Với cột, tường ở khe lún trục định vị có thể là tim hình học cũng có thể là tâm khe lún [theo quyết định của kiến trúc].
Để thuận tiện cho việc áp dụng môđun thống nhất các mặt bằng không gian kiến trúc thường được nghiên cứu tạo lập, tổ chức dựa trên một mạng môđun gốc [cho nghiên cứu bộ phận và chi tiết] hay môđun mở rộng bội số [cho toàn nhà hay tổng thể]. Các trục định vị hay hệ trục phân nên trùng hợp hay phần lớn trùng hợp với mạng lưới môđun này tạo điều kiện thống nhất hóa cao.
Trong kiến trúc thường gặp các mạng lưới môđun dạng kiểu sau [hình 1.3.10].
Mạng ô vuông đều Mạng ô chữ nhật Mạng ô vuông to nhỏ Mạng tam giác đều Mạng lục giác đều Mạng tam giác vuông cân.
Chương 4
CÁC CƠ SỞ CÔNG NĂNG VÀ VẦN HÓA NHÂN VĂN CỦA THIẾT KẾ KIẾN TRÚC
Thiết kế kiến trúc [concevoir, composer, projeter, design] cồn gọi là sáng tác hay tổ hợp kiến trúc là giai đoạn đầu rất quan trọng cho sự ra đời một tác phẩm kiến trúc, trong đó người kiến trúc sư phải đồng thời giải quyết thoả đáng các vấn đề sau:
– Nghiên cứu đặc điểm khu đất xây dựng thông qua quá trình phân tích những nét đặc thù của địa hình, cảnh quán của môi trường xây dựng, những khống chế ràng buộc về mật quý hoạch đô thị, về khí hậu v.v… để xây dựng ý tưởng chung và nội dung hình thức của công trình nhằm đáp ứng các mục tiêu, đưa kiền trúc mới hài hoà với cảnh quan khu vực. Nghĩa là vừa đóng góp được vẻ đẹp cho không gian đô thị, phù hợp với nhiệm vụ công năng, với hệ thống giao thông khu vực, vừa lợi dụng được địa hình, hướng giỏ có lợi ,các tiện nghi đô thị bảo vệ được cảnh quan, theo đúng định hướng và tuân thủ các quy chế xây dựng hiện hành.
– Tổ chức sắp xếp các không gian nội thất ngoại thất, bảo đảm quá trình khai thác sử dụng được thoải mái thuận tiện đạt hiệu quả cao, có hình khối kiến trục phù hợp với đặc điểm công trình, đáp ứng yêu cầu mỹ cảm của hình tượng kiến trúc đối vối từng con người và toàn xã hội.
– Đạt được một giải pháp kết cấu xây dựng hợp lý, bền vững, kinh tế, phù hợp vói trình độ khoa học kỹ thuật đương thời, bảo đảm các điều kiện an toàn phòng hoả và cân bằng sinh thái.
Vậy là thiết kế kiến trúc thực sự đòi hỏi một quá trình tư duy sâu sắc và nghiêm túc về nhiều khía cạnh của tri thức, vừa có phân tích so sánh, vừa có khái quát tổng hợp, đòi hỏi ở kiến trúc sư sự sáng tạo và kinh nghiệm cũng như một tầm kiến thức rộng về khoa .học kỹ thuật, nghệ thuật và nhân văn, sự nhạy cảm; và trí tượng tượng phong phú.
– Thiết kế kiến trúc muốn có chất lượng phải được nghiên cứu sáng tạo, tức sáng tác kiến trúc dựa trên sự am hiểu các cơ sở sau:
– Công năng thích dụng vì sự thoải mái, giảm nhẹ lao động,vì hạnh phúc của con người, vì hiệu suất cao, vì sợ cải thiện những mối quan hệ trong cộng đồng và xã hội, vì sự phát triển bền vững môi trường sinh thái, tạo được mối quan hệ nhân văn hữu cơ hài hoà của ba yếu tố: thiên nhiên, con người và xã hội, cũng tức là Thiên – Địa – Nhân của triết lý Phương Đông.