Оцените дизайн сайта. Если точнее разгромите его!

@PontiPilattt · Регистрация: 28.11.2022

Студворк — интернет-сервис помощи студентам

Здравствуйте! Я написал сайт, в общем и целом мне все нравится, но разумеется он даже не на троечку. Поэтому просьба, люди которые очень хороши в верстке сайтов, либо люди с хорошим чувством дизайна размотайте мой сайт как можно сильнее! Только не пишете просто и односложно "фуфло", "я бы сделал лучше", "иди вышивай крестиком" и т.п. Я прошу вас сделать это, с целью улучшения своего сайта, что бы он понравился клиенту и он сделал свой заказ. Поэтому приведу пример обратного сообщения, которому я был бы рад: "На первой странице слишком много элементов, все налеплено, навигационное меню невзрачное, по номеру телефона не хочется позвонить. Сделай не такие закругленные края в блоке услуг. Здесь и здесь убери анимацию. Цветовая палитра не сочетается, я бы предложил такие цвета(пример цветов)." Конечно это отнимет у вас время, но если вдруг есть люди, которые правда хороши в этом деле, но им негде высказаться или кто-то считает вас недостаточно авторитетным специалистом, Я! вас выслушаю, Я! учту ваши замечания(конечно если в них будет разумное зерно). Поэтому еще раз я вас ПРОШУ РАЗНЕСИТЕ САЙТ в щепки. Заранее спасибо за потраченное вами время) Если это возможно давайте оценку и комментарии сайту как клиент.

Сам сайт - twobox.space

@Reglage · 28.11.2022, 22:03

1) Не дизайнер, но цвета верхушки (чёрный, белый) больше подходят к ритуальной конторе.
2) "Улуги упаковки" - необычная услуга.
3) "Доставка до маретплейса" - место доставки тоже необычное.
4) "штрихкодированаие под любые задачи" - криптография в качестве бонуса, только ещё больше букв стоит поменять местами
5) "Единый склад для маркетплейсов Ozon,Wildberries,Яндекс.Маркет" - раздражает отсутствие пробелов между словами.

А так норм (но я не ваш клиент). Дорогу осилит идущий.

@mr_dramm · 28.11.2022, 22:22

Смотрится неплохо. Используешь flex и адаптировал в мобильным устройствам, все видно и читаемо это хорошо.

проблемки и рекомендации:
- для телефона можно использовать тогда он будет кликабельным a[href="tel:555-666-7777"]
- ссылка на цены работает криво
- появляется горзонтальная полоса прокрутки при ширине при любой ширине сайта кроме промежутка между 749 - 1100 (в этом промежутке горизонтальный скрол исчезает) появляется как только ширина станет больше 1100 px и иснова исчезает при ширине больше 1530px - его вообще быть не должно если только он специально не предусмотрен
- некоторый блоки meta находятся в body вместо того чтобы быть в head
- и каким то образом все блоки находятся в body>div.header>тут весь сайт
- нашел несколько бесполезных свойств например в body top:0 когда position: static
- есть ссылки на несущ файлы, можно увидеть сообщения в консоли ошибок
- все блоки называются body[n] не критично если так и задумывалось но лучше называть осмысленно
- в именах файлов и папок лучше всегда использовать нижний регистр, на разных файловых системах при использовании файлов Style.css и style.css могут быть проблемы
- скрипты подключаются обычно перед </body>
- форма начинает проблемно отображаться при ширине страницы меньше 720 px
- написать обработчик отправки формы, который обработает неправильный json от сервера, и сообщит пользователю что сообщение не отправлена или форма временно не работает. - сейчас я не смог отправить сообщение ив консоли появилась ошибка

Code
1
2
Uncaught (in promise) SyntaxError: Unexpected token '<', "<br />
<b>"... is not valid JSON

@voral · 29.11.2022, 01:10

Дизайн обсуждать лучше с дизайнерами, но подозреваю дизайнеры ответят именно односложно.

