Ну что, погоняем современный дизайн сайтов?)
Вступление
Решение поделится своими мыслями появилось задолго до появления этих двух статей Почему сайты свободного софта зачастую такое УГ? и Накидайте примеров хорошего дизайна которые кстати ещё больше подтолкнули к публикации материала.
Последние пару лет меня стали раздражать большинство посещаемых сайтов. Чуть ли не каждый 2-й копирует один и тот же шаблон. Вот посмотрите https://windowstips.ru/, http://chto-takoe.net/, https://losst.ru/. Подобные сайты скорее всего сделаны на Wordpress или Drupal и содержатся каким-нибудь васей с searchengines, гордо называющий себя вебмастером.
Что не так с дизайном и как можно сделать лучше рассмотрим на примере сайтов сделанных за еду.
Немного о ужасах дизайна или как не надо делать
Подавляющие большинство информационных сайтов в сети выглядит так:
- https://i.imgur.com/Ca3RmAa.png
- https://i.imgur.com/oFb7MQu.png
- https://i.imgur.com/xJoZcDS.png
- https://i.imgur.com/9JHsD5d.png
- https://i.imgur.com/SaPHXIy.png
- https://i.imgur.com/DJdlhCU.png
- https://vgy.me/yP0LAh.png
- https://vgy.me/kMCCs6.png
- https://vgy.me/BCmy0M.png
- https://vgy.me/7YyJrd.png
Понятно что используется популярный wordpress или drupal шаблон. В нём «дизайнер» почему-то посчитал что раз мне нужно уместить в одном блоке статью и список допустим схожих статей, то визуально разделять их не надо (см. 1 и 2-й скриншот). Другой недостаток — куча свободного пространства (см. 1 и 3-й скриншот). А вот как в одном блоке разделили визуально https://i.imgur.com/G1E637L.png, https://i.imgur.com/EnQh8mh.png, https://i.imgur.com/9ZvUzrP.png, но тоже так себе. Здесь — лучше.
Как надо (но это не точно):
- https://i.imgur.com/MVXOBMT.png
- https://i.imgur.com/SwIJBM7.png
- https://i.imgur.com/9WPZw6j.png
- https://i.imgur.com/LIdjFAH.png
- https://i.imgur.com/X9H563q.png
- https://i.imgur.com/Mt5wihy.png
- https://i.imgur.com/vdFt1a2.png
- https://i.imgur.com/eGt9Kq1.png
- https://i.imgur.com/BoC6n0v.png
На скриншотах хорошая компоновка: основной блок с текстом отделён от дополнительных. Между доп. блоками есть пространство, либо же если доп. блок один внутри применяется разделяющая черта.
Ошибки
1) Отвлекающий фон
Баю-баюшки-баю засыпаю на краю https://pleroma.social/
Но иногда он бывает так сказать «в тему». Увы, хороших примеров не вспомнил/не нашёл.
2) Банеры или картинки на пол экрана
Нееееет. Запомните, картинка должна отражать смысл статьи или итоговый результат.
Вот баба одна сделала сайт (https://veerle.duoh.com/design/create-a-cubical-pattern-in-adobe-illustrator#0). Картинка над статьёй=итоговый результат урока, но всё равно «убивает». Решать вам.
Другой вариант (https://i.imgur.com/5jslkEv.png)
Поймите, черти, уже наконец что людям нафиг не нужна ваша картинка молотка в теме «создаём сайт с помощью ксс и бутстрап». Повторюсь: подбирайте картинки соответствующие статье.
3) Лепка
https://i.imgur.com/iHr8OBf.jpg
Прекратите лепить всё подряд и друг за другом. Пользователь теряется.
4) Тени
https://i.imgur.com/BrBNV8L.png
Зачем?
5) В табло
https://i.imgur.com/XIqCyXk.png, https://vgy.me/rKvBRw.png
Чего б#&$-? Неужели так сложно сделать как в ворде?)
6) Подчёркивания
https://i.imgur.com/nlpfF0y.png
Как мы видим буква Д в начале названия заголовка не подчёркнута.
Другой неудачный пример https://i.imgur.com/pdmQWsL.png иллюстрирует как низ буквы Щ почти сливается с подчёркиванием.
Так или так — лучше.
Статья по теме: https://css-tricks.com/styling-underlines-web/
7) Нумерация строк
Надо/нет? И что ставить после числа: ничего, точку, двоеточие или провести вертикальную линию?
8) Выделение кода
Почти всегда блоки с кодом подсвечивают каким-нибудь фоном и оборачивают в рамку https://i.imgur.com/p7cEmqG.png, https://vgy.me/I1kg6v.png, https://i.imgur.com/1iqpbCZ.png, https://i.imgur.com/pAzlurI.png
Особенно уродско выглядит когда во всю ширину блок. Хватит. В 99% случаев не в тему так сказать.
Выделение более-менее смотрится на старом дизайне css-tricks, но всё равно «перебивает» и заголовок и основной текст.
Другой момент — появившийся горизонтальный скролл. Представьте, что у вас подряд 15 блоков и там этот скролл. Мне такое недавно глаза вырезало.
Иногда встречал, что такие полоски появляются/всплывают когда на блок наводишь, как вам такой ход?
А ещё меня бесит вот такое выделение. Неужели нельзя применить моноширинный шрифт?
9) Перенос текста
https://i.imgur.com/G5KPWmb.png
Без комментариев.
10) Плавающий текст
Должны ли мы располагать текст в пространстве никак не выделяя его (как на medium, например)?
Пример: https://i.imgur.com/cJIKFl1.png
Или может стоит поместить внутрь блока, как тут?
11) Меню
a) Не помеченный значок увеличивает когнитивную нагрузку
(https://i.imgur.com/Aqp1ZM1.png).
Пример хорошего меню: https://i.imgur.com/UPNv1hc.png
b) На многих сайтах заметил подобное меню слева (http://window.edu.ru/catalog/pdf2txt/936/46936/23254?p_page=1#).
С одной стороны оно хорошее, с другой, когда мы его «сворачиваем» у нас блок с текстом визуально изменяется, что лично меня сильно напрягает.
Вывод: ширина блока для текста должна оставаться неизменной.
12) Уведомления
https://vgy.me/5306aT.jpg, https://i.imgur.com/wYa1NJr.png
Лично меня напрягает, что некоторые из них показываются при заходе на сайт.
Здесь на самом деле сложный момент. Во многих курсах говорят, что нужно сообщать своему зрителю о действиях - нажми там на колокольчик(на ютубе) и подпишись. Это вроде как тру, но с другой стороны может быть назойливым.
Заключение
Всё это говорит нам о том что веб-сайтам необходим дизайн-код.
Что такое дизайн-код?
Это проиллюстрированный набор правил проектирования, требований и рекомендаций. С их помощью должен регулироваться шрифт, размер и форма блоков, анимация и другое.
Надеюсь моё недовольство поможет в создании визуально-гармоничного сайта.
В следующей части я расскажу о своём видении каким должен быть дизайн современного информационно-новостного веб-сайта. Поделюсь советами и практическим опытом созданных сайтов на основе собственной модели плавающего или трансформирующегося дизайна.
