Trong quá trình làm việc, rất nhiều lập trình viên đã đi theo con đường thiết kế UI/UX đầy chông gai. Lý do thì có vô vàn: khách hàng không muốn thuê designer, công ty phải cắt giảm về phần thiết kế để có thể bán được dựa án, có rất đông lập trình viên mà lại chỉ có 1 designer,..v..v..
Dù thế nào đi chăng nữa, không ít lần một nhóm các lập trình viên đã phải tự mình thiết kế dòng chảy điều hướng và các phần tử của ứng dụng hay web. Vậy, nếu bạn là một lập trình viên và cũng đang ở hoàn cảnh tương tự, Bài viết sau sẽ cung cấp cho bạn 5 lời khuyên về thiết kế dành cho các lập trình viên để bạn có thể hình dung được mình nên bắt đầu từ đâu.
.jpg)
1. Khoảng cách
.jpg)
Không có gì khiến cho 1 ứng dụng hoặc 1 trang web có tính thẩm mỹ và dễ đọc hơn việc tận dụng tốt các khoảng cách.
Việc căn chỉnh khoảng cách đó là tạo ra các khoảng không gian trống giữa các phần nội dung mà khi người dùng tương tác thì trong đầu họ sẽ tạo ra sự tách biệt về thị giác mà chúng ta với vai trò là designer cõ thể kiểm soát được. Ví dụ, bạn có thể hướng người đọc phân biệt một các phần của cùng một trang hay phần tử.
Điều này không chỉ khiến giao diện của chúng ta nhìn trông đẹp mắt, mà nó còn giúp điều hướng tốt hơn, dễ đọc hơn, sắp xếp thứ tự nội dung có ý nghĩa hơn, và dễ dàng làm nổi bật các phần mà chúng ta cảm thấy hứng thú.
Hãy nhớ rằng, có quá nhiều khoảng trống vẫn tốt hơn là thiếu chúng.
2. Màu sắc
.jpg)
Màu sắc là một trong những nguồn tài nguyên quan trọng nhất của ứng dụng hay trang web. Chúng diễn tả cảm xúc, nhận diện một dịch vụ hay một công ty và giúp chúng ta thu hút sự chú ý của người dùng. Mặc dù vậy bạn cũng cần phải thận trọng, bởi dùng sai màu có thể gây ra sự rối rắm.
Sự lựa chọn màu sắc cho dự án luôn luôn có liên kết với công ty của khách hàng, đa số là bạn sẽ được cung cấp một bảng hướng dẫn về phong cách và được phép sử dụng khá hạn chế các màu sắc trong khuôn khổ đó , nhưng sẽ luôn có cách giải quyết. Cách tốt nhất đó là học về các màu sắc và cách chúng tương tác lẫn nhau.
3. Fonts
.jpg)
Typography cùng với màu sắc có lẽ là nhân tố đầu tiên mà người dùng tiếp xúc, và do vậy chúng cần phải được lựa chọn rất kỹ càng.
Có 2 loại font, serif (font có chân) and sans serif (font không châm). Serif là các chân chữ nhỏ và các phần trang trí của một số font chữ, chẳng hạn như Times New Roman. Kiểu chữ serif thường trông cổ điển và trang trọng, trong khi sans serif thì lại hiện đại và gần gũi hơn.
Ngày nay rất nhiều ứng dụng và website sử dụng các font sans serif, thường để tạo ra cảm giác trẻ trung, hiện đại và gần gũi hơn với người dùng, mặc dù vậy cũng có một vài trường hợp sử dụng các font serif fonts để truyền tải cảm giác sâu sắc và sành điệu hơn.
Bình thường, sẽ có các cặp font được sử dụng, một cho tiêu đề và các heading (h1, h2), và một cho các phần chữ trong đoạn văn và các phần ký tự khác. Có một công cụ miễn phí có thể hỗ trợ chúng ta trong công việc này đó là Google Fonts. Sẽ có một danh sách lớn các họ font hoàn toàn miễn phí và sẵn sàng để bạn sử dụng.
Chúng ta có thể tìm kiếm và lọc theo loại font, kiểm tra bằng bất kỳ dòng ký tự nào để kiểm tra xem khi viết lên trông chúng sẽ như thế nào, nó cung cấp trực tiếp các link cần thiết để sử dụng font trong HTML và CSS, cho phép chúng ta tải về và cài đặt trên máy tính, và nó có một tùy chọn rất hay đó là khi chọn một font thì nó sẽ đưa ra gợi ý các font phổ biến mà hay đi kèm với font đó.
4. Các icon
Các icon có thể được coi là phần mở rộng từ font. Có một hệ thống các icon tốt trong dự án giúp tạo ra sự gắn kết về thị giác và cung cấp cho bạn các phần tử để hỗ trợ các phần thông tin quan trọng.
Có một điều cần phải hiểu ở đây đó là các icon chỉ mang tính hỗ trợ các phần thông tin cụ thể chư không nên trở thành chủ thể chính.
Bạn phải lưu ý rằng kích cỡ của icon không được quá lớn để không lấn át phần thông tin. Mặc dù vậy, chúng ta cũng có tùy chọn sử dụng icon có viền thay vì các icon đặc, trong các trường hợp đó thì kích cỡ của icon sẽ lớn hơn, tuy nhiên vì là các đường viền nên chúng sẽ không tạo ra thêm gánh nặng thị giác.
Có rất nhiều các hệ thống icon, nhưng ở đây các bạn có thể sử dụng 2 trang hoàn toàn miễn phí. Thứ nhất là Font Awesome. Nó có hơn 1500 icon miễn phí tải về để sử dụng cho các dự án. Trang thứ 2 đó là Ionicons, một hệ thống đi kèm với một framework Ionic nhưng chúng ta có thế sử dụng thoải mái và miễn phí bởi nó là mã nguồn mở.
5. Phân cấp thị giác
.jpg)
Tất cả các phần đã giải thích ở trên sẽ giúp cho việc xây dựng phân cấp thị giác, là thứ bậc mà chúng ta có thể kiểm soát để người dùng thấy một cái gì đó đầu tiên, hay ít nhất là thu hút sự chú ý để họ đọc vào chi tiết, các thông tin thứ cấp và nội dung.
Sự phân cấp được xây dựng từ tất cả mọi thứ: khoảng cách giữa các phần và các tiêu đề, màu nền phù hợp với màu font, kích cỡ font, và độ dày của font.
Ví dụ, so với ảnh trước chúng ta có thể thấy chỉ cần đơn giản là đổi màu của dòng văn bản miêu tả và độ dày của tiêu đề, thì phần tiêu đề sẽ nổi bật lên hẳn so với phần miêu tả, là cái người dùng sẽ đọc sau.
Tương tự với việc căn chỉnh khoảng cách phù hợp, chúng ta có thể phân tách thị giác các đối tượng thành 2 phần, một phần với tiêu đề và miêu tả, và phần kia là các thông tin liên quan giúp người mua ra quyết định, chẳng hạn như giá cả và đánh giá sản phẩm.
Mong rằng 5 lời khuyên này sẽ giúp công việc của các lập trình viên frontend về phần thiết kế UI/UX trở nên dễ dàng hơn.
> Chờ chút: Nếu bạn đang tự học Front end và muốn đi làm nhanh về lĩnh vực này thì hãy tham gia ngay KHÓA HỌC FRONT END chuyên nghiệp với React.js. Đào tạo từ số 0 cho người mới bắt đầu. Hỗ trợ giới thiệu thực tập / Việc làm sau khóa học.
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0383.180086
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python