Cách tạo một trang web đẹp ngay cả khi bạn không thể thiết kế

Điều này nghe có quen không - bạn có một ý tưởng tuyệt vời, bạn xây dựng ý tưởng đó, bạn bắt đầu nhìn vào kết quả cuối cùng và nghĩ ... Điều này trông thật kinh khủng.

Và phần tệ nhất, bạn không biết cách khắc phục. Dù gì thì chúng tôi cũng là nhà phát triển, không phải nhà thiết kế.

May mắn thay, bạn không cần phải là một nhà thiết kế tuyệt vời. Bạn chỉ cần phải tháo vát và hiểu một vài mẹo thiết kế đơn giản. Internet có đầy đủ các công cụ và tài nguyên miễn phí để bổ sung những kỹ năng thiết kế còn thiếu của bạn.

Tôi sẽ chỉ cho bạn cách tận dụng những nguồn lực đó để tạo ra thứ gì đó mà bạn có thể tự hào.

Hướng dẫn này sẽ bao gồm các công cụ, kỹ thuật và tài nguyên tôi sử dụng để thiết kế trang web. Nó không phải là kết thúc tất cả nhưng nó là một kim chỉ nam tuyệt vời cho những người đấu tranh với thiết kế. Chúng tôi sẽ xây dựng một ứng dụng có tên DesignDo. Nó sẽ là một bộ sưu tập các mẹo thiết kế và tài nguyên (rất meta!). Mọi thứ chúng tôi sử dụng sẽ miễn phí 100%. Để tập trung vào điểm của bài đăng này, chúng tôi sẽ không sử dụng khung giao diện người dùng. Chỉ là HTML tĩnh.

Lập kế hoạch

Sử dụng khung CSS

Bạn đã bao giờ chơi bowling với một người rất kinh khủng chưa? Họ đặt những vật cản đó trong làn đường để họ không thể ném một quả bóng máng xối? Khung CSS là phần đệm của bạn. Hầu như không thể ném một "quả bóng máng xối" với họ. Họ sẽ cung cấp cho bạn một điểm khởi đầu tuyệt vời và cũng cung cấp những hạn chế mà một nhà phát triển phải vật lộn với nhu cầu thiết kế.

Tôi muốn giới thiệu Tailwind CSS. Nó sử dụng các lớp là sự trừu tượng của các thuộc tính CSS. Nó đóng vai trò là bánh xe đào tạo để học CSS và thật dễ dàng để tạo các trang web đẹp mắt với nó. Đọc tài liệu ở đây .

Ngoài ra, nếu bạn không sử dụng front-end framework như React hoặc Vue, tôi khuyên bạn nên sử dụng alpine js. Thật tuyệt vời cho những thay đổi giao diện người dùng đơn giản như biến điều hướng của bạn thành menu bánh hamburger khi trên thiết bị di động.

Màu sắc

Giữ nó đơn giản.

Sử dụng nền trắng và văn bản màu đen hoặc xám đậm. Nếu bạn có văn bản màu đen trong một khu vực có màu nền tối hơn, chẳng hạn như một nút, hãy đổi nó thành màu trắng.

1 màu chính cho biểu trưng của bạn và các nút kêu gọi hành động. Sử dụng nó một cách tiết kiệm cho những thứ bạn muốn “nổi bật” trong thiết kế của mình.

Màu phụ nên là màu nhạt để thiệp nổi bật trên nền trắng. Cách đơn giản nhất là chỉ cần sử dụng các màu xám khác nhau cho việc này. Họ đi với tất cả mọi thứ.

Xác định tính cách của trang web của bạn

Mỗi trang web có một tính cách. Họ có thể nghiêm túc và giống như doanh nghiệp. Họ cũng có thể vui vẻ và nhẹ nhàng. Tìm ra những gì bạn muốn cá tính của trang web của bạn. Điều này sẽ xác định một số thuộc tính CSS mà bạn sẽ sử dụng. Tìm ra nó? Tốt.

Bây giờ, nếu bạn chọn nghiêm túc , tôi khuyên bạn nên sử dụng:

• Phông chữ : Sử dụng phông chữ CSS tailwind mặc định. Bạn sẽ không phải cấu hình bất cứ thứ gì.
• Bán kính đường viền : Không sử dụng bán kính đường viền. Các nút và hộp vuông tạo ra sự rung cảm nghiêm túc.
• Màu sắc : Đối với màu chính của bạn, xanh lam đậm, xanh lục, xám và tím đều là những lựa chọn tuyệt vời.

