Hướng dẫn thiết kế để làm việc với Hướng dẫn kiểu & Gạch phong cách
Tạo ra một nhận diện thương hiệu không phải là nhiệm vụ dễ dàng. Nó đòi hỏi nỗ lực rất nhiều nhưng đó cũng là một trong những nhiệm vụ sáng tạo bổ ích nhất. Các dự án web thường xuyên kết hợp thương hiệu với thiết kế giao diện. Điều này có thể gây nhầm lẫn bởi vì có rất nhiều việc phải làm trong cả hai lĩnh vực. Hướng dẫn phong cách và gạch phong cách là những tài nguyên tuyệt vời cho các nhà thiết kế web và trong khi chúng có âm thanh tương tự, họ hoàn thành hai nhiệm vụ khác nhau.
Trong bài đăng này, tôi muốn tìm hiểu sâu về cả hai và đề cập đến những lợi ích bạn có thể nhận được từ những tài sản sáng tạo này. Không phải ai cũng sẽ cần (hoặc thích) tạo hướng dẫn kiểu hoặc gạch kiểu. Nhưng mọi nhà thiết kế ít nhất nên hiểu những thứ này là gì và cách chúng hoạt động.
Hướng dẫn về Phong cách cho Web
Tôi đã đọc các ý kiến khác nhau về hướng dẫn phong cách. Một số người nói đây là những mockup kỹ thuật số trong khi những người khác nói rằng các hướng dẫn kiểu dựa trên mã là hữu ích nhất.
Dù bằng cách nào, mục tiêu của một hướng dẫn phong cách là giống nhau cho web như bất kỳ dự án nào khác. Nó định nghĩa mẫu nhất quán, mô-đun UI và tùy chọn sáng tạo được sử dụng trong quá trình thiết kế. Bạn có thể có được các phép đo rất cụ thể và quy định các pixel hoàn hảo cho các yếu tố nhất định hoặc bạn có thể thả lỏng và đưa ra các hướng dẫn với các ví dụ trực quan.
Không có cách duy nhất đúng để làm một hướng dẫn phong cách. Cách sai duy nhất là tạo một tài nguyên đơn giản người khác không thể hiểu.
Mục tiêu là tạo ra một tài sản sẽ đứng trước thử thách của thời gian. Nó nên mở để chỉnh sửa nếu tài nguyên mới được tạo ra. Bất cứ ai tham gia nhóm cũng có thể dễ dàng truy cập vào hướng dẫn.
Hướng dẫn phong cách nên chi tiết khi cần thiết cho dự án. Nó thường bao gồm tài sản tái sử dụng, chẳng hạn như kiểu chữ, nút, mẫu màu, kết cấu và các yếu tố trang phổ biến.
Gần đây chúng tôi đã bảo hiểm công cụ hướng dẫn phong cách sống có thể giúp bạn xây dựng hướng dẫn phong cách sống từ đầu. Những hướng dẫn sống này là nhiều hơn cho các nhà phát triển frontend, nhưng chúng có thể hữu ích cho các nhà thiết kế. Bạn có thể đọc thêm về chủ đề này trong bài đăng trên Tạp chí Smashing.
Tài nguyên yêu thích tuyệt đối của tôi là StyleGuides.io. Nó bao gồm những điều cơ bản của hướng dẫn phong cách cho web, kể cả ví dụ sống và nghiên cứu trường hợp.
Thư viện mẫu của MailChimp là một trong những ví dụ tốt nhất bạn có thể tìm thấy tại StyleGuides.io. Đó là một hướng dẫn phong cách trực tuyến mà xác định các yếu tố lưới, kiểu chữ và trang của MailChimp.
Khi bạn thiết kế một hướng dẫn phong cách cho một công ty web, việc đưa mọi thứ lên mạng là điều phổ biến, nhưng bạn cũng có thể tạo hướng dẫn nội bộ, và giữ chúng trên mạng nội bộ cục bộ hoặc lưu trữ chúng riêng tư đằng sau trang đăng nhập của người dùng. Cách bạn truy cập một hướng dẫn phong cách thực sự không quan trọng. Tất cả đều phục vụ cùng một mục đích là truyền đạt màu sắc, hoa văn và hình ảnh cụ thể phù hợp với chủ đề của một dự án web.
Để tìm hiểu thêm về chủ đề này, hãy xem các bài đăng khác về hướng dẫn phong cách:
- Hướng dẫn phong cách Front-end (24ways.org)
- Tạo một hướng dẫn phong cách trang web (creativebloq.com)
- Cách làm Hướng dẫn Phong cách Thiết kế Web Hoàn hảo (dtelepathy.com)
Phân nhánh thành gạch phong cách
Gạch phong cách là một con thú khác nhau hoàn toàn. Những viên gạch này là tài sản sáng tạo được sử dụng trong giai đoạn thiết kế ban đầu khi cố gắng để giảm xuống một thẩm mỹ cụ thể.
Trang web Style Tiles được tạo bởi Samantha Warren và nó có mọi thứ bạn có thể cần biết. Có không có mẫu cụ thể để thiết kế gạch phong cách. Nhưng ví dụ của Samantha sử dụng tiêu đề và loại đoạn văn, liên kết, mẫu, và lựa chọn màu sắc có thể cùng với một logo thương hiệu.
Khi làm việc với gạch kiểu, mục tiêu của bạn cuối cùng là hiện 2-3 kiểu gạch khác nhau cho khách hàng hoặc giám đốc sáng tạo. Những viên gạch này là chi tiết hơn một bảng tâm trạng, chưa ít chi tiết hơn một mockup đầy đủ.
Gạch nên chỉ đủ chi tiết để mang lại cảm giác danh tính và tâm trạng của trang web. Samantha khuyến khích sử dụng tính từ để mô tả chi tiết từng viên gạch.
Khách hàng có thể nhìn qua các gạch khác nhau, và chọn những mảnh yêu thích của họ. Điều này giúp bạn tiết kiệm thời gian khi thiết kế vì khách hàng đã thấy tài sản họ thích, do đó, ít có cơ hội sửa đổi lớn.
Đây là một trích dẫn tuyệt vời từ trang web của Gạch ốp lát:
So sánh gạch phong cách với bộ công cụ của nhà thiết kế nội thất khá giống với apt. Bạn không muốn đổ công sức vào một mockup hoàn hảo pixel chỉ để khách hàng nhận ra họ ghét hầu hết các màu sắc và phông chữ.
Thay vào đó, sử dụng gạch kiểu để tìm chủ đề chung hoặc ngôn ngữ hình ảnh được sử dụng trên toàn bộ trang web. Điều này có thể bao gồm xây dựng thương hiệu / bản sắc nhưng cũng có thể bao gồm Tính năng giao diện người dùng, chẳng hạn như menu thả xuống hoặc nút CTA.
Bạn nên sử dụng chúng như tài sản có thể giao sớm trong quá trình. Khi bạn hoàn thành một mockup đầy đủ, thực sự không cần phải tham khảo kiểu xếp hình nữa. Tuy nhiên, lúc đầu, gạch kiểu có thể rất quan trọng đối với quá trình sáng tạo tiết kiệm thời gian thiết kế và iving khách hàng nhiều tùy chọn để lựa chọn.
Nếu bạn muốn đi sâu vào gạch phong cách Kiểm tra các bài viết liên quan.
- Gạch phong cách và cách chúng làm việc
- Gạch phong cách: Một thay thế cho Comps thiết kế đầy đủ
- Tạo gạch phong cách: Cách tiếp cận dễ dàng theo hướng thiết kế
Hướng dẫn phong cách so với Gạch phong cách
Sự khác biệt giữa hướng dẫn phong cách và gạch phong cách là mơ hồ nhưng rõ ràng. Một hướng dẫn mẫu nhiều hơn chi tiết và nên được sử dụng như một hướng dẫn tham khảo liên tục cho đội ngũ sáng tạo. Một gạch phong cách có thể được sử dụng như một tâm trạng đến vẽ ý tưởng trực quan cho chính bạn hoặc khách hàng Chúng thường được sử dụng để khám phá ý tưởng, và một khi dự án kết thúc, họ không phục vụ nhiều mục đích.
Gạch phong cách thường thô hơn nhiều xung quanh các cạnh và chúng được sử dụng chỉ trong quá trình sáng tạo sớm. Một hướng dẫn phong cách có nghĩa là được sử dụng trong toàn bộ quá trình thiết kế và thậm chí sau đó để tham khảo trong tương lai cho các nhà thiết kế khác có thể làm việc trên trang web.
Cả hai đều có lợi ích và nhược điểm của họ. Gạch phong cách là nhanh chóng và vui vẻ, nhưng không lâu trong bản chất. Hướng dẫn phong cách là kỹ lưỡng và cư xử như tài liệu trực quan, nhưng họ cũng đòi hỏi nhiều công việc.
Vậy bạn nên dùng cái nào? Cuối cùng phụ thuộc vào dự án.
Dự án nhỏ hơn chẳng hạn như cho các trang web kinh doanh nhỏ làm việc tốt hơn với gạch phong cách. Xây dựng một hướng dẫn toàn bộ phong cách cho một trang web kinh doanh nhỏ sẽ đòi hỏi quá nhiều công việc và giờ có thể thanh toán. Điều này có lẽ không đáng giá cho hầu hết các khách hàng.
Tuy nhiên một dự án lớn như thiết kế lại NY Times sẽ được hưởng lợi từ cả gạch kiểu và hướng dẫn kiểu.
Tìm một ngôn ngữ và tâm trạng cho một dự án mới luôn luôn là một quá trình có giá trị. Đây là những gì làm cho gạch phong cách hoàn hảo cho hầu hết mọi kịch bản.
Bạn cũng có thể nhận được bằng mà không tạo ra một trong hai tài sản này. Một số nhà thiết kế đi ngay từ khung dây đến mockup chi tiết. Và một số khách hàng thậm chí không muốn có một hướng dẫn về phong cách vì nó sẽ không được sử dụng.
Làm việc trên cơ sở từng dự án và quyết định những gì tốt nhất cho mỗi người.
Ví dụ trực tiếp
Hãy gói nó lại bằng cách che ví dụ của cả hai hướng dẫn phong cách và gạch phong cách. Tôi đã tìm thấy những thiết kế này trong khi duyệt Dribbble và tôi nghĩ rằng chúng thể hiện chất lượng bạn muốn trong hướng dẫn phong cách hoặc gạch phong cách của riêng bạn.
Hướng dẫn phong cách
Hướng dẫn phong cách Airbnb đáng kinh ngạc này được tạo ra bởi Derek Bradley. Nó rất đơn giản nhưng nó minh họa rõ ràng mẫu chính, màu sắc và các yếu tố trang được tìm thấy trong thiết kế.
Đây là một hướng dẫn phong cách kỹ thuật số lớn hơn nhiều được tạo ra bởi nhà thiết kế Naoshad Alam. Ví dụ này là có tổ chức hơn nhiều với các phần cho màu sắc, kiểu chữ, biểu mẫu, thành phần giao diện và các tính năng UI khác.
Hướng dẫn phong cách chi tiết hơn sẽ đưa tất cả các yếu tố thiết kế này lên web và bao gồm các đoạn mã cho từng cái.
Nhà thiết kế Cupi Wong đã thực hiện hướng dẫn này cho AfterShip. Kiểu chữ, nút, lựa chọn màu sắc và các yếu tố trang phổ biến được chế tạo cẩn thận và tổ chức thành các phần.
Điều này cũng có thể được chuyển đến web và được xây dựng lớn hơn nhiều như tài liệu tham khảo trực tuyến.
Nhà thiết kế giao diện người dùng Greg Dlubacz đã chia sẻ hướng dẫn phong cách UI của riêng mình cho một dự án web. Điều này là rất lớn. Bản xem trước toàn màn hình kéo dài 21.000 pixel!
Hoàn toàn là một trong những hướng dẫn phong cách kỹ thuật số tốt nhất mà tôi từng thấy. Điều này cũng có thể được chuyển đến một trang tài liệu trực tuyến để các thành viên trong nhóm tham khảo.
Gạch phong cách
Nhà thiết kế UI / UX Abdus Salam đã tạo ra kiểu gạch này cho một trang web cửa hàng thực phẩm hữu cơ. Nó rất cơ bản với yếu tố thiết kế phẳng, một số tính năng UI nhỏ, và một bảng màu.
Nhà thiết kế Adrian Cantelmi thực sự đã đi chi tiết với phong cách thoái vốn của mình. Nó có màu sắc và kiểu chữ nhưng cũng bao gồm minh họa vector.
Những vectơ này giúp xác định thương hiệu, tâm trạng và bảng màu tổng thể của trang web.
Thiết kế lại cố vấn World Cup có gạch theo phong cách riêng với các tính năng rất cơ bản. Một vài biểu tượng, một số lựa chọn màu sắc, cùng với một vài thiết kế nút. Sự đơn giản là tên của trò chơi.
Nếu bạn có thể cảm nhận được trang web trông như thế nào trong nháy mắt sau đó bạn đang làm đúng.
Đây là một ví dụ thú vị về kiểu gạch bị từ chối được sử dụng cho một dự án du lịch. Nhà thiết kế Brennan Gleason chỉ cung cấp một mẫu nhỏ của gạch, nhưng bạn vẫn có thể cảm nhận về môi trường của trang web.
Từ cuối cùng
Nếu bạn tìm kiếm trên web, bạn sẽ tìm thấy nhiều ví dụ, mẹo và tài nguyên cho hướng dẫn xây dựng phong cách và gạch phong cách. Nhưng tôi hy vọng bài viết này có thể là một mồi cho cả hai và giúp bạn thành thạo trong việc hiểu và tạo ra các tài sản thiết kế này.
