9 mẹo thiết kế web cần thiết cho người mới bắt đầu DIY

Thiết kế web nguyên tắc cơ bản & thực hành tốt nhất để giúp người mới bắt đầu ở bất kỳ cấp độ nào thiết kế trực quan một chuyên nghiệp & trang web tìm kiếm kiểu dáng đẹp.


Mẹo thiết kế web cho người mới bắt đầu

Ngày nay, bất cứ ai cũng có thể trở thành một nhà thiết kế web. Đúng, đó là một tuyên bố táo bạo – nhưng với khả năng tiếp cận với phần mềm thiết kế nguồn mở như Nhìn, và với các nền tảng xây dựng trang DIY như Wix và Weebly tràn ngập thị trường, ranh giới giữa nghiệp dư và ngay lập tức nhà thiết kế web đã trở nên mỏng hơn và nguy hiểm hơn vào cuối. Điều thú vị về sự sáng tạo là không ai có thể quyết định cho bạn khi bạn sẵn sàng để hoàn thành một vai trò nhất định. Rất nhiều ngôi sao nhạc rock không bao giờ tham gia các bài học âm nhạc; nhiều nghệ sĩ thành công không bao giờ nghiên cứu giải phẫu người; và phần lớn các nhà thiết kế web ngoài kia không có bằng cấp chính thức. Vì vậy, nếu bạn đã tạo ra trang web kinh doanh của riêng bạn, bạn có thể tự tin nói rằng bạn là một nhà thiết kế web của Cameron không? Điều đó để bạn xác định.

Bất cứ ai cũng có thể trở thành một nhà thiết kế web với nền tảng xây dựng trang web DIY.

Nhấn vào đây để Tweet

Nếu bạn là người theo dõi blog này, thì bạn có thể đã đưa ra quyết định xây dựng trang web của mình. Mặc dù bạn có thể cảm thấy hoàn toàn choáng ngợp bởi lượng thông tin đáng kinh ngạc cần có để tìm hiểu về phát triển web, bạn có thể yên tâm khi biết rằng chủ doanh nghiệp với rất ít kinh nghiệm thiết kế thực sự có thể tạo ra các trang web trông chuyên nghiệp. Tất cả bắt đầu với việc tuân theo một số nguyên tắc cơ bản, nếu được áp dụng đúng cách, có thể đi xa tới mức độ tin cậy của thiết kế và trải nghiệm người dùng trên trang web của bạn.

Hướng dẫn này là gì (và nó là gì)

Để rõ ràng, chúng tôi đã nói về những điều cơ bản của thiết kế web ở đây, và ở đây, chúng sẽ đi sâu vào các chủ đề nâng cao hơn như hệ thống lưới, JavaScript hoặc khung CSS. Hướng dẫn này cũng giả sử bạn đang sử dụng một số loại trình tạo trang web kéo và thả để bạn có thể thiết kế trang web mà không cần mã hóa. Cho dù bạn đang sử dụng một mẫu hiện có từ người xây dựng trang web của bạn hoặc bắt đầu từ đầu (một tùy chọn tham vọng hơn cho người mới bắt đầu), hướng dẫn này sẽ giúp bạn với các nguyên tắc và thực hành thiết kế web cơ bản bạn nên áp dụng cho trang web của mình. Một bài viết duy nhất về thiết kế web sẽ không thể biến bạn thành một chuyên gia ngay lập tức, vì vậy hãy xem đây là bước đầu tiên của bạn vào một thế giới rộng lớn hơn.

MẸO NHANH: Một kiến ​​thức cơ bản về HTML và CSS sẽ là những lợi ích to lớn cho bất kỳ nhà thiết kế web non trẻ nào. Nếu bạn thực sự muốn bắt tay vào viết mã, tôi khuyên bạn nên kiểm tra Trường W3 để tìm hiểu thêm về nền tảng.

Khái niệm cơ bản về thiết kế web cho người mới bắt đầu

