Thiết kế Bộ Giao diện Web App trong Adobe Photoshop

Style guide cung cấp một hướng tiếp cận vô cùng linh hoạt đối với thiết kế web hiện đại. Trong bài hướng dẫn này, tôi sẽ hướng dẫn bạn thiết kế một bộ giao diện người dùng (UI), đồng thời giải thích cách đưa ra quyết định để giúp cho bộ UI của chúng ta nhất quán và có thể tái sử dụng.

Nguyên liệu

Để tiện thực hành, bạn sẽ cần các nguyên liệu sau (cung cấp miễn phí):

• Phông chữ Open Sans từ Font Squirrel hoặc Google Fonts
• Hình stock từ Unsplash
• Hình khuôn mặt từ UI Faces
• Arrow icon từ Iconfinder

Chuẩn bị tài liệu Photoshop

Bước 1

Mở Photoshop lên và bắt đầu bằng cách tạo một tài liệu mới (File > New…) bằng cách sử dụng các cài đặt ở bên dưới. Bạn được tuỳ ý sử dụng canvas với bất kỳ kích thước nào mà bạn thích - vì trang web không có chiều rộng cố định.

Bước 2

Giờ hãy thiết lập một số guide để bộ UI của chúng ta được sắp xếp và căn chỉnh. Tôi không phải lúc nào cũng sử dụng một grid, nhưng thiết lập một số cái sẽ đảm bảo sự gọn gàng và nhất quán. Chuyển đến View > New Guide... và thiết lập một số guide. Tôi thường chọn 1000px làm chiều rộng ban đầu cho trang web vì vậy hãy giữ cho bộ UI của chúng ta theo kích thước này.

Lưu ý: Guide được sử dụng cho hướng dẫn này: dọc ở 100px, 600px và 1100px.

Mẹo: Bạn cũng có thể sử dụng plugin GuideGuide cho Photoshop để làm cho công việc này nhanh hơn.

Bước 3

Bám sát các nguyên tắt Photoshop, chúng ta sẽ giữ cho mọi thứ được sắp xếp và dễ dàng điều hướng và chỉnh sửa. Trong môi trường công việc, chúng ta cần bộ UI này được sử dụng nhiều lần như một tham chiếu và tài nguyên phát triển, vì vậy bạn cần phải giữ cho nó có tổ chức (các nhà phát triển sẽ cảm ơn bạn). Hãy tạo sáu nhóm layer có tên là Typography, Buttons, Forms, Avatars, Images và Colors.

Để tạo nhóm, hãy chuyển đến Layer > New > Group… và đặt tên cho mỗi tiêu đề như đã nói. Để tạo nhóm một cách nhanh chóng chỉ cần nhấp vào biểu tượng thư mục.

Xác định Typography

Giống như câu nói nổi tiếng của Oliver Reichenstein "Trong thiết kế web thì kiểu chữ chiếm 95%", vì vậy bạn cần đi đúng hướng. Trước hết chúng ta cần thiết lập môi trường hoàn hảo cho kiểu chữ của chúng ta; một màu nền trung tính và dịu mắt. Nền và kiểu chữ cần phải duy trì mức độ tương phản hợp lý để có dễ đọc. Đối với hướng dẫn này, hãy sử dụng màu xám nhạt tinh tế - một màu trung tính nhưng đủ mạnh để mang đến cho ứng dụng của bạn một cá tính. Tôi đã thiết lập màu nền trước thành #e9eeef và nhấn Alt + Backspace để áp dụng.

Bước 1

Mở nhóm Typography, chọn Horizontal Type Tool (T) và chọn phông chữ Open Sans. Open Sans là một kiểu chữ hiện đại với nhiều độ mạnh yếu khác nhau và có một cái nhìn chuyên nghiệp nhưng thân thiện. Nó hợp với các tiêu đề, nhưng cũng phù hợp với nội dung phần body trên web.

Open Sans có rất nhiều biến thể, vì vậy đối với bộ UI này, tôi sẽ chỉ sử dụng một phông chữ. Hãy nhớ rằng bạn nên cẩn thận nếu sử dụng nhiều hơn hai phông chữ khác nhau cho các dự án của bạn vì mọi thứ có thể trở nên rối một cách nhanh chóng.

Tôi đã thiết lập màu nền trước thành màu đen #000000 sau đó sử dụng Horizontal Type Tool (T) và phông chữ Open Sans đã đề cập trước đó với tùy chọn Light và kích thước 55px cho tiêu đề của section. Chúng ta sẽ sử dụng cùng một tiêu đề có kích thước và phong cách giống nhau cho các tiêu đề sau này để giữ tính nhất quán.

Bước 2

Bây giờ chúng ta cần xác định một hệ thống phân cấp cho kiểu chữ của chúng ta. Vui lòng xem bài viết này Cách thiết lập một hệ số co giãn kích thước phông chữ bởi Ian Yates để hiểu rõ hơn về ý nghĩa và tầm quan trọng của kiểu chữ web.

HTML (Ngôn ngữ đánh dấu siêu văn bản) có nhiều thẻ khác nhau giúp trình duyệt biên dịch nội dung của trang web. Nhiều thẻ trong số này được sử dụng cụ thể cho kiểu chữ web chẳng hạn như <h1>, <h2>, <h3> và vân vân. Những thẻ này mô tả tiêu đề, <h1> là cái quan trọng nhất. Sau đó là thẻ <p> được dùng cho đoạn văn. Không cần phải đi vào chi tiết hơn về HTML, chúng ta sẽ xác định giao diện cho các yếu tố này.

Sử dụng Horizontal Type Tool (T) nhập ba tiêu đề. Tôi sử dụng Open Sans (Light) 55px cho h1, 44px cho h2 và 32px cho h3 để khoảng cách 30px giữa chúng. Khoảng trắng là một điều quan trọng cần phải lưu ý. Tạo ra nhiều khoảng trắng để kiểu chữ của bạn dễ đọc và cân đối.

Lưu ý: Tôi sử dụng loại Regular cho h3. Khi kiểu chữ trở nên nhỏ hơn, thì kiểu Light có thể trở nên kém rõ ràng hơn.

Bước 3

Sau khi chúng ta đã thiết lập tiêu đề, hãy chuyển đến phần nội dung. Hãy cân nhắc tất cả các biến thể có thể có và thể hiện nó trong bộ UI của bạn để các nhà phát triển có thể thực hiện những gì bạn đã lên kế hoạch. Hãy suy nghĩ về một phong cách của tiêu đề bên trong đoạn văn, in đậm, in nghiêng và cũng như các liên kết.

Đối với màu sắc chính tôi chọn màu xám #838383 cho dòng tiêu đề, màu đen #000000 và màu xanh #006ee3 cho liên kết.

Dòng tiêu đề sẽ tối hơn đáng kể so với phần thân, tạo ra ấn tượng mạnh hơn. Màu sắc cho nội dung chính nên nhẹ nhàng và dễ đọc. Sau cùng, hãy đảm bảo bạn chọn một màu khác cho các liên kết của mình để người dùng hiểu rằng chúng có thể được nhấp vào.

Lưu ý: Thiết lập phông chữ cho dòng tiêu đề và liên kết thành Semibold để làm cho chúng trông lớn hơn và quan trọng hơn.

Tạo Button

Các button rất quan trọng đối với các dự án web. Chúng phần lớn là những liên kết hoặc nút submit, nhưng chúng cũng có thể đóng vai trò như nút hành động (CTA) bằng cách dẫn dắt người ta đưa ra quyết định nhanh hơn. Điều quan trọng là xác định một giao diện nhất quán cho các button để người dùng quen với chúng xuyên suốt ứng dụng.

Bước 1

