Tại sao mọi người cứ nói với tôi rằng trang web của tôi trông khủng khiếp?

Tôi đã phát triển một trang web và gần đây đang tìm kiếm một công việc. Thực tế tất cả những người phỏng vấn, sau khi nhìn thoáng qua, đã nói với tôi rằng trang web của tôi được thiết kế khủng khiếp (nhưng thích khái niệm này). Tôi nên đề cập đến việc tôi là một kỹ sư phần mềm, nhưng tôi thực sự đang cố gắng để có được phần thiết kế đúng. Tôi đã cố gắng thiết kế lại nó, nhưng không biết có gì để thay đổi.

Đây là giao diện của nó bây giờ:

Tôi thực sự đánh giá cao bất kỳ mẹo cụ thể nào cho trang web của tôi hoặc về cách cải thiện thiết kế trang web nói chung (Tôi đã truy cập một số trang web giải thích cách thiết kế trang web, nhưng điều đó dường như không hữu ích :)).

Chỉnh sửa 1 : Như tôi đã nói, mọi người có xu hướng có ấn tượng xấu về nó chỉ bằng cách xem nó, ngay cả trước khi tôi giới thiệu chức năng. Điều đó khiến tôi nghĩ rằng có điều gì đó không đúng với màu sắc tôi chọn hoặc bố cục. Và tôi đã nghĩ rằng một thiết kế trang web cụ thể có thể hữu ích cho các nhà thiết kế ngoài kia, giống như một câu chuyện cụ thể mang tính giáo dục cho sinh viên văn học, và các thuật toán cụ thể là hữu ích cho sinh viên phần mềm. Cảm ơn.

Lưu ý bên lề: Chức năng: Nếu có vấn đề, đây là mục đích mà trang web hướng tới (rất ngắn gọn): Người dùng có thể thêm chủ đề và cho mỗi chủ đề thêm câu hỏi cùng với câu trả lời của họ . Trang web tạo ra "bài kiểm tra" và "câu đố" để người dùng thực hiện và so sánh kết quả của họ

Chỉnh sửa 2 : Đây là một màn hình in khác:

Chỉnh sửa 3 : Để rõ ràng, không phải những ảnh chụp màn hình này là trang đích của tôi. Chúng là các trang nội dung dành riêng cho chủ đề.

Trước hết tôi muốn nhấn mạnh rằng tất cả mọi thứ trong câu trả lời này chỉ là MHO, không phải là một sự thật phổ quát;).

Là một kỹ sư phần mềm, bạn biết một điều quan trọng trong mỗi dự án là gì để có một cấu trúc rõ ràng và được xác định rõ ràng - thứ tự. Khá nhiều điều tương tự cũng đúng với thiết kế và nghệ thuật trực quan của người Viking. Tôi có xu hướng xem thiết kế như đóng gói hình ảnh trực quan. Nhà thiết kế biết cấu trúc thông tin mà anh ấy / cô ấy muốn truyền đến đối tượng mục tiêu của mình. Ví dụ: anh ấy thiết kế một cuốn sách. Ông biết cuốn sách này được chia thành các chương và mỗi chương thành các chương. Anh ta biết vấn đề chính được chú thích bởi một số ghi chú (ghi chú ngoài lề, chú thích, sidenote). Bây giờ anh ta phải sử dụng kho vũ khí của mình để tạo ra cấu trúc này. Anh ta có thể sử dụng một kích thước và hình dạng phông chữ và điền vào tất cả các trang liên tiếp bằng một đốm glyphs, nhưng điều đó có nghĩa là người đọc sẽ phải đọc, giải thích và hiểu mọi thứ để biết cấu trúc thông tin có trong đó. Nhà thiết kế cũng có thể gợi ý cho người đọc tầm quan trọng / mức độ của các mẩu thông tin khác nhau. Một trong những thủ thuật là sử dụng kích thước phông chữ để hiển thị sự tăng cấp của dữ liệu được trình bày. Nếu điều này được thực hiện, người đọc sẽ không phải đọc văn bản (hãy để một mình diễn giải) để phân biệt giữa vấn đề chính và ví dụ như chú thích. Tầm quan trọng và vị trí đối ứng của người Viking về thông tin được mô tả trực quan. Người đọc có thể dễ dàng phân tích thông tin trên mạng. Người ta cũng có thể xem nó như là một loại quá trình tuần tự hóa / giải tuần tự diễn ra trong miền hình ảnh (thông tin trừu tượng được truyền vào không gian hình ảnh trực quan). Đó là một sự đơn giản hóa nhà kính nhưng tôi nghĩ cho người mới bắt đầu nó đủ tốt. Nếu điều này được thực hiện, người đọc sẽ không phải đọc văn bản (hãy để một mình diễn giải) để phân biệt giữa vấn đề chính và ví dụ như chú thích. Tầm quan trọng và vị trí đối ứng của người Viking về thông tin được mô tả trực quan. Người đọc có thể dễ dàng phân tích thông tin trên mạng. Người ta cũng có thể xem nó như là một loại quá trình tuần tự hóa / giải tuần tự diễn ra trong miền hình ảnh (thông tin trừu tượng được truyền vào không gian hình ảnh trực quan). Đó là một sự đơn giản hóa nhà kính nhưng tôi nghĩ cho người mới bắt đầu nó đủ tốt. Nếu điều này được thực hiện, người đọc sẽ không phải đọc văn bản (hãy để một mình diễn giải) để phân biệt giữa vấn đề chính và ví dụ như chú thích. Tầm quan trọng và vị trí đối ứng của người Viking về thông tin được mô tả trực quan. Người đọc có thể dễ dàng phân tích thông tin trên mạng. Người ta cũng có thể xem nó như là một loại quá trình tuần tự hóa / giải tuần tự diễn ra trong miền hình ảnh (thông tin trừu tượng được truyền vào không gian hình ảnh trực quan). Đó là một sự đơn giản hóa nhà kính nhưng tôi nghĩ cho người mới bắt đầu nó đủ tốt. Người ta cũng có thể xem nó như là một loại quá trình tuần tự hóa / giải tuần tự diễn ra trong miền hình ảnh (thông tin trừu tượng được truyền vào không gian hình ảnh trực quan). Đó là một sự đơn giản hóa nhà kính nhưng tôi nghĩ cho người mới bắt đầu nó đủ tốt. Người ta cũng có thể xem nó như là một loại quá trình tuần tự hóa / giải tuần tự diễn ra trong miền hình ảnh (thông tin trừu tượng được truyền vào không gian hình ảnh trực quan). Đó là một sự đơn giản hóa nhà kính nhưng tôi nghĩ cho người mới bắt đầu nó đủ tốt.