Hãy để chúng tôi đi xuống, phải không? Dưới đây là một số xu hướng và hướng dẫn hữu ích nhất cần biết khi xây dựng trang web đầu tiên của bạn:

1. Bỏ chuột, nhặt bút chì

Trang web của bạn có thể đã tồn tại như một thực thể hoàn chỉnh, đẹp đẽ trong tâm trí của bạn, đó là lý do tại sao bạn ngay lập tức nhảy vào Photoshop (hoặc tệ hơn là trình duyệt và HTML) để lên kế hoạch cho nó. Whoa, whoa lối đi mát mẻ máy bay phản lực của bạn trong một giây! Don lồng đặt xe trước ngựa. Đầu tiên, lấy ra một cây bút chì và một tờ giấy và bắt đầu đưa ý tưởng của bạn vào một cái gì đó dễ dàng hữu hình. Đây là giai đoạn quan trọng để vạch ra cấu trúc trang web của bạn bằng cách sử dụng không có gì ngoài hình chữ nhật, hình tượng trưng và ý tưởng được truyền cảm hứng (thường được gọi là cấu trúc dây). Mọi thứ có thể siêu thô tại thời điểm này; không ai có thể nhìn thấy nó ngoài bạn.

Ví dụ khung dây trang webMột khung dây trang web giúp bạn phát triển bố cục và cấu trúc cho trang web của bạn, đồng thời cải thiện trải nghiệm người dùng (UX) và tiết kiệm thời gian.

Ở giai đoạn này dễ dàng hơn nhiều để thay đổi bố cục mà bạn nghĩ ban đầu sẽ hoạt động nhưng bây giờ phát hiện ra là lộn xộn và khó hiểu trên giấy. Điều này sẽ giúp bạn tiết kiệm nhiều giờ thất vọng thay vì thực hiện cùng một khám phá khi trang web được mã hóa và trong trình duyệt. Thêm vào đó, nó giúp xây dựng một trang web một cách đáng kể khi bạn có một tài liệu tham khảo trong tay để tham khảo thay vì bị mù.

2. Thực hiện theo một hệ thống phân cấp

Nó có một thực tế là hầu hết những người lướt web có xu hướng chỉ quét các trang web hơn là dành thời gian để thực sự đọc mọi thứ. Bạn cần sẵn sàng cho việc này bằng cách đặt nội dung quan trọng nhất lên hàng đầu. Điều này có nghĩa là người dùng sẽ có thể tiêu hóa thông tin quan trọng nhất trên một trang tất cả trong một màn hình khi tải ban đầu mà không phải phóng to hoặc cuộn. Điều này tất nhiên là nói dễ hơn nhiều so với thực hiện. Dưới đây là một vài mẹo để giúp bạn hiểu rõ hơn về tầm quan trọng của lý thuyết thiết kế này:

Giữ nội dung trên màn hình đầu tiên

Chúng tôi gọi đó là màn hình ban đầu của nội dung được tải, trong đó, màn hình xếp lại, tất cả mọi thứ bên dưới nó phải được cuộn để xem đều được coi là thứ yếu. Nói chung, thông tin quan trọng nhất của bạn nằm ở phía trên nếp gấp. Điều chính cần thực hiện trong lĩnh vực này là lôi kéo người dùng hành động hoặc tạo ra động lực để cuộn xuống hơn nữa.

Sử dụng hình ảnh Hero Hero

Một xu hướng phổ biến trong thiết kế web hiện nay là lấp đầy khu vực này trên khu vực gấp nếp với một cái được gọi là hình ảnh hoặc biểu ngữ của anh hùng. Đây là những hình ảnh nền toàn màn hình với văn bản chồng chéo rất ngắn gọn và chính xác, thường được ghép nối với nút kêu gọi hành động. Có khả năng toàn bộ mục đích của trang web có thể được chứa trong khu vực biểu ngữ này, nhưng nó cũng đóng vai trò là một mồi tuyệt vời cho nội dung để theo dõi.

Ví dụ hình ảnh anh hùng / biểu ngữ

