Thiết kế trang web
Thiết kế web có liên kết trực tiếp đến khía cạnh trực quan của một trang web. Thiết kế web hiệu quả là cần thiết để truyền đạt ý tưởng một cách hiệu quả.
Mô tả web là một tập hợp con của phát triển web. Tuy nhiên, các thuật ngữ này được sử dụng thay thế cho nhau.
Những điểm chính
Kế hoạch thiết kế nên bao gồm những điều sau:
Thông tin chi tiết về kiến trúc thông tin.
Cấu trúc dự kiến của trang web.
Sơ đồ trang của các trang
Khung dây
Wireframeđề cập đến một hướng dẫn trực quan về sự xuất hiện của các trang web. Nó giúp xác định cấu trúc của trang web, liên kết giữa các trang web và bố cục của các yếu tố trực quan.
Những thứ sau được bao gồm trong wireframe:
Hộp các yếu tố đồ họa chính
Vị trí của tiêu đề và tiêu đề phụ
Cấu trúc bố cục đơn giản
Kêu gọi hành động
Khối văn bản
Wireframe có thể được tạo bằng chương trình như Visio nhưng bạn cũng có thể sử dụng bút và giấy.
Công cụ thiết kế web
Dưới đây là danh sách các công cụ có thể được sử dụng để thiết kế web hiệu quả:
Coda 2OmniGraffle
Pen and Paper
Vim
Coda 2 là một công cụ thiết kế và phát triển web mạnh mẽ, đi kèm với giao diện người dùng tốt hơn, chỉnh sửa văn bản, quản lý tệp, clip, trang web, thiết kế và hỗ trợ Mysql tốt hơn. OmmniGraffle chủ yếu được sử dụng để tạo khung dây. Nhược điểm của công cụ này là Nó không có tạo mẫu tương tác và Nó chỉ có sẵn cho Mac. Bút và giấy có thể được sử dụng để vẽ giao diện của trang web. Vim là một công cụ chỉ định web tuyệt vời, nó hỗ trợ tự động lập ý định mã có thể tùy chỉnh đầy đủ, nhiều bộ đệm để lưu trữ mã đã cắt / sao chép và ghi lại các hành động để tự động lặp lại.
SN | Mô tả công cụ |
---|---|
1. | Photoshop CC Đây là một công cụ thiết kế web tuyệt vời do Adobe cung cấp. Photoshop CC 2014 mới nhất hỗ trợ nhiều tính năng mới như đối tượng thông minh, lớp comps, hướng dẫn thông minh, tích hợp Typekit, tìm kiếm phông chữ và cải tiến quy trình làm việc. |
2. | Illustrator CC Illustrator CC cũng là một công cụ thiết kế web đi kèm với các tính năng mạnh mẽ như thư viện AutoCad, bản in trắng, hoán đổi proxy điền và nét vẽ cho văn bản, tạo góc tự động, hình ảnh không được gắn và công cụ loại cảm ứng, v.v. |
3. | |
4. | |
5. | Sublime Text Sublime Text là một trình soạn thảo mã nguồn với giao diện lập trình ứng dụng Python. Chức năng của nó có thể được mở rộng bằng cách sử dụng các plugin. |
6. | |
7. | |
số 8. | Imageoptim Về cơ bản, nó được sử dụng để tối ưu hóa hình ảnh trên trang web nhằm tải chúng nhanh hơn bằng cách tìm các thông số nén tốt nhất và bằng cách xóa các bình luận không cần thiết. |
9. | Sketch 3 Sketch 3 là một công cụ thiết kế web được phát triển đặc biệt để thiết kế giao diện, trang web, biểu tượng, v.v. |
10. | Heroku Nó cũng là một công cụ phát triển web tuyệt vời hỗ trợ Ruby, Node.js, Python, java và PHP. |
11. | Axure Nó hỗ trợ các công cụ tạo mẫu, tài liệu và khung dây để tạo thiết kế trang web tương tác. |
12. | Hype 2 Hype 2 cung cấp: Cách dễ dàng nhất để Tạo hoạt ảnh và thêm tính tương tác, Tăng độ cứng cho sức mạnh của HTML5, Khả năng phản hồi trên thiết bị di động và các tính năng WYSIWYG. |
13. | Image Alpha Công cụ này giúp giảm kích thước tệp của tệp PNG 24 bit. Nó làm như vậy bằng cách áp dụng nén mất dữ liệu và chuyển đổi nó sang định dạng PNG8 + alpha hiệu quả hơn. |
14. | Hammer Công cụ này thích hợp cho những người không phải là lập trình viên và chỉ tốt cho các dự án nhỏ. |
15. | JPEGmini Lite Nó là một công cụ tối ưu hóa hình ảnh và hỗ trợ chụp ảnh ở bất kỳ độ phân giải nào lên đến 28 Megapixel. |
16. | BugHerd Công cụ này giúp xem các dự án đang diễn ra như thế nào và mọi người đang làm gì. Nó cũng giúp xác định các vấn đề trong quá trình phát triển. |
Giải phẫu trang web
Một trang web bao gồm các thành phần sau:
Chứa khối
Containercó thể ở dạng thẻ body của trang, một thẻ chứa tất cả các div. Nếu không có vùng chứa sẽ không có chỗ để đặt nội dung của một trang web.
Logo
Logo đề cập đến danh tính của một trang web và được sử dụng trên các hình thức tiếp thị khác nhau của công ty như danh thiếp, giấy tiêu đề, tờ rơi quảng cáo, v.v.
Điều hướng
Của trang web navigation systemnên dễ tìm và sử dụng. Thường thì anvigation được đặt ở đầu trang.
Nội dung
Nội dung trên trang web phải phù hợp với mục đích của trang web.
Chân trang
Footernằm ở cuối trang. Nó thường chứa bản quyền, hợp đồng và thông tin pháp lý cũng như ít liên kết đến các phần chính của trang web.
Khoảng trắng
Nó còn được gọi là negative space và đề cập đến bất kỳ khu vực nào của trang không được bao phủ bởi loại hoặc hình ảnh minh họa.
Lỗi thiết kế web
Một người cần lưu ý những sai lầm phổ biến sau đây cần luôn ghi nhớ:
Trang web không hoạt động trong bất kỳ trình duyệt nào khác trình khám phá internet khác.
Sử dụng công nghệ tiên tiến mà không có lý do chính đáng
Âm thanh hoặc video tự động bắt đầu
Điều hướng ẩn hoặc ngụy trang
100% nội dung flash.