Bây giờ, như cho thiết kế của bạn. Tôi, cá nhân, không biết bắt đầu nhìn vào đâu. Tôi phải đọc tất cả, hiểu tất cả, suy nghĩ về tất cả, và sau đó đặt mọi thứ trở lại theo thứ tự tôi nghĩ là đúng. Đó là rất nhiều công việc cho tôi như một độc giả. Thật khó để xác định những gì quan trọng nhất và những gì quan trọng nhất ở đây trong một thoáng. Ngay cả khi tôi dành thời gian để tìm hiểu nội dung, vẫn không có nhiều cột mốc trực quan trực quan, giúp tôi tìm cách đến một số dữ liệu cụ thể. Hãy suy nghĩ: khi bạn rời khỏi chiếc xe của mình, bạn đang tìm kiếm một số địa điểm nổi tiếng để giúp bạn ghi nhớxe của bạn ở đâu Hãy thử suy nghĩ một chút về cách bạn sử dụng các trang web, làm thế nào bạn có thể nhớ các tùy chọn / liên kết bạn đang sử dụng thường xuyên nhất ở đâu. Không phải là bạn đang tìm kiếm một liên kết như một hình vuông thứ hai bên phải từ logo màu đỏ này ở phần trên của trang web thì sao? Không đọc - chỉ cần nhớ hình ảnh / vị trí.

Tôi nghĩ vấn đề lớn nhất ở đây không phải là sự xấu xí của YouTube - Tôi nghĩ đó là sự thiếu quan trọng. Hãy thử để khách hàng tiềm năng của khách hàng qua trang web của bạn Bạn muốn anh ấy nhìn thấy gì đầu tiên? Đi đâu từ đó? Bằng cách này, bạn đang tạo ra một luồng đọc dữ liệu Bạn tạo ra (có thể hiểu?)) Một con đường cụ thể mà độc giả của bạn sẽ đi theo. Nếu có một vài tuyến đường, hãy cố gắng làm cho chúng tách biệt nhau nhất có thể (ví dụ: đường dẫn đường ăn qua máng thực đơn - một cái gì đó giống như một bảng mục lục / tổng quan chính / mô tả cấu trúc, một đường dẫn Rỏ qua hình thức đăng nhập, v.v. ). Tôi nghĩ rằng nếu bạn khắc phục điều này, thiết kế của bạn chắc chắn sẽ được cải thiện. Có thể nó sẽ không nhận được những người đẹp ngay lập tức, nhưng ít nhất nó sẽ dễ tiếp cận và dễ hiểu hơn và nhờ đó, như một tác dụng phụ, làm hài lòng hơn về mặt thẩm mỹ.

Tôi hy vọng điều đó có ý nghĩa với bạn :).

Một vài điều mà tôi nhận thấy rằng tôi không đặc biệt thích là:

• Điều này trông giống như phần "back-end" hoặc "admin" của trang web, đặc biệt là một số dạng hệ thống quản lý nội dung, thay vì "front-end" hoặc những gì mọi người nhìn thấy. Đặc biệt, PhpMyAdmin hiện lên trong tâm trí.
• Không nhất quán trong màu sắc được sử dụng. Logo (mà tôi thấy hơi quá chật chội) đã có một số màu trong đó, vì vậy những màu đó có thể được sử dụng để phát triển bảng màu cho trang web. Phối màu này nên áp dụng cho những thứ như dải cho các bảng, màu cho các liên kết, v.v.
• Có quá nhiều hình ảnh tương phản. Tôi thường ủng hộ sự đơn giản và tiêu chuẩn hóa hơn trong thiết kế. Tuy nhiên, trong ảnh chụp màn hình này, chúng ta thấy:
  • Hộp "Mọi thứ" là một hộp góc phải cứng.
  • Điều hướng thanh bên sử dụng các góc tròn.
  • Các chủ đề phụ sử dụng một gradient xuyên tâm.
  • Không có hộp nào có đủ "phần đệm": Lưu ý cách các từ chật chội trong các liên kết "chủ đề phụ" xuất hiện; họ sẽ trông tốt hơn nhiều nếu có không gian xung quanh họ.

Sau đó, chắc chắn đọc kỹ câu trả lời từ @thebodzio , vì nó rất chính xác: Một khách truy cập mới vào trang web sẽ gặp khó khăn khi biết tìm ở đâu trước và đó thường là dấu hiệu của thiết kế "xấu".

Có một vài câu trả lời hay ở đây, vì vậy tôi sẽ chỉ ra một vài ví dụ cụ thể. Đối với tôi, cấu trúc cơ bản của trang có vẻ tốt; như những người khác đã nói, bố cục ba cột đã là một yếu tố chính của thiết kế web trong nhiều năm. Hầu hết các vấn đề là với thiết kế đồ họa.

Phải nói rằng, tầm quan trọng tương đối "Chủ đề phụ" có vẻ kỳ lạ:

• Tiêu đề có nên là một cái gì đó như "Chủ đề phụ" không?

• Nó ở bên phải và trông quan trọng hơn tiêu đề chủ đề; có lẽ bạn có thể kết hợp nó vào cơ thể chủ đề chính để làm cho nó cảm thấy phụ thuộc hơn?

• Trọng lượng của tiêu đề "Chủ đề phụ" làm cho nó có vẻ nặng hơn (quan trọng hơn) so với mẩu bánh mì chủ đề.

Đối với thiết kế đồ họa, bạn có thể tự hỏi về các nguyên tắc cơ bản cho mọi yếu tố của trang:

• Độ tương phản : Các yếu tố không giống nhau sẽ trông đủ khác nhau để người dùng của bạn có thể phân biệt chúng ngay lập tức.

