Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

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

Chủ đề thuộc danh mục 'Thủ thuật - Kinh nghiệm về web' được đăng bởi greatmoonlight16, 25/1/16.

Lượt xem: 16,487

  1. greatmoonlight16 Mới đăng kí

    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.

    ruElmEG.jpg

    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

    WBVhkaY.jpg

    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.

    vfYCC2w.jpg

    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).

    1qTebE6.png
    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

    f3MWb5F.jpg

    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:

    X0uu0eE.jpg
    • 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)

    ...
    Gin Gin, Luccaoni2584, sunnizer4 người khác thích bài viết này.
  2. rungtram2014

    rungtram2014 Thành viên cấp 4

    không rành về web nhưng khi đọc bài viết nghe rất thú vị
    thank
  3. tuds

    tuds Thành viên cấp 1

    Bác có thể tìm hiểu thêm trong này

    h_ds thích bài viết này
  4. Gonhoang216

    Gonhoang216 Thành viên cấp 2

    Like mạnh cho bác hehe
  5. Mít Tờ Cold

    Mít Tờ Cold Thành viên cấp 2

    Thấy có vẻ hay nhỉ, ngâm cứu xem sao
    Tks thớt
  6. sunnizer

    sunnizer Banned

    Bài viết rất có ích ! Cảm ơn bạn :D
  7. Bài viết hay thiệt, đọc không thấy phí thời gian
  8. zziczicz

    zziczicz Mới đăng kí

    Bài viết của bạn rất hay. làm tài liệu cho mấy bạn mới vào nghề rất tốt.

    Mình ko chuyên thiết kế nhưng mình biết lập trình.

    Có cơ hội thì hợp tác với mình nha. manhhieuit@gmail.com
  9. Gin Gin

    Gin Gin Thành viên cấp 2

    bài viết của bạn rất hay

Ủng hộ diễn đàn