Thiết kế website – Vạn sự khởi đầu từ web layout

Thiết kế website – Vạn sự khởi đầu từ web layout
​

Để thiết kế được một website chuyên nghiệp thì đó là cả một quá trình phức tạp, đòi hỏi nhiều công đoạn với nhiều yếu tố khác nhau cùng tham gia. Người xưa hay nói “Đường đi ngàn dặm, bắt đầu từ bước đầu tiên” và trong quá trình thiết kế website thì bước chân đầu tiên đó là thiết kế web labyout. Bước đi đầu tiên tuy không quá phức tạp nhưng cũng không thể làm một cách sơ sài.

1. Thiết kế web layout là gì

Layout : nghĩa là bố cục– dàn trang, vậy web layout có nghĩa là bố cục của một website hay nói cách khác là việc phác thảo những ý tưởng chung như nội dung sẽ đặt ở đâu, hình ảnh ở chỗ nào. Việc tạo ra một bản thiết kế mang trính chung nhất trước khi chính thức sử dụng các phần mềm thiết kế website phức tạp khác được gọi là thiết kế web layout.

Web layout về bản chất chỉ là một file hình ảnh mà trong đó thể hiện cụ thể cho chúng ta biết một trang web sẽ có giao diện như thế nào sau khi được hoàn thành.

Thiết kế weblayout đóng vai trò rất quan trọng trong thiết kế website bởi lẽ, đây chính là yếu tố mang tính định hướng website sẽ phát triển theo hướng như thế nào, các yếu tố cần hay không cần đối với một website. Vì một thiết kế web layout chỉ là một file hình ảnh, vì vậy việc thay đổi trở nên vô cùng đơn giản và nhanh chóng hơn rất nhiều so với việc chỉnh sửa trực tiếp trên code web. Do đó làm tốt việc thiết kế web layout sẽ khiến cho quá trình làm web sau này tiết kiệm được rất nhiều thời gian và công sức.

2. Các công cụ được sử dụng trong thiết kế weblayout.

Các công cụ chính để làm việc chính là sử dụng các dụng cụ của ngành thiết kế mỹ thuật, đồ họa hay đúng ra là một phần của những công cụ đó. Những công cụ mang tính phổ biến nhất để có thể thiết kế web layout bao gồm:

Dụng cụ 1: đầu tiên và quan trọng nhất chính là ...bút và giấy:
Hai vật dụng quan trọng này thực sự là vô cùng đơn giản đến mức thô sơ nếu so với những công cụ khi thiết kế website. Trước khi thiết kế layout thì việc đầu tiên cần làm đó là phác thảo một sơ đồ khái quát nhất về việc mình sẽ bố cục trang web sẽ như thế nào. Chia ô hay không, nếu có thì bao nhiêu ô, thứ tự ra sao... Việc phác thảo này không cần cầu kỳ chỉ cần là những nét vẽ đơn giản, vài ký hiệu hay ô vuông. Việc phác thảo này cần sự nhanh chóng và thường xuyên phải thay đổi để có ý tưởng ban đầu ưng ý nhất và bút và giấy đáp ứng được tối đa những yêu cầu này.

Đừng vội nhảy vào ngay sử dụng các phần mềm thiết kế vì nó sẽ làm bạn tốn thời gian khi muốn thay đổi các ý tưởng. Hơn nữa, dùng giấy và bút kích thích khả năng sáng tạo tốt hơn.



Tạo bản phác thảo bằng giấy và bút chì tốt là nhanh và tốt nhất

Dụng cụ 2: các phần mềm thiết kế đồ họa
Các phần mềm thiết kế đồ họa thì có rất nhiều nhưng được sử dụng cho thiết kế web layout thì có 2 phần mềm thông dụng nhất hiện nay là Photoshop và Illustrator. Hiện nay thì có thêm một phần mềm “mới nổi” đó là Sketcha – tuy nhiên phần mềm này chỉ dành riêng cho Macbook.

Dụng cụ thứ: 3 là các quy tắc về mỹ thuật
Các thiết kế kế web layout cũng có thể xem như một họa sĩ đang vẽ tranh nhưng là bằng kỹ thuật số. Vì vậy, các nguyên tắc trong mỹ thuật cũng được áp dụng vào trong thiết kế layout như các nguyên tắc tỷ lệ, nguyên tắc màu sắc...

3. Các thành phần chính của một thiết kế weblayout

Một giao diện của website được cho là đẹp thì có rất nhiều yếu tố cầu thành như màu sắc, font chữ, kích thước... Tất cả những điều đó đều phải được thể hiện trên web layout.

Phân chia bố cục:
Mỗi một khụ vực trên trang web nhằm đáp ứng một chức năng nào đó nhu nội dung, hình ảnh, thông tin liên lạc. Vì vậy, cần có cách bố trí phù hợp với từng nội dung cụ thể. Việc phân chia bố cục sẽ quyết định vị trí của nhiều thứ như chỗ nào sẽ đặt menu, hình ảnh, video, nội dung dạng text, thanh slide bar....

Màu sắc:
các màu sắc cũng đóng vai trò quan trọng trong thiết kế layout web, khi đó bạn phải quyết định xem tông màu nào là chủ yếu, màu nền, màu cho thanh menu, màu footer...

Typography:
Bao gồm những yếu tố liên quan đến tính thẩm mỹ của tất cả các dạng văn bản trong thiết kế web: font chữ, kích cỡ chữ, màu sắc, bốcục của chữ...Đây là một trong những xu hướng nổi trội của thiết kế web trong năm 2015. Những font chữ được lựa chọn khéo léo sẽ làm cho website vô cùng đẹp và chuyên nghiệp.