Я тоже не дизайнер. Но в вебе не один год.

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

Верхенее меню "о нас" на некоторых разрешениях расползается на две строки. (причина полагаю в шрифте - об этом ниже). Слишком много полужирного. Некоторые тексты, например "Получить консультацию" еле влезает в кнопку. При этом по высоте криво центруются... ( и тоже тут со шрифтом проблема может быть связана)

Вы взяли шрифт, который есть не у всех. При этом не обеспечили его наличие. (Как альтернативу посмотрите на google fonts - там можно подобрать вариант и он будет погружаться). А так же не указали какой шрифт или семейство брать вместо него... И тут и понеслась - все то что я выше "заметил"...

Ту же кнопку отцентровать, не зависимо от геометрии шрифта, легче дав ей что то подобное (и не играться с padding и margin внутри нее

CSS
1
2
3
4
5
.my-button{
  display:flex;
  align-items:center;
  justify-content: center;
}

Да еще и сооружаете внутри кнопки список (по идее это нарушение семантики верстки). А так же это лишние элементы, без которых легко можно обойтись.

Так же разберем кусок

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="navig">
               <ul>
                   <li> <a href="#voprosu"> <div class="TXT10">вопросы</div></a></li>
               </ul>
               <ul>
                   <li> <a href="#onas"><div class="TXT10">о нас</div></a></li>
               </ul>
               <ul>
                   <li> <a href="#uslugi"> <div class="TXT10">услуги</div></a></li>
               </ul>
               <ul>
                   <li> <a href="#skachat"><div class="TXT10">цены</div></a></li>
               </ul>
               
            </div>

Каждый пункт в отдельный список. Зачем? Опять много лишнего. Да и div в данном случае и нарушают рекомендации стандарта, да и в них нет объективной необходимости...

тег между <html> и <body> Указали HTML5 а не используете плюшки что он добавил head, section, nav .....

В общем в плане верстки здесь надо практически о каждом элементе писать. В общем учебник в руки и переделывать

С точки зрения дизайна - так же я бы еще много написал, но все же я не дизайнер - а значит расписывать смысла нет особого. Просто: "не нравится". ассоциация с каким то сайтом лохотрона, сделанным на спех - у меня такая первая ассоциация возникла под общим впечатлением.

@NTHing · 29.11.2022, 02:27

1. Логотип TWOBOX. В начале чёрного цвета, потом разноцветный (и нечитаемый/невоспринимаемый). А потом и, вообще, в одну строку написан и с тенью. Явная неконсистентность и нарушение доверия к логотипу (и к фирме).
2. Цветовая палитра. Та же неконсистентность. Сочетания (цветовые) разбросаны по всей странице наобум.
3. Нечитаемый и невоспринимаемый заголовок. Фулфилмент для маркетплейсов! Это ругательство какое-то! )) Затемнение на картинках делается для читаемости тестов поверх них, да, но! Надо же учитывать, что если под затемнением другой текст, то его надо убирать, никакое затемнение не помогает. Мешанина букв. Мысль сбивается.
4. CTA должен быть один! Либо скидку, либо консультацию, либо прайс. Получить )) Выбирайте выражения.
5. Тени на карточках большие однозначно.
6. Раздел FAQ. Пронумеруйте (хотя бы) список вопросов.
7. Шрифты. 4 штуки! Оставьте два шрифта и отрегулируйте размеры (межстрочные, межбуквенные интервалы).
8. Мало воздуха! Паддинги, марджины и проч. в помощь.
9. Бордеры везде разные!
10. На карточке "Консультация" консультант без глаз видите?
11. Футер отделите визуально от формы.
Список можно и дальше продолжать...
Это всё минусы. Плюс один - есть кнопка "наверх" и она работает. Только когда мы наверху её не должно быть видно. ))
Вывод: не жмитесь, наймите дизайнера, люди разбираются в вещах, которые обычному человеку не видны.