• Sự lặp lại : Designs chỉ nhìn tốt nếu điều đó là giao diện tương tự như nó. Nói cách khác, nhắm đến sự nhất quán. Điều đó có thể ở dạng tất cả các nền của bạn có cùng độ bão hòa và độ sáng, nhưng khác nhau về màu sắc hoặc sử dụng độ dốc trên tất cả các tiêu đề (hoặc không sử dụng bất kỳ độ dốc nào). Ví dụ:

  • nền "Chủ đề phụ" là nền duy nhất có độ dốc (nút là một thứ khác, do đó, có một độ dốc trên đó làm cho nó trông khác biệt, mang lại sự tương phản khi chơi)

  • điểm nổi bật điều hướng bên trái có các góc tròn trong khi hầu hết các yếu tố khác có góc vuông sắc nét

  • màu cho "Tùy chọn Câu đố" (viết sai chính tả) không xuất hiện trong logo mà bạn đang thử màu của mình; cố gắng để có được màu sắc tương tự cho các yếu tố trang như màu sắc trong cuốn sách

.

• Căn chỉnh : Sắp xếp làm cho các yếu tố kết nối thành một tổng thể, thay vì nhìn phân tán và không mạch lạc. Ví dụ:

  • hộp "Ghi nhớ tôi" thấp hơn văn bản khác bên cạnh nó

  • "Tùy chọn câu đố" nằm xa bên phải hơn so với mẩu bánh mì chủ đề ở trên

  • các tùy chọn được căn giữa, trong khi hầu hết các văn bản khác được căn trái

• Sự gần gũi: mang các vật thể lại gần nhau khiến chúng được nhóm lại trong tâm trí người dùng của bạn, mặc dù việc để lại quá ít không gian xung quanh các vật thể khiến chúng trở nên chật chội và khó xem là những vật phẩm riêng lẻ. Ví dụ:

  • không có không gian xung quanh chủ đề của bạn mẩu bánh mì hoặc chủ đề phụ (theo tôi, đây là một trong những tính năng phổ biến nhất cho tôi biết rằng thiết kế đồ họa đã không được phát triển đầy đủ)

  • khoảng cách các đoạn văn của bạn bên dưới tiêu đề chính của cơ thể không nhất quán

Có nhiều hơn nữa về các nguyên tắc thiết kế trên web, nhưng đây là bốn trong số những nguyên tắc quan trọng nhất.

Tôi nghĩ rằng vấn đề chính với thiết kế trang web của bạn không phải là quá nhiều với thiết kế đồ họa như với thiết kế giao diện người dùng . Cụ thể, khi tôi nhìn vào ảnh chụp màn hình của bạn ở trên, câu hỏi tôi tự hỏi mình không phải là " Tuyệt, tôi nên thử cái gì trước? " Mà là " Cái quái gì thế này, và tôi phải làm gì với nó? "

Đây là một vấn đề phổ biến với các trang web và giao diện người dùng khác được thiết kế bởi các kỹ sư (hoặc các chuyên gia tên miền khác): họ đã biết hệ thống được sử dụng như thế nào, vì vậy với họ, mọi thứ đều ổn miễn là mọi tính năng họ cần đều có thể truy cập thuận tiện . Than ôi, điều này thường dẫn đến tất cả các tính năng đều dễ thấy và dễ tiếp cận, cung cấp cho người dùng mới rất ít manh mối về nơi bắt đầu.

Thiết kế đồ họa có một số ảnh hưởng ở đây, trong trường hợp thiết kế đồ họa xấu có thể khiến bất kỳ giao diện người dùng nào trở nên khó hiểu, trong khi đồ họa tốt có thể nâng cao giao diện người dùng bằng cách làm cho ý nghĩa và mối quan hệ của các yếu tố giao diện khác nhau rõ ràng và thu hút người dùng đến các yếu tố quan trọng nhất. Nhưng về cơ bản, vấn đề là về những gì cần trình bày cho người dùng và cách cấu trúc nó hơn là làm thế nào để làm cho nó trông đẹp.

OK, hãy nói cụ thể hơn một chút. Lời khuyên đầu tiên của tôi sẽ là: đơn giản hóa! Bạn có thể muốn lấy cảm hứng từ thiết kế trang đầu của Google , về cơ bản có ba yếu tố: logo, hộp tìm kiếm và hai nút (và người ta có thể lập luận rằng nút thứ hai là sự lộn xộn không cần thiết). Ồ, và một vài liên kết đến các trang khác có nhiều nội dung hơn - được đánh dấu rõ ràng là có tầm quan trọng thứ yếu bằng cách hạ thấp xuống, trong một phông chữ nhỏ và / hoặc màu xám - và một thông báo bản quyền, rõ ràng được thêm vào như một gợi ý tinh tế cho người dùng mà trang thực sự đã kết thúc ở đó.

Hoặc hãy xem Doodle , một công ty khác có tên khéo léo và thiết kế trang đầu đơn giản nhưng hiệu quả. Để thuận tiện, tôi chụp ảnh màn hình trang nhất của họ và thêm một số nét vẽ nguệch ngoạc màu đỏ lên trên:

Doodle là một trang web khá tốt để so sánh với bạn, vì trang web của họ, như của bạn, về cơ bản là một khung cho phép người dùng thiết kế nội dung của riêng họ (câu đố cho bạn, lịch trình sự kiện cho họ) và mời người dùng khác tương tác với nó. Sự khác biệt lớn là, không giống như thiết kế của bạn, người dùng Doodle dành rất nhiều nỗ lực để giúp người dùng của họ nhẹ nhàng vào giao diện, thay vì chỉ ném họ xuống đáy vực sâu và chờ họ chìm hoặc bơi.

Nhìn vào trang nhất của họ, đặc biệt là không có những nét vẽ nguệch ngoạc của tôi, điều rõ ràng về nó là những thứ nhỏ bé - đặc biệt là những thứ không liên quan - có trên đó. Chắc chắn, có cả đống ghi chú và liên kết nhỏ ở cuối trang, nhưng đó là tất cả "dưới màn hình đầu tiên" và một cái gì đó người dùng mới sẽ bỏ qua. Điều dễ thấy thứ hai, trong các chữ cái thân thiện lớn, nơi người dùng có thể nhìn đầu tiên, là một từ blurb tám (!) Giải thích những gì trang web nói về. Các nhất điều có thể nhìn thấy là hiển thị đồ họa lớn, trong hình ảnh đơn giản, các bước chính của công việc này, làm cho nó tất cả cái nhìn dễ dàng và mời. Và ngay giữa chúng là một nút lớn mời người dùng nhấp vào nó và bắt đầu.