Thay đổi tùy chọn có thể thay đổi tùy thuộc vào thiết bị

Ở đây, nơi mà mọi thứ trở nên phức tạp và tại sao bạn không nên quá cố gắng để phù hợp với mọi thứ trên dòng ma thuật này. Tùy thuộc vào thiết bị người dùng, kích thước màn hình có thể thay đổi rất nhiều. Màn hình 5K giảm xuống có độ phân giải dọc là 2880 pixel, trong khi iPhone 5 có ít hơn một nửa số này. Điều này có nghĩa là người dùng di động chỉ cần aren sẽ có thể phù hợp với nhiều nội dung vào bất động sản trên màn hình của họ. (Thêm về điều này sau.)

MẸO NHANH: Nguyên tắc chung là đảm bảo các dòng chữ trên màn hình gấp nếp phù hợp với mẫu số chung thấp nhất của kích thước màn hình. Điều này thường được chấp nhận là 768 pixel độ phân giải dọc.

3. Kiểu chữ là thiết kế của bạn

Trừ khi bạn đang điều hành một doanh nghiệp nhiếp ảnh, văn bản là yếu tố quan trọng nhất của bất kỳ trang web nào, vì vậy, điều quan trọng là phải thực hiện đúng phần này. Trang web của bạn Hệ thống phân cấp phụ thuộc rất nhiều vào kiểu chữ bạn chọn: cách các tiêu đề, tiêu đề phụ và văn bản cơ thể của bạn theo một dòng chảy tự nhiên và vẫn khác biệt trực quan với nhau. Để có cái nhìn toàn diện về kiểu chữ, hãy xem hướng dẫn thực hành tốt nhất của chúng tôi. Dưới đây là một số điều quan trọng:

  • Hãy chắc chắn rằng văn bản là dễ đọc (tránh phông chữ hoa!) và đủ lớn (thường khoảng 16px cho thân máy).
  • Bám sát không hơn hai phông chữHãy chắc chắn rằng họ kết hợp tốt với nhau!
  • Cung cấp cho đoạn văn của bạn một số chỗ để thở giữa nhau và đặt đủ đệm hàng đầu hoặc là lề trên tiêu đề của bạn để biểu thị sự phá vỡ rõ ràng trong nội dung.
  • Tránh các dòng văn bản dài. Nó dễ dàng hơn trong mắt cho các đoạn văn gần như không nhiều hơn Dài 15 từÍt hơn một chút so với màn hình di động.
  • Serif phông chữ thường tốt nhất chỉ có trong bản in trừ khi chúng được sử dụng trong các tiêu đề lớn trên web.

4. Màu sắc & Tương phản là rất quan trọng

Chúng tôi đã nói về tâm lý màu sắc theo chiều dài, nhưng khái niệm này lặp đi lặp lại. Màu sắc bạn chọn cho trang web của bạn đóng một vai trò to lớn trong cách người dùng cảm nhận thương hiệu của bạn, cũng như họ có động lực như thế nào khi hành động (tức là: mua đồ) thông qua trang web của bạn. Tại sao? Vâng, mỗi màu sắc gợi lên những cảm xúc nhất định, và vì bản chất vốn có của chúng hoặc do điều kiện văn hóa, những màu sắc này đã trở nên gắn liền với một số loại hình kinh doanh. Nếu một công ty đồ chơi trẻ em hay một cố vấn tài chính vẽ toàn bộ trang web của họ bằng màu đen hoàn toàn, nó hoàn toàn sẽ gửi tín hiệu sai cho khán giả dự định của họ. Trên flipside, một màu cam sáng hoặc một màu xanh dễ chịu, tương ứng, sẽ nắm bắt được giai điệu hoàn hảo và nhận thức cho khách hàng của họ.

Ví dụ về màu sắc thiết kế webMàu xanh là màu gợi lên sự tự tin và tin cậy, một lựa chọn phổ biến cho các trang web liên quan đến tài chính.