@PontiPilattt · 30.11.2022, 08:33 **[ТС]**

Спасибо вам большое!

@pgb · 30.11.2022, 09:28

Сообщение от PontiPilattt

Спасибо вам большое!

Ловите ещё мои 5 копеек

У вас нет палитры, от 3 до максимум 10 основных близких цветов, которые можно сгенерировать в цветовом круге например. У вас цвета взятые на обум, от балды, а это режет глаз и убивает весь дизайн.

Так же и со шрифтами. 2-5 Основных шрифта, для заголовков, для текстов, для кнопок и тд.

У вас плохо настроена адаптивность. Верхнее меню "вопросы о нас услуги цены" при узкой ширине, мобильном виде вообще исчезает, так не должно быть адаптивность она и для того придумана чтобы все элементы страницы были при любом расширении, то есть должна быть тогда кнопка для появления меню или оно должно переместится ниже и тд. В шапке скошенный прямоугольник то вылезает, то немного не достаёт до края картинки и тд. косячно. Так не должно быть адаптивность придумана чтобы при любом расширении вид был таким же, то есть, есть картинка с скошенным прямоугольником и при малом расширении должно быть так же, а у вас прямоугольник просто заполнят полностью картинку, это не айс, если есть эффект то его нужно адаптировать и под малое расширение пусть немного отличается, но эффект скошенного прямоугольника должен быть. Для не профи это пофиг, но если хотите делать как положено то делайте адаптивно.

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

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

ЗЫ. И это я разметку\код не смотрел

@PontiPilattt · 04.12.2022, 17:12 **[ТС]**

Спасибо!

@tomater · 05.12.2022, 10:52

Если по дизайну, то отсутствует паддинг на карточках с фичами, текст практически касается краев карточки, это режет глаз. Должен быть паддинг хотя бы 1rem. В принципе, эта проблема а вас везде - кнопки практически лежат на нижней границе основной картинки. На карточках с услугами вообще нет воздуха над названиями. Чем выше уровень заголовка - тем больше воздуха вокруг него должно быть.

Логически же не очень понятно, чем отличается первый набор карточек от второго. Если вчитаться, то выясняется, что первый набор - это вообще не список, это последовательность действий. Такие карточки обычно применяются для списков равноправных элементов без особого порядка, я для коммуникации последовательности шагов есть куча других типовых подходов.

Новые блоги и статьи Все статьи Все блоги /
Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025

@PontiPilattt 0 / 0 / 0 Регистрация: 28.11.2022 Сообщений: 3

	Оцените дизайн сайта. Если точнее разгромите его! 28.11.2022, 20:20. Показов 1268. Ответов 8 Метки дизайн сайта, оценка сайта (Все метки) Здравствуйте! Я написал сайт, в общем и целом мне все нравится, но разумеется он даже не на троечку. Поэтому просьба, люди которые очень хороши в верстке сайтов, либо люди с хорошим чувством дизайна размотайте мой сайт как можно сильнее! Только не пишете просто и односложно "фуфло", "я бы сделал лучше", "иди вышивай крестиком" и т.п. Я прошу вас сделать это, с целью улучшения своего сайта, что бы он понравился клиенту и он сделал свой заказ. Поэтому приведу пример обратного сообщения, которому я был бы рад: "На первой странице слишком много элементов, все налеплено, навигационное меню невзрачное, по номеру телефона не хочется позвонить. Сделай не такие закругленные края в блоке услуг. Здесь и здесь убери анимацию. Цветовая палитра не сочетается, я бы предложил такие цвета(пример цветов)." Конечно это отнимет у вас время, но если вдруг есть люди, которые правда хороши в этом деле, но им негде высказаться или кто-то считает вас недостаточно авторитетным специалистом, Я! вас выслушаю, Я! учту ваши замечания(конечно если в них будет разумное зерно). Поэтому еще раз я вас ПРОШУ РАЗНЕСИТЕ САЙТ в щепки. Заранее спасибо за потраченное вами время) Если это возможно давайте оценку и комментарии сайту как клиент. Сам сайт - twobox.space 0

