Nếu bạn muốn thiết kế và tạo các trang web, quá trình này sẽ dễ dàng hơn nhiều nếu bạn có kế hoạch trước. Trong giai đoạn lập kế hoạch, nhà thiết kế và khách hàng có thể làm việc cùng nhau để tìm ra định dạng và bố cục phù hợp với nhu cầu của họ. Quá trình lập kế hoạch ảnh hưởng đến phong cách hoặc phong cách của trang web, bạn có thể nói đây là khía cạnh quan trọng nhất trong thiết kế web, đặc biệt nếu nó dành cho mục đích kinh doanh.
Bươc chân
Phần 1/4: Tạo cấu trúc cơ bản
Bước 1. Xác định chức năng của trang web
Nếu bạn đang tạo một trang cá nhân, có thể bạn đã biết câu trả lời. Tuy nhiên, nếu bạn đang tạo trang web cho một tổ chức, công ty hoặc cá nhân khác, bạn cần tìm hiểu những gì họ muốn và chức năng của trang web. Mọi thứ bạn chỉ định ở đây sẽ có hiệu lực khi trang web kết thúc.
- Trang web có yêu cầu Mặt tiền cửa hàng không? Có nên nhận xét của người dùng không? Người dùng có cần tạo tài khoản sau này không? Trang web bài viết có định hướng không? Hay định hướng hình ảnh? Tất cả những câu hỏi này và những câu hỏi khác sẽ giúp bạn trong việc thiết kế và thiết kế trang web.
- Quá trình lập kế hoạch này có thể được vẽ thành bản vẽ, đặc biệt nếu nó dành cho một công ty lớn và có nhiều người tham gia vào việc tạo ra dự án này.
Bước 2. Tạo sơ đồ trang web (site map)
Sơ đồ trang web tương tự như sơ đồ dòng, cho biết cách người dùng di chuyển từ trang này sang trang tiếp theo. Bạn không cần một trang web ở giai đoạn này, chỉ cần một luồng khái niệm chung. Bạn có thể sử dụng một chương trình máy tính để tạo sơ đồ hoặc phác thảo của riêng bạn trên giấy. Sử dụng sơ đồ này để chứng minh các khái niệm về sắp xếp thứ bậc và kết nối trang web.
Bước 3. Thử phương pháp soạn thảo thẻ
Một phương pháp phổ biến để phát triển web nhóm là sử dụng một số thẻ để tìm ra kỳ vọng của mọi người. Lấy một số thẻ ghi chú và viết ra nội dung cơ bản của một trang web trên mỗi thẻ. Sắp xếp các thẻ này cùng với nhóm của bạn để tìm ra khái niệm tốt nhất. Phương pháp này phù hợp để sử dụng khi bạn đang cộng tác với những người khác trong việc tạo ra các trang web.
Bước 4. Sử dụng giấy và bảng thông báo, hoặc bảng trắng
Đây là một phương pháp lập kế hoạch ban đầu với ngân sách nhỏ, bạn có thể nhanh chóng xóa hoặc thay đổi nội dung và thay đổi quy trình. Vẽ thiết kế web của bạn trên giấy, sau đó kết nối các giấy bằng chỉ hoặc vẽ các đường trên bảng. Phương pháp này rất thích hợp để sử dụng trong các buổi brainstorming.
Bước 5. Tạo kho nội dung
Trên thực tế, nó có xu hướng thích hợp hơn để sử dụng trong việc thiết kế lại các trang web hơn là trong các thiết kế web mới. Chèn từng phần nội dung hoặc trang web đã hoàn thành vào bảng tính. Ghi lại mục đích của từng phần nội dung hoặc trang, sử dụng danh sách này để xác định những gì cần xóa và những gì cần giữ lại. Bạn có thể đơn giản hóa cấu trúc của web và đơn giản hóa quá trình thiết kế lại sau này.
Phần 2/4: Tạo Đề cương HTML Cơ bản
Bước 1. Tạo khung dây để thiết lập hệ thống phân cấp trang web
Mẫu HTML cơ bản là bản thiết kế của trang web bạn sẽ xây dựng, chỉ sử dụng các thẻ và nội dung mẫu (khối / mẫu) cơ bản nhất. Khung này trả lời câu hỏi, "Cái gì hiển thị trên web và ở đâu?" Định dạng và tạo kiểu không bắt buộc khi tạo phác thảo này.
- Bạn có thể xem cấu trúc và sơ đồ luồng của nội dung với đường viền cơ bản trước khi chọn cài đặt kiểu.
- Các mẫu HTML cơ bản không tĩnh như PDF hoặc hình ảnh, bạn có thể lướt nhanh qua nội dung mẫu để tạo cấu trúc mới.
- Khung cơ sở có tính tương tác, mang lại lợi ích cho cả nhà phát triển web và khách hàng. Vì khung cơ bản này được viết bằng mã HTML đơn giản, bạn vẫn có thể điều hướng nó và biết cách chuyển trang web hoạt động. Điều này không thể được thực hiện với PDF.
Bước 2. Hãy thử phương pháp Hộp xám
Chặn hoặc đánh dấu nội dung trang web của bạn trong Hộp Xám, nội dung quan trọng nhất nằm ở trên cùng. Sắp xếp nội dung trong một cột. Ví dụ: nếu trang là “Giới thiệu về Công ty” thì thông tin chi tiết về công ty sẽ ở trên cùng, tiếp theo là danh sách nhân viên, sau đó là thông tin liên hệ, v.v.
Điều này không bao gồm đầu trang và chân trang. Hộp Xám là hình ảnh đại diện cho nội dung sẽ xuất hiện trên web
Bước 3. Hãy thử một chương trình xây dựng dàn bài cơ bản
Có nhiều chương trình khác nhau mà bạn có thể sử dụng trong quá trình tạo một khuôn khổ web cơ bản. Số lượng mã lập trình web (ngôn ngữ) bạn phải thành thạo là khác nhau đối với mỗi chương trình. Một số chương trình khá phổ biến bao gồm:
- Phòng thí nghiệm Hoa văn. Trang web này dành riêng cho “thiết kế nguyên tử”, mỗi nội dung được coi là một “phân tử” tạo nên một trang web lớn hơn.
- Áo liền quần. Trang web này cung cấp các dịch vụ lập kế hoạch và lập khung dựa trên web. Các trang web này được trả phí và yêu cầu đăng ký, nhưng bạn có thể xây dựng các khuôn khổ web một cách nhanh chóng mà không cần phải thông thạo nhiều mã lập trình web.
- Dây điện. Wirefy là một trang web khác cung cấp "thiết kế nguyên tử". Các nhà phát triển web có thể tải công cụ này miễn phí.
Bước 4. Sử dụng đánh dấu HTML đơn giản
Một mẫu cơ bản tốt sẽ dễ dàng chuyển đổi sang trang web gốc. Đừng suy nghĩ quá nhiều về việc tạo kiểu web trong quá trình tạo mẫu này. Sử dụng đánh dấu có thể dễ hiểu và dễ thay đổi.
Một khung cơ bản đơn giản sẽ tốt hơn nhiều. Mục đích của việc tạo đánh dấu là để xây dựng một cấu trúc. Hình thức trực quan có thể được điều chỉnh sau này với CSS và đánh dấu nâng cao
Bước 5. Tạo một phác thảo cơ bản cho mỗi trang web
Bạn có thể bị cám dỗ để đánh đồng mọi trang web với một phác thảo cơ bản. Trên thực tế, điều này sẽ chỉ làm cho trang web của bạn trở nên đơn giản và nhàm chán. Tạo một phác thảo khác nhau cho mỗi trang, bạn sẽ hiểu rằng mỗi trang cần thiết kế riêng.
Phần 3/4: Tạo nội dung
Bước 1. Chuẩn bị nội dung trước khi tạo trang web
Bạn sẽ thấy dễ dàng hơn khi xem trước chế độ xem web của mình nếu bạn đã có nội dung thực tế thay vì sử dụng mẫu hoặc trình giữ chỗ. Bạn không cần phải có quá nhiều nội dung, nhưng mockup của bạn sẽ trông đẹp hơn nhiều nếu bạn sử dụng bản sao của ảnh gốc.
Bạn không cần phải có tất cả các tài liệu của bài báo, nhưng ít nhất nó phải có một tiêu đề thực tế
Bước 2. Hãy nhớ rằng nội dung tuyệt vời không chỉ là văn bản
Internet phức tạp hơn nhiều so với một trang web văn bản đơn giản. Bạn cần có nhiều loại nội dung khác nhau để tạo ra một trang web tuyệt vời để thu hút và mời khách truy cập. Ví dụ:
- Bức ảnh.
- Tiếng nói.
- Các video.
- Truyền qua web hoặc dòng web (Twitter)
- Tích hợp Facebook
- RSS
- Nguồn cấp dữ liệu web
Bước 3. Nhờ một nhiếp ảnh gia chuyên nghiệp giúp đỡ
Nếu bạn muốn đưa ảnh vào trang web của mình, ấn tượng đầu tiên bạn nhận được từ trang web của mình sẽ tốt hơn nhiều nếu nó chứa đầy những bức ảnh chuyên nghiệp. Một bức ảnh tốt có giá trị hơn hai mươi bức ảnh chất lượng thấp.
Tìm kiếm một sinh viên mới tốt nghiệp về nghệ thuật nhiếp ảnh là một giải pháp rẻ hơn so với một nhiếp ảnh gia chuyên nghiệp đã kinh doanh lâu năm
Bước 4. Viết bài chất lượng
Nội dung bằng văn bản trên trang web sẽ quyết định lượng truy cập web của bạn. Mặc dù bạn không phải lo lắng quá nhiều về việc tạo nội dung trong quá trình thiết kế này, nhưng bạn không cần phải bắt đầu suy nghĩ về nó vì bạn cũng sẽ cần nội dung thường xuyên khi trang web của bạn bắt đầu và chạy.
Ngoài nội dung bài viết, có tài liệu viết mà bạn cũng cần phải có trong quá trình biên dịch một trang web. Ví dụ: thông tin liên hệ, tên công ty hoặc bất kỳ thứ gì khác sẽ được sử dụng nhiều lần trên trang web
Phần 4/4: Chuyển khái niệm thành trang web
Bước 1. Sắp xếp các yếu tố cơ bản
Sự sắp xếp các phần tử này áp dụng cho mọi trang trên trang web của bạn, chẳng hạn như tiêu đề, chú thích cuối trang và menu điều hướng. Thiết lập nó theo một phong cách rất đơn giản để bạn có thể kiểm tra tất cả các trang trông như thế nào. Điều này đặc biệt hữu ích khi bạn tiến hành quá trình bố trí web.
Đừng quá lo lắng về chi tiết, hãy thử xem trước (preview) phần header như thế nào
Bước 2. Tạo một bố cục đơn giản
Bắt đầu bằng cách chuyển vị trí đồng hồ từ cột phác thảo cơ sở đến vị trí thực tế trên trang. Ví dụ: bạn có thể muốn di chuyển menu điều hướng mẫu sang bên trái của trang và danh sách các dòng tiêu đề ở bên phải.
Tiếp tục thử nghiệm với bố cục web cho nhiều trang, trước khi bạn chuyển sang bước tiếp theo. Cho phép người khác nhìn vào nó để xem liệu bố cục bạn tạo có cảm thấy sống động hay không
Bước 3. Tạo một mô hình
Sử dụng một chương trình như Photoshop để tạo mô hình hoặc các trang mẫu trên trang web của bạn. Sử dụng bố cục bạn đã biên soạn làm hướng dẫn. Bạn có thể tạo mô hình nhanh hơn và nhận được kết quả mong muốn bằng một chương trình xử lý hình ảnh. Kết quả của những hình ảnh này sau này có thể được sử dụng làm tài liệu tham khảo trong quá trình viết mã lập trình web.
Đưa nội dung thực tế vào mô hình để làm cho nó trông đẹp
Bước 4. Thay thế khái niệm mẫu bằng nội dung ban đầu
Thêm nội dung và các yếu tố vào trang web. Đừng lo lắng về cài đặt kiểu web ngay bây giờ, chỉ cần xếp mọi thứ vào đúng vị trí. Điều này sẽ giúp bạn xem lại các thay đổi kiểu web mà bạn thực hiện sau này.
Bước 5. Tạo hướng dẫn kiểu web
Điều rất quan trọng là phải duy trì sự kết hợp của nhiều kiểu, đặc biệt là đối với các trang web lớn. Nếu trang web dành cho mục đích kinh doanh và đã có thương hiệu hoặc phong cách riêng, điều này nên được tích hợp vào thiết kế trang web. Những điều cần cân nhắc khi tạo hướng dẫn kiểu trang web:
- dẫn đường
- Ghi chú đầu
- Đoạn văn
- Ký tự nghiêng
- Ký tự in đậm
- Liên kết (hoạt động, không hoạt động, di chuột)
- Sử dụng hình ảnh
- Biểu tượng
- Nút vặn
- danh sách
Bước 6. Áp dụng kiểu web
Một khi bạn tìm thấy phong cách và thiết kế phù hợp, hãy thực hiện nó. CSS là một trong những cách dễ nhất để triển khai các kiểu trên một trang web hoặc trên toàn bộ trang web. Xem hướng dẫn sau để hiểu rõ hơn về chi tiết sử dụng CSS.