Nếu bạn chọn vui vẻ , tôi khuyên bạn nên sử dụng:

• Phông chữ : Tailwind Default hoặc Outfit
• Bán kính đường viền : Sử dụng bán kính đường viền từ trung bình đến lớn. Chọn 1 mặc dù. Không kết hợp các kích thước bán kính đường viền khác nhau. Giữ nó nhất quán.
• Màu sắc: Đối với màu chính của bạn, bạn có rất nhiều lựa chọn. Tôi sẽ đề xuất một màu sắc rực rỡ hơn.

Tìm cảm hứng

Được rồi, vậy là bạn đã có ý tưởng về tính cách trang web của mình. Bây giờ hãy đi tìm một số cảm hứng để khơi dậy sự sáng tạo của bạn. KHÔNG SAO CHÉP thiết kế của ai đó sang chữ T hoặc mã của họ. Sử dụng nó như một ngôi sao phía bắc của bạn.

Trang web truyền cảm hứng thiết kế web

• https://land-book.com/
• https://www.awwwards.com
• https://www.siteinspire.com/
• https://dribbble.com/

Lựa chọn của tôi

DesignDo sẽ là một trang vui nhộn / sáng tạo. Tôi sẽ sử dụng phông chữ tailwind mặc định và bán kính đường viền lớn trên các nút và thẻ. Tôi cũng sẽ sử dụng màu tím nhạt làm màu chính của mình.

Tôi sẽ sử dụng mẫu trang web này làm nguồn cảm hứng cho mình ...

Nó có một phần anh hùng tuyệt vời, nơi tôi có thể đặt một số bản sao về trang web của tôi là gì và một danh sách dọc, mà tôi sẽ cần liệt kê các mẹo thiết kế và tài nguyên của mình.

Làm việc thông minh hơn chứ không chăm chỉ hơn

Một phần của việc phát triển và thiết kế tốt hơn là nuốt chửng cái tôi của bạn. Bạn không phải là một nhà phát triển giỏi hơn bởi vì bạn xây dựng mọi thứ từ đầu. Bạn chỉ là một nhà phát triển chậm. Điều này cũng xảy ra với việc xây dựng trang web của bạn.

Tìm các thành phần hoặc chủ đề miễn phí

Tôi không bao giờ bắt đầu HTML của mình từ đầu. Tôi luôn bắt đầu với một số thành phần được tạo sẵn và bắt đầu từ đó.

Sẽ sử dụng một tùy chọn miễn phí tuyệt vời, Wicked Blocks .

Sử dụng trang web truyền cảm hứng của tôi để hướng dẫn tôi, tôi đã chọn ra các khối sau để sử dụng.

Tiêu đề của tôi

Anh hùng

Dưới đây là nội dung gấp:

Chân trang

Đặt các khối của bạn lại với nhau trong HTML

Trước khi bắt đầu tùy chỉnh trang web của mình, hãy tập hợp các khối lại với nhau trong HTML.

Đó là một khởi đầu tốt nhưng chúng tôi còn một số công việc trước khi DesignDo trở thành nơi chúng tôi muốn.

Logo

Một lần nữa, hãy giữ nó đơn giản!

Tôi thường sử dụng biểu trưng dựa trên văn bản cho các trang web của mình. Tên trang web của tôi là DesignDo, vì vậy đó là biểu tượng của tôi. Thông thường, tôi sẽ sử dụng màu chính làm nền và sử dụng văn bản màu trắng hoặc đen. Màu văn bản là tất cả về khả năng đọc. Vì vậy, nếu văn bản màu trắng khó đọc nằm trên màu chính của bạn, hãy sử dụng văn bản màu đen và ngược lại.

Bạn có thể tạo biểu trưng của mình bằng cách viết HTML hoặc sử dụng trình chỉnh sửa hình ảnh.

Nếu bạn quyết định sử dụng trình chỉnh sửa hình ảnh, tôi khuyên bạn nên sử dụng Photopea .

Đó là một bản sao của photoshop, hoàn toàn miễn phí và thật tuyệt vời! Bạn cũng có thể tải lên phông chữ của riêng bạn cho văn bản.