Trên thực tế, ở phần trên cùng của trang, chỉ có bốn thứ có thể nhấp (không bao gồm logo, có thể nhấp - như người dùng mong đợi - nhưng chỉ cần đưa bạn trở lại trang trước): hai liên kết đến bước đầu tiên trong trình hướng dẫn lập lịch sự kiện, một ví dụ đóng hộp cho người dùng không đủ tự tin để nhảy ngay vào và một liên kết không phô trương ở góc trên bên phải mở hộp thoại đăng nhập bật lên cho người dùng đã thiết lập. Đó là tất cả.

Vì vậy, những gì về trang web của bạn như nó là? Điều đầu tiên trong ảnh chụp màn hình của bạn nhảy ra cho tôi như một thứ có thể đáng xem là các tiêu đề màu xanh lá cây, ít nhất là ngắn, loại lớn và ở giữa trông giống như "khu vực nội dung". Than ôi, không có gì đáng quan tâm ở đó - phần "Thông tin chủ đề" chỉ có một số siêu dữ liệu tầm thường nên được in nhỏ ở một số góc, phần "Chủ đề phụ" có một vài liên kết (đến các trang tương tự khác?) Xuất hiện để nhân đôi những người ở góc trên bên phải và phần "Tài nguyên" đơn giản là trống. Và bên cạnh đó, ngay cả sau khi đọc tất cả những điều đó, tôi vẫn không biết trang web nói về cái gì hoặc tôi có thể làm gì với nó.

Vì vậy, tôi có thể làm gì với trang web của bạn? Chà, bạn nói rằng tôi có thể tạo và thực hiện các câu đố, vậy làm thế nào về việc đặt một số liên kết / nút lớn và hấp dẫn trên trang nhất có nội dung "Làm bài kiểm tra " và " Tạo bài kiểm tra "? (Cái trước nên nổi bật hơn, vì một người dùng mới có lẽ sẽ thích làm bài kiểm tra hơn là tạo một bài kiểm tra, nhưng bao gồm cả bài thứ hai trên trang nhất ít nhất cho phép người dùng biết rằng họ cũng có thể làm điều đó.) giải thích ngắn gọn - từ một vài từ cho đến một đoạn ngắn - về những gì trang web của bạn nói về cũng sẽ tốt. (Đó cũng có thể là một nơi tốt để xử lý liên kết "đọc thêm".)

Hoặc, nhìn từ phía bên kia, bạn có thể đủ khả năng để mất gì từ trang hiện tại của mình? Chà, tôi thực sự đã nói "hầu hết", nhưng điều hiển nhiên là nhảy lên (bên cạnh bãi chứa siêu dữ liệu) là hình thức đăng nhập ở trên cùng. Chắc chắn, thật tốt khi cung cấp cho người dùng thành lập một cách dễ dàng để đăng nhập, nhưng điều đó không có nghĩa là bạn phải thực sự hiển thị biểu mẫu đăng nhập trên mỗi trang. Thay vào đó, hãy làm theo cách mà Doodle thực hiện và chỉ cần có một hình thức đăng nhập bật lên có thể truy cập thông qua một liên kết. (Đối với người dùng đã tắt JavaScript, bạn cũng nên có một trang đăng nhập riêng làm mục tiêu dự phòng cho liên kết.)

Có một loạt những thứ khác bạn cũng có thể mất: ví dụ, là một người dùng mới và chưa đăng ký, tại sao tôi lại thấy những gì trông giống như một liên kết "xóa"? Tôi thực sự có thể xóa trang? Nếu có, tại sao ? Nếu không, tại sao liên kết ở đó?

Tương tự, ghi chú "(703 câu hỏi khả dụng)" là một sự mất tập trung vô nghĩa ở đó, vì nó trông giống như một yếu tố giao diện. Nếu bạn muốn gây ấn tượng với khách truy cập bằng độ sâu của trang web của mình, hãy đặt nó ở vị trí của nó: trong một khu vực nhìn ấn tượng phù hợp trong khu vực nội dung. (" Chúng tôi đã có sẵn 703 câu hỏi và nhiều câu hỏi khác đang đến! ")

Cuối cùng, tôi nên lưu ý rằng mọi thứ đều tương đối. Ví dụ, TV Tropes có giao diện người dùng khủng khiếp (thực sự giống như của bạn), nhưng điều đó không thành vấn đề, bởi vì họ bù đắp cho nó với vô số nội dung xuất sắc và liên kết dày đặc, để hầu hết người dùng mới giành chiến thắng ' t phải chạm vào giao diện điều hướng cả. Trên thực tế, điều đó khá phổ biến với các trang wiki; Wikipedia không thực sự tốt hơn nhiều. Tuy nhiên, điều hấp dẫn là bạn cần phải có tải nội dung đó (hoặc cơ sở người dùng cam kết tạo ra nó) trước khi hiệu ứng đó có thể bắt đầu làm việc cho bạn.

"Thiết kế" của bạn sẽ rất tuyệt ... vào năm 1995. Thực tế nó đã lỗi thời. Đây là một thiết kế mà các kỹ sư luôn nghĩ ra :-) Điều dễ nhất bạn có thể làm là sử dụng một số khung css, ví dụ Twitter Bootstrap , Zurb , bất cứ điều gì . Framework giúp bạn bảo vệ bạn khỏi "sự sáng tạo" của chính bạn ;-)

Từ quan điểm bố cục, không có gì thực sự sai với trang web của bạn. Đó là cách bố trí 3 cột tiêu chuẩn với logo ở trên cùng bên trái. Khung tổng thể này đã được sử dụng từ lâu đời và đó là vì nó hoạt động. Hầu hết các trang web hiện đại vẫn sử dụng các nguyên tắc tương tự, dựa trên một số bố cục phổ biến, nhưng bị chôn vùi dưới nhiều đồ họa bóng bẩy. (Hãy cảnh giác với những người chỉ trích dựa trên mức độ hiện đại của một thứ gì đó - chỉ vì một vài năm trôi qua không có nghĩa là con người tiếp nhận thông tin hoàn toàn khác biệt như thế nào.)

