"Tôi thật kinh tởm trong thiết kế."
Tôi đã nghe nó nhiều lần trước đây.
Tôi biết nhiều người điều hành các trang web và tạo ra nội dung tuyệt vời, nhưng họ khẳng định họ không thích thiết kế.
Vô lý!
Tôi nghĩ rằng bất cứ ai cũng có thể làm sáng mắt thiết kế của họ, nhưng nếu bạn có thể cần một chút trợ giúp thì bài đăng này là dành cho bạn.
Trong hướng dẫn này, bạn sẽ tìm thấy 9 Nguyên tắc thiết kế cơ bản mà bạn có thể áp dụng cho mọi thứ bạn làm.
Tôi đã viết những mẹo này để biến chúng thành hành động nhất có thể để chúng dễ thực hiện trên trang web của bạn.
Vui lòng tham khảo danh sách này bất cứ khi nào bạn cần lựa chọn thiết kế và tôi hứa với bạn rằng kết quả sẽ đẹp hơn một chút.
Hãy bắt đầu với …
1. Không bao giờ sử dụng văn bản màu
Trừ khi bạn biết những gì bạn đang làm, văn bản màu có xu hướng xấu và khó đọc.
Giống như một quy tắc vàng, luôn luôn làm cho văn bản của bạn đen hoặc trắng.
Nếu bạn có văn bản màu trên trang web của bạn, bạn nên chọn làm như vậy.
Đó là thứ tôi nghĩ.
Thí dụ 1
Nút này có văn bản màu xanh và nền màu xám nhạt. Nó trông hơi phẳng và văn bản lấn át hình dạng của nút:
Nếu tôi lật các màu bằng màu xanh lam cho nền và văn bản sáng, nó sẽ đẹp hơn nhiều:
Và trong khi chúng ta nói về các nút …
Nếu nút của bạn có nền màu, nó sẽ luôn trông đẹp hơn với văn bản màu trắng.
Văn bản màu đen có xu hướng trông khủng khiếp trên đầu màu trừ khi màu đó thực sự nhạt hoặc chỉ có màu xám nhạt hơn:
Nếu bạn thường sử dụng văn bản màu trong bài viết của mình, bạn sẽ đánh giá cao các ý tưởng trong ví dụ sau.
Thí dụ # 2
Một ví dụ khác, bạn có thể có văn bản màu trong một bài đăng vì bạn muốn nó nổi bật, như thế này:
Văn bản này trông không được tốt lắm vì nó có màu xanh!
Có nhiều cách thẩm mỹ hơn để thu hút sự chú ý với màu sắc. Chưa kể rằng một số màu nhất định (như màu xanh) làm cho văn bản đơn giản trông giống như một liên kết.
Một cách tiếp cận khác để thu hút sự chú ý đến màu sắc là làm cho văn bản màu trắng và nền màu xanh:
Đây là rất nhiều màu sắc, vì vậy hãy sử dụng nó một cách tiết kiệm!
Hoặc bạn có thể giảm độ bão hòa để nền rất nhạt và sau đó làm cho văn bản màu đen cho một cái nhìn tinh tế hơn:
Văn bản màu đen trông tốt trên nền nhạt.
Hoặc bạn có thể để lại văn bản màu đen và thêm một vệt màu xung quanh văn bản:
Đây là một khía cạnh đơn giản hơn mà vẫn nổi bật.
Hoặc bạn có thể kết hợp nền và đường viền:
Đây là một cách hấp dẫn khác để sử dụng màu sắc.
Để tóm tắt các quy tắc về văn bản màu:
Bạn nên sử dụng nền màu hoặc viền màu xung quanh văn bản thay vì thay đổi màu của văn bản. Ngoài ra, màu trắng luôn trông đẹp nhất trên nền màu trừ khi màu rất nhạt.
Bây giờ hãy chọn màu bạn sẽ sử dụng.
vật dụng
2. Sử dụng bảng màu
Chọn màu sắc trên đường đi là một sai lầm rất lớn của tân binh.
Bất cứ khi nào bạn áp dụng màu sắc cho trang web của bạn, bạn nên luôn luôn chọn một màu từ bảng màu của bạn.
Bằng cách sử dụng bảng màu, bạn chỉ cần chọn từ các màu hiện có và biết rằng kết quả sẽ trông tốt và "trên nhãn hiệu" mà không cần bất kỳ nỗ lực nào.
Và đây là điều …
Tôi đã là một nhà thiết kế web trong nhiều năm và vẫn có một thời gian khó khăn để tạo ra các bảng màu đẹp.
Và đó là lý do tại sao tôi gian lận
Tôi không bao giờ tạo bảng màu của riêng tôi. Thay vào đó, tôi tìm thấy một bảng màu đẹp đã được tạo ra và sau đó chạm vào nó để đáp ứng nhu cầu thiết kế của tôi.
Tài nguyên bí mật của tôi để tìm bảng màu là Color Hunt.
Trang web tuyệt vời này có một cộng đồng các thành viên tạo và chia sẻ bảng màu mà họ thiết kế.
Nếu bạn duyệt trang chủ, bạn sẽ tìm thấy một danh sách vô tận các bảng màu đẹp để lựa chọn. Nhấp vào bất kỳ bảng màu nào sẽ đưa bạn đến trang của nó, nơi các bảng màu liên quan được liệt kê bên dưới.
Thành thật mà nói, thật thú vị khi duyệt các bảng màu và lấy ý tưởng và cảm hứng cho trang web của bạn.
Nếu bạn đã có một sắc thái trong tâm trí, bạn có thể chọn một màu để bắt đầu sử dụng thanh tìm kiếm.
Các từ khóa được xác định trước như "ấm" và "lạnh" cũng có sẵn để tìm các bảng màu phù hợp.
Khi bạn chọn một bảng màu bạn thích và thực hiện các màu trên trang web của bạn, bạn sẽ ngạc nhiên về sự khác biệt rất lớn mà nó tạo ra.
Hai mẹo đầu tiên đó sẽ đánh lừa khách truy cập của bạn nghĩ rằng bạn là bậc thầy về thiết kế xử lý màu sắc.
Bây giờ hãy nói về các nguồn!
3. Chỉ sử dụng 1 hoặc 2 nguồn
Màu sắc phải được chọn từ bảng màu của bạn. Các nguồn tương tự nhau.
Bạn phải chọn một hoặc hai phông chữ và sau đó sử dụng lại chúng cho mọi thứ.
Thông thường, khi người dùng WordPress học cách thay đổi phông chữ trên trang web của họ, họ đột nhiên muốn sử dụng tất cả!
Ví dụ, tôi đã thấy mọi người thay đổi phông chữ của một đoạn văn để làm cho nó nổi bật trong một bài đăng. Đó là một ý tưởng tồi. Nếu bạn cần văn bản nổi bật trong một bài đăng, bạn có thể:
- Tăng trọng lượng của phông chữ (đậm)
- Tăng cỡ chữ
- Thêm màu
Khi nói đến phông chữ, bạn nên chọn một hoặc hai cho toàn bộ trang web của bạnVà nếu bạn nghĩ rằng bạn cần nhiều hơn thế, hãy xem xét điều này …
Google đã thiết kế phông chữ Roboto (mà bạn cũng có thể sử dụng, đó là phông chữ Google) và họ sử dụng phông chữ này.
Họ sử dụng nó cho Google.com, Youtube, Gmail, Google Docs, Chrome, theo nghĩa đen tất cả các sản phẩm của họ sử dụng phông chữ này cho tất cả văn bản.
Vì vậy, nếu bạn bị thuyết phục, bạn cần nhiều hơn một phông chữ cho một trang web đẹp, hãy suy nghĩ lại!
4. Sử dụng phông chữ sans serif phổ biến
Tôi có một lối tắt khác cho bạn.
Thay vì khám phá hàng trăm phông chữ, tôi khuyên bạn nên chọn từ các phông chữ thành công nhất trên web.
Cách tiếp cận này về cơ bản đảm bảo rằng trang web của bạn sẽ trông tốt.
Để làm điều này, hãy truy cập Google Fonts và bạn sẽ tìm thấy các phông chữ xu hướng được liệt kê trên trang chủ.
Để tinh chỉnh kết quả, nhấp vào menu thả xuống và bỏ chọn tất cả các tùy chọn ngoại trừ.
Nếu bạn chọn bất kỳ phông chữ nào được liệt kê ngay bây giờ, trang web của bạn sẽ trông tuyệt vời.
Xin lưu ý rằng hầu hết các văn bản trên trang web của bạn xuất hiện trong bài viết của bạn và vì vậy chất lượng nguồn quan trọng nhất nó rất dễ đọc
Tất cả các phông chữ sans serif phổ biến nhất đều phổ biến vì chúng dễ đọc và hấp dẫn. Và trong trường hợp bạn đang tự hỏi …
Đây là những gì tôi làm quá!
Khi thiết kế các chủ đề mới, tôi thường tìm đến Google Fonts và tìm cảm hứng từ các xu hướng phông chữ.
Khi tôi muốn thêm một chút nhân vật vào thiết kế, tôi sử dụng chiến thuật tiếp theo này.
5. Sử dụng phông chữ màn hình cho các tiêu đề
Nếu bạn hài lòng với một phông chữ, bạn có thể bỏ qua chiến thuật này.
Nhưng nếu bạn cảm thấy sự sáng tạo của mình bị cản trở bởi một lựa chọn đơn giản như vậy, thì đây là những gì bạn có thể làm …
Sử dụng một phông chữ hiển thị cho các tiêu đề trang web của bạn.
Phông chữ đầu tiên bạn chọn được thiết kế để đọc ở kích thước nhỏ, nhưng một phông chữ được thiết kế riêng cho kích thước lớn (như màn hình lớn, bạn hiểu không?).
Vấn đề là, phông chữ màn hình thường rất phong cách, vì vậy việc lạm dụng chúng có thể làm cho trang web của bạn trông bắt mắt.
Tiêu đề là nơi hoàn hảo để sử dụng phông chữ hiển thị vì:
- Họ luôn tuyệt vời
- Được sử dụng một cách tiết kiệm
Nếu bạn muốn, bạn cũng có thể sử dụng lại phông chữ hiển thị cho tiêu đề trang web (hoặc logo).
Để tìm phông chữ hiển thị cho trang web của bạn, hãy truy cập lại Google Fonts, nhưng lần này, hãy thay đổi các danh mục để chỉ bao gồm các phông chữ hiển thị, như thế này:
Bạn sẽ thấy ngay từ xu hướng phông chữ đa dạng hơn với phông chữ hiển thị.
Tính đến thời điểm hiện tại, có khoảng 300 phông chữ màn hình trong Google Fonts, vì vậy hãy vui vẻ duyệt và nhớ chỉ chọn một phông chữ.
Dưới đây là một mẹo thiết kế dựa trên văn bản khác sẽ làm cho trang web của bạn đẹp hơn.
6. Làm cho các mục menu một từ
Trong tất cả các mẹo thiết kế được liệt kê trong bài này, đây là cách dễ nhất để thực hiện.
Hãy nhìn vào menu Chủ đề cạnh tranh:
Các mục menu là tỷ lệ và cách đều nhau, làm cho nó trông tốt.
Khi tạo menu của bạn, bạn phải làm cho mỗi mục menu một từ. Lý trí đi xuống không gian.
Ví dụ, hãy xem cách các mục menu cách nhau trong Thời báo New York.
Thật dễ dàng để điều hướng qua các chủ đề và phân biệt từng người trong số họ.
Khi bạn thêm nhiều từ vào một mục menu, bạn làm gián đoạn không gian đó. Mục menu trở nên dài hơn nhiều so với các mục khác và khoảng cách giữa các từ tạo ra một khoảng cách trong thiết kế.
Trong ảnh chụp màn hình sau, tôi đã thêm các mục menu giả vào menu NYT với nhiều từ khác nhau. Nhìn vào cách các menu trở nên khó hiểu:
Các không gian trong các mục menu rất khó phân biệt với các khoảng trắng giữa các mục menu.
Mặc dù các mục menu một từ hoạt động tốt nhất, thỉnh thoảng bạn vẫn có thể sử dụng từ thứ hai nếu cần. Chỉ cần đảm bảo có nhiều không gian hơn giữa các mục menu hơn là giữa các từ trong các mục menu.
Wistia sử dụng hai từ trong các mục menu và nó có vẻ tốt vì có nhiều khoảng trống giữa các mục menu:
Việc rút ngắn bất kỳ mục menu dài nào sẽ chỉ mất vài phút và ngay lập tức sẽ làm cho trang web của bạn hấp dẫn hơn.
Và trong trường hợp bạn không biết, bạn có thể làm cho nhãn của các mục menu của bạn khác với tiêu đề trang. Video này sẽ hướng dẫn bạn cách tạo menu tùy chỉnh và thay đổi nhãn menu:
Những lời khuyên sau đây sẽ giúp bạn làm cho nội dung của bạn hấp dẫn hơn.
7. Cân bằng văn bản với phương tiện truyền thông
Nếu bạn muốn trang web của bạn trông tuyệt vời, nội dung phải đẹp.
Nghiên cứu nội dung của các trang web phổ biến như Buzzfeed, Washington Post hoặc Bloomberg Businessweek và bạn sẽ tìm thấy các mẫu tương tự.
Họ liên tục phân chia văn bản với hình ảnh, bản đồ, video, trích dẫn, tweet và hình ảnh khác.
Danh sách Buzzfeed này bao gồm hình ảnh, nút chia sẻ, liên kết và tiêu đề sau hầu hết mọi đoạn.
tôi gọi anh ấy Quy tắc của 4 đoạn văn.
Khi chỉnh sửa bài viết của bạn, hãy chắc chắn bao gồm một yếu tố trực quan trên mỗi 4 đoạn văn.
Mục tiêu là giữ cho nội dung trực quan thú vị để nó không bị nhàm chán và nhàm chán khi người đọc chuyển từ đoạn này sang đoạn khác. Hình ảnh cũng làm cho nội dung nhiều thông tin và thú vị để đọc.
Với thực hành, bạn sẽ học cách làm điều này một cách tự nhiên khi bạn gõ, nhưng bạn luôn có thể lướt qua bài đăng của mình sau khi thực hiện và tìm địa điểm để đưa vào hình ảnh mới.
Để chia một chuỗi dài các đoạn, bạn có thể thêm:
- Hình ảnh
- Blockquote
- Video
- Tweets nhúng
- Quảng cáo
- Bàn
- Tiêu đề mới
- Danh sách
Đó cũng là một ý tưởng tốt để áp dụng đậm cho các phần quan trọng của văn bản của bạn để thu hút sự chú ý và tạo ra sự quan tâm trực quan hơn.
Và để rõ ràng: bạn không cần phải bao gồm một yếu tố trực quan cứ sau bốn đoạn. Đó là một xấp xỉ tốt để sử dụng trong khi thành thạo kỹ thuật này.
Như tôi vừa nói với bạn là bao gồm rất nhiều hình ảnh trong bài viết của bạn, đây là một mẹo để làm điều đó đúng cách.
8. Hình ảnh căn chỉnh trung tâm
Hình ảnh trong WordPress có thể có bất kỳ sự sắp xếp nào sau đây:
Khi thêm hình ảnh vào bài viết của bạn, bạn nên luôn luôn sử dụng căn chỉnh trung tâm.
Thêm nữa, đảm bảo hình ảnh rộng như nội dung của bài đăng.
Đây là cách tôi xem tất cả hình ảnh của mình trong các bài đăng của mình và hầu hết các biên tập viên cũng làm theo cách này.
Nếu bạn chọn căn lề trái hoặc phải, hình ảnh "nổi" sang một bên để văn bản bao quanh nó, như vậy:
"Float" là tên của thuộc tính CSS được sử dụng để bọc văn bản xung quanh các hình ảnh như thế này.
Dòng văn bản cuối cùng gần như hoàn toàn dưới hình ảnh luôn có vẻ khó xử, nhưng có một lý do khác khiến đây không còn là một phong cách phổ biến.
Nó có thể trông khủng khiếp trên điện thoại di động:
Các blogger thường làm nổi hình ảnh trong các bài đăng của họ như thế này, nhưng đó là khi các trang web có chiều rộng được xác định trước và chỉ hiển thị trên máy tính.
Bây giờ nội dung của bạn phải thích ứng với kích thước màn hình từ 400px đến 2, Rộng 560px.
Bạn có thể đã chọn một chủ đề đáp ứng, nhưng chủ đề của bạn sẽ không ngăn bạn đăng hình ảnh nổi bởi vì đó là lựa chọn của bạn.
Ý tôi là, căn chỉnh tất cả hình ảnh của bạn vào trung tâm và chúng sẽ trông tuyệt vời trên tất cả các thiết bị. Đơn giản như thế.
Nếu bạn muốn đa dạng hơn một chút, bạn có thể sử dụng kiểu ảnh rộng mới được thêm vào trong Gutenberg (yêu cầu hỗ trợ chủ đề):
Tôi có một mẹo cuối cùng để làm cho hình ảnh của bạn và các phương tiện truyền thông khác trông tuyệt vời.
9. Đặt phương tiện của bạn vào cột
Đây là một cái gì đó tôi thấy trên nhiều trang web người dùng cho các chủ đề của tôi.
Bằng cách thêm nhiều yếu tố đa phương tiện (hình ảnh, âm thanh, video), chúng sẽ được xếp chồng lên nhau.
Điều đó hoạt động tốt, nhưng nó không phải là không gian sử dụng tốt nhất. Người dùng phải cuộn quá xa để truyền hình ảnh, họ chỉ có thể nhìn thấy một hình ảnh tại một thời điểm và không biết có bao nhiêu hình ảnh còn lại khi họ cuộn.
Nếu bạn đang chèn ba hoặc nhiều hình ảnh liên tiếp, hãy sử dụng một bộ sưu tập.
Bằng cách sử dụng một bộ sưu tập, bạn có thể xem tất cả các hình ảnh cùng một lúc mà không cần cuộn.
Và tôi biết bạn đang nghĩ gì …
"Điều đó tốt, nhưng tôi muốn hình ảnh lớn hơn thế."
Đó là những gì a dành cho. Bạn có thể cài đặt một plugin hộp đèn như thế này và sau đó khách truy cập có thể nhấp vào hình ảnh trong bộ sưu tập để xem phiên bản toàn màn hình lớn hơn.
Giờ đây, thay vì phải cuộn qua tất cả các hình ảnh, khách truy cập có thể xem tất cả chúng cùng một lúc trong bố cục thư viện hấp dẫn. Ngoài ra, khi họ nhấp vào hình ảnh, hộp đèn sẽ hiển thị hình ảnh lớn hơn nếu nó được chèn vào bài viết.
Nói cách khác, sử dụng một bộ sưu tập cung cấp cho bạn tốt nhất của cả hai thế giới.
Khối Thư viện giúp dễ dàng bao gồm các phòng trưng bày hình ảnh và bạn có thể sử dụng khối Cột để liệt kê các cột của âm thanh và video được nhúng (và bất kỳ loại nội dung nào khác).
Khối cột bây giờ thậm chí còn dễ sử dụng hơn trong WP 5.3và bạn có thể làm theo hướng dẫn này về cách thêm cột vào bài đăng để được hướng dẫn từng bước.
Bất cứ khi nào bạn tìm thấy một danh sách dài các phương tiện nhúng trong bài đăng của mình, bạn sẽ biết đó là thời điểm hoàn hảo để sử dụng các cột.
Tạo một trang web đẹp hơn
Với những 9 quy tắc thiết kế, bạn đã sẵn sàng để tạo ra một trang web đẹp hơn.
Phần tốt nhất là không mất nhiều thời gian để thực hiện bất kỳ nguyên tắc nào trong số này. Đơn giản chỉ cần biết những gì cần làm là một nửa trận chiến.
Nếu bạn muốn bắt đầu bằng chân phải, hãy chắc chắn chọn một chủ đề làm cho nội dung của bạn trông tuyệt vời và bạn đang trên đường đến thẩm mỹ tốt hơn.