@Reglage 4 / 10 / 0 Регистрация: 01.11.2022 Сообщений: 191 Записей в блоге: 156
	28.11.2022, 22:03
	1) Не дизайнер, но цвета верхушки (чёрный, белый) больше подходят к ритуальной конторе. 2) "Улуги упаковки" - необычная услуга. 3) "Доставка до маретплейса" - место доставки тоже необычное. 4) "штрихкодированаие под любые задачи" - криптография в качестве бонуса, только ещё больше букв стоит поменять местами 5) "Единый склад для маркетплейсов Ozon,Wildberries,Яндекс.Маркет" - раздражает отсутствие пробелов между словами. А так норм (но я не ваш клиент). Дорогу осилит идущий. 1

@NTHing 1818 / 962 / 388 Регистрация: 26.11.2014 Сообщений: 1,958 Записей в блоге: 1
	29.11.2022, 02:27
	1. Логотип TWOBOX. В начале чёрного цвета, потом разноцветный (и нечитаемый/невоспринимаемый). А потом и, вообще, в одну строку написан и с тенью. Явная неконсистентность и нарушение доверия к логотипу (и к фирме). 2. Цветовая палитра. Та же неконсистентность. Сочетания (цветовые) разбросаны по всей странице наобум. 3. Нечитаемый и невоспринимаемый заголовок. Фулфилмент для маркетплейсов! Это ругательство какое-то! )) Затемнение на картинках делается для читаемости тестов поверх них, да, но! Надо же учитывать, что если под затемнением другой текст, то его надо убирать, никакое затемнение не помогает. Мешанина букв. Мысль сбивается. 4. CTA должен быть один! Либо скидку, либо консультацию, либо прайс. Получить )) Выбирайте выражения. 5. Тени на карточках большие однозначно. 6. Раздел FAQ. Пронумеруйте (хотя бы) список вопросов. 7. Шрифты. 4 штуки! Оставьте два шрифта и отрегулируйте размеры (межстрочные, межбуквенные интервалы). 8. Мало воздуха! Паддинги, марджины и проч. в помощь. 9. Бордеры везде разные! 10. На карточке "Консультация" консультант без глаз видите? 11. Футер отделите визуально от формы. Список можно и дальше продолжать... Это всё минусы. Плюс один - есть кнопка "наверх" и она работает. Только когда мы наверху её не должно быть видно. )) Вывод: не жмитесь, наймите дизайнера, люди разбираются в вещах, которые обычному человеку не видны. 1

@PontiPilattt 0 / 0 / 0 Регистрация: 28.11.2022 Сообщений: 3
	30.11.2022, 08:33 [ТС]
	Спасибо вам большое! 0

@PontiPilattt 0 / 0 / 0 Регистрация: 28.11.2022 Сообщений: 3
	04.12.2022, 17:12 [ТС]
	Спасибо! 0

@tomater 118 / 51 / 1 Регистрация: 17.03.2021 Сообщений: 178
	05.12.2022, 10:52
	Если по дизайну, то отсутствует паддинг на карточках с фичами, текст практически касается краев карточки, это режет глаз. Должен быть паддинг хотя бы 1rem. В принципе, эта проблема а вас везде - кнопки практически лежат на нижней границе основной картинки. На карточках с услугами вообще нет воздуха над названиями. Чем выше уровень заголовка - тем больше воздуха вокруг него должно быть. Логически же не очень понятно, чем отличается первый набор карточек от второго. Если вчитаться, то выясняется, что первый набор - это вообще не список, это последовательность действий. Такие карточки обычно применяются для списков равноправных элементов без особого порядка, я для коммуникации последовательности шагов есть куча других типовых подходов. 0