Một số người có thể ngụy biện về việc các liên kết điều hướng chính nên ở bên trái hay dọc theo đỉnh, nhưng những khác biệt đó không tạo ra hoặc phá vỡ một trang web.

Không, vấn đề không nằm ở sự lựa chọn vị trí của bạn. Đó là với đồ họa, lựa chọn màu sắc, kích thước của sự vật, vân vân. Tôi phân biệt bố cục thuật ngữ , đó là tất cả về vị trí, thiết kế , đó là tất cả về cảm giác và giao diện. Mặc dù vậy, tôi không chắc liệu mọi người có sử dụng các thuật ngữ giống hệt như tôi không.

Có thể nói bố cục của bạn về cơ bản là tốt, nhưng thiết kế của bạn có vấn đề, thật không may, là tình huống khó giải quyết hơn. Nếu bố cục của bạn là vấn đề, chúng tôi có thể đưa ra lời khuyên cụ thể hơn, như "di chuyển các trường tìm kiếm của bạn đến đây" hoặc "đặt logo của bạn ở đó". Bố trí thực sự là việc thực hiện khả năng sử dụng .

Thiết kế, mặc dù, là về cảm giác và phong cách, tất nhiên là khó khăn hơn nhiều để nhận xét về. Mặc dù tôi có thể nói rằng bạn chỉ đơn giản là để nhiều lựa chọn màu sắc được mặc định (nền là màu trắng, các liên kết là màu xanh lam, rất ít hình ảnh giao diện), thay vào đó, rất khó để nói màu sắc và đồ họa nên ở đó . Nó phụ thuộc rất nhiều vào loại cảm giác bạn muốn. Chán và an toàn màu xanh lam và màu xám cho cảm giác của công ty, màu hồng và màu vàng cho cảm giác ngây thơ và trẻ con, màu đỏ và màu đen nóng bỏng cho một câu lạc bộ đêm thú vị ... Và thậm chí sau đó, chỉ cần sử dụng những màu sắc ví dụ đó sẽ không nhất thiết dẫn đến cảm thấy tôi đã gắn bó với họ. Ma quỷ là trong các chi tiết.

Có một số chồng chéo giữa các vấn đề bố trí cụ thể hơn và các vấn đề thiết kế thanh tao hơn, chẳng hạn như những gì thebodzio nói trong câu trả lời của anh ấy / cô ấy về thay đổi cỡ chữ cho tiêu đề và chú thích và như vậy, để nhấn mạnh tầm quan trọng và sự giúp đỡ hướng dẫn việc truy cập trang web thông qua thông tin bạn muốn họ có. Bạn nên chú ý lời khuyên của anh ấy / cô ấy.

Tuy nhiên, tôi e rằng nếu mục tiêu của bạn là không hợp tác với một nhà thiết kế mà tự học cách áp dụng một thiết kế trang web hấp dẫn, bạn không chỉ đơn thuần là nhận được câu trả lời, bạn đang trên hành trình. Có rất nhiều con đường để trở thành một nhà thiết kế giỏi như có những nhà thiết kế và hàng tấn tài nguyên ngoài kia, vì vậy không thiếu cơ hội để học hỏi.

Đối với con đường ngắn nhất để có được ý nghĩa thiết kế cho một trang web cụ thể này, tôi sẽ xem xét các trang web khác mà bạn thích và các trang web khác cung cấp dịch vụ tương tự với trang web bạn đang thực hiện và bắt đầu so sánh và đối chiếu những gì bạn thích và về những cái và những gì còn thiếu trên trang web của bạn.

Thật không may, đó là về mục tiêu như người ta có thể, và chỉ điểm cao nhất của đỉnh của tảng băng trôi. Tuy nhiên, hy vọng một số điều tôi đã nói giúp.

Đây là lý do tại sao tôi nghĩ mọi người phản ứng tiêu cực với trang web của bạn: Nó đặt ra quá nhiều câu hỏi!

Giống như bạn đã nói, trước khi bạn giới thiệu các chức năng. Điều đó cho tôi biết mọi người không hiểu nó là gì. Mà nên là câu hỏi đầu tiên được trả lời bởi trang web. Bởi vì nếu trên web, bạn không thể đứng cạnh họ và giải thích nó.

"Tất cả kiến ​​thức trên thế giới" không truyền đạt chính xác những gì bạn có thể tìm thấy trên trang web (hoặc không đáng tin cho vấn đề đó) hoặc tại sao bạn nên đăng nhập. Vì vậy, thiết kế của bạn bị hỏng nặng vì nó không hỗ trợ trả lời những câu hỏi đó.

Vì vậy, trước tiên bạn cần trả lời "trang web này nói về cái gì?". Ví dụ với một tuyên bố sứ mệnh. Nó có thể rõ ràng với bạn, nhưng không phải với mọi người khác trên web. Mục đích chính là gì? Lấy quizes hoặc tạo quizes? Điều đầu tiên bạn muốn mọi người làm là gì? Đăng nhập? Trả lời một câu đố? Tạo một cái? Đây là những điều bạn nên trả lời nếu bạn muốn mọi người ở lại trên trang của bạn.

Sau đó, bạn nên tổ chức thông tin của bạn. Nội dung là gì, meta là gì (logo, điều hướng, đăng nhập). Hãy nhìn vào stackexchange. Nội dung (ánh sáng) được phân biệt rõ ràng với meta (tối).

Nhóm những thứ đi cùng nhau. Bạn có mẩu bánh mì được tách ra từ điều hướng. Trực quan cũng như từ ngữ. Tôi không tìm thấy "Mọi thứ" trong điều hướng chính. Làm thế nào để tôi có thể đến được đó?

Tại sao những thứ này? Những người càng nhanh chóng hiểu được thông tin được trình bày cho họ, họ càng có nhiều khả năng ở lại và tương tác. Nếu họ bối rối và đối mặt với những câu hỏi mà họ không thể trả lời, họ sẽ phản ứng tiêu cực.

