Hướng dẫn dành cho nhà phát triển về thiết kế web cho người không phải là nhà thiết kế

Tôi đã tạo trang web đầu tiên của mình như một dự án trường học khi tôi 14 tuổi. Nhiệm vụ rất đơn giản: tạo một trang web rất cơ bản bao gồm một số văn bản, hình ảnh và bảng. Thái độ thông thường của tôi đối với các dự án trường học là hoàn toàn quên chúng và sau đó đưa ra một số giải pháp vào phút cuối. Nhưng, lần này, tôi phát điên.

Kể từ trang web đầu tiên của tôi, tôi đã luôn ưu tiên làm cho mọi thứ trở nên tốt đẹp. Thừa nhận hay không, mọi người đánh giá mọi thứ dựa trên ngoại hình. Nếu những gì bạn làm có vẻ tốt, như bạn biết những gì bạn đang làm, mọi người sẽ tin tưởng nó hơn. Đó là cách mà mọi thứ đang diễn ra.

Qua nhiều năm thực hiện các dự án phụ, tôi đã tập trung ngày càng nhiều vào việc phát triển các kỹ năng thiết kế của mình thay vì chỉ hoàn thiện chương trình của mình. Bạn thấy đấy, là một thuật toán viết monstrum đưa bạn đến nay. Trong khi theo đuổi giấc mơ khởi động một dự án phụ có lợi nhuận, bạn sẽ phải làm rất nhiều công việc khác nhau. Trở thành một nhà thiết kế là một trong số đó. Cũng giống như các vận động viên Cross-fit, người sáng lập solo phải được làm tròn tốt để thực hiện tốt.

Một thiết kế tuyệt vời không nhất thiết phải là một trong những người có nhiều sự ủng hộ Dribbble nhất. Nó là một trong những bạn đã giành được thông báo ở vị trí đầu tiên. Nó có một sự cân bằng hoàn hảo của những người bà của bạn có thể làm được điều đó và đó là wow, đó là một trò chơi rất hay. Thiết kế có thể là lợi thế cạnh tranh của bạn hoặc đóng đinh trong quan tài.

Nó không phải là về tài năng

Khi tôi còn trẻ, tôi đã chơi rất nhiều Minecraft. Tôi thấy tất cả những tòa nhà tuyệt vời mà mọi người đã làm. Nhưng khi tôi làm một cái gì đó, nó trông giống như một cái hộp. Xấu xí và không có phong cách. Làm thế nào để bạn thậm chí làm cho một cái gì đó tốt đẹp trong Minecraft, phải không?

Vì vậy, tôi đã tìm thấy một anh chàng trên YouTube và xây dựng một bản sao chính xác những gì anh ta đã xây dựng. Vài tuần sau, tôi đã phát triển phong cách của riêng mình và có thể tự xây dựng. Đột nhiên, những sáng tạo của tôi không giống như crap. Heck, tôi thậm chí đã thắng một cuộc thi xây dựng.

Thiết kế là một kỹ năng, và giống như bất kỳ kỹ năng nào khác, nó có thể được học.

Chọn công cụ phù hợp cho công việc

Trong lập trình, bạn có thể sử dụng Notepad và viết một ứng dụng mà Hay như nó được viết trong một IDE IDE đầy đủ mặc dù cuộc sống của bạn có thể khá đau khổ khi làm điều đó và nó có thể sẽ lâu hơn đáng kể. Trong thế giới thiết kế web, MS Paint sẽ đảm nhận vai trò của Notepad và giống như Notepad, rất ít người thực sự chọn thiết kế với nó.

Các công cụ thiết kế phổ biến nhất cho web là:

  • Sketch, một công cụ duy nhất của MacOS, tương tự như React, dường như được mã hóa cứng trong mọi danh sách công việc. $ 99 / năm.
  • Adobe XD, một công cụ đa nền tảng miễn phí để sử dụng vai trò của Vue. Nó có một cộng đồng nhỏ hơn, nhưng nó rất dễ dàng để bắt đầu.
  • Adobe Photoshop, con dao thụy sĩ cho mọi nhiệm vụ thiết kế được mọi người biết đến. Nó đã lấy vị trí của trò chơi mà bạn đoán nó, jQuery. 9,99 USD / tháng.

Ở đó, hầu như không có sự khác biệt nào cho dù bạn sử dụng mã Sublime hay VS để viết ứng dụng. Hoặc cho dù bạn sử dụng React hay Vue cho frontend. Nó chỉ là một vấn đề ưu tiên. Các công cụ thiết kế cũng vậy, vì mỗi công cụ đều có ưu và nhược điểm.

