refactoring UI capture
TIL
720
White

mòe viết ngày 29/05/2019

Design ra Figma trước

System

5 shadow

Không chỉnh font size tới lui, quyết định ngay từ đầu về các cấp độ font size sẽ sử dụng, ví dụ 12px 14px 16px 18 20 24 32 48. chỉ sử dụng những size đó, ko chen size lẻ vào…

Font chữ chỉ nên dùng 3 màu và 2 font weight, không dùng weight dưới 400 sẽ khó đọc, nếu muốn de-emphasize thì đổi màu cho nhạt là được

Trước khi design, chọn 3 dải màu, mỗi dải tầm chục màu chung hue hoặc tốt nhất là lệch hue đi tí (tối đa 30 độ để tránh thành hẳn một màu khác) thì khi gradient sẽ đẹp hơn. Có thể lấy tạm ở đây https://webkul.github.io/coolhue/

3 dải: primary (màu rõ saturation), neutral (ít saturation), accents (cũng rõ saturation nhưng dùng rất ít).

Đầu tiên phải chọn màu ở giữa dải. Sao cho nó có thể trở thành background cho button.

Rồi chọn màu sáng nhất trong dải sao cho có thể làm backround cho div

Rồi màu tối nhất trong dải, màu này sẽ làm màu của text (heading/running…)

Phong cách của design

hỏi khách hàng ngay từ đầu phong cách của trang web của họ là gì

Sang trọng cổ điển: serif như freight text

Trẻ trung vui tươi: sans serif bo tròn, như proxima soft

Trung lập, ko muốn dùng font để thể hiện: sans serif bình thường, như freight sans

Xanh da trời: an toàn, phổ biến, ko ai phàn nàn, ai cũng thích
Vàng: thượng lưu, tinh tế
Hồng: vui tươi tinh nghịch, không nghiêm trang

Bo viền nhẹ: trung lập
Bo viền mạnh: trẻ trung tinh nghịch
Không bo viền mà để cạnh vuông thành sắc cạnh: nghiêm túc, đoan trang, chính thống

Đã quyết như nào thì phải như thế xuyên suốt, ko chỗ này đang dùng thế này chỗ kia lại nhảy sang thế khác.

Hướng tới độc giả là những người như thế nào để quyết định nên phong cách của site cho phù hợp

Phân cách thành phần quan trọng với thành phần ko quan trọng

Không cần thiết phải trình bày thông tin dạng nhãn vở (họ tên: lê văn a, phòng: kĩ thuật) vì khiến thông tin không có thứ bậc, không làm nổi bật được cái cần nổi và còn xấu đi.
Bỏ luôn label đi hoặc là đổi lời văn. In stock: 12 thành 12 left in stock

gây chú ý
giảm chú ý

Biết được độc giả đang muốn tìm cụm từ gì trong trang rồi nhấn vào từ đó

border quá nhạt sẽ mờ nhạt, quá đậm sẽ làm trang web trở nên căng thẳng, trường hợp này tăng width nhưng vẫn giữ màu nhạt

Không nên dùng fontsize (quan trọng thì to ko quan trọng thì nhỏ) vì web nhìn lộn xộn, nên dùng font weight và color (quan trọng thì đậm, ko quan trọng thì nhạt)

Đối với div thì div quan trọng có background riêng còn div ko quan trọng thì k có background

muốn màu nhạt đi thì ko nên dùng màu xám vì lạc quẻ, cũng k nên dùng màu trắng trong suốt vì sẽ nhợt nhạt và lộ background, trong trường hợp này chọn ra một màu nhạt hơn nhưng neon hơn màu background.

Icon đứng cạnh text thì thường gây chú ý hơn text vì icon có (diện tích) bold hơn text, nên ta cho màu icon nhạt đi để nổi text lên.

Nếu đã đổi màu text quan trọng hoặc active mà vẫn chưa đủ “nổi” thì làm mờ những text ko quan trọng.

Các button: Quan trong nhất thì cho background nổi, nhì thì cho viền hoặc background kém nổi, ko quan trọng thì làm như 1 cái link

Space

