Đ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ẽ   Để 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. miễn phí 100%.  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.    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. 1 màu chính    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ứ.  Màu phụ  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   , tôi khuyên bạn nên sử dụng: nghiêm túc    : 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ì. Phông chữ    : 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. Bán kính đường viền    : Đố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.  Màu sắc  Nếu bạn chọn   , tôi khuyên bạn nên sử dụng: vui vẻ    : Tailwind Default hoặc  Phông chữ Outfit    : 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. Bán kính đường viền    Đố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.  Màu sắc:  Sử dụng 1 phông chữ cho ứng dụng của bạn. Quá khó để tìm nhiều phông chữ bổ sung cho nhau, đặc biệt nếu bạn không thích thiết kế.  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ể.   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. Heroicons  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 @   thefreelancedev.com https: //  Cũng được xuất bản   . ở đây

Ball

Google

2022 - HackerNoon Contributor of the Year - Design

2022 - HackerNoon Contributor of the Year - Website Development

I simplify complex topics - like development and design - and cure your imposter syndrome.

.NET remote job board

Nominated for 2022 - HackerNoon Contributor of the Year - Design

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

dài quá đọc không nổi

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

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

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

581 Stories To Learn About Non Fiction

179 Stories To Learn About Reading

94 Stories To Learn About John Locke

128 Stories To Learn About Charles Dickens

581 Stories To Learn About Non Fiction

179 Stories To Learn About Reading

94 Stories To Learn About John Locke

128 Stories To Learn About Charles Dickens

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps