Nếu cách tiếp cận của bạn đối với thiết kế WordPress là chọn một chủ đề hiện có cho dự án của bạn và điều chỉnh nó theo ý thích của khách hàng, thì bài viết này không dành cho bạn.
Tuy nhiên, nếu trước tiên bạn chuẩn bị các thiết kế web tùy chỉnh (ví dụ như Photoshop hoặc Sketch) và sau đó xây dựng các trang web dưới dạng các chủ đề WordPress tùy chỉnh, tôi có một số thông tin chi tiết để chia sẻ.
Thiết kế hay không thiết kế
Tại sao tôi đề cập đến vấn đề này trong một hướng dẫn thiết kế WordPress? Chà, khá phổ biến đối với các Agency nhỏ đó là “thiết kế với code”. Điều đó có nghĩa là họ bỏ qua công cụ thiết kế và chỉ viết code cho trang web khi họ hình dung thiết kế trong đầu.
Không có gì đáng ngạc nhiên, vì thường thì một đại lý kỹ thuật số được thành lập bởi một người:
- biết cách viết mã HTML và CSS,
- có cảm giác khá tốt với thiết kế và
- biết cách bán hàng.
Với thiết kế không phải là kỹ năng chính, việc chuẩn bị một hồ sơ thiết kế có vẻ như lãng phí thời gian. Tại sao không cắt giảm theo đuổi và chỉ phát triển trang chủ để khách hàng có thể dùng thử ngay lập tức?
Có ba lý do chính tại sao bạn nên xem xét tách hai hoạt động thiết kế và phát triển. Lưu ý: nếu bạn muốn so sánh bằng cách sử dụng chủ đề cao cấp hoặc chủ đề tùy chỉnh như đã đề cập trong phần giới thiệu.
Lý do thứ nhất
Lý do đầu tiên là tận dụng tối đa quyền tự do thiết kế do một công cụ thiết kế mang lại. Trong Photoshop, bạn có thể di chuyển xung quanh các lớp của mình và thử nghiệm với nhiều khái niệm thiết kế trong thời gian ngắn. Điều đó sẽ dẫn đến một thiết kế thú vị hơn và các khái niệm tốt hơn.
Nếu một thứ gì đó mất thêm 30 phút để viết mã, bạn có thể không khám phá nó như một tùy chọn ngay cả khi bạn đang “thiết kế với code”.
Lý do thứ hai
Lý do thứ hai là nó cho phép bạn thuê các chuyên gia trong cả thiết kế và mã hóa. Có thể bạn biết cả hai, nhưng tìm một người khác bằng cách nào đó có thể thông thạo cả hai bộ kỹ năng là rất khó. Tin tôi đi, tôi đã nói chuyện với nhiều đại lý nhưng không tìm thấy.
Thay vào đó, bạn thuê những nhà thiết kế chuyên nghiệp và dành toàn bộ thời gian để học hỏi để tạo ra những thiết kế tốt hơn nữa. Và, bạn thuê những nhà phát triển biết mọi thứ về mã hóa trang web (hoặc để chúng tôi viết mã cho bạn).
Lý do thứ ba
Lý do thứ ba là bạn sẽ tiết kiệm thời gian trong giai đoạn phản hồi với khách hàng của mình. Khó tìm thấy những khách hàng hài lòng với lần lặp lại thiết kế đầu tiên như nhà thiết kế + nhà phát triển. Họ tồn tại, nhưng không xây dựng doanh nghiệp của bạn xung quanh họ.
Với các tệp thiết kế, bạn có thể nhanh chóng thay đổi giao diện nếu khách hàng của bạn có phản hồi mà không cần phải thay đổi bất kỳ mã nào. Bạn tiết kiệm thời gian và tránh bị mắc kẹt trong một vòng thay đổi thiết kế muộn nếu bạn chỉ tiến hành phát triển sau khi thiết kế được khách hàng của bạn chấp thuận.
Nếu khách hàng của bạn đến với yêu cầu thay đổi thiết kế muộn, bạn có cơ hội vàng để tính phí họ cho công việc đó vì bạn đã đồng ý về các thiết kế. Đó là một cách tuyệt vời để giữ giá cả công bằng và hợp lý.
Bạn cần thiết kế những trang nào?
Các đối tác của chúng tôi thường mang đến cho chúng tôi các mẫu thiết kế cho 5-10 trang. Trang web có thể có hàng trăm trang khi hoạt động, nhưng bạn chỉ cần thiết kế mỗi mẫu duy nhất.
Nếu đại lý của bạn chuyên về UI / UX và khách hàng của bạn sẵn sàng trả tiền cho luồng khách truy cập phù hợp, bạn sẽ tạo nhiều mẫu hơn phù hợp với nhu cầu của từng phần nội dung.
Tuy nhiên, hầu hết khách hàng không sẵn sàng trả tiền cho dịch vụ bổ sung đó. Điều đó có nghĩa là bạn cần phải thông minh về cách tạo các mẫu của mình để làm cho chúng đa chức năng.
Bộ mẫu tối thiểu thường là:
- Trang chủ (trang đích hấp dẫn)
- Trang nội bộ (cho tất cả các nội dung thông tin khác)
- Trang liên hệ với chúng tôi (chuyển đổi khách truy cập của bạn bằng một biểu mẫu, thường cũng bao gồm một bản đồ tương tác)
Bộ thông tin
Mẫu trang nội bộ có xu hướng khá chung chung và không cho phép bạn bao gồm các phòng trưng bày và trường tùy chỉnh trừ khi bạn muốn tất cả các trang bên trong đều có chúng.
Do đó, có thể bạn cũng sẽ muốn thiết kế các trang sau:
- Trang tổng quan về dịch vụ (hiển thị các dịch vụ của bạn một cách hấp dẫn, có thể với lời gọi hành động tùy chỉnh)
- Trang giới thiệu về chúng tôi (thư viện nhóm và thông tin về công ty)
Sau đó, bạn có thể muốn mỗi dịch vụ có một trang riêng biệt. Vì vậy, bạn có trang tổng quan về dịch vụ như một thư viện các dịch vụ và nếu bạn nhấp vào một trong số chúng, bạn sẽ đến:
Bộ thương mại điện tử
Đối với hầu hết các trang web giới thiệu, điều đó sẽ bao gồm nó. Nếu bạn đang thiết kế cho một trang web Thương mại điện tử, thì bạn cũng cần thiết kế các mẫu trang sau:
- Trang danh mục sản phẩm
- Trang sản phẩm riêng lẻ
- Trang thanh toán
Tôi đã phải đưa ra một số ví dụ để minh họa ba thiết kế mẫu trang này vì chúng tôi không có webshop trên trang web của riêng mình.
Bộ blog
Nếu trang web của bạn cũng phải chứa một blog, thì bạn cần các mẫu cho cả trang tổng quan blog và trang bài đăng trên blog :
Các phần có thể sử dụng lại
Chúng ta đã nói về cách sử dụng lại các mẫu trang giữa các trang nội dung khác nhau, nhưng cũng có thể sử dụng lại các phần của một trang trên các mẫu trang khác nhau.
Nếu chúng ta lấy phần mô tả khả năng của mình làm ví dụ, thì có thể mã hóa phần đó theo nhiều cách khác nhau.
Phần tĩnh
Nó có thể được mã hóa tĩnh, vì vậy bạn cần một nhà phát triển đi vào mã nếu bạn muốn thực hiện các thay đổi đối với bản sao. Sau đó, nó cũng sẽ dành riêng cho trang đó.
Khối động
Một cách khác là viết mã nó dưới dạng một khối nội dung động chỉ cho mẫu trang cụ thể đó. Sau đó, bạn có thể thay đổi các biểu tượng và văn bản, thêm các tính năng và xóa chúng theo ý muốn.
Trên một trang khác sử dụng cùng một mẫu, có thể những mẫu đó sẽ được sử dụng để hiển thị danh mục đầu tư của bạn, nhưng với cùng một bố cục.
Phần toàn cầu
Cách thứ ba để làm điều đó là tạo một phần chung cho chủ đề và nơi các mẫu trang chỉ cần nhập nội dung của nó. Sau đó, bạn sẽ có cùng một phần với cùng một nội dung trên tất cả các trang bao gồm nó.
Nếu bạn cập nhật một trong các khối nội dung trong cài đặt chủ đề, nội dung đó sẽ được cập nhật ngay lập tức trên tất cả các trang chứa khối này.
Tùy chọn cuối cùng này đặc biệt hữu ích nếu bạn có nhiều trang giống nhau và bạn biết rằng nội dung này phải giống nhau trên tất cả chúng. Nếu không, bạn phải truy cập và cập nhật tất cả các trang chứa nội dung đó.
Các khía cạnh của thiết kế thúc đẩy thời gian phát triển
Chúng tôi đã trích dẫn hơn 2000 thiết kế WordPress để ước tính mất bao lâu để phát triển thành các trang WordPress tùy chỉnh. Độ chính xác của chúng tôi đã tăng lên trong những năm qua, nhưng nó thực sự rất nhất quán trong một thời gian dài. Vậy “những người bình chọn” của chúng tôi tìm kiếm điều gì trong các thiết kế?
Số lượng mẫu trang
Trước hết, số lượng mẫu trang cần được đếm. Việc thiết lập hai trang trên cùng một mẫu mất ít thời gian, nhưng mỗi mẫu cần được mã hóa tùy chỉnh. Thông thường, một mẫu trang mất khoảng 2-8 giờ để viết mã và bạn có thể thêm 4 giờ cho đầu trang và chân trang.
Các trang đích một trang đơn giản nhất sẽ mất tổng cộng 8-10 giờ cho trang chủ bao gồm đầu trang và chân trang, và thiết lập chung của chủ đề. Thêm một mẫu bốn trang khác, mỗi trang 2-4 giờ và bạn có tới 20h thời gian phát triển.
Độ dài trang
Khía cạnh thứ hai của các thiết kế là một trang có bao nhiêu phần. Như đã mô tả ở trên, một trang có thể mất 2-8 giờ và nó thường phụ thuộc vào số lượng phần cần được mã hóa. Nếu bạn có một trang web dạng dài với tất cả nội dung trên một trang chủ dài, thì có thể bạn đang xem chỉ 16h cho trang đó.
Nội dung di chuyển
Ngay cả khi việc thiết lập các trang riêng lẻ dựa trên các trang hiện có khá nhanh, việc di chuyển nội dung vẫn cần được tính đến. Nó giống như một dự án hơn là một thiết kế, nhưng vẫn còn đáng nói.
Nếu bạn đang làm việc với SEO cho khách hàng của mình, có thể bạn có HÀNG TẤN trang cần được tạo hoặc di chuyển từ một trang hiện có và tất cả đều cộng lại. Khi chúng tôi xây dựng các trang web, chúng tôi bao gồm 10 trang di chuyển nội dung miễn phí và trích dẫn các trang bổ sung một cách riêng biệt.
Chức năng bổ sung
Một trong những động lực chính của thời gian phát triển là chức năng bổ sung. Chỉ cần đặt hình ảnh và văn bản trên trang là rất dễ hiểu. Nhưng bất cứ khi nào bạn bao gồm thanh trượt, biểu mẫu, hoạt ảnh hoặc thậm chí là hệ thống đặt chỗ hoặc thương mại điện tử, bạn có thể tin tưởng vào việc có thêm giờ vào thời gian phát triển.
Chế độ xem tùy chỉnh trên thiết bị di động
Nếu trang web bạn đang thiết kế nhằm mục đích sử dụng chủ yếu trên thiết bị di động (hãy nghĩ đến thợ khóa), thì bạn có thể muốn có thêm quyền kiểm soát đối với chế độ xem trên thiết bị di động trên các trang của mình.
Phát triển trang web bằng cách sử dụng lưới và khả năng đáp ứng đã được tích hợp sẵn trong khuôn khổ CSS (như Foundation hoặc Bootstrap) đảm bảo rằng trang web của bạn trông đẹp trên thiết bị di động theo mặc định. Hoặc ít nhất là với một vài chỉnh sửa. Trên một trang web khá phức tạp, có thể mất thêm 8-16 giờ phát triển để làm cho chúng hoạt động bình thường, trong khi trên các trang web đơn giản thì chỉ mất vài giờ.
Tuy nhiên, đôi khi bạn muốn các thiết kế dành cho thiết bị di động khác một chút so với phiên bản dành cho máy tính để bàn và sau đó, bạn cũng có thể chuẩn bị các tệp thiết kế cho các định dạng này. Những thứ này sẽ đòi hỏi thêm thời gian phát triển, có thể là thêm 10-25% trên tổng số cho trang web.
Thiết kế đáp ứng
Trong khi chúng ta đã nói về chủ đề chế độ xem trên thiết bị di động, chúng ta hãy tìm hiểu điều gì tạo nên một thiết kế đáp ứng tốt. Trích dẫn Wikipedia : “Thiết kế web đáp ứng (RWD) là một cách tiếp cận thiết kế web giúp các trang web hiển thị tốt trên nhiều loại thiết bị và kích thước cửa sổ hoặc màn hình”.
Designmodo đã thu thập một số ví dụ về cách các thiết kế có thể trông ở chế độ máy tính để bàn và thiết bị di động, cho thấy việc sử dụng hiệu quả lưới cột và các phần có thể chia tỷ lệ hoặc gấp lại bên dưới nhau.
Hiểu lưới cột là chìa khóa để thiết kế các trang web WordPress đáp ứng nhanh. w3schools có một bài viết giúp bạn có được ý tưởng nếu bạn là người mới làm quen với khái niệm này. Tôi đã hỏi một trong những nhà phát triển WordPress cấp cao của chúng tôi đâu là cách tốt nhất để một nhà thiết kế đơn giản hóa công việc của mình và câu trả lời đầu tiên của anh ấy là “sử dụng lưới cột”.
Phổ biến nhất được sử dụng là 12 cột và để định vị và đặt kích thước cho các phần tử của bạn, bạn nên cố gắng bám vào lưới có 12 cột. Google để biết “cách thiết lập lưới đáp ứng trong photoshop” hoặc chỉ cần xem phần trợ giúp của Adobe nếu bạn muốn tìm hiểu cách thực hiện.
Hãy thử nghĩ về nội dung theo cách nó chiếm các hàng và cột khi bạn thiết kế, như trong ví dụ của w3schools , vì đó là cách nhà phát triển của bạn sẽ nhìn thấy các thiết kế.
Chỉ định phông chữ và màu sắc
Một cách tuyệt vời khác để đơn giản hóa cho nhà phát triển của bạn là làm cho thiết kế trang nội thất giữ nguyên các nguyên tắc về kiểu chữ và màu sắc mà bạn đang tìm kiếm. Cũng giống như trong tài liệu văn bản thông thường, việc xác định kiểu đoạn văn và sau đó áp dụng những kiểu đó vào văn bản của bạn sẽ dễ dàng hơn là đặt cho mỗi dòng tiêu đề một kích thước phông chữ, kiểu chữ và trang trí tùy chỉnh (ví dụ: In đậm).
Hiển thị cách bạn muốn các thẻ, liên kết và hiệu ứng di chuột chuẩn h1, h2, h3 trông như thế nào trên trang web của bạn dưới dạng mặc định. Sau đó, bám sát những phong cách đó trên khắp các trang mà bạn thiết kế. Nó không chỉ giúp các trang web của khách hàng của bạn nhất quán hơn với các nguyên tắc thương hiệu của họ mà còn giúp cuộc sống của bạn và nhà phát triển của bạn trở nên dễ dàng hơn.
Ảnh động
Nhiều trang web ngày nay sử dụng hình ảnh động để mang lại trải nghiệm sống động cho khách truy cập của họ. Đó là một lý lẽ phổ biến để chọn một chủ đề cao cấp, vì họ thường sử dụng nhiều hình ảnh động. Một số khách hàng yêu thích hình ảnh động và không thể bỏ qua.
Thật không dễ dàng để chỉ định hoạt động sẽ hoạt động như thế nào khi tạo thiết kế tùy chỉnh trong Photoshop hoặc Sketch. Tuy nhiên, cũng có những giải pháp cho điều đó.
Bạn sẽ tìm thấy thư viện các hoạt ảnh được đặt tên nếu bạn tìm kiếm nó mà bạn có thể sử dụng làm tài liệu tham khảo trong các thiết kế hoặc trong một bản tóm tắt dự án riêng cho nhà phát triển.
Các mẹo và thủ thuật bổ sung
Để hoàn thiện các nguyên tắc thiết kế WordPress này, tôi muốn đưa ra ba lời khuyên bổ sung. Đây là những cách thông minh để thể hiện ý định thiết kế của bạn ngay trong tệp thiết kế để tránh phải đưa ra các chỉnh sửa cho nhà phát triển sau khi nó được xây dựng.
- Chuẩn bị cho những thái cực. Nếu bạn đang thiết kế một trang nhóm hiển thị bốn thành viên trong mỗi hàng, thì hãy thiết kế hiển thị trang sẽ trông như thế nào với 5 hoặc 7 thành viên trong nhóm. Hiển thị một thành viên trong nhóm không có ảnh hồ sơ để đặt hình đại diện mặc định. Sử dụng tên dài để chỉ ra cách chia chúng thành hàng nếu cần.
- Hiển thị những gì các hiệu ứng di chuột phải là. Một cách là chèn các lớp ẩn có tên “hover” trong tệp thiết kế của bạn. Cách khác là thêm con trỏ vào thiết kế trỏ đến một trong các đối tượng trong bộ lặp (ví dụ: ảnh thành viên trong nhóm) với các hiệu ứng di chuột được kích hoạt.
- Nhận xét về thiết kế của bạn. Sử dụng Invision hoặc MarvelApp để giải thích các yếu tố thiết kế và cộng tác trong nhóm của bạn xung quanh phản hồi về mockups của bạn.
Phần kết luận
Chúng tôi muốn các nhà thiết kế web có quyền tự do chuẩn bị các thiết kế tùy chỉnh cho khách hàng của họ. Chúng tôi cũng muốn các đại lý của họ thành công và hiệu quả cao hơn sẽ mang lại lợi ích cho cả chính họ và khách hàng của họ.
Hướng dẫn này trình bày một bộ sưu tập các phương pháp hay nhất mà chúng tôi đã học được qua nhiều năm khi làm việc với nhiều đại lý và xem rất nhiều thiết kế web. Còn nhiều hơn thế nữa đối với giao dịch, nhưng đây là ba điểm rút ra chính:
- Tách biệt các vai trò của nhà thiết kế và nhà phát triển nếu bạn có cơ hội
- Bám vào lưới cột bất cứ khi nào bạn có thể trên các thiết kế
- Tận dụng tối đa các mẫu trang và kiểu tiêu đề để sử dụng lại chúng bất cứ khi nào có thể. Nó tiết kiệm thời gian của bạn, thời gian của nhà phát triển của bạn và làm cho trang web trông gắn kết với thương hiệu của khách hàng của bạn.
Nếu đại lý của bạn có thể sử dụng một số trợ giúp để chuyển đổi các thiết kế tùy chỉnh của bạn thành các trang web WordPress, hãy liên hệ với chúng tôi qua biểu mẫu của chúng tôi hoặc gọi cho chúng tôi. Đó là những gì chúng tôi đang kinh doanh và hoan nghênh cơ hội giúp đại lý của bạn phát triển.
