Прошу дать советы по дизайну сайта

@Renat174 · Регистрация: 08.10.2020

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

Здравствуйте!
Мой сайт - https://7x6.ru/
Прошу дать советы по улучшению дизайна сайта, удобству работы, каким то базовым недочетам и т.п.
На сайте представлены калькуляторы стройматериалов - вникать в точность/правильность расчетов не надо, только визуальную составляющую прокомментируйте и общее впечатление.
Если будут ссылки с примерами, показывающими удачное решение той или иной проблемы на моем сайте, буду очень признателен.

@Renat174 · 13.02.2024, 14:55 **[ТС]**

Прикрепил скриншот страницы с одним из калькуляторов

@Renat174 · 13.02.2024, 19:20 **[ТС]**

По-видимому, не в том разделе тему создал. Как то может автор переместить тему? Или удалить по крайней мере? Подскажите, пожалуйста...

@DrType · 13.02.2024, 23:08

По-моему, подходящий раздел.

@Usaga · 14.02.2024, 06:21

Renat174, сделано весьма недурно. Но мобильная версия немного крировата: контент страницы не умещается по ширине и появляется скроллер. Не критично, но всё же. Это легко и в обычном браузере воспроизводится, достаточно ширину окна уменьшить.

Добавлено через 5 минут
А вот сами калькуляторы конечно сделаны так себе. При попытки что-то рассчитать вся страница перезагружается. Хотя там модальные окна вроде как есть, соответственно, ожидается нормальная интерактивность, а не привет из двухтысячных...

@Renat174 · 14.02.2024, 07:26 **[ТС]**

Про перезагрузку...
Делать на чистом Javascript не стал, так как не хочу скрипт в паблик сливать. По этому сделал на PHP. Познания довольно поверхностные у меня, думал про Ajax, но наверное голос лени оказался громче, убедил себя, что не так критична перезагрузка формы.
А, про Ajax еще что подумал... Поскольку у меня в калькуляторах много параметров, получается что при изменении каждого будет происходить перезагрузка, т.е. очень много промежуточных ненужных обращений к серверу.
Или я не прав? Просвятите, пожалуйста, по этому вопросу, т.к. знаний у меня не достаточно.

Добавлено через 4 минуты
Про скроллеры (не помещается по горизонтали) - уточните пожалуйста, при какой ширине дисплея и какая страница - буду проверять/исправлять.

@Usaga · 14.02.2024, 07:46

Renat174, про скрипт я не совсем понял, что в нём такого ценного. Но это не проблема - собираешь параметры, шлёш на сервер по аяксу, получаешь ответ и выводишь его.

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

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

Ну, как сделаешь, так и будет) Если ты о том, что пока пользователь параметры забивает, ты промежуточные результаты считать пытаешься... Ну, сделай расчёты вызываемыми явно по кнопке. Или debounce какой-нибудь (запрос отправляется с задержкой, когда юзер ничего не вводит в течении какого-то времени).

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

Про скроллеры (не помещается по горизонтали) - уточните пожалуйста, при какой ширине дисплея и какая страница - буду проверять/исправлять.

Я на планшете увидел. И на десктопе просто окошко браузера уменьшил мышкой. Попробуй, оно легко повторяется.

@Renat174 · 14.02.2024, 07:54 **[ТС]**

Еще мысль такая... Если я просто тело калькулятора помещу в iframe... Я правильно понимаю, что при перезагрузках у меня будет только содержимое iframe обновляться, а не весь сайт. Это как альтернативное решение будет работать?

@Usaga · 14.02.2024, 07:59

Renat174, фреймы лучше не трогать. Это старая технология, не удобная и её потихоньку начинают резать. Если уж хочется разметку с сервера вернуть по аяксу, то руками её в DOM вставляй. Хотя это тоже такое себе.

@Renat174 · 14.02.2024, 08:00 **[ТС]**

Я не противник аякса, просто не знаю как внедрить, вот и пытаюсь найти вариант быстрый и сподручный.

Добавлено через 1 минуту
Ок, понял. Значит буду собираться с духом и приступать к изучению аякса... Спасибо!

@Usaga · 14.02.2024, 08:05

Renat174, я бы эти калькуляторы реализовал на каком-нибудь фронтовом фреймворке, типа Angular. Ну или на минималестичной библиотечке типа KnockoutJS, если впадлу всё на SPA переписывать и нужно точечно интерактивность добавить. Это было бы оптимальнее, чем гонять туда-сюда разметку и в DOM её вставлять, пол страницы перерисовывая.

Но тут сам смотри. Мне, как пользователю, главное, чтобы страница не перезагружалась вся. А как оно технически будет сделать - всё равно.

@Renat174 · 14.02.2024, 08:05 **[ТС]**

С горизонтальным скролом пока не понял в чем проблема - не отследил ошибку

@Renat174 · 14.02.2024, 08:07 **[ТС]**

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

@Usaga · 14.02.2024, 08:08

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

С горизонтальным скролом пока не понял в чем проблема - не отследил ошибку