Thu nhỏ nhóm Typography bằng cách nhấp vào mũi tên nhỏ bên cạnh tên nhóm và mở nhóm Buttons. Sau đó, tạo một số guide theo chiều dọc mới để chia khu vực nội dung của chúng ta thành ba khu vực bằng nhau với khoảng cách 35px ở giữa. Vào View > New Guide... và cài đặt các guide chiều dọc như sau: 410px, 445px, 755px và 790px. Đây là nơi chúng ta sẽ đặt các button của chúng ta để tất cả chúng đều bằng và nhất quán.

Bước 2

Quay trở lại nhóm Typography, tìm layer tiêu đề section và nhân đôi nó bằng cách nhấn CMD + J, sau đó di chuyển nó đến nhóm Buttons và thay đổi nó thành "Buttons".

Sau đó nhập ba tiêu đề của các trạng thái button: Normal, Hover và Active. Đặt chúng ở bên trái của một phần ba thứ nhất, lưu ý khoảng cách 35px giữa section thứ nhất, thứ hai và thứ ba.

Bước 3

Bây giờ thiết lập màu nền trước thành màu xanh được sử dụng trước đây là #006ee3 và tạo một nhóm mới có tên là Primary Normal. Sau đó chọn công cụ Rounded Rectangle Tool (U), thiết lập Radius là 3px và vẽ một hình chữ nhật tròn có kích thước 310x44px. Đặt nó ở giữa hai đường guide đầu tiên dưới tiêu đề "Normal". Để hoàn tất button, hãy viết một số chữ trên đó bằng màu trắng #ffffff để nó có thể đọc được rõ ràng.

Bước 4

Bây giờ nhân đôi nhóm Primary Button bằng cách nhấn CMD + J trên nhóm và đổi tên các nhóm này thành Primary Hover và Primary Active. Sau đó, đặt các nhóm mới này theo hai phần mà chúng ta đã tạo ra các tiêu đề trước đó.

Có thể bạn tự hỏi, hover và active có ý nghĩa gì? Hover mô tả trạng thái của một button khi bạn di chuyển con trỏ chuột qua nó, vì vậy chúng ta cần minh họa một số phản hồi từ button. Một liên kết sẽ active khi bạn nhấp vào liên kết đó.

Để tạo kiểu dáng cho trạng thái hover và active của các button, chúng ta sẽ làm chúng tối đi. Tạo một layer mới phía trên hình dạng button và fill với màu đen #000000. Sau đó giữ phím Alt và di chuột qua layer cho đến khi bạn thấy một biểu tượng mũi tên nhỏ - nhấp vào để tạo Clipping Mask. Cuối cùng giảm Opacity của layer xuống 10%.

Lưu ý: đối với trạng thái active của button, tăng Opacity của layer màu đen lên 20%.

Bước 5

Bây giờ hãy nhân đôi tất cả các nhóm button trước đó và thay đổi tiêu đề và màu của chúng thành secondary. Chúng ta sẽ xác định màu sắc bộ UI sau trong hướng dẫn này, bây giờ chỉ cần chọn một màu và thay thế màu xanh trước đó. Tôi sử dụng màu xanh lá cây #36c265.

Thiết kế Form

Form là một thành phần rất quan trọng trong ứng dụng web vì chúng cho phép người dùng nhập thông tin và tương tác với ứng dụng. Chúng ta sẽ thiết kế một số form cơ bản để nhà phát triển có thể bám theo với cùng một phong cách và giữ thiết kế nhất quán.

Bước 1

Thu nhỏ nhóm Buttons và mở rộng nhóm Forms. Một lần nữa nhân đôi tiêu đề của section từ nhóm trước và đổi tên thành "Forms". Chúng ta sẽ tạo một số form input cơ bản bao gồm text input, password, dropdown hoặc select và submit (một button đơn giản).

