Прошу совета веб-дизайнеров⁠⁠

если нет времени изучать дизайн, то вот тебе совет: не занимайся дизайном, найми или попроси кого-то другого

Словил на этом сайте порнобаннер

а у меня съезжает:D адаптивность делается не ток для тебя, не так ли. мне сложно что-то подсказать. я из поколения которые могут в table и float, я сейчас читаю про grid, может соображу как нынче всё работает. заодно ещё про бэм почитала, эх сколько всего напридумывали, знала бы про модификаторы, к ним бы и лепила стиль, запомню на будущее

body * {

font-family: "-apple-system",BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important;

}

.report-div, .hot-news-div, .nav-panel, .header {

border: 0 !important;

}

.main_index {

grid-gap: 0;

}

.nav-panel {

background: #f2f2f2;

padding: 2vmin;

}

.report-div > span, .nav-panel > span {

color: #999;

background: rgba(0,0,0,0);

}

.hot-news-div > span, .nav-panel > span:hover {

color: #444;

background: rgba(0,0,0,0);

}

.menu-category, .menu-category > div > .branded-text {

background: #444;

color: #f2f2f2;

}

.menu-category:hover, .categoryDiv__list_close:hover {

color: #fff;

}

h3 {

color: #444 !important;

}

.piece-of-news__title h3:hover {

color: #000 !important;

}

.piece-of-news {

border-bottom: #ddd 1px solid;

border-top: #ddd 1px solid;

grid-gap: 0.5em;

margin-top: 0.5em;

margin-bottom 0.5em;

}

.aside-right {

border: #ddd 1px solid;

border-radius: 3px;

}

.main {

padding-left: 1vmin;

}

.news {

margin-top: 5vmin;

}

.category-div__list_desktop, .category-div__span {

color:#444;

}

.category-div__span:hover {

color: #000;

}

собственно вот, основная перекраска блоков, которые есть сейчас, сделала как тему в stylus.

но в вёрстке у тебя конечно херня творится, позиционирование совсем не адаптивное (см изображение, открыла инструмент тут же поплыл блок, если не умеешь не легче просто сделать отдельную мобильную версию?). почему ты используешь только классы? запомни, в классы записывают дополнительное свойства к группе основновных id - идетификаторов. например у тебя есть <h1> и тебе нужно несколько одинаковых <h1>, но один с подчеркиванием. дак вот одинаковыйм всем <h1> нужно применить именно id, а тому что с обводкой пишешь отдельный класс. если что эти правила не я придумала.

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

нисколько я этим не зарабатываю. я рисую в свое удовольствие, это мое хобби. никогда не делала сайты или дизайны к ним, но я делала так сказать темы к готовым сайтам у которых мне не нравился родной дизайн, например кинопоиск только 2 года назад написал свой дизайн, до этого там был ужас, поэтому я ставила свою тему. сейчас я простой наблюдатель потому что сейчас у меня особо нет желания делать темы, т.к. большинство сайтов итак прилично выглядит :D но твой конечно беда. давай сейчас посмотрю сколько у тебя элементов всего, если не слишком много я накатаю тебе css

смотри у той же юлы пункт местоположение всё равно что у тебя выбор региона. если пробежишься по сайтам где есть такой элемент, везде увидишь примерно такую картину. и это не спроста. дизайны делают так чтобы пользователю было привычно пользоваться, потому что когда везде расположение тех же элементов одно, а на одном сайте другое, пользователю будет неудобно. поэтому все старательно и рисуют в векторе свои логотипы, чтобы как у всех был favicon, та же печенюшка пикабу помнишь какой была? все максимально минимализуют свои дизайны и подстраиваются друг под друга. опять же посмотри на пикабу, края блоков не острые, но и не слишком скруглённые, например вк раньше имел прямоугольные блоки, сейчас они скругленные, но не сильно, потому что тенденция к прямым линиям есть, но при этом не к острым углам. сейчас кстати почти везде пишется темная тема (в том смысле отдельно светлая, отдельно темная, чтобы пользователю было удобно).  записывай, записывай. лишь бы пока ты не записывал тренды опять не поменялись :D

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

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

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

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