Вот, это в Edge. В Safari и Хроме (на андроиде) тоже самое.

@Renat174 · 14.02.2024, 08:09 **[ТС]**

Ок, понял - буду исправлять

@Usaga · 14.02.2024, 08:09

Бог бы с ним на десктопах, мало кто окно браузера кукожит. Но на мобилах оно всегда видно.

@Renat174 · 14.02.2024, 08:13 **[ТС]**

Ну да, особенно актуально, что у меня мобильный трафик в 2 раза больше чем на ПК

@Renat174 · 15.02.2024, 09:05 **[ТС]**

Нашел, в чем проблема. На классе .row отрицательные значения margin-left и margin-right на небольших экранах в некоторых браузерах давали такой эффект. В итоге добавил @media (max-width: 991.98px){.row{margin-left:0; margin-right:0;}} и, кажется, проблема ушла

@Usaga · 15.02.2024, 09:09

Renat174, да, теперь нормально.

@voral · 15.02.2024, 10:30

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

Условно в простом варианте на css переход от opacity:1 к opacity:0 и обратно. (смотрите как на других сайтах популярных это реализуется)

Присоединяюсь к мнению, что необходимо переходить на Ajax. Т.е. на сколько "тонким" будет клиент в браузере уже решите по необходимости. А так будете условно с сервером общаться при помощи json.

Так же присоединяюсь к совету использования фреймворков. Про angular точно не скажу по сложности, но его альтернатива это React и Vue. Первый более популярный. По функционалу +/- одинаковы. Vue на мой взгляд и опыт, чуть проще для вхождения. Angular (тут я сам не пробовал, но то что смотрел, читал) - мне кажется чуть сложнее для входа.

Так же плюсом что к Vue и React есть UI библиотеки. Т.е. практически готовый дизайн (включает не просто визуал, но и функционал). Для примера можете погуглить про Matrerial UI

Новые блоги и статьи Все статьи Все блоги /
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .

@Renat174 10 / 9 / 4 Регистрация: 08.10.2020 Сообщений: 53

	Прошу дать советы по дизайну сайта 13.02.2024, 14:28. Показов 1589. Ответов 22 Метки дизайн сайта, навигация по сайту, юзабилити (Все метки) Здравствуйте! Мой сайт - https://7x6.ru/ Прошу дать советы по улучшению дизайна сайта, удобству работы, каким то базовым недочетам и т.п. На сайте представлены калькуляторы стройматериалов - вникать в точность/правильность расчетов не надо, только визуальную составляющую прокомментируйте и общее впечатление. Если будут ссылки с примерами, показывающими удачное решение той или иной проблемы на моем сайте, буду очень признателен. 0

@Renat174 10 / 9 / 4 Регистрация: 08.10.2020 Сообщений: 53
	13.02.2024, 14:55 [ТС]
	Прикрепил скриншот страницы с одним из калькуляторов Миниатюры 0

@Renat174 10 / 9 / 4 Регистрация: 08.10.2020 Сообщений: 53
	13.02.2024, 19:20 [ТС]
	По-видимому, не в том разделе тему создал. Как то может автор переместить тему? Или удалить по крайней мере? Подскажите, пожалуйста... 0

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	13.02.2024, 23:08
	По-моему, подходящий раздел. 0

@Usaga 14299 / 9384 / 1353 Регистрация: 21.01.2016 Сообщений: 35,381
	14.02.2024, 06:21
	Renat174, сделано весьма недурно. Но мобильная версия немного крировата: контент страницы не умещается по ширине и появляется скроллер. Не критично, но всё же. Это легко и в обычном браузере воспроизводится, достаточно ширину окна уменьшить. Добавлено через 5 минут А вот сами калькуляторы конечно сделаны так себе. При попытки что-то рассчитать вся страница перезагружается. Хотя там модальные окна вроде как есть, соответственно, ожидается нормальная интерактивность, а не привет из двухтысячных... 1

@Renat174 10 / 9 / 4 Регистрация: 08.10.2020 Сообщений: 53
	14.02.2024, 07:26 [ТС]
	Про перезагрузку... Делать на чистом Javascript не стал, так как не хочу скрипт в паблик сливать. По этому сделал на PHP. Познания довольно поверхностные у меня, думал про Ajax, но наверное голос лени оказался громче, убедил себя, что не так критична перезагрузка формы. А, про Ajax еще что подумал... Поскольку у меня в калькуляторах много параметров, получается что при изменении каждого будет происходить перезагрузка, т.е. очень много промежуточных ненужных обращений к серверу. Или я не прав? Просвятите, пожалуйста, по этому вопросу, т.к. знаний у меня не достаточно. Добавлено через 4 минуты Про скроллеры (не помещается по горизонтали) - уточните пожалуйста, при какой ширине дисплея и какая страница - буду проверять/исправлять. 0