Tôi sử dụng Adobe XD. Lý do chính đối với tôi là vì nó đa nền tảng, vì vậy tôi không bị con tin của hệ sinh thái Apple bắt giữ. Nó cũng được hỗ trợ bởi Adobe, vì vậy, nó sẽ ở đây một thời gian. Điều tốt nhất cho người mới là kể từ tháng 5 năm 2018, Adobe XD được sử dụng miễn phí chỉ với một vài hạn chế (dù sao bạn cũng không thể vấp ngã).

Điều chỉnh suy nghĩ của bạn

Thử thách lớn nhất đến với thế giới thiết kế web đối với tôi là điều chỉnh suy nghĩ của mình. Tôi đã quen với việc đưa ra thiết kế khi tôi mã hóa trang web. Mọi thứ đã có một trật tự. Dòng chảy từ trái sang phải và từ trên xuống dưới. Thực tế là, cách tiếp cận này làm cho bạn một nhà thiết kế tồi tệ hơn.

Các công cụ thiết kế hỗn loạn vì chúng buộc bạn phải thiết kế giống như mọi yếu tố được định vị tuyệt đối. Nắm bắt sự thay đổi này. Nó sẽ cung cấp cho bạn sự tự do để thay đổi mọi thứ một cách nhanh chóng và làm cho thử nghiệm dễ dàng. Và đó là điều cần thiết, bởi vì thiết kế là một quá trình liên tục. Nó mong đợi rằng bạn sẽ thay đổi mọi thứ rất nhiều trước khi bạn nhận được một kết quả tuyệt vời.

Học các công cụ

Khi mã hóa, bạn sử dụng các phần tử HTML như div, spans và input và để trình duyệt hiển thị chúng thành một cái gì đó trực quan. Với các công cụ thiết kế, bạn có quyền bỏ qua người trung gian và sử dụng các yếu tố trực quan như hình dạng và văn bản trực tiếp.

Tôi đã chọn 4 công cụ thiết kế được sử dụng nhiều nhất để bạn có thể dành ít thời gian hơn cho việc học và thiết kế nhiều thời gian hơn. Bằng cách đó, bạn có thể bắt đầu luyện tập càng sớm càng tốt. Dưới đây, tôi sẽ chỉ cho bạn cách họ làm việc và cách sử dụng chúng.

Công cụ hình chữ nhật

Hình chữ nhật là hình dạng phổ quát nhất. Bạn sẽ thấy mình sử dụng chúng mọi lúc. Hãy nghĩ về nó như một div. Nó có ích cho tất cả các loại công cụ, từ việc tạo văn bản đầu vào cho đến các thùng chứa.

Công cụ văn bản (nhãn)

Công cụ văn bản, như tiêu đề gợi ý, cho phép bạn tạo văn bản. Mặc dù vậy, nó không đơn giản vì công cụ văn bản có hai trạng thái: một cho văn bản một dòng và một cho nhiều đoạn. May mắn thay, họ cực kỳ dễ học cách sử dụng một cách chính xác.

Trạng thái đầu tiên là một thùng chứa văn bản một dòng điều chỉnh kích thước của nó dựa trên kích thước văn bản. Nó tương tự như một với ngoại lệ là nó đã giành được gói quấn trừ khi bạn thực hiện ngắt dòng. Lợi ích của trạng thái này là nó sẽ tự động điều chỉnh kích thước hộp văn bản dựa trên chiều cao dòng và kích thước phông chữ.

Để tạo nó, bạn chỉ cần nhấp bằng công cụ Text được chọn và viết. Theo nguyên tắc thông thường, hãy sử dụng trạng thái này cho bất kỳ thứ gì không cần một chiều rộng cụ thể và là một dòng duy nhất. Ví dụ, tiêu đề dòng đơn và nhãn.

Công cụ văn bản (đoạn văn)

Trạng thái thứ hai là một thùng chứa văn bản có kích thước cụ thể hoạt động giống như

với chiều rộng cụ thể hoặc

bên trong cột lưới. Lợi ích của trạng thái này là bạn có thể kiểm soát kích thước hộp văn bản. Để tạo một đoạn văn, bạn bấm với công cụ văn bản đã chọn và giữ để tạo vùng chọn. Theo nguyên tắc thông thường, hãy sử dụng trạng thái này cho các đoạn văn và tiêu đề trên nhiều dòng.

Chọn công cụ

Di chuyển, thay đổi kích thước, nhân đôi. Đây là công cụ cho việc đó. Những đường màu hồng cho bạn thấy khoảng cách từ các yếu tố xung quanh. Các đường màu xanh giúp bạn có được các yếu tố để căn chỉnh đúng.