Đối với logo DesignDo, tôi sẽ sử dụng tên làm văn bản với phông chữ đậm hơn. Nền sẽ là màu chính của tôi.

Tôi cũng đang thêm một vòng xoay nhẹ vào logo để mang lại cho nó một chút đặc trưng. (Đừng làm điều này nếu bạn đang muốn có một thiết kế nghiêm túc hơn.

Liên kết điều hướng

Không nên làm gì nhiều với các liên kết điều hướng. Đảm bảo rằng văn bản có màu xám hoặc đen. Nếu bạn muốn thêm các biểu tượng cùng với văn bản, bạn có thể. Heroicons là một thư viện biểu tượng miễn phí tuyệt vời mà tôi luôn sử dụng. Tôi khuyên bạn nên sử dụng điều này nếu bạn đang tạo một trang nghiêm túc hơn.

Bạn cũng có thể sử dụng Heroicons cho một trang web vui nhộn / sáng tạo. Tôi cũng thích sử dụng biểu tượng cảm xúc cho các biểu tượng nếu tính cách trang web của tôi là vui vẻ và sáng tạo.

Đối với DesignDo, tôi chỉ có 1 liên kết điều hướng và tôi sẽ sử dụng biểu tượng cảm xúc lửa để thu hút sự chú ý hơn về nó.

Anh hùng

Vì chúng tôi đã sử dụng Wickedblocks để khởi đầu nên phần anh hùng không có nhiều thứ để chúng tôi làm.

Chúng tôi chỉ cần cập nhật một số văn bản. Khi xử lý các thẻ dòng tiêu đề lớn như của chúng tôi, hãy cấu trúc nó theo cách mà dòng đầu tiên dài hơn dòng thứ hai. Nó hấp dẫn hơn đối với mắt.

Chúng tôi cũng cần cập nhật màu của nút Thông báo cho tôi thành màu chính của chúng tôi

Nội dung

Một lần nữa, chúng tôi không nói xa về cách chúng tôi muốn nội dung dưới màn hình đầu tiên của mình trông như thế nào.

Tôi không cảm thấy các biểu tượng. Chúng không phù hợp với tính cách của trang web. Vì vậy, tôi sẽ liên hệ với các Heroicons để có được thứ gì đó phù hợp hơn với chủ đề của chúng tôi.

Cái đó tốt hơn! Tôi sẽ để riêng nền của các biểu tượng vì nó có màu xám nhạt và tương phản tốt với biểu tượng tối và nền trắng của chúng ta. Nó cũng được làm tròn để tuân theo chủ đề của chúng tôi về các bức xạ viền lớn.

“Dòng tiêu đề có độ dài ngắn” là H2 nhưng nó sử dụng các kiểu giống như mô tả bên dưới. Chúng tôi muốn tiêu đề của mẹo nổi bật và thu hút sự chú ý của người đọc. Tôi sẽ tăng kích thước và trọng lượng phông chữ của nó lên một chút (chúng tôi không muốn nó lớn hơn thẻ H1 phía trên).

Cuối cùng, chúng tôi sẽ cập nhật văn bản trình cắt cookie đến từ các khối độc ác với các mẹo thiết kế của riêng chúng tôi!

Bản tóm tắt

Rất nhiều người ủng hộ việc sử dụng CSS thủ công của riêng họ và sử dụng các công cụ thiết kế như Figma để tạo mô hình. Tôi đồng ý, cả hai đều là những điều tuyệt vời. Nhưng sự thật là, với tư cách là một nhà phát triển, tôi không có thời gian để trở thành một chuyên gia về Figma hoặc viết thư viện CSS tùy chỉnh của riêng mình mà tôi có thể thực hiện từ dự án này sang dự án khác.

Nhưng tôi có thể tháo vát và sử dụng các công cụ và tài nguyên miễn phí trên internet để tạo ra các thiết kế đẹp mắt với tốc độ nhanh.

Nếu bạn muốn xem dự án tôi đã tạo trong bài đăng này, hãy nhấp vào các liên kết sau:

Bạn có thể tìm thấy DesignDo tại đây .

Repo cho dự án này là ở đây .

Nếu bạn thích bài viết này, vui lòng tham gia bản tin của tôi @ https: // thefreelancedev.com

Cũng được xuất bản ở đây .