Cái gì thuộc về nhau thì phải gần nhau hơn là những thứ thuộc nhóm khác (tên field và text input của form phải gần nhau hơn, khoảng cách giữa các li trong một list phải lớn hơn cách dòng, tiêu đề đoạn phải gần với đoạn dưới hơn đoạn trên, make sure there’s more space around the group than there is within it

Font

Ko dùng em hãy dùng px hoặc rem vì nó ko giảm theo scale. Kích thước text càng to thì khi thu nhỏ màn hình nó giảm với tỉ lệ càng mạnh

Nếu ko biết phải làm gì hãy dùng giải pháp an toàn là những sans serif trung lập như Helvetica.
Không dùng font mà ít hơn 5 weight (tính cả italic thì ít hơn 10 style trên google font) vì chứng tỏ ko được tạo kĩ. Vậy chỉ còn lại 15% số font là đạt yêu cầu.

heading
running text
khoảng cách giữa các kí tự chật hơn (condensed). “thân mình” (x height) ngắn hơn. Nếu cứ thích dùng font được thiết kế cho running text để làm heading thì dùng letter-spacing cho khít lại.

Nếu heading viết hoa cả thì phải letter spacing cho thưa ra mới dễ đọc

Muốn font đẹp thì đi chôm ở web nào đẹp hoặc scan https://www.myfonts.com/WhatTheFont

Trên web thì mỗi dòng chỉ nên có 45 - 75 kí tự thì mới dễ đọc kể cả đang còn đất, kể cả chỉ có 1-2 dòng trải ra ôm lấy 3 cột ở dưới thì cũng nên co cái dòng đó lại cho hẹp đi và trôi thành 3 dòng cũng vẫn đẹp hơn

Dòng càng nhiều kí tự thì line height càng cần phải lớn. Chữ càng nhỏ thì line height càng cần lớn và ngược lại

1-2 dòng thì align center, nếu dài hơn thì căn trái luôn đẹp, đẹp hơn cả justified text vì hay bị khoảng cách không đều giữa các từ, justified text chỉ cần làm khi muốn formal hoặc nhái tạp chí online, khi đó phải hyphen word tách từ

số má trong bảng luôn align right

Khi nào dùng shadow

Button thì hơi nổi
Dropdown menu thì nổi hơn xíu nữa
Dialog/dòng đang được drag drop thì cho nổi hẳn

Dùng 2 box shadow một cho chỗ loang và rộng một cho chỗ đậm nhỏ

Sử dụng overlap elements để cho web trông như nhiều layer cho đẹp và nổi và thú vị hơn

Nếu image bị hòa trộn khi overlap thì cho nó cái border cùng màu với 1 trong 2 background.

Nếu nhiều image khác nhau thì cho border/ box shadow semi transparent để border hợp màu với mọi khả năng về màu của image.

Chung chung

Dùng font size này để quyết định icon size bằng cách đoán ra size nào có vẻ đẹp ví dụ 16 rồi tạo 3 bản: 1 bản là chính 16, 2 bản kia tăng và lùi 1 bậc là 14 và 18 rồi đặt cạnh nhau nếu cái ở giữa ổn thì pick cái giữa, nếu cái ở cạnh ổn thì làm lại từ đầu, cái cạnh trở thành giữa...Ko phóng to những icon nhỏ vì chúng được design để xem ở kích thước nhỏ chứ ko phải to → cho nó cái background rồi tô màu cái background là đủ.

Favicon vẽ lại từ logo và lược chi tiết để dễ nhận dạng trong màn hình nhỏ, ko để nguyên logo sẽ bị thu nhỏ mất nét.

Dùng HSL (hue saturation lightness) để mắt người cũng nhận ra được mã màu.

Kiểm tra về constrast theo Guidelines (WCAG) recommend that normal text (under ~18px) has a contrast ratio of at least 4.5:1, and that larger text has a contrast ratio of at least 3:1. Test ở https://webaim.org/resources/contrastchecker/

Đối với button text trắng nền màu: Background button mà đậm quá sẽ tranh sự chú ý, mà nhạt quá thì ko đảm bảo readability → đảo lại background nhạt còn text đậm

Đối với secondary text nền màu: khi primary text đã màu trắng thì secondary ko thể trắng, mà nếu là màu nhạt hơn nền thì khó đọc → đổi luôn hue sang gì đó neon hơn.

Mobile first Xem ra lại đẹp hơn desktop first vì ép buộc mình phải tinh tế trong không gian hẹp. Khi phóng nó lên desktop thì ko cần làm j nhiều thậm chí thêm khoảng không vào 2 bên thế là xong

Không phải đang viết wiki là người ta đang đọc một bài văn dài mà link cần phải màu xanh hay gạch chân để cho dễ hiểu là link. Khi làm UI người ta đã hiểu rằng mọi thứ đều là 1 link, vì thế link chỉ cần làm màu đậm hơn non-link hoặc fontweight bold hơn là được.

Nếu một link không phải là thứ người ta click nhiều thì thậm chí khỏi cần bold hay màu, chỉ cần cho hiệu ứng hover (underline, đổi màu) là được.

Các list thì cho icon vào đầu mỗi list như checkbox hoặc cái khóa, tùy nội dung của cả list

Cái testimonial thì cho cái dấu ngoặc kép to đùng lên và đổi màu
Tự chế tạo checkbox và radio button cho hợp màu web mình

Gạch chân active item / headline

Cho border trên của div / border cạnh trái của hộp thoại / viền trên của whole page có vạch màu

Cái div / section nào tô background được thì tô. Nếu hợp gradient thì gradient, chú ý 2 màu không hơn kém nhau quá 30 độ, chôm ở https://webkul.github.io/coolhue/ Hoặc là làm 2 background color để tách div ra 2 phần dễ nhìn tùy nội dung

Thêm họa tiết vào background khi có thể, hoặc thậm chí họa tiết mà không cần background. Họa tiết có thể là chấm, sọc ngoằn ngoèo, thậm chí dotted style illustration (chỉ có 1 màu)

trong 1 bảng Có thể gộp 2 trường lại để làm nổi một trường

Có thể thay radio button thành selectable card

test grayscale trước khi thêm màu vào nếu gray mà đẹp thì màu vẫn đẹp thì mới đảm bảo (?)

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

mòe

14 bài viết.
328 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
100 44
google cách học tốt tiếng anh thì ra hàng đống kết quả nhưng đảm bảo không có cái nào dùng được (nếu dùng được thì bạn đã tiến bộ rồi phải không). ...
mòe viết hơn 1 năm trước
100 44
White
42 10
(Ảnh) Dùng CSS để "sửa" nội dung HTML Ngoài nguyên nhân là muốn chơi nổi thì lí do phải dùng code CSS để tác động vào HTML là khi bạn không được ...
mòe viết 9 tháng trước
42 10
White
31 15
Bài này sẽ hướng dẫn tạo theme Wordpress mà không sử dụng gì. Gồm 5 phần với thứ tự như sau: Tạo theme tĩnh, Các khái niệm dễ gây nhầm lẫn trong Wo...
mòe viết 7 tháng trước
31 15
Bài viết liên quan
White
0 4
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 1 năm trước
0 4
White
2 0
I used Spring boot, Hibernate few times back then at University, I'v started using it again recently. In this (Link), I want to check how Spring J...
Rey viết 7 tháng trước
2 0
White
22 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết gần 3 năm trước
22 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
14 bài viết.
328 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!