NộI Dung
- Một phương pháp đáp ứng
- Làm cách nào để tôi lưu giữ nội dung trước tiên?
- Tại sao?
- 01. Xác định mục tiêu kinh doanh và người dùng của bạn
- 02. Tham khảo chúng mỗi khi bạn có cơ hội
- 03. Đừng ngại lùi bước
- 04. Thúc đẩy đội của riêng bạn quá
- 05. Xác định trước tất cả các nhu cầu nội dung của bạn
- Làm cách nào để tóm tắt nội dung từ bản trình bày?
- Chúng ta cần ngừng suy nghĩ về nội dung về bố cục
- Buộc khách hàng của bạn lập kế hoạch nội dung của họ độc lập với thiết kế
- Hoàn thiện nội dung của bạn trước khi thiết kế
- Sử dụng nội dung thực - mọi lúc
- Vậy làm thế nào để wireframe hoạt động cho các dự án thiết kế đáp ứng?
- Phác thảo
- Khung trong trình duyệt
- Chú thích
- Sử dụng nội dung thực trong khung dây
- Làm cách nào để thiết kế cho màn hình nhỏ trước tiên?
- Thiết kế trừu tượng từ các thiết bị khi bắt đầu
- Sử dụng gạch kiểu
- Tạo sự hài hòa về giao diện
- Xem mọi thứ trong trình duyệt
- Tạo sự cân bằng với các chương trình tĩnh
- Phần kết luận
Hãy nói rõ: thiết kế chỉ là giải pháp nếu nó tập trung vào các vấn đề sâu hơn, lý do đằng sau mọi thứ. Một quy trình vững chắc luôn định hướng cho công việc của chúng ta, nhưng chúng ta cần nắm lấy một thứ gì đó linh hoạt hơn. Phương tiện của chúng tôi cuối cùng đã tự chứng minh là linh hoạt, vậy quy trình của chúng tôi có nên không? Hãy nghĩ về thiết kế hệ thống: bạn cần nhìn thấy cả bức tranh toàn cảnh và các chi tiết nhỏ. Không thể nào? Cách xa nó!
Frank Chimero đã thể hiện nó một cách tuyệt vời trong cuốn sách The Shape of Design của mình: “Có một phần mà nghệ sĩ lùi lại khỏi giá vẽ để có được cái nhìn mới về tác phẩm. Tranh xa gần bằng nhau: lúc gần, người họa sĩ chăm chỉ làm nên dấu ấn của mình; khi cho đến nay, anh ta đánh giá tác phẩm để phân tích những phẩm chất của nó. Anh ấy lùi lại để công việc nói với anh ấy ”.
Chúng ta cần để công việc của chúng ta, phương tiện của chúng ta, nói với chúng ta. Với sự gia tăng của thiết kế đáp ứng, chúng tôi cuối cùng đã nắm bắt được phương tiện của mình như nó vốn có: chất lỏng. Đây là thời điểm tuyệt vời để lùi lại và đánh giá công việc, phân tích và nắm bắt một cách làm mới, một quy trình mới. Đã qua rồi thời của những mô phỏng tĩnh và những nhà thiết kế web không hiểu mã. Đã đến lúc cho một quá trình đáp ứng.
Một phương pháp đáp ứng
Chúng tôi sẽ đưa ra bí quyết quan trọng cho một quy trình vững chắc ngay ở phần đầu của bài viết này. Bởi vì chúng ta điên cuồng như vậy. Sẵn sàng? Một quy trình đáp ứng là một quy trình có trách nhiệm. Mơ hồ? Có lẽ. Ngớ ngẩn? Không. Giống như phong trào tiêu chuẩn web trước đó, thiết kế đáp ứng đang thúc đẩy web tiến lên với các phương pháp thân thiện với tương lai.
Giống như bất kỳ quy trình thiết kế nào, nó phải tập trung vào 'lý do tại sao' đằng sau tất cả. Vậy tại sao các trang web tồn tại? Để cung cấp nội dung. Đó có thể là dựa trên nhiệm vụ, xã hội, thông tin… điều đó không quan trọng. Tất cả bắt đầu từ vấn đề này: bắt đầu với lý do tại sao, nội dung có cấu trúc tốt và các tương tác quan trọng.
Đây là những câu hỏi chúng tôi thường nghe nhất về quy trình thiết kế đáp ứng của chúng tôi.
Làm cách nào để tôi lưu giữ nội dung trước tiên?
Tất cả chúng ta đều rất lạc quan khi bắt đầu một dự án. “Nội dung đầu tiên!” chúng tôi nói. “Mục tiêu của người dùng! Hãy nhớ điều quan trọng! ” Đúng rồi. Nhưng nó có nghĩa gì? Làm cách nào để bạn triển khai quy trình ưu tiên nội dung?
Ngay cả khi bạn biết (hoặc nghĩ rằng bạn biết), rất dễ bị quên khi một dự án đang tiến triển. Các dự án dài hạn có xu hướng kéo dài liên tục (và tiếp tục… và tiếp tục…). Chúng tôi ngừng suy nghĩ về lý do tại sao và bắt đầu tập trung vào cách làm. Chúng tôi tự đánh lừa mình khi nghĩ rằng các dự án của chúng tôi có thể được chia thành các giai đoạn ‘khám phá’ và ‘phát triển’ riêng biệt và có thể tồn tại độc lập.
Sự thật là, chúng ta phải liên tục hỏi tại sao, mọi lúc. Bất kể bạn nghĩ rằng bạn biết bao nhiêu, cho dù bạn đã lập kế hoạch đến đâu - mỗi khi bạn đưa ra quyết định, mỗi lần bạn thiết kế một nút hoặc viết tiêu đề, bạn phải hỏi…
Tại sao?
Tại sao tôi làm điều này? Nó dành cho ai? Nó sẽ giúp khách hàng của tôi đạt được mục tiêu kinh doanh nào? Nó sẽ giúp người dùng của tôi giải quyết nhu cầu gì? Trước tiên, đừng chỉ giữ nội dung. Giữ nguyên lý do đầu tiên.
Điều này làm cho nó âm thanh dễ dàng. Nhưng để làm tốt, bạn sẽ phải thúc đẩy. Thúc đẩy khách hàng và nhóm của bạn xác định lý do của họ trước tiên. Không có Lorem Ipsum, không có ‘chúng ta sẽ đạt được điều đó sau’. Làm bài tập về nhà đi! Tất cả cách làm của bạn cần phải bắt đầu với lý do chắc chắn. Tại Yellow Pencil, điều này có nghĩa là những thay đổi lớn đối với cách chúng tôi quảng cáo chiêu hàng, ước tính, ngân sách và lập kế hoạch cho các dự án. Chúng tôi đã phải thúc đẩy ngân sách và thời gian để thực hiện nghiên cứu, chiến lược và lập kế hoạch vững chắc. Bạn cũng có thể. Nhưng một khi khách hàng và nhóm của bạn nhìn thấy những lợi ích to lớn của việc xác định nhu cầu nội dung từ trước, họ sẽ không bao giờ nhìn lại.
Và nhiệm vụ của chúng tôi là giáo dục họ. (Hãy đọc cuốn sách xuất sắc của Mike Monteiro Thiết kế là một công việc nếu bạn muốn tìm hiểu thêm về cách giao dịch với khách hàng.) Khách hàng có thể gặp khó khăn khi hiểu giá trị của việc thực hiện tất cả những nghiên cứu và làm việc trước đó. Và tại sao họ phải? Cuối cùng họ không nhận được bất cứ thứ gì ‘đã hoàn thành’ - và thường thì họ chỉ nhận được một hóa đơn và một tài liệu Word lớn.
Đó không phải lỗi của họ - đó là lỗi của chúng tôi. Chúng tôi có trách nhiệm phải làm tốt hơn nữa việc thể hiện giá trị đó. Mỗi bước của con đường, chúng ta cần đưa tất cả trở lại lý do quan trọng nhất.
Điều này đặc biệt quan trọng đối với thiết kế đáp ứng. Một trang web đáp ứng không đòi hỏi nhiều nỗ lực phát triển hơn, nhưng nó có nghĩa là phải lập kế hoạch nhiều hơn. Tuy nhiên, thực sự mà nói, chúng tôi đang lên kế hoạch mà lẽ ra phải làm từ đầu. Chứng kiến chu kỳ dự án thiết kế lại ba năm một lần hiện tại. Bạn có muốn tiếp tục làm điều đó không? Chúng tôi chắc chắn là không.
Vì vậy, đây là ba bước để giữ nội dung đầu tiên trong quy trình dự án của bạn.
01. Xác định mục tiêu kinh doanh và người dùng của bạn
Thiết lập danh sách ưu tiên các mục tiêu kinh doanh và người dùng cho dự án của bạn. Người dùng của bạn muốn biết hoặc làm gì nhất? Làm nghiên cứu của bạn. Đưa ra những suy luận sáng suốt, không phải là những phỏng đoán hoang đường. Nhận tất cả các bên liên quan của bạn đồng ý.
02. Tham khảo chúng mỗi khi bạn có cơ hội
Mỗi khi bạn đưa ra quyết định, mỗi khi ai đó đề xuất một tính năng mới hoặc yếu tố thiết kế hoặc trang nội dung, hãy yêu cầu họ ánh xạ yêu cầu tới mục tiêu của người dùng và doanh nghiệp. Tính năng này sẽ đáp ứng nhu cầu thực sự nào? Lý do thực sự là gì? (Gợi ý: "Vì tôi muốn" hoặc "Tôi thực sự thích màu xanh lam" hoặc "mọi người đều trên Facebook" không được tính.)
03. Đừng ngại lùi bước
Đây có thể là một trong những khó khăn. Các mối quan hệ với khách hàng có thể rất tế nhị, và việc từ bỏ cuộc chiến để giành chiến thắng có thể rất hấp dẫn. Nhưng hãy nhớ rằng, tất cả chúng ta đều ở trong vấn đề này cùng nhau! Đó không phải là doanh nghiệp và người dùng; chúng tôi và họ.
Đáp ứng nhu cầu của người dùng là cách tốt nhất để đáp ứng nhu cầu của doanh nghiệp. Bởi vì không có người dùng của chúng tôi, chúng tôi không có doanh nghiệp! Khách hàng (khách hàng tốt) không thuê bạn nói "có" với mọi thứ. Vì vậy, nếu khách hàng của bạn yêu cầu điều gì đó không đáp ứng được mục tiêu của họ hoặc nhu cầu của người dùng, đừng ngại thách thức họ. Đó không phải là về bản ngã. Đó là về việc tạo ra giải pháp tốt nhất có thể.
04. Thúc đẩy đội của riêng bạn quá
Đây cũng có thể là một thách thức khi làm việc trong một nhóm sáng tạo. Việc tách biệt các vai trò - thiết kế trực quan, trải nghiệm người dùng, kiến trúc thông tin, chiến lược nội dung, sản xuất nội dung - có thể dẫn đến thông tin sai lệch. Chúng ta bận rộn, chúng ta quá tải với các email. Thật khó để ở lại với một dự án từ đầu đến cuối, đặc biệt là khi công việc của bạn đã hoàn thành.
Mối quan hệ của nhóm của bạn ít nhất cũng quan trọng như mối quan hệ với khách hàng của bạn. Chúng tôi phải nhắc nhở bản thân về lý do tại sao, cũng như chúng tôi làm với khách hàng của mình. Hợp tác là chìa khóa. Bạn không thể chỉ đơn giản là "thực hiện" một kế hoạch nội dung, khung dây hoặc thiết kế. Càng nhiều càng tốt, chúng tôi phải làm việc chung tay. Thật dễ dàng để 'hoàn thành' một sản phẩm có thể phân phối và chuyển sang một thứ khác. Sẽ khó hơn nhiều để ở lại với một dự án khi tình hình trở nên khó khăn.
Phương pháp tiếp cận thác nước đối với công việc sáng tạo không hiệu quả. Làm việc nhanh nhẹn, hợp tác giữa các thành viên trong nhóm tạo ra kết quả tốt hơn.
05. Xác định trước tất cả các nhu cầu nội dung của bạn
Đây là vấn đề: các trang web đáp ứng mất nhiều thời gian hơn để lập kế hoạch. Chúng tôi không chỉ lập kế hoạch cho một ngữ cảnh duy nhất nữa. Chúng tôi đang lập kế hoạch cho tất cả các bối cảnh mà chúng tôi biết hiện tại và một số ngữ cảnh chưa tồn tại.
Nhưng sẽ mất ít thời gian hơn để lập kế hoạch cho tất cả những sự phức tạp đó so với việc quay lại và trang bị thêm các tính năng và chức năng mà bạn không tính đến. Vì vậy, hãy dành thời gian / công sức / ngân sách. Buộc khách hàng và nhóm của bạn xác định (và cam kết!) Tất cả nội dung của họ trước khi bạn bắt đầu thiết kế. Sử dụng các bảng trang. Sử dụng nội dung có cấu trúc. Chứng minh tương lai nội dung của bạn ngay bây giờ! Hoặc khóc sau.
Làm cách nào để tóm tắt nội dung từ bản trình bày?
Bạn nghe thấy điều này rất nhiều trên toàn cầu internet. Nhưng chờ đã, cái gì? Và chờ đợi - tại sao?
Bởi vì cách trình bày có thể (và sẽ) thay đổi. Cách chúng tôi thiết kế trang web 15 năm trước hầu như không thể nhận ra được so với cách chúng tôi trình bày chúng bây giờ. Nhưng bạn biết điều gì không thay đổi không? Từ ngữ. Chúng tôi vẫn sử dụng ‘em. Internet tồn tại chủ yếu cho nội dung (dựa trên văn bản). Chúng tôi vẫn sử dụng nó để giải quyết các vấn đề về thông tin; để hoàn thành nhiệm vụ. Nhưng nếu nội dung của bạn phụ thuộc vào phương tiện trình bày (trang giới thiệu Flash, có ai không?) Thì rất có khả năng nó sẽ không thể sử dụng được trong một vài năm. Và điều đó thật tệ.
Chúng ta cần ngừng suy nghĩ về nội dung về bố cục
Chúng tôi (với tư cách là một ngành công nghiệp) đã đào tạo khách hàng của mình cách nghĩ về nội dung theo bố cục. “Đặt nó vào thanh bên,” chúng tôi nói. "Điều đó sẽ xuất hiện ở phần chân trang." Dừng lại! Dừng lại. Dừng lại. Đó không phải là về vị trí. Đó là về mức độ ưu tiên. Nội dung quan trọng nhất đối với người dùng của bạn là gì? Vì hãy đoán xem: bố cục thay đổi qua các ngữ cảnh. Ở đó (có thể) sẽ không phải là một thanh bên trên thiết kế màn hình nhỏ của bạn.
Siêu thực đơn khổng lồ mà khách hàng của bạn muốn? Sẽ không bay trên iPhone.
Buộc khách hàng của bạn lập kế hoạch nội dung của họ độc lập với thiết kế
Được rồi, bạn không cần phải ép buộc họ. Khuyến khích họ. Khuyến khích mạnh mẽ. Bảng trang là tuyệt vời cho điều này. Nếu bạn chưa đọc, hãy tiếp tục ngay với Chiến lược nội dung dành cho web của Kristina Halvorson và Melissa Rach để biết thêm thông tin về cách tạo chúng. Sắp xếp chúng theo thứ tự ưu tiên. Không tham chiếu vị trí hoặc bố cục. Điều này sẽ giúp khách hàng của bạn suy nghĩ về nội dung của họ theo cách hiệu quả hơn và cũng sẽ giúp quá trình tạo nội dung diễn ra, trước khi hoàn thiện wireframe hoặc thiết kế.
Hoàn thiện nội dung của bạn trước khi thiết kế
Được rồi, điều này không phải lúc nào cũng có thể thực hiện được. Nhưng bạn càng loại bỏ được nhiều sự không chắc chắn trước khi bắt đầu thiết kế, bạn càng ít phải quay lại và thay đổi mọi thứ sau này.
Sử dụng nội dung thực - mọi lúc
Nếu có thể, hãy sử dụng nội dung chữ hoa - chỉ cho khách hàng của bạn các trang, hình ảnh và menu phức tạp nhất. Điều này sẽ tránh những bất ngờ sau này trong quá trình, khi họ nhìn thấy nội dung lộn xộn nhất của mình trong thành phẩm.
Khung dây chức năng, trong trình duyệt tạo ra một thế giới khác biệt. Cho phép khách hàng của bạn quan sát nội dung của họ di chuyển và thay đổi trên nhiều kích thước màn hình. Chỉ ra điều đó khi bạn trình bày wireframe của mình (bạn đang trình bày trực tiếp, phải không?) Chứng minh cho họ thấy mức độ ưu tiên thông tin của họ được giữ nguyên trên các kích thước màn hình, trong khi bố cục thay đổi.
Vậy làm thế nào để wireframe hoạt động cho các dự án thiết kế đáp ứng?
Chúng tôi tin chắc rằng thiết kế tương tác cho RWD phải được đưa vào trình duyệt một cách nhanh chóng và thường xuyên. Rất khó để tạo một tài liệu tĩnh mô tả mọi thứ. Chắc chắn, chúng tôi có thể tạo một tài liệu thể hiện ba, bốn hoặc năm điểm ngắt, nhưng đó chỉ là một phần nhỏ của câu chuyện. Còn tất cả những khoảnh khắc giữa các điểm ngắt? Điều đó xảy ra trong trình duyệt.
Phác thảo
Tuy nhiên, rất tốt nếu bạn có thể nhanh chóng phác thảo ý tưởng của mình một cách hợp tác. Điều này không cần phải xảy ra trong bất kỳ phương tiện cụ thể nào, nhưng chỉ cần có điều gì đó về bút chì trên giấy. Toàn bộ điểm ở đây là đưa ra các ý tưởng một cách nhanh chóng và lặp đi lặp lại. Chúng tôi thích vẽ phác thảo bất cứ khi nào có thể và thậm chí còn có một ứng dụng cho việc đó: UI Sketcher.
Khung trong trình duyệt
Đây là tấm vé thực sự dành cho chúng tôi. Chúng tôi thích sử dụng lại các mẫu và hệ thống khi trình diễn RWD trong trình duyệt. Tất nhiên, chúng tôi có thể tạo hệ thống của riêng mình từ đầu, nhưng điều đó không giúp ích gì cho chúng tôi hoặc khách hàng của chúng tôi.
Chúng tôi cũng thích sử dụng các khuôn khổ tạo mẫu đáp ứng nhanh như Twitter’s Bootstrap hoặc Zurb’s Foundation. Cá nhân chúng tôi nghiêng về Foundation vì nó phù hợp với quy trình làm việc của chúng tôi. Sẽ thật tuyệt nếu một trong hai thực hiện phương pháp tiếp cận màn hình nhỏ, băng thông thấp, nhưng đó chỉ là cách chúng tôi triển khai.
Chú thích
Chú thích cho khung dây RWD là rất cần thiết nhưng chúng tôi thấy rằng thường bị bỏ qua. Nói to ra: tài liệu, tài liệu, tài liệu! Chúng tôi đã thấy một vài ví dụ về điều này từ bạn bè và cho rằng ban giám khảo vẫn đang tìm ra cách 'tốt nhất' để chú thích đúng cách các khung dây đáp ứng trong trình duyệt. Như đã đề cập ở trên, chúng tôi thường xuyên sử dụng Foundation by Zurb và thích sử dụng tiện ích bổ sung Reveal của nó để hiển thị các chú thích của chúng tôi. Các chú thích này chỉ xuất hiện cho các màn hình lớn hơn và lý tưởng nhất là có thể bật và tắt.
Sử dụng nội dung thực trong khung dây
Đã có rất nhiều cuộc tranh luận xoay quanh Lorem Ipsum trong wireframe và các mô hình thiết kế, nhưng nếu bạn không có nội dung thực trong wireframe thì bạn đang làm sai. Nội dung thông báo các quyết định tương tác và cho bạn biết khi nào một thiết kế sẽ bị phá vỡ. Làm thế nào Lorem Ipsum có thể làm được điều đó?
Làm cách nào để thiết kế cho màn hình nhỏ trước tiên?
Trong nhiều năm, chúng tôi đã thiết kế với một giải pháp cụ thể trong tâm trí. Đó là một cài đặt mặc định. Cho dù phác thảo trong sổ tay, tạo khung dây trong OmniGraffle, làm việc trong Photoshop hay thiết kế trên trình duyệt, chúng tôi đều biết kích thước canvas của mình sẽ như thế nào. Những ngày đó không còn nữa. Chúng tôi rất tin tưởng vào việc thiết kế cho màn hình nhỏ trước tiên và cải tiến dần dần. Vậy làm cách nào để một nhà thiết kế thay đổi quy trình làm việc của mình từ kích thước canvas cố định sang kích thước linh hoạt?
Thiết kế trừu tượng từ các thiết bị khi bắt đầu
Trừ khi chúng ta đang thiết kế cho một thiết bị cụ thể, điều cần thiết là chúng ta phải ngừng suy nghĩ về thiết bị và bắt đầu nghĩ về trải nghiệm. Tất cả các kỹ thuật sau đây giúp các nhà thiết kế tạo ra trải nghiệm của họ trong khi vẫn có thể duy trì sự bất khả tri của thiết bị (cho đến một thời điểm).
Sử dụng gạch kiểu
Sử dụng Gạch kiểu để thiết lập hướng và lặp lại nhanh chóng. Style Tiles cho phép một nhà thiết kế đặt ra hướng của một hệ thống thiết kế mà không quá cụ thể. Người tạo ra chúng, Samantha Warren, mô tả chúng theo cách này:
“Style Tiles dành cho khi một bảng tâm trạng quá mơ hồ và một bảng tổng hợp quá theo nghĩa đen. Style Tiles thiết lập kết nối trực tiếp với các phần tử giao diện thực tế mà không cần xác định bố cục. ”
Tạo sự hài hòa về giao diện
Hãy tưởng tượng một canvas với tất cả các yếu tố hình ảnh và tương tác được kết hợp với nhau. Không phải để xem một bố cục giao diện người dùng cụ thể, mà để xem tất cả các yếu tố hoạt động cùng nhau như thế nào. Đây là một canvas giao diện hài hòa. Khung hài hòa giao diện cho phép nhà thiết kế giữ các ý tưởng cùng nhau, nhưng không tập trung vào bất kỳ kích thước màn hình nào. Thêm vào đó, đây là một cách tuyệt vời để truyền đạt và ghi lại các yếu tố được thiết kế một cách hiệu quả hơn là tạo ra một hướng dẫn đầy đủ về phong cách.
Nếu bạn muốn đọc thêm, bạn có thể tìm thấy hai bài báo xuất sắc về chủ đề hài hòa giao diện tại đây và tại đây.
Xem mọi thứ trong trình duyệt
Mọi thứ cần được kết hợp với nhau trong trình duyệt. Đây là lúc thiết kế giao diện người dùng thực sự trở nên sống động. Việc xem nội dung thực tương tác với các yếu tố hình ảnh như thế nào là rất quan trọng. Không có cách nào để thực hiện điều này đúng cách trong môi trường tĩnh. Bạn cần xem nó sẽ phản hồi như thế nào trong phương tiện gốc.
Tạo sự cân bằng với các chương trình tĩnh
Có một luồng giữa trình duyệt và các chương trình tĩnh như Photoshop. Cần có sự cân bằng cho phép hệ thống thiết kế được tạo ra một cách linh hoạt và tự nhiên. Chắc chắn, điều này sẽ xảy ra trong Photoshop, nhưng một nhà thiết kế đang thiết kế nhạy bén cũng cần học cách tư duy sáng tạo trong trình duyệt.
Phần kết luận
Một lần nữa, với cảm giác: hãy bắt đầu với lý do tại sao, với nội dung có cấu trúc tốt và các tương tác quan trọng. Trước tiên, hãy tập trung vào màn hình nhỏ và băng thông thấp, đồng thời nâng cao dần các khái niệm đáp ứng của bạn. Phương tiện của chúng ta đang đến tuổi trưởng thành. Chúng tôi có cơ hội để làm những điều đúng đắn và thay đổi thế giới, một dự án web tại một thời điểm.
Khám phá 20 công cụ tạo khung dây tốt nhất cho các nhà thiết kế
Steve Fisher điều phối nghiên cứu, phân tích, thiết kế và chiến lược tại Yellow Pencil ở Canada, và nói về các chủ đề như RWD, UX và mã nguồn mở. Alaine Mackenzie là nhà chiến lược nội dung tại Yellow Pencil.