Công cụ đường dây

Đôi khi một dòng là tiện dụng để làm cho các bộ phận của thiết kế riêng biệt. Đó là lý do tại sao các công cụ dòng ở đây. Về mặt kỹ thuật, bạn có thể sử dụng các công cụ hình chữ nhật, nhưng hey, vì vậy div có thể được sử dụng cho mọi thứ.

Mẹo thiết kế và kỹ thuật

Bố trí

Trong phát triển web, một bố cục thường được mô tả là tiêu đề, menu, nội dung và chân trang. Đó là một phần của nó, nhưng một bố cục là nhiều hơn thế. Nó theo nghĩa đen theo cách mà tất cả các yếu tố được đặt ra.

Ví dụ, khi tôi đang thiết kế thông tin dự án cho Sidemail, tôi đã phân phối các yếu tố bên trong thẻ một cách đồng đều, điều đó làm cho nó cảm thấy đầy đủ hơn và trông sạch sẽ hơn.

Màu sắc

Để giúp bạn tìm thấy màu sắc hoàn hảo cho dự án tiếp theo của bạn, hãy xem xét ghi nhớ tâm lý của màu sắc (colorpsychology.org). Một công cụ hữu ích để tìm ra sự kết hợp màu sắc hoàn hảo dựa trên màu chính của bạn là Paletton.

Sử dụng sắc thái của màu chính và màu văn bản để tạo cấu trúc phân cấp thị giác. Hãy thử các màu tối hơn hoặc sáng hơn cho văn bản của bạn khi sử dụng nền màu.

Kiểu chữ

Kiểu chữ phần lớn ảnh hưởng đến việc xây dựng thương hiệu cho dự án của bạn, vì vậy hãy chọn một cách khôn ngoan. Kiểu chữ cao cấp có xu hướng trông đẹp hơn so với Google Fonts, nhưng khi bạn mới bắt đầu, hãy mua một cái. Ngay cả trên Google Fonts, có một số đá quý ẩn.

Một mẹo mà tôi rất hay sử dụng để chia nhỏ văn bản một cách trực quan là tạo nhãn chữ hoa với khoảng cách chữ lớn hơn. Văn bản chữ hoa là đối xứng và nhìn tốt từ quan điểm trực quan, nhưng không nên lạm dụng nó bởi vì nó khó đọc hơn nhiều.

Thiết kế trang chủ (hoặc trang đích)

Tôi luôn cố gắng tránh sự cám dỗ để thiết kế các yếu tố hợp thời trang và sau đó nhồi nhét thông điệp của tôi vào đó. Thay vào đó, tôi đưa ra các lợi ích (không phải tính năng), đưa chúng vào một câu chuyện và kể câu chuyện đó bằng một trang hấp dẫn trực quan.

Sau khi tôi thiết lập những gì tôi muốn nói, tôi thường tìm kiếm một số cảm hứng. Một nguồn tài nguyên tuyệt vời cho điều đó là Land-book.com, một thư mục rộng lớn gồm các trang đích tuyệt vời mà mọi người có thể bỏ phiếu. Một trang tuyệt vời khác với cảm hứng thiết kế là giao diện.pro nơi bạn có thể lọc theo các danh mục như giá cả, 404 hoặc về chúng tôi. Tôi chỉ duyệt qua cho đến khi tôi tìm thấy đủ các trang web mà tôi thích và phù hợp với phong cách mong muốn của tôi.

Phần khó là đặt tất cả lại với nhau. Thật không may, không có phím tắt. Bạn chỉ cần lặp đi lặp lại rất nhiều cho đến khi bạn nhận được một kết quả mà bạn rất hài lòng.

Bạn có thể thấy mình tự hỏi liệu nó có bình thường không khi một thiết kế mà bạn hoàn toàn hài lòng với một tuần trước đột nhiên cảm thấy không đủ tốt hoặc thậm chí xấu xí ngày hôm nay. Câu trả lời là nó hoàn toàn bình thường và thực sự là một điều tốt. Nó về cơ bản là vì bạn phát triển, học hỏi và trở nên tốt hơn. Hôm qua thử thách không phải là thử thách ngày hôm nay. Hãy ghi nhớ điều này để bạn không bị mắc kẹt trong cuộc đua chuột.

