Критика: дизайн веб-сайта Tritium

В продолжение этого вопроса: Критика: дизайн логотипа программного обеспечения Tritium . Для просмотра кода веб-сайта (производительность, ошибки, соответствующий пользовательский опыт) посетите родственный вопрос на Code Review .


Я ищу обзор дизайна для моего веб-сайта Tritium ( исходный код ).

введите описание изображения здесь

Конкретно:

  • Одной из целей веб-сайта было сделать его простым. Я достиг этого?
  • Дополняют ли цвета в моей палитре друг друга?

    • Фон:#171d25
    • Анимированный атом:#333
    • Логотип:#f8bd24
    • Текст ссылки:#6e6e6e
    • Заголовок бренда, текст ссылки при наведении, кнопка:#78C40F
    • Панель навигации:#000
    • Основной текст:#fff
  • Вся ли предыдущая критика реализована правильно с точки зрения дизайна? Я переборщил?

  • Хорошо ли мой выбор шрифта сочетается с остальным внешним видом веб-сайта?

  • Есть ли какие-то концепции дизайна, которые я упустил из виду и не реализовал?

Я все еще новичок в дизайне веб-сайтов, поэтому, пожалуйста, будьте настолько строги, насколько это необходимо.

Я думаю, что цвета выглядят нормально. Очевидно, я не слишком много знаю об истории или консультациях по дизайну, но я лично использую плагин Eye Dropper для Chrome вместе с Paletton.com. Это дает вам большой диапазон гибкости в выборе правильных цветов. Инструмент «Пипетка» также предоставляет множество возможностей для объявления этого цвета в CSS/HTML.
При нажатии «Посетить страницу загрузки» открывается новая вкладка, но я этого не заметил, потому что появилось всплывающее окно, и я подумал, что это все, что должно было произойти... Если открыть новую вкладку и поместить ее в фокус, пользователь не пропустит это. Использование target="_blank" должно помочь (см. w3schools.com/html/html_links.asp ). Если вы также сделаете ее похожей на обычную ссылку (синюю, подчеркнутую или похожую), я думаю, люди решат, что она открывает новую вкладку.
Я согласен с критикой всплывающего окна. Я бы добавил кнопку во всплывающем окне, чтобы щелкнуть ее, а затем перейти на страницу github, а не открывать две вещи одновременно. Кстати, действительно отличная работа на сайте.
Я бы дал всплывающее окно, которое появляется при нажатии на ссылку «Посетить страницу загрузки» , немного больше отступа между краем и текстом и, возможно, также немного уменьшил размер и начало копии в нем. И добавьте прослушиватель событий для регистрации управляющих кликов, чтобы также избавиться от всплывающего окна, пока вы в нем — всплывающие окна, которые не реагируют на управляющие клики, раздражают пользователя. :-)

Ответы (4)

Отличный дизайн! Мне особенно нравится анимация атома справа.

Мне нравятся твои цвета. В качестве альтернативы вы можете использовать темно-синий фон. Это придает странице глубину, подобную ночному голубому небу:

Скриншот страницы с альтернативной цветовой палитрой

Я использовал Colorizr.js , чтобы поиграть с вашей цветовой палитрой. Если вы хотите точно настроить цвета, используйте следующие настройки, которые подходят для вашей страницы:

Настройки Colorizr.js

Цвета идут сверху вниз: rgb(25, 33, 44), rgb(14, 191, 14), rgb(212, 212, 212), rgb(26, 40, 60), rgb(26, 40, 60)

Я думаю, что дизайн сайта работает. Мне нравятся ваши переходы для ссылок в шапке. Четкое и лаконичное общение.

Цветовая палитра напоминает мне компанию по производству пищевых продуктов или аналогичную.

Я думаю, что выбор шрифта хорошо подходит для веб-сайта, связанного с технологиями. Я бы, наверное, отказался от шрифта с засечками в пользу бесплатного шрифта без засечек, но это сугубо личный вкус.

Кроме того, я заметил, что с точки зрения отзывчивости раскрывающийся список может быть полезен в ваших заголовках при просмотре на маленьких экранах (мобильных). Поскольку я новичок в области кодирования графического дизайна, я благодарю вас за включение исходных файлов. Я, вероятно, проанализирую его и изучу некоторые из реализованных вами переходов заголовков.

Дело не в дизайне, а в удобстве использования.
На сайте написано, что это БЕСПЛАТНО, но когда вы нажимаете «ПОСЕТИТЬ СТРАНИЦУ ЗАГРУЗКИ», появляется всплывающее окно с просьбой о пожертвовании. Что делать, если я не хочу делать пожертвования до того, как попробую программное обеспечение? Должна быть еще одна опция, такая как «ПРОДОЛЖИТЬ» или «ОТМЕНА», чтобы пользователь действительно мог посетить страницу загрузки и загрузить программное обеспечение, если он / она не жертвует.

Поэтому я бы рекомендовал изменить макет всплывающего окна и добавить еще одну кнопку, как было предложено.

За это дизайнером года не выиграешь. Но чем их меньше, тем меньше поводов для неприязни, я думаю.

Ваша желтая версия значка имеет эллипсы в высоту больше, чем в ширину:

введите описание изображения здесь

Это странно выглядит и еще более странно, как горчица на сером, когда она помещается на значок вкладки браузера. Если вы собираетесь сделать значок вкладки браузера, просто сделайте его темно-серым или черным.

Кажется, что есть только одна вещь, на которую нужно нажать, это «посетить страницу загрузки». Если это все, что у вас есть, почему это не страница?

Он просит деньги, но мой браузер больше ничего не дает. Возможно, в вашем браузере так и есть, но я пользуюсь TorBrowser, и вы все тоже должны это делать. АНБ - зло. В любом случае, чего бы это ни стоило, он просто выводит диалоговое окно и ничего не делает.