почему бы просто не посмотреть на другие сайты, найти такой, где нравится дизайн и в большей степени его не скопировать под свои элементы? кроме того можно сразу не применять в своём родном css файлике, а накатить сначала сверху, например расширением stylis и если не понравится накатить другой дизайн, и третий, пока не понравится. ведь мало кто может сам с нуля создать офигенный стиль (под стилем имеется именно стиль), для этого нужны художественные навыки, причем развитые, это не для новичка. как правило современный дизайнер работает с уже готовым кем-то созданным стилем, и на основе него уже делает дизайнерский проект, так что копипаста повсеместна и уместна, конечно не стоит копировать полностью, но отталкиваться от чужого стиля точно нужно, если своего нет.

1. Очень контрастный, тяжело для глаз. То есть у тебя белый фон, потом черная полоска, а на ней - опять черный текст!

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

3. Это региональный портал? Раз есть прогноз погоды в правом верхнем углу и какой-то герб на главной странице (кстати, использование гос.знаков, кажется, как-то регулируется законом), то предположу, что региональный.

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

5. Очень клёво, что страницу с сайтом можно сузить до узкой колонки и сайт не теряет структуру.

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

7. Жму "Новости организаций" → "Политика". И в ленте вижу повторяющиеся новости (по три штуки). Что-то не то с граббером.

8. Если "гулять" по сайту, то не видно, где в данный момент находишься. Ни в адресной строке (чтобы там ничего не отображалось, вообще впервые вижу), ни на самом сайте ничто не говорит о текущем местонахождении в структуре сайта.

8.1 С предыдущим пунктом связана и ещё одна необычность: Логотип не кликабельный и не ведёт на главную страницу.

9. Поиск по сайту не работает. Набираю слово, жму "ентер", ничего не происходит.Зачем тогда этот поиск нужен, тем более на самом видном месте?

10. Жму на клавиатуре Ctrl+"+", чтобы увеличить шрифт, шрифт в ленте увеличивается, а, вот, шапка как была статичная и огромная, так и остаётся. Это как?

1. Очень контрастный, тяжело для глаз. То есть у тебя белый фон, потом черная полоска, а на ней - опять черный текст!

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

3. Это региональный портал? Раз есть прогноз погоды в правом верхнем углу и какой-то герб на главной странице (кстати, использование гос.знаков, кажется, как-то регулируется законом), то предположу, что региональный.

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

5. Очень клёво, что страницу с сайтом можно сузить до узкой колонки и сайт не теряет структуру.

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

7. Жму "Новости организаций" → "Политика". И в ленте вижу повторяющиеся новости (по три штуки). Что-то не то с граббером.

8. Если "гулять" по сайту, то не видно, где в данный момент находишься. Ни в адресной строке (чтобы там ничего не отображалось, вообще впервые вижу), ни на самом сайте ничто не говорит о текущем местонахождении в структуре сайта.

8.1 С предыдущим пунктом связана и ещё одна необычность: Логотип не кликабельный и не ведёт на главную страницу.

9. Поиск по сайту не работает. Набираю слово, жму "ентер", ничего не происходит.Зачем тогда этот поиск нужен, тем более на самом видном месте?

10. Жму на клавиатуре Ctrl+"+", чтобы увеличить шрифт, шрифт в ленте увеличивается, а, вот, шапка как была статичная и огромная, так и остаётся. Это как?

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

Главное правило дизайна, когда не понимаешь в дизайне: меньше элементов, меньше цветов, никаких эффектов, меньше мусора, много аккуратности и выравнивания.

Поэтому:

1. Убираем эффект появления

2. Убираем тени

3. Убираем чёрный фон под текстом

4. Убираем линии между новостями

5. Выравниваем контент по ширине верхнего меню

6. Выравниваем фотографию по заголовку (вертикально)

7. Аккуратно форматируем даты

8. Делаем подвал сайта

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

И у тебя два раза тег html закрывается

Белый текст на черном фоне вырвиглазно смотрится. Вообще для заголовков фон не нужен, лучше поиграйся с цветом текста

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

Да хотя бы вырвиглазные заголовки на чёрном фоне убрать, уже в три раза читабельнее станет...