cách thiết kế layout web là một trong những từ khóa được search nhiều nhất về chủ đề cách thiết kế layout web. Trong bài viết này, lamweb.vn sẽ viết bài viết Hướng dẫn cách thiết kế layout web mới nhất 2020
Hướng dẫn cách thiết kế layout web mới nhất 2020
hướng dẫn cơ bản thiết kế WIREFRAMING
Wireframing là gì? Bạn có thể tạm hiểu nó như là cấu trúc khung sườn, một bản sơ phác plan design web. Wireframing là một bước cần thiết trong tiến trình của bất cứ công việc liên quan thiết kế giao diện nào. Nó chủ yếu cho phép bạn định hình nền móng thông tin bản design của bạn, giúp việc lên kế hoạch dễ dàng hơn cho việc bố cục dựa theo ý đồ bạn muốn người xem giải quyết thông tin như thế nào. Nếu bạn chưa sử dụng wireframing, đây là lúc bạn nên khởi đầu …
Cũng giống như bản blueprint trong thiết kế kiến trúc, bạn cần nhìn thấy nó như bản phác thảo sơ đồ đen trắng hai chiều trước khi nghĩ ra cách xây một ngôi nhà thật sự. Tương tự, ở design giao diện, bạn k thể khởi đầu tạo lớp (layer) trong photoshop, hay viết các đoạn mã, mà k biết thông tin sẽ được xử lý ntn.
Ở cấp sâu hơn, một wireframe rất có ích trong quyết định phương pháp người ta tương tác với giao diện như thế nào.Ví dụ, wireframe đủ nội lực gồm có các tình trạng không giống nhau của các nút (button) hoặc hành vi.
Wireframing thật sự cần thiết bởi vì nó cho phép nhà thiết kế hoạch định layout và các tương tác của giao diện mà không bị chểnh mảng bởi màu sắc, sự lựa chọn lựa kiểu chữ và ngay cả content. Bạn nên lý giải với KH rằng, nếu người ta k thể ảnh dung được họ sẽ không biết đi đâu, làm gì khi xem bản wireframe đen trắng, thì bất kể bạn có thêm màu sắc gì cũng sẽ vô ích. Một nút (button) phải được hiển thị rạch ròi cho dù nó k thật sự nổi bật hoặc được tô bởi các màu sắc rực rỡ.
Xem thêm : Hướng dẫn cách thiết kế web đơn giản miễn phí mới nhất 2020
Bước 1: Tìm nguồn cảm hứng
Trước khi bắt đầu bước vào chi tiết hơn nữa, bạn hãy đọc qua thực tế, gợi ý giống như trang I ♥ wirefames. Bạn đủ nội lực lướt qua tổng thể cũng như trực quan để nghiên cứu nhìn thấy các nhà design đang tiến hành bước wireframing ntn.
Một hướng dẫn không giống bạn đủ sức dùng tool tại Wirify (https://www.wirify.com/), một web cho phép bạn xem các web vừa mới hoạt động ở chế độ wireframe.
Nếu bạn chịu khó liên tục Nhìn các nhà thiết kế đã vận dụng wireframe như thế nào đối với các website của họ, bạn sẽ dần hình dung ra trong đầu làm sao để tạo wireframe cho riêng mình, nó sẽ giúp bạn nền tảng thông tin trên giao diện.
Bước 2: thiết kế các quy trình của bạn
design là một quy trình nền tảng vì vậy các nhà design không giống nhau có phương pháp tiếp cận wireframing và những biên dịch của nó thành pic và các đoạn mã theo nhiều phương pháp khác nhau. Bạn phải tự tìm ra quy trình nào vừa mới đem lại cho bạn sức mạnh và quy trình nào mà bạn cảm thấy thoải mái nhất để làm việc. gợi ý bên dưới là một sơ đồ biểu diễn những quy trình tiêu biểu
Sketch: phác thảo, Wireframe: thiết kế khung sườn, Visual: tạo hình ảnh trực quan, Code: viết mã
bây giờ, đa số các nhà design k còn ưa chuộng các công cụ tạo ra các bản phác thảo (sketch) mà grid framework (chúng ta sẽ tìm hiểu trong một bài viết khác) mới là sự lựa chọn của họ.
Grid framework nói một cách dễ dàng là hệ thống khung sườn tạo sẵn (hiểu nôm na giống như khung sườn của các mẫu nhà tiền chế) theo hợp lý 12 cột (12-column), 16 cột hoặc 18 cột để sử dụng nền tảng tạo wireframe. Các nền tảng grid framework được dựng sẳn chủ yếu phụ thuộc CSS/HTML, nhờ thế nó sẽ giúp bạn cắt giảm được nhiều thời gian ở công đoạn vạch mã, nhưng nó cũng đồng thời hỗ trợ các tập tin khung nền ở định hình Photoshop, Adobe Firework, Adobe Illustrator … để giúp các nhà design tạo wireframe theo đúng phù hợp của từng grid framework cụ thể.
Một khung nền của grid framework
Minh họa cho hướng dẫn dùng grid framework để tạo wireframe
Bạn có thể tham khảo một vài grid framework nổi tiếng giống như 960 Grid System, Boostrap, Foundation, Skeleton … bạn nên chọn một trong số framework mà bạn cảm thấy thân thuộc và easy dùng nhất. Mỗi grid framework có điểm mạnh và điểm yếu không giống nhau mà chúng tôi sẽ đề cập đến trong bài viết khác.
Minh họa công cuộc design web theo từng công đoạn có dùng grid framework: Wireframe: tạo khung sườn sơ phác, HI-DEF Wireframe: Tạo khung sườn chi tiết, Visual: Tạo layout trên photoshop, Code: viết mã dựa trên grid framework và cắt photoshop layout thành HTML
Bước 3: chọn công cụ
Có rất nhiều dịch vụ và phầm mềm, thậm chí các áp dụng web online mang ra các công cụ giúp các nhà design tạo sơ phác và wireframe như:
phần mềm chuyên nghiệp:
- balsamiq (balsamiq.com): support tạo phác thảo (sketch), mẫu thử nghiệm (mock-up), balsamiq cũng cung cấp thư viện các phần tử website đủ sức tương tác bằng mẹo dẫn thả
- axure (axure.com): một trong những chương trình chuyên nghiệp để tạo phác thảo, bản mẫu (wireframing/prototyping). tuy nhiên software chỉ hỗ trợ setup trên Window, bạn đủ nội lực sử dụng software Omnigraffle thay thế trên Mac.
software trực tuyến: mockflow.com, hotgloo.com, gomockingbird.com
giống như đang nói ở trên, bạn đủ sức chọn lựa bất cứ phần mềm nào mà bạn cảm thấy thoải mái và quen thuộc để sử dụng việc ở công đoạn này. Với riêng trải nghiệm của mình, tôi khuyên bạn nên dùng các software thân thuộc giống như In design, Corel Draw, Illustrator…
Bước 4 : xây dựng Grid
Về lý thuyết các bạn đủ sức tìm đọc chuyên sâu trong một số post không giống về grid system hay grid framework. Bạn đủ sức hiểu không khó khăn grid là một cấu trúc được design sẵn theo dạng lưới sử dụng để làm nền tảng cho việc sắp xếp các phần tử website trên layout.
như đang nói ở trên có một số grid framework thông dụng hiện nay giống như 960 Grid System, Boostrap, Foundation, Skeleton … bạn đủ nội lực tải về để làm wireframe cho design layout của mình.
trước tiên hãy xây dựng trang theo màn hình tiêu hợp lý 1280×900. Grid tiêu phù hợp sẽ có tối đa 1140px
Sau đó đặt mẫu grid vào trang
Mỗi grid framework có những quy tắc định sẵn bạn phải tuân theo, nhưng nếu bạn muốn tạo layout trên grid theo design riêng của mình, bạn đủ sức tham khảo tại responsify.it.
Bước 5: dựng lại layout với các hình hộp
Bạn đủ sức vẽ các hình hộp đặt theo các cột của grid. Đây là lúc bạn lên ý tưởng sắp đặt và trình bày các thông tin trên trang web làm sao để để người đọc dễ dàng truy cập nhất. từ khi trên xuống, từ trái sang phải. Dưới đây là một gợi ý wireframe với layout sử dụng grid :
đôi lúc, phụ thuộc mục tiêu phân khúc của bạn và hình thức website bạn đang thiết kế, bạn đủ sức sáng tạo theo ý mong muốn nhưng luôn phải ghi nhớ giữ phân cấp nền móng thông tin khi trình bày. Đây là một ví dụ khác:
Đây là một layout cho một website blog với các vị trí dành cho ads và các ghi chú tut dành cho KH
Bước 6: Tinh chỉnh với sắc độ xám
sử dụng các sắc độ xám sẽ giúp bạn dựng lại sẽ khiến bạn định hình các trọng yếu mà k cần tô các màu sắc hoàn chỉnh. thực tiễn nó sẽ giúp bạn trong quá trình design trực quan sau này
Xem thêm : Hướng dẫn cách tạo website mới nhất 2020
Bước 8: Thêm chi tiết trên wireframe
Đây là bước k bắt buộc, nhưng nếu muốn điều chỉnh chi tiết bạn nên thử qua bước này. Ở bước này, bạn có thể thích hợp các chi tiết càng nhiều càng tốt, đây luôn luôn chưa phải lá lúc bạn quá tụ họp vào các hình ảnh, không khó khăn là đủ sức bạn mong muốn đặt các đoạn chữ và lên ý tưởng sử dụng các loại kiểu chữ.
Bạn cũng có thể thử thêm một số màu sắc.
Ý tưởng chung đây là công đoạn hòa hợp giữa hình ảnh/ vạch mã, thêm hoặc bỏ bớt chi tiết, hoàn thiện wireframe và kết thúc giai đoạn thử nghiệm. Các hoạt động trong công đoạn này sẽ bao gồm lắng nghe các phản hồi và điều chỉnh wireframe trên software bạn đã sử dụng.
Nếu bạn vừa mới phải sử dụng việc với một đội ngũ lập trình viên, bạn sẽ mong muốn hoàn tất công đoạn này để bàn giao cho họ vạch mã framework cơ bản, để bạn rãnh tay hoàn thiện wireframe ở phần xử lý pic trực quan.
Bước 9: chuyển biến wirefame thành pic trực quan
giống như vừa mới nói ở trên, chúng tôi khuyên bạn nên thực hiện giai đoạn này với software Illustrator bởi vì bạn sẽ dễ dàng xuất tập tin sang định dạng .psd của photoshop với các layer có thể không khó khăn sửa đổi.
Đây là một ví dụ wireframe được chuyển biến thành hình ảnh trực quan, các cấu trúc khung được giữ nguyên, mặc dù layout đang được tô điểm màu sắc và hình ảnh
tóm lược
Đây chỉ là một trong những quy trình đọc qua, mỗi nhà thiết kế web đủ sức tự xây dựng các quy trình khác nhau tùy theo công việc cụ thể và kinh nghiệm của mình. Dù thế nào đi nữa, bạn k nên bỏ qua công đoạn dựng cấu trúc khung (wireframe), vì đây là bước cần thiết để định hướng bố cục thông tin, giúp khác xem dễ dàng thao tác và truy cập thông tin trên web đơn giản (user friendly), đó cũng là một tiêu chí quan trọng để một trang web được đánh giá là hoàn hảo.
Nguồn : http://diamondhoang.blogspot.com