Khi thiết kế form thì yếu tố rõ ràng và thân thuộc là những yếu tố quan trọng. Đừng cố gắng phát minh lại bánh xe. Tạo một nhóm mới và đặt nó tên là Name. Sau đó chọn Horizontal Type Tool (T) và nhập vào một nhãn input, trong trường hợp của tôi nó là "First Name" bằng cách sử dụng cùng một một phông chữ có kích thước 18px đen #000000 Open Sans (Regular).

Bây giờ, nhân đôi một trong các layer có hình dạng button và di chuyển nó vào nhóm Name. Sau đó thay đổi màu nền của nó thành màu trắng #ffffff và thêm một màu xám 1px #d5d5d5 inside stroke. Cuối cùng, đặt một chữ mẫu vào bên trong hình chữ nhật bo tròn màu trắng. Đối với ví dụ của tôi, tôi sử dụng phông chữ 16px Open Sans (Regular) và màu xám #838383 như được sử dụng trước đó cho văn bản phần body.

Bước 2

Tạo thêm một số input với tiêu đề bằng cách nhân đôi input đầu tiên. Thông thường, đối với password field, hãy sử dụng dấu chấm • hoặc dấu hoa thị *. Thêm một ví dụ về các input khác được hiển thị ở bên dưới.

Nhân đôi CMD + J một trong các nhóm button, di chuyển nó vào trong nhóm Forms và đặt nó bên dưới các input được tạo gần đây. Một lần nữa điều quan trọng là duy trì tính nhất quán và sử dụng lại các thành phần đã được tạo trước đó.

Bước 3

Trong bài hướng dẫn này, chúng ta đang bám theo một giao diện người dùng rất cơ bản có thể phục vụ cho một ứng dụng web rất đơn giản. Bây giờ hãy tạo một loại input khác; <select>.

Nhân đôi một trong các nhóm input và đặt nó ở giữa đường guide thứ ba và thứ tư, đảm bảo căn chỉnh mọi thứ. Thay đổi giá trị thành bất kỳ thứ gì bạn muốn và thêm một biểu tượng mũi tên đơn giản để cho biết rằng nó là dropdown. Bạn có thể tìm thấy các biểu tượng mũi tên trên Iconfinder.

Bước 4

Để làm cho các nhà phát triển làm việc dễ dàng hơn, một lần nữa hãy chắc chắn rằng bạn đã bao gồm trạng thái active. Hãy nghĩ xem dropdown sẽ như thế nào khi người dùng nhấp vào nó? Đây là công việc của nhà thiết kế để hướng dẫn cho nhà phát triển tạo ra một trải nghiệm nhất quán và thống nhất.

Nhân đôi nhóm dropdown vừa được tạo ra. Sử dụng công cụ Direct Selection Tool (A) nhấp vào một góc của cái hình dạng để hiện ra các điểm ở cạnh, giữ phím Shift, chọn bốn điểm ở dưới cùng và nhấn nhút di chuyển xuống một vài lần để mở rộng hình dạng. Kỹ thuật này giữ hình dạng của véc tơ và giữ cho góc không bị ảnh hưởng.

Sau đó, chỉ cần nhân đôi các lựa chọn có thể có và đặt một số bên dưới lựa chọn đầu tiên. Sử dụng công cụ Line Tool (U) với Weight 1px để tạo phân cách đơn giản và cuối cùng thay đổi màu mũi tên thành màu được sử dụng cho các button. Điều này sẽ giúp cho biết rằng input đang ở trạng thái active.

Bước 5

Bây giờ chúng ta sẽ tạo một thông báo lỗi đơn giản, chẳng hạn như nếu ai đó đã nhập mật khẩu quá yếu.