Bởi vì nó làm. Điều đó có nghĩa là, không phải vậy :) Đó chỉ là một trò đùa, câu trả lời tốt nhất của tôi sẽ là làm việc với ai đó về phần thiết kế, nếu bạn không có ai đó làm việc với một freelancer, nếu điều đó không hiệu quả cũng chỉ bắt đầu lại từ đầu, nhưng cố gắng giữ mọi thứ đơn giản hơn và cho phép nội dung được thở ...

Một số mẹo / lời khuyên / đề xuất đầu tiên: Làm cho phông chữ h (Tiêu đề) lớn hơn thẻ p, lớn hơn nhiều (một cái gì đó trong phạm vi phông chữ tiêu đề kích thước 30-48 và đoạn (11-max 13). 20 px lề hoặc phần đệm giữa các khối nội dung (ví dụ: maring-bottom: 20px; cho thanh đăng nhập sẽ cho phép nó tách biệt và dễ đọc hơn.

Nhờ ai đó thiết kế cho bạn một logo phù hợp, cái mà bạn có bây giờ là ... không tốt. Hãy thử các phông chữ khác nhau, có thể là phông chữ sans-serif (như Open Sans, miễn phí trên phông chữ google hoặc .. chỉ Arial-Helvetica).

Đừng sử dụng độ dốc nếu bạn không có cảm giác về màu sắc chỉ vì nó mát mẻ hoặc chỉ vì nó trông đẹp hơn đối với bạn, hãy cố gắng giữ màu trơn và có thể cuối cùng, khi bạn hoàn thành thử và chỉ thử nghiệm độ dốc trên CTA ( Gọi hành động) các khu vực (ví dụ trên các nút).

Có rất nhiều thứ bạn có thể làm ... nhưng những điều này thường xuất hiện theo thời gian, bạn có được một đôi mắt được đào tạo bằng cách nhìn vào rất nhiều thiết kế tuyệt vời và cố gắng hiểu kết quả đó được tạo ra như thế nào ... cách tốt nhất là hãy tự mình thử và tạo lại kết quả tương tự, trong quá trình đó, bạn sẽ có được một số kiến ​​thức và hiểu biết về lý do và cách mọi thứ được thực hiện / thực hiện để nhìn / tương tác và trải nghiệm UI.

Giới thiệu sách: Smashing Book [cuốn sách thứ nhất và thứ hai] và trang web:

http://smashingmagazine.com

và một số khác: http://www.bamagazine.com/

Ồ Bạn thực sự tạo ra một phản ứng! Ít nhất bạn biết thiết kế của bạn không được chú ý;)

Đây là câu trả lời ngắn cho câu hỏi của bạn: Trang web trông giống như được thiết kế bởi một kỹ sư phần mềm. Đó là những gì bạn làm và tôi chắc chắn bạn làm tốt. Bây giờ bạn cần một người làm thiết kế UI để làm cho ý tưởng của bạn có thể tiếp cận được. Không có cách nào khác. Bạn sẽ không học thiết kế vào cuối tuần và khắc phục vấn đề.

Tìm một sinh viên hoặc nhà thiết kế trẻ đang tìm cách điền vào danh mục đầu tư của họ và cho họ một chút tự do. Bạn muốn ai đó làm việc sạch sẽ và không lộn xộn cho dự án này. Xem nếu bạn có thể tìm thấy một nhà thiết kế ủng hộ chủ nghĩa tối giản.

Tôi không phải là nhà thiết kế chuyên nghiệp, vì vậy theo quan điểm của người dùng và từ kinh nghiệm duyệt các trang web khác nhau, tôi có thể chỉ ra một vài điều không?

1. Các màu nền của trang là màu trắng, nhưng tiêu đề mục / điểm nổi bật là trong sắc thái của màu vàng hoặc trắng, bạn có thể thử một chút màu sắc tương phản , bạn có thể thiết kế các mức độ tương phản để phù hợp với hệ thống phân cấp yếu tố của bạn (trình độ cao hơn tiêu đề = hơn độ tương phản) hoặc bảng phối màu nội dung tiêu đề cố định (ví dụ: màu cam đậm như trong trang thứ hai của cuốn sách được hiển thị trong logo cho tiêu đề, màu trắng cho văn bản tiêu đề và màu xám đậm cho văn bản nội dung).
2. Quá nhiều không gian trống trong trang của bạn, không gian trống là tốt để cung cấp cho người dùng một nơi để thở nhưng quá nhiều không gian trống làm cho trang của bạn trông giống như văn phòng hỗ trợ / bảo trì. ví dụ: phần "Chủ đề phụ" trong màn hình đầu tiên có thể được kéo dài toàn bộ không gian trong phần "Mọi thứ". Ngoài ra tại sao hai phần phụ đề dư thừa ?
3. Phân phối nội dung IMO phải theo một hệ thống phân cấp . Nếu bạn lấy bất kỳ trang web nào như các trang mã Google (trông rất giống với trang web của bạn), Wikipedia hoặc trang web này làm ví dụ, tất cả chúng đều dành một lượng không gian đáng kể cho tiêu đề trang web , sau đó đến nội dung. Ngoài ra, ngày nay, nhiều trang sử dụng một thanh công cụ như tiêu đề có màu sắc riêng, menu chung và logo trang web được nhúng trong đó, nhưng bạn có thể nói logo của bạn quá lớn để làm điều đó.
   Lấy phần chủ đề phụ ở phần ngoài cùng bên phải của trang chẳng hạn, chúng có thực sự trông giống như chuyên môn hóa xa hơn của nội dung hiện tại không? Thay vào đó chúng trông giống như các thẻ ngẫu nhiên hoặc các chủ đề liên quan . Bạn có thể phản ánh thứ bậc của họ bằng cách tạo mộtcấu trúc giống như cây trong các trang tài liệu khác nhau, nó cũng sẽ làm cho mẩu bánh mì không cần thiết. Ngoài ra IMO, vị trí bên phải của cây đó (điều hướng) sẽ nằm ở thanh bên trái và phần còn lại của hành động sẽ ở vị trí của mẩu bánh mì.
4. Tính đồng nhất cũng quan trọng như phân phối. Các nút của bạn có thể có màu sắc khác nhau tùy theo mục đích / tầm quan trọng của chúng. Nhưng cấu trúc của chúng nên được giữ nguyên. Nút "Đăng nhập" của bạn được sắc nét trong khi "Làm bài kiểm tra ngay" được làm tròn góc. Bạn có thể muốn thoát khỏi một trong những cách tiếp cận đó.
5. Liên kết và hành động không giống nhau , bạn cũng nên đặt tên cho chúng. Giống như menu "Xóa" ở bên trái phản ánh các mục đã xóa hoặc hành động xóa, không thể nói. Cung cấp cho người dùng nút xóa và menu / tab mục đã xóa giống như trong Gmail.
6. Phông chữ rất quan trọng để phản ánh mục đích. Nếu bạn đang tạo một trang nghệ thuật hoặc bất kỳ gia đình văn học nào cũng tốt cho điều đó, nhưng để tạo một trang web học điện tử, bạn phải chọn một phông chữ thoải mái để theo các kích cỡ khác nhau và có ít gia tăng hơn (như các cạnh kéo dài), Sans là tốt trong đó. Wikipedia sử dụng nó chẳng hạn. Việc lựa chọn kích thước và trọng lượng cũng rất quan trọng. Trường hợp số liệu thống kê là quan trọng (và thay đổi) làm cho các số in đậm (ví dụ 703 câu hỏi có sẵn). Giống như bạn đã hoàn thành việc chọn số lượng câu hỏi trong màn hình thứ hai. Chữ in nghiêng trong tiêu đề IMO trông không đẹp, tại sao không sử dụng chữ đậm?
7. Điều này rất giống với ý kiến ​​cá nhân của tôi nhưng tôi nghĩ rằng một số góc tròn hơn sẽ giúp người dùng thoát khỏi cảm giác giống như chiếc hộp.

Tôi là một nhà thiết kế và phát triển chuyên nghiệp. Tôi nghĩ rằng điều quan trọng nhất để làm với một thiết kế là sử dụng một chương trình đồ họa - chẳng hạn như Pháo hoa - để tạo ra một thiết kế trước khi bạn thực hiện nó. Điều đó giúp dễ dàng thay đổi mọi thứ và thử nghiệm dễ dàng. Đến từ một nền tảng phát triển, tôi biết tầm quan trọng của điều đó.

Tôi không biết bạn đang ứng tuyển vào vị trí nào. Nếu bạn đang ứng tuyển cho một vị trí thiết kế đồ họa, bạn có thể muốn dành chút thời gian để học thiết kế đồ họa chuyên nghiệp. Nếu bạn đang đảm nhận một vị trí phát triển, có thể có ý nghĩa khi trả cho một nhà thiết kế chuyên nghiệp một chút để tạo ra một thiết kế đẹp, hoặc thực hiện một sửa chữa nhanh chóng thay vì mất nhiều tháng để học.

Nếu bạn muốn khắc phục nhanh, tôi sẽ cố gắng đưa ra một số chi tiết cụ thể để giúp bạn bắt đầu. Các câu trả lời ở đây là tốt - nhưng chúng không cụ thể. Tôi sẽ thử.

Lưu ý rằng một thiết kế chiều rộng thay đổi luôn khó khăn hơn một chút so với thiết kế chiều rộng cố định. Tôi nghĩ bạn đã đúng khi chọn thiết kế 3 cột. Nội dung là chính xác, thiết kế không phải là tuyệt vời (theo ý kiến ​​của tôi).

Đây là những gì tôi sẽ làm (có thể sẽ mất ít hơn một ngày):

1. Bắt đầu với logo. Có vẻ rất bận rộn -> cố gắng làm cho nó đơn giản hơn. Sử dụng màu sắc rực rỡ hơn; màu vàng trông bẩn. Hãy thử một phông chữ đơn giản hơn.
   • Sau khi thực hiện logo, bạn có thể kết hợp màu sắc trang web với nó
2. Tất cả mọi thứ về trang web nên "thoáng". Vì vậy, đừng làm mọi thứ trở nên chật chội.
   • cột bên trái nên rộng hơn nhiều. 1,5 lần chiều rộng hiện tại của nó
   • đầu trang phải có nhiều khoảng cách xung quanh các trường đăng nhập
   • bên phải có các chủ đề phụ mỗi chủ đề trên một dòng mới. Làm cho chúng có khoảng cách lớn hơn xung quanh chúng để chúng không bị vắt vào nhau
   • bảng phụ có thể sử dụng nhiều tấn đệm hơn trên các ô, các div tiêu đề có thể được đệm thêm, v.v.
3. Toàn bộ nội dung nên chảy thay vì bị biến dạng. Điều này có nghĩa là căn chỉnh càng nhiều càng tốt, sử dụng phông chữ thống nhất và kích thước phù hợp.
   • Cột trung tâm "Tất cả kiến ​​thức trên thế giới" trông không hợp với phần còn lại của nội dung. Có lẽ thả nó sang trái, xóa phần gạch chân và chắc chắn làm cho nó nhỏ hơn tiêu đề.
   • Các nội dung trang không được liên kết. Nó sẽ trông tốt hơn nếu bạn để lại các nội dung phụ với tiêu đề phụ.
4. Các trường đăng nhập trên đầu trang có thể được thực hiện đẹp hơn.
   • Bạn có thể đặt các nhãn bên trong các hộp nhập văn bản (màu xám). Điều đó sẽ làm cho nó sạch hơn.
   • Bạn có thể làm cho hộp kiểm nhớ / phông chữ nhỏ hơn nhiều. Đây không phải là tính năng quan trọng nhất, vì vậy nó không nên lớn như phần quan trọng.

Điều này sẽ không làm cho trang web của bạn trở thành trang web tuyệt vời nhất trên internet, nhưng hy vọng nó sẽ đánh bóng nó đủ để nó vượt qua sự kiểm tra. :)