Hành trình:

  • Kiểu chữ độc đáo tạo nên sự khác biệt lớn
  • Đồ họa rất quan trọng, hãy cố gắng sử dụng ít nhất một số hình ảnh minh họa hoặc hình ảnh
  • Có được tầm quan trọng trực quan ngay bằng cách sử dụng nhiều sắc thái của màu sắc. Văn bản và màu sắc chính aren đủ.
  • Donith sử dụng các thùng chứa quá rộng - khoảng 1100 px là đủ rộng
  • Ôm không gian âm
  • Nói về lợi ích, không phải tính năng
  • Nhìn xung quanh để tìm cảm hứng nếu bạn gặp khó khăn

Thiết kế một ứng dụng web (hoặc bảng điều khiển)

Như với việc thiết kế một trang đích, don lồng nhảy thẳng vào thiết kế. Lần này, bạn không cố gắng kể một câu chuyện. Thay vào đó, mục tiêu là dễ sử dụng. Lấy bút và giấy và lên kế hoạch về cách ứng dụng của bạn sẽ hoạt động, cái gì nên phụ thuộc vào cái gì và làm thế nào để điều hướng dễ dàng.

Tạo một số bản phác thảo hoặc khung dây nếu cần thiết. Thực hiện kiểm tra thiết kế đối thủ cạnh tranh thích hợp để tự mình xem những gì thiếu và có thể được thực hiện tốt hơn, hoặc thậm chí có thể biến thành lợi thế cạnh tranh. Đôi khi, tốt hơn hết là hãy nghỉ ngơi trước khi lên kế hoạch trên giấy và thiết kế.

Lời khuyên tốt nhất tôi có thể đưa ra rằng, không sử dụng trường hợp cụ thể là chọn bố cục trang phù hợp. Nói chung, tất cả các ứng dụng web sử dụng hai bố cục trang khác nhau dựa trên mục đích của ứng dụng: thùng chứa chiều rộng cố định hoặc thùng chứa chất lỏng lấp đầy toàn bộ màn hình của bạn.

Container cố định

Tôi thích hộp đựng cố định, vì nó dễ tập trung vào một khu vực chật hẹp vì nó ngăn cản sự di chuyển không cần thiết của mắt. Các ứng dụng container cố định cũng có xu hướng trông gọn gàng hơn và ít áp đảo hơn đối với người dùng mới. Tuy nhiên, do chiều rộng nhỏ hơn, các ứng dụng container cố định khó thiết kế hơn.

Ví dụ: Twitter, Bộ đệm, DigitalOcean, Netlify, GitHub

Bình chứa chất lỏng

Các ứng dụng chứa chất lỏng rất phù hợp cho các ứng dụng trò chuyện, ứng dụng bảng tính và các ứng dụng khác trong đó có nhiều nội dung trên màn hình là điều cần thiết. Nhưng hãy lưu ý rằng vô số dữ liệu trên màn hình có thể bị quá tải.

Ví dụ: Slack, Liên lạc, Hotjar, Google Sheets, Trello, Spotify

Điều quan trọng là chọn đúng container, bởi vì toàn bộ bố cục trang của bạn sẽ phụ thuộc vào nó và thay đổi nó sau này là rất nhiều công việc. Mỗi dự án là duy nhất và kêu gọi các giải pháp độc đáo, vì vậy don don hãy thử nghiệm!

Hành trình:

  • Giữ cho nó đơn giản
  • Sử dụng kiểu chữ dễ đọc
  • Sử dụng phân cấp trực quan khi hiển thị nhiều dữ liệu
  • Tận dụng sự lựa chọn thiết kế kém của đối thủ

Gói lại

Hãy nhớ rằng, thiết kế có thể là lợi thế cạnh tranh của bạn - vì vậy hãy sử dụng nó và làm cho một cái gì đó tuyệt vời.

Bắt đầu hành trình thiết kế của bạn bằng cách lấy một mẫu Adobe XD mà tôi đã tạo cho trang đích dự án mới nhất của tôi. Chỉ cần đăng ký vào danh sách email hoàn toàn mới của tôi và nó sẽ nằm trong hộp thư của bạn.

Ngoài ra, bạn sẽ là người đầu tiên nhận được thông báo về bài đăng tiếp theo của tôi, nơi tôi sẽ chia sẻ 69 ngày tiến bộ tôi đã thực hiện trên Sidemail - một dự án SaaS tôi làm việc. Nó sẽ bao gồm những thứ như số lượng người đăng ký, lượt truy cập trang web, chi tiêu và dự thảo thiết kế. Nó sẽ đi mà không nói, nhưng tôi đảm bảo hoàn toàn không có thư rác. Tôi không có thời gian cho chuyện tào lao đó.

Twitter DM của tôi đang mở nên nếu bạn gặp khó khăn khi thiết kế hoặc có thêm một số câu hỏi, hãy thoải mái đánh tôi.