Nếu bạn đã thiết lập màu sắc cho thương hiệu của mình, thì hãy sử dụng màu sắc trên trang web của bạn. Nó tốt nhất, tuy nhiên, để giữ cho nó ở không quá ba màu cho trang web của bạn; Giống như phông chữ, bạn không muốn làm quá mức ở đây hoặc trang web của bạn có thể bị rối loạn đa nhân cách. Ngoài ra, hãy cảnh giác với quá nhiều màu sắc trên trang web của bạn; đôi mắt của chúng ta bị hút vào chúng như những cái bẫy mật ong và chúng có thể làm gián đoạn dòng chảy tự nhiên của nội dung của bạn. Chỉ sử dụng màu khi cần thiết nhất, chẳng hạn như cho các liên kết hoặc nút.

Về chủ đề tương phản, điều cần thiết là văn bản của bạn nổi bật trên nền. Sử dụng màu xám nhạt, màu vàng hoặc màu xanh lá cây cho phông chữ của bạn gần như chắc chắn sẽ khiến chúng vô hình trên trang. Màu đen trên nền trắng là sự kết hợp tương phản lớn nhất và nói chung là những gì bạn nên bám vào.

MẸO NHANH: Nó tốt nhất nên tránh bão hòa đầy đủ với màu sắc trên web. Pure Red (giá trị hex # ff0000) là một cú đấm quá mạnh vào mắt. Tương tự, Màu đen thuần khiết (# 000000) cho phông chữ có xu hướng rung quá mạnh đối với mắt, trong khi màu đen hơi giảm (# 333333) giúp đọc dễ dàng hơn.

Bạn cũng muốn văn bản của bạn bật lên so với hình ảnh nền. Sử dụng ảnh rất bận có thể làm mất tập trung vào văn bản, vì vậy để tránh sự cố này, hãy sử dụng ảnh ít chi tiết hơn hoặc sử dụng lớp phủ của rgba (51,51,51,0,5) để giúp làm mềm hình ảnh bên dưới văn bản.

ví dụ lớp phủ hình ảnhSử dụng lớp phủ phía sau văn bản để giúp nó bật lên từ nền.

Độ tương phản cũng đóng một vai trò trong cách người dùng bị lôi cuốn vào các yếu tố chính nhất định của trang web của bạn. Các nút kêu gọi hành động quan trọng nhất của bạn phải thu hút sự chú ý thông qua việc sử dụng các màu tương phản. Một màu xanh da trời Mua ngay! Nút mất đi tính cấp bách và giá trị của nó khi bị nuốt chửng bởi một trang web sử dụng màu xanh ở khắp mọi nơi, nhưng một nút màu đỏ trên cùng trang đó đã thu hút sự chú ý của người dùng bằng cách hét lên Hey Hey! Nhấp vào đây!”

6. Sử dụng hình ảnh

Chọn hình ảnh phù hợp để sử dụng trên trang web của bạn một phần xuất phát từ năng khiếu nghệ thuật của riêng bạn, nhưng cũng có những cân nhắc về trí tuệ để giúp điều đó giúp ích cho quá trình lựa chọn của bạn. Thứ nhất, tránh tô điểm trang web của bạn bằng những bức ảnh không liên quan chỉ vì chúng có thể trông đẹp. Thay vào đó, hãy nghĩ về cách mỗi hình ảnh bạn sử dụng phục vụ mục đích riêng của nó và quan trọng hơn là cách nó hoạt động như Nội dung. Một bức ảnh được lựa chọn tốt có thể truyền tải thương hiệu, dịch vụ, sản phẩm hoặc đối tượng của bạn hiệu quả hơn nhiều so với lời nói. Sử dụng ảnh để giúp người dùng của bạn hiểu điều gì đó, để khơi gợi cảm xúc hoặc để truyền cảm hứng cho niềm tin và sự tự tin; sử dụng chúng hoàn toàn vì lý do thẩm mỹ nên là thứ yếu.

Hiểu các loại tệp & Nén

Có một bước bổ sung phải được thực hiện để sử dụng hình ảnh trên web. Những bức ảnh ưa thích mà bạn có được từ các trang web như ShutterstockiStock có thể khá lớn (5.000+ pixel ngang và kích thước hơn 10 megabyte) rất phù hợp để in, nhưng chúng không phù hợp cho các trang web. Không phải ai cũng có Internet cáp quang siêu tốc, vì vậy bạn phải giảm kích thước hình ảnh của mình để phù hợp với thời gian tải (chưa kể 40% khách truy cập sẽ rời đi nếu trang web mất hơn 3 giây để tải!). Thông thường, bạn muốn giữ mỗi hình ảnh của mình tại tối đa 500 kilobyte về kích thước, mặc dù kích thước tệp trung bình của bạn có lẽ phải ở khoảng 100 kilobyte.

  • JPEG là định dạng chuẩn cho ảnh. Đây là một định dạng mất, có nghĩa là chất lượng hình ảnh của nó bị giảm khi nén. Nếu bạn sử dụng JPEG cho ảnh nền có chiều rộng đầy đủ thì tôi khuyên bạn nên giữ độ phân giải ngang của nó ở không dưới 1200px. Đối với mục đích chung, tránh sử dụng bất kỳ hình ảnh nào có ít hơn 600px độ phân giải ngang, vì nó có thể sẽ xuất hiện mờ trên màn hình hiện đại.
  • PNG là lựa chọn ưu tiên cho đồ họa hoặc cho hình ảnh yêu cầu minh bạch. Đây là một định dạng lossless, rất tốt để duy trì chất lượng hình ảnh nhưng cũng có thể tăng kích thước tệp. Nói chung, bạn sẽ sử dụng đồ họa PNG cho hình minh họa, biểu tượng hoặc hình ảnh nhỏ hơn có thể được xếp chồng lên trên các yếu tố khác vì tính trong suốt của chúng. Bạn hiếm khi cần một PNG lớn hơn 1000px.
  • SVG (Đồ họa vectơ có thể mở rộng) là một định dạng mới hơn đang thay thế QUÀ TẶNG và thậm chí PNG trong một số trường hợp. Vẻ đẹp của SVG là nó có thể lớn hoặc nhỏ như trên màn hình mà bạn cần, tất cả trong khi vẫn giữ được độ rõ nét và độ sắc nét hoàn hảo (và vẫn là kích thước tệp nhỏ). Bạn nên cân nhắc sử dụng SVG cho bất kỳ logo, biểu tượng hoặc biểu đồ véc-tơ trên trang web của bạn; khi màn hình DPI cao hiện đang trở nên phổ biến, độ sắc nét của SVG sẽ cung cấp chất lượng hình ảnh tốt nhất.

Ví dụ loại tệp hình ảnh

6. Thiết kế di động đầu tiên

Bây giờ chúng tôi đã đạt đến thời điểm mà hầu hết mọi người sử dụng nội dung trực tuyến bằng điện thoại của họ thay vì trên máy tính để bàn. Kết quả là, có sự ưu tiên lớn hơn nhiều trong thiết kế web để phù hợp với trải nghiệm di động, điều này đã dẫn đến triết lý thiết kế đầu tiên trên điện thoại di động.

Về cơ bản, điều này có nghĩa là, trong giai đoạn phác thảo và lập kế hoạch ban đầu của bạn trên giấy, tốt nhất nên tập trung đầu tiên vào bố cục di động của trang web. Chỉ nội dung quan trọng nhất cần thiết cho chức năng của trang web của bạn sẽ được hiển thị trên màn hình nhỏ hơn. Điều này buộc bạn phải đơn giản hóa bố trí của bạn và cắt bỏ bất kỳ yếu tố gây xao lãng ngay từ đầu. Nghĩ lại về nội dung của bạn trên nội dung gấp nếp: nếu trước tiên bạn đảm bảo rằng tất cả các thông tin quan trọng có thể vừa với màn hình ban đầu của điện thoại, thì bạn sẽ biết chắc chắn nó sẽ phù hợp với màn hình lớn hơn. Khi bạn đã đóng đinh bố cục thiết bị di động thiết yếu, sau đó bạn có thể bắt đầu thêm phần tô điểm hoặc hình ảnh lớn hơn cho màn hình máy tính để bàn.

Bố cục di động của bạn giả định một thiết kế dọc hơn tạo cảm hứng cho việc cuộn, thay vì phong cảnh rộng của máy tính để bàn. Nếu, giả sử, trang sản phẩm của bạn hiển thị danh sách theo dạng lưới 3 trên máy tính để bàn, thì thông thường bố cục trên thiết bị di động của bạn sẽ hiển thị chúng dưới dạng một cột duy nhất.

Có, điều này có nghĩa là về cơ bản bạn cần tạo một số bố cục cho mỗi trang của trang web của bạn. Rất may, bất kỳ người xây dựng trang web tốt nào cũng nên cung cấp các mẫu phản hồi tự động điều chỉnh các bố cục này để bạn có thể chỉ cần tinh chỉnh chúng.

MẸO NHANH: Đảm bảo rằng không có yếu tố đơn lẻ nào trên trang web của bạn, đặc biệt nếu nó tương tác với nhau, ít hơn 44px x 44px về kích thước. Tại sao? Đây là mục tiêu nhỏ nhất có thể là nơi ngón tay vẫn có thể chạm chính xác vào nó.

7. Giữ mọi thứ liên kết

Khi các yếu tố dường như được đặt lẻ tẻ trên trang web của bạn, điều đó thường là do vấn đề căn chỉnh. Hãy tưởng tượng trang web của bạn trên một tờ giấy biểu đồ. Tách nó thành các cột chẵn bằng cách vẽ, ví dụ, sáu đường thẳng. Bây giờ bạn muốn đảm bảo rằng các cạnh trái của các thành phần của bạn được phân phối và căn chỉnh chỉ với sáu đường thẳng đứng này.

8. Giữ cho nó đơn giản

Người ta thường nói rằng thiết kế web tốt nhất không được chú ý; nó chỉ là thiết kế kém mà gọi sự chú ý đến chính nó. Như đã đề cập trước đó, khía cạnh quan trọng nhất của bất kỳ trang web nào chỉ đơn giản là văn bản của nó. Nếu bạn có thể cung cấp kiểu chữ nổi bật là một niềm vui để đọc, rất có thể bạn đã giành chiến thắng cần phải làm nhiều hơn nữa. Cố gắng để thiết kế lại trang web của bạn sẽ làm lộn xộn và làm phức tạp mọi thứ.

Là bóng hộp cần thiết? Những mô hình điên rồ, trang trí công phu? Hàng tá màu sắc? Chắc là không.

9. Không gian mở lớn

Nội dung của bạn cần chỗ để thở. Khoảng trắng là sự lựa chọn thiết kế phổ biến cho các trang web hiện đại: không gian rộng mở, trống rỗng cho các khu vực giữa các nội dung. Đó là một cách thú vị hơn để tiêu hóa thông tin và nó cũng khuyến khích bạn xóa văn bản và hình ảnh thừa để giữ cho trang web sạch sẽ.

Phần kết luận

Thiết kế web có thể là một lĩnh vực công nghệ rộng lớn để học hỏi, các khái niệm để thực hành, ngôn ngữ để nghiên cứu và nghệ thuật để làm chủ. Chỉ với kinh nghiệm, tất cả các thành phần này sẽ bắt đầu có ý nghĩa, nhưng bạn đã đi đúng hướng chỉ bằng cách nắm bắt các nguyên tắc cơ bản của những gì làm cho một trang web tốt hoạt động. Tôi hy vọng rằng hướng dẫn này đóng vai trò là điểm khởi đầu của bạn và nó mang lại cho bạn sự tự tin để đưa trang web của bạn vào tay bạn và xây dựng nó theo cách mà chỉ chủ doanh nghiệp biết rõ nhất.

Một nhà thiết kế được sinh ra!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map