@Renat174 10 / 9 / 4 Регистрация: 08.10.2020 Сообщений: 53
	14.02.2024, 07:54 [ТС]
	Еще мысль такая... Если я просто тело калькулятора помещу в iframe... Я правильно понимаю, что при перезагрузках у меня будет только содержимое iframe обновляться, а не весь сайт. Это как альтернативное решение будет работать? 0

@Usaga 14299 / 9384 / 1353 Регистрация: 21.01.2016 Сообщений: 35,381
	14.02.2024, 07:59
	Renat174, фреймы лучше не трогать. Это старая технология, не удобная и её потихоньку начинают резать. Если уж хочется разметку с сервера вернуть по аяксу, то руками её в DOM вставляй. Хотя это тоже такое себе. 1

@Renat174 10 / 9 / 4 Регистрация: 08.10.2020 Сообщений: 53
	14.02.2024, 08:00 [ТС]
	Я не противник аякса, просто не знаю как внедрить, вот и пытаюсь найти вариант быстрый и сподручный. Добавлено через 1 минуту Ок, понял. Значит буду собираться с духом и приступать к изучению аякса... Спасибо! 0

@Usaga 14299 / 9384 / 1353 Регистрация: 21.01.2016 Сообщений: 35,381
	14.02.2024, 08:05
	Renat174, я бы эти калькуляторы реализовал на каком-нибудь фронтовом фреймворке, типа Angular. Ну или на минималестичной библиотечке типа KnockoutJS, если впадлу всё на SPA переписывать и нужно точечно интерактивность добавить. Это было бы оптимальнее, чем гонять туда-сюда разметку и в DOM её вставлять, пол страницы перерисовывая. Но тут сам смотри. Мне, как пользователю, главное, чтобы страница не перезагружалась вся. А как оно технически будет сделать - всё равно. 1

@Renat174 10 / 9 / 4 Регистрация: 08.10.2020 Сообщений: 53
	14.02.2024, 08:05 [ТС]
	С горизонтальным скролом пока не понял в чем проблема - не отследил ошибку Миниатюры 0

@Renat174 10 / 9 / 4 Регистрация: 08.10.2020 Сообщений: 53
	14.02.2024, 08:07 [ТС]
	В хроме при включении режима просмотра на разных размерах экрана эпизодически появляется ошибка, но при береходе на др старницу и возвращении обратно уже нет ошибки - подумал, что глюк браузера 0

@Renat174 10 / 9 / 4 Регистрация: 08.10.2020 Сообщений: 53
	14.02.2024, 08:09 [ТС]
	Ок, понял - буду исправлять 0

@Usaga 14299 / 9384 / 1353 Регистрация: 21.01.2016 Сообщений: 35,381
	14.02.2024, 08:09
	Бог бы с ним на десктопах, мало кто окно браузера кукожит. Но на мобилах оно всегда видно. 0

@Renat174 10 / 9 / 4 Регистрация: 08.10.2020 Сообщений: 53
	14.02.2024, 08:13 [ТС]
	Ну да, особенно актуально, что у меня мобильный трафик в 2 раза больше чем на ПК 0

@Renat174 10 / 9 / 4 Регистрация: 08.10.2020 Сообщений: 53
	15.02.2024, 09:05 [ТС]
	Нашел, в чем проблема. На классе .row отрицательные значения margin-left и margin-right на небольших экранах в некоторых браузерах давали такой эффект. В итоге добавил @media (max-width: 991.98px){.row{margin-left:0; margin-right:0;}} и, кажется, проблема ушла 0

@Usaga 14299 / 9384 / 1353 Регистрация: 21.01.2016 Сообщений: 35,381
	15.02.2024, 09:09
	Renat174, да, теперь нормально. 0

@voral 3054 / 1454 / 264 Регистрация: 16.03.2008 Сообщений: 6,484 Записей в блоге: 2
	15.02.2024, 10:30
	Самое первое, что прям "бесит". (конечно это индивидуально, но тем не менее) это индикатор загрузки, появляющийся посредине страницы, немножко подергается и потом улетает вверх (с белым фоном на всю ширину). Уж если индикатор делать то, +- типовое решение: плавно затемнить.засветлиь (в общем то хоть для полной заливки белым) фон, посредине индикатор... а потом это все также плавно "растворить". Условно в простом варианте на css переход от opacity:1 к opacity:0 и обратно. (смотрите как на других сайтах популярных это реализуется) Присоединяюсь к мнению, что необходимо переходить на Ajax. Т.е. на сколько "тонким" будет клиент в браузере уже решите по необходимости. А так будете условно с сервером общаться при помощи json. Так же присоединяюсь к совету использования фреймворков. Про angular точно не скажу по сложности, но его альтернатива это React и Vue. Первый более популярный. По функционалу +/- одинаковы. Vue на мой взгляд и опыт, чуть проще для вхождения. Angular (тут я сам не пробовал, но то что смотрел, читал) - мне кажется чуть сложнее для входа. Так же плюсом что к Vue и React есть UI библиотеки. Т.е. практически готовый дизайн (включает не просто визуал, но и функционал). Для примера можете погуглить про Matrerial UI 1