Nhấn CMD + J để nhân đôi password input được tạo trước đó và đặt nó bên dưới dropdown. Sau đó, thay đổi đường viền của field thành màu đỏ tinh tế (tôi sử dụng #eb8686) và màu nền là màu đỏ xám #e9dde3. Cuối cùng, chọn một màu đỏ mạnh hơn #b63131 và nhập một thông báo lỗi đơn giản.

Đó là với forms! Tôi đã khái quát những điều cơ bản nhưng nó đủ để bắt đầu thiết kế các form phức tạp hơn.

Avatar

Avatar gần như là tiêu chuẩn trong bất kỳ ứng dụng web nào ngày nay, do đó cần có một số hình ảnh để dễ dàng giao tiếp và nhận dạng người dùng hơn.

Bước 1

Thu nhỏ các nhóm không cần thiết và mở rộng nhóm Avatars. Chọn công cụ Ellipse Tool (U) và giữ phím Shift, vẽ một vòng tròn 80x80px. Truy cập vào uifaces.com và chọn một hình ảnh. Sao chép và dán nó vào bên trên vòng tròn được tạo trước đó. Giữ phím Alt và di chuột qua thumbnail của hình ảnh cho đến khi bạn thấy một mũi tên nhỏ, sau đó nhấp chuột để tạo Clipping Mask.

Hình ảnh

Chúng ta thật sự nên bao gồm một số hình ảnh mẫu sẽ được hiển thị trong ứng dụng của chúng ta. Tôi sẽ chỉ đặt một hình ảnh bên trong hình chữ nhật bo tròn để cho thấy rằng hình ảnh nên có các góc tròn.

Bước 1

Chọn công cụ Rounded Rectangle Tool (U) và vẽ một hình chữ nhật ở giữa các đường guide dọc bên dưới nhóm Avatars. Sau đó chọn một hình ảnh, tôi sử dụng một hình ảnh từ unsplash.com, thay đổi kích thước nếu cần với CMD + T và tạo một Clipping Mask.

Xác định Màu sắc

Cuối cùng chúng ta sẽ làm việc với màu sắc. Một bảng màu là rất quan trọng và bạn nên kiểm tra lý thuyết về màu sắc để hiểu rõ hơn về ý nghĩa và tầm quan trọng của màu sắc bạn sử dụng. Chúng ta chọn màu sắc tại phần cuối của quá trình bởi vì bây giờ chúng ta có một ý tưởng tốt về thành phần mà chúng ta cần tạo phong cách.

Bước 1

Mở rộng nhóm Colors và chọn một trong các màu mà bạn đã sử dụng cho button làm màu nền trước. Sau đó, sử dụng Rounded Rectangle Tool (U) vẽ một hình chữ nhật. Sau đó, chọn Horizontal Type Tool (T) và viết tiêu đề của màu hoặc mục đích sử dụng của nó, ví dụ "Primary Color" và cung cấp mã màu dạng HEX, RGB hoặc bất kỳ định dạng nào khác cần thiết. Tạo một nhóm mới, đặt tên cho màu đó và đặt tất cả các lớp vào đó.

Bước 2

Bây giờ chỉ cần nhân đôi CMD + J nhóm color và tạo ra nhiều mẫu màu theo nhu cầu của bạn. Thông thường, tốt nhất là nên chỉ bốn hoặc năm màu vì nhiều màu hơn có thể làm cho mọi thứ trông lộn xộn. Tham khảo Kuler và COLOURlovers để có các bảng màu tuyệt vời.

Đối với hướng dẫn này như bạn đã thấy tôi sử dụng màu "Primary" và "Secondary", một màu cho văn bản body và một màu cho dòng tiêu đề, đồng thời màu trắng cho nền input. Tất cả được hiển thị dưới đây.

Xin chúc mừng, bạn đã hoàn tất bài hướng dẫn!

Như vậy, bạn đã có nó. Một style guide cho một ứng dụng web đơn giản. Tôi hy vọng bạn đã học và hiểu được những điều cơ bản của việc tạo ra một style guide, tại sao một số quyết định đã được đưa ra và cách chúng mang lại lợi ích cho dự án.

Nếu bạn có bất kỳ câu hỏi nào hoặc gặp khó khăn gì, vui lòng để lại nhận xét trong phần comment nhé!