wow ... đó là khá xấu lol.

Tôi không nghĩ bạn có thể học cách thiết kế lại một vài thứ trong một vài gợi ý nếu bạn không có ý thức thiết kế, vì vậy tôi thực sự nghĩ rằng bạn nên nhờ người khác làm bố cục .. tiếp cận một trường đại học nghệ thuật địa phương và xem nếu lớp học sẽ lấy nó làm ví dụ trong thế giới thực.

Nhưng thất bại đó, đây là vài gợi ý của tôi. Chỉ mục / trang đích mặc dù tên của nó, cần hoạt động giống như một bảng quảng cáo hoặc quảng cáo tạp chí. Nó cần truyền tải thông điệp của mình NHANH CHÓNG, trong vài giây. Lưu ý rằng tôi đã nói "tin nhắn" không phải thông tin. Thông tin cần phải có khi người xem tìm kiếm nó, nhưng nó không cần phải được trình bày giống như một bảng nội dung hơi bị xáo trộn.

Vì vậy, đối với tin nhắn ... điều đầu tiên cần nghĩ đến là họ đang nhìn gì .. trang web, vâng, nhưng trang web của cái gì? Ngay cả khi đọc các danh mục của bạn, tôi cũng không rõ trang đó là gì.

"Cái gì" sẽ được truyền tải bằng cách phối màu, bố cục tổng thể cũng như tiêu đề.