Hình ảnh:
Vị trí nào trên trang sẽ được dùng để đăng các hình ảnh, biểu tượng . Và những hình ảnh, biểu tượng như thế sẽ có kích thước tối thiểu, tối đa là bao nhiêu thí phù hợp với khung hình đã bố trí sẵn.
Các trang chủ và trang con: một website sẽ có những trang chính và trang con. Do đó thiết kế web layout cũng sẽ thể hiện bố cục của từng trang sẽ khác nhau như thế nào. Đồng thời chỉ ra các thức mà các trang được liên kết trong cùng một địa chỉ web.

4. Các phong cách thiết kế web layout chính

Thiết kế web layout hiện nay có nhiều phong cách khác nhau tùy thuộc vào yêu cầu của người chủ sở hữu và khả năng sáng tạo của từng người thiết kế. Hiện nay có 4 phong cách thiết kế web layout được đánh giá là xu thế mới nhất hiện nay gồm

Chia màn hình:
Giao diện của website được chia đội theo chiều dọc. Phong cách này giúp phân hạng được thứ tự quan trọng hoặc nêu bật được tầm quan trọng ngang bằng của cả hai



Không phân chia :
Một trong những phong cách thiết kế web chủ yếu trước đây và ngay cả bây giờ là việc phân chia web thành các ô để phân biệt các nội dung với nhau. Nhưng một xu hướng hiện nay là bỏ đi tất cả các đường chia ô và bỏ luôn các header và footer. Lúc này hình ảnh và nội dung được hòa chung làm một và điều này giúp làm nổi bật hình ảnh chính. Thích hợp cho các trang giới thiệu sản phẩm, hàng hóa.



Layout dạng lưới
Hệ thống lưới (Grid systems) là cấu trúc bao gồm hàng loạt các hàng và cột theo quy chuẩn để tạo ra các bố cục trang web.Lưới được sử dụng rất nhiều trong thiết kế website bởi lẽ chức năng của lưới đáp ứng rất tốt các nguyên tắc thiết kế website như: tính định hướng, khoảng cách, sự ngay ngắn, rõ ràng và tính nhất quán,… Thiết kế bằng lưới cũng khiến việc cắt slide và chuyển sang html được dễ dàng hơn (mặc dù điều này cũng đồng nghĩa việc bạn phải rắc rối hơn khi làm việc vớ
i CSS).


Tuy nhiên nhiều người cho rằng thiết kế dạng lưới làm website trông nhàm chán vì bị chia thành những khối hình học và khiến cho người dùng không biết điều gì là tâm điểm của website đồng thời cũng làm giảm tính sáng tạo của người thiết kế do bị bó buộc về không gian.

Layout là một hình ảnh duy nhất
Đây là phong cách thiết kế với một hình ảnh tràn toàn màn hình và không hế có các thanh cuộn và các thanh menu. Chi có một đường vào duy nhất cho website. Điều này giúp cho nội dungcủa website được tập trung hoàn toàn và kéo theo là các hệ thống phân cấp của nội dung thiết lập rõ ràng



5. Các nguyên tắc cần biết khi thiết kế web layout

Mục tiêu của website: Việc thiết kế web layout như thế nào phụ thuộc vào những mục tiêu mà chúng ta đặt ra như nội dung của web, người dùng, định hướng nội dung... Một website được thiết kế nhằm nội dung cung cấp tin tức sẽ khác với website bán hàng hay một website chuyên về sản phẩm hoặc thời trang thì sẽ làm layout để tập trung vào các hình ảnh hơn là nội dung.

Typography: Những quy luật này xin vui lòng đọc tại bài viết: 10 quy luật bất biến về typography trong thiết kế website

Khoảng trống: Không nên cố gắng nhồi nhét tất cả nội dung vào trong website hoặc các nội dung quá gần nhau. Phải tạo ra các khoảng trống để có thể phân chia rõ ràng nội dung của từng phần.

Bố cục chính – phụ: cần xác định đâu là phần nội dung chính cần tập trung thì phải để tại những vị trí nổi bật nhất, lớn nhất hoặc trung tâm.

Tỷ lệ: việc phân chia website thành các ô cũng cần tuân theo tỷ lệ vàng trong mỹ thuật.

Màu sắc: các nguyên tắc về màu sắc, sự tương phản sẽ ảnh hưởng đến việc website trông có nổi bật hay không, các font chữ có bị lẫn màu với nền hay không...
Tham khảo thêm : Màu sắc trong thiết kế website chuyên nghiệp

Thiết kế web layout theo thói quen người dùng: cần đặt các nội dung trên layout theo thói quen nhìn của người dùng và dựa vào đấy để đặt những thông tin và hình ảnh quan trọng mà chúng ta muốn truyền đạt. Theo đó ánh mắt người dùng theo thống kê thì sẽ đi theo sơ đồ sau:

• Vị trí 1: đặt biểu tượng và logo
• Vị trí 2: Đưa các thông tin mang tính tiêu điểm
• Vị trí 3: Các thanh menu hoặc điều hướng
• Vị trí 4: đưa nội dung và hình ảnh cần thiết
• Vị trí 5: đưa nội dung quan trọng nhất ( tóm tắt, mô tả)
• Vị trí 6: hầu như người dùng không nhìn thấy.

Lời kết

Thiết kế một website chuyên nghiệp, tuyệt vời luôn là điều mong muốn tất cả những người thiết kế web. Và một thiết kế web layout tốt sẽ là sự khởi đầu vững chắc cho một website tuyệt vời.

(Sky web tổng hợp)