Sau khi bạn đã giải quyết được câu hỏi đó là gì, hãy quyết định xem bạn muốn họ thấy gì trước tiên. Sự lựa chọn của tôi sẽ là Thực hành làm cho logo Hoàn hảo và tôi sẽ tăng kích thước của nó và đưa nó ra khỏi tiêu đề. Nhưng bạn có thể có lý do để khiến họ tập trung vào thứ khác hoặc kêu gọi hành động dưới hình thức nào đó.

Tôi đoán rằng điều quan trọng nhất của bạn là 'Tất cả kiến ​​thức trên thế giới "bởi vì bạn đã tập trung vào nó (ý tưởng tồi) làm cho nó in nghiêng (ý tưởng tồi!) Và cho nó rất nhiều không gian xung quanh (ý tưởng tốt). Nhưng ngoại trừ bản thân các từ ... không rõ đó là gì hoặc làm gì, hãy thử một cái gì đó mô tả hơn và ít ngớ ngẩn hơn.

Cố gắng chia trang đích tổng thể thành 3 yếu tố thiết kế VÀ 3 mức độ quan trọng của thông tin. Hãy tự hỏi điều đầu tiên họ nên thấy, điều đầu tiên họ nên làm là gì? thứ hai, thứ ba là gì? và cố gắng thiết kế lại cho phù hợp.

Sử dụng ít màu sắc hơn và có ý nghĩa .. tại sao 3 màu xanh khác nhau được rắc ngẫu nhiên xung quanh văn bản ??? Sử dụng nhiều kích thước phông chữ hơn (!), Một lần nữa phá vỡ điều này thành 3 giây là một khởi đầu tốt, phông chữ LỚN cho hầu hết quan trọng, trung bình cho thứ cấp, v.v.

Đề nghị cuối cùng của tôi là làm thiết kế của bạn ĐẦU TIÊN và trước khi viết mã. Tôi khuyên bạn nên bắt đầu bằng PAPER và bút hoặc bút chì để chặn trang .. chỉ cần phác thảo nhanh, KHÔNG viết từ thực tế khi bạn làm điều này, chỉ chặn trong các khu vực khi bạn cố gắng quyết định diện tích nội dung nên lớn như thế nào so với tiêu đề , thanh bên lớn như thế nào và cứ thế.

Sau đó thực hiện một thiết kế hoàn thiện hơn trong một chương trình đồ họa. Di chuyển những thứ xung quanh và thử nghiệm với vị trí. Hãy nhớ rằng bạn đang thiết kế một trang cần hoạt động như một trang tạp chí. Làm cho người xem của bạn tạm dừng, cố gắng hiển thị cho họ những gì bạn muốn họ thấy, cố gắng dẫn họ làm những gì bạn muốn họ làm.

Và bắt đầu TÌM KIẾM tại và cho thiết kế. Chỉ cần NHÌN. không đánh giá nội dung, thay vào đó, NHÌN những thông điệp nào đang được truyền tải bởi các trang web. Làm thế nào để họ sử dụng khoảng cách, màu sắc, kích thước phông chữ? Cố gắng thi đua thiết kế tốt. chúc may mắn

và xem xét đề nghị trường nghệ thuật. các chương trình thiết kế đồ họa thường xuyên tìm kiếm các dự án thiết kế lại thế giới thực cho sinh viên của họ.

Vấn đề chính tôi lượm lặt được từ chủ đề này là bạn quan tâm đến việc tranh luận và bảo vệ "thiết kế" của mình hơn là bạn quan tâm đến việc học cách tạo ra thứ gì đó hấp dẫn. Điển hình của một kỹ sư phần mềm. Bạn nghĩ rằng bạn có thể chia trang thành các thành phần thành phần, kiểm tra và kiểm tra các phần tử này và sau đó khi bạn tích hợp các thành phần bạn tin rằng các phần tử sẽ liệt kê một cách toán học một thiết kế tốt. Sau đó, bạn nghĩ rằng bằng cách đăng câu hỏi này, một lần nữa bạn có thể cắt trang thành các thành phần và tranh luận về công trạng của từng người và tranh luận làm thế nào nó làm theo những gì nhà cung cấp câu trả lời đã nói.

Cho đến khi bạn sẵn sàng chấp nhận rằng bạn hút UX, bạn sẽ tiếp tục gặp vấn đề này. Như đã nói ở trên, thiết kế đồ họa là về cảm giác. Thiết kế đồ họa không bằng thiết kế kỹ thuật. Bạn không thể xây dựng một cái gì đó về mặt toán học, tích hợp nó với những thứ "chính xác về mặt toán học" khác và mong đợi một kết quả tốt. Bạn sẽ không bao giờ giỏi UX (có lẽ) vì đơn giản là bạn không nhìn thế giới theo cách mà một nhà thiết kế nhìn thấy nó. Nhưng nếu ngừng đo trang của bạn và so sánh nó với một cái gì đó khác - hãy tự mở hoàn toàn để học nhận ra bạn không biết gì về thiết kế đồ họa, thì bạn có thể bắt đầu lấy nó ...