LINUX.ORG.RU

true design

 , , ,


1

1

Ну что, погоняем современный дизайн сайтов?)

Вступление

Решение поделится своими мыслями появилось задолго до появления этих двух статей Почему сайты свободного софта зачастую такое УГ? и Накидайте примеров хорошего дизайна которые кстати ещё больше подтолкнули к публикации материала.

Последние пару лет меня стали раздражать большинство посещаемых сайтов. Чуть ли не каждый 2-й копирует один и тот же шаблон. Вот посмотрите https://windowstips.ru/, http://chto-takoe.net/, https://losst.ru/. Подобные сайты скорее всего сделаны на Wordpress или Drupal и содержатся каким-нибудь васей с searchengines, гордо называющий себя вебмастером.

Что не так с дизайном и как можно сделать лучше рассмотрим на примере сайтов сделанных за еду.

Немного о ужасах дизайна или как не надо делать

Подавляющие большинство информационных сайтов в сети выглядит так:

  1. https://i.imgur.com/Ca3RmAa.png
  2. https://i.imgur.com/oFb7MQu.png
  3. https://i.imgur.com/xJoZcDS.png
  4. https://i.imgur.com/9JHsD5d.png
  5. https://i.imgur.com/SaPHXIy.png
  6. https://i.imgur.com/DJdlhCU.png
  7. https://vgy.me/yP0LAh.png
  8. https://vgy.me/kMCCs6.png
  9. https://vgy.me/BCmy0M.png
  10. 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, но тоже так себе. Здесь — лучше.

Как надо (но это не точно):

  1. https://i.imgur.com/MVXOBMT.png
  2. https://i.imgur.com/SwIJBM7.png
  3. https://i.imgur.com/9WPZw6j.png
  4. https://i.imgur.com/LIdjFAH.png
  5. https://i.imgur.com/X9H563q.png
  6. https://i.imgur.com/Mt5wihy.png
  7. https://i.imgur.com/vdFt1a2.png
  8. https://i.imgur.com/eGt9Kq1.png
  9. 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
Лично меня напрягает, что некоторые из них показываются при заходе на сайт.
Здесь на самом деле сложный момент. Во многих курсах говорят, что нужно сообщать своему зрителю о действиях - нажми там на колокольчик(на ютубе) и подпишись. Это вроде как тру, но с другой стороны может быть назойливым.

Заключение

Всё это говорит нам о том что веб-сайтам необходим дизайн-код.

Что такое дизайн-код?
Это проиллюстрированный набор правил проектирования, требований и рекомендаций. С их помощью должен регулироваться шрифт, размер и форма блоков, анимация и другое.

Надеюсь моё недовольство поможет в создании визуально-гармоничного сайта.

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


Ответ на: комментарий от mord0d

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

Xant1k ()

Пример программистского идиотского дизайна - это когда тебе нужно посмотреть изображение к тексту, но для этого приходится:
1. Кликать по ссылке.
2. Ждать открытия новой страницы другого сайта.
3. На этой странице нужно кликнуть по минатюре изображения.
4. Ждать отработки JS и загрузки полномасштабного изображения.
5. Закрыть страницу другого сайта и вернуться обратно в текст, держа в уме, что там было в изображении.

И это всё вместо того, чтобы научиться подедрживать изображения в тексте.

Догадайтесь с трёх нот, о каком сайте идёт речь.

blackst0ne ★★★★★ ()

Ещё один пример плохого UX.
На сайте (https://blog.beanbaginc.com/) чтобы посмотреть архив записей нужно прокрутить ~1/4 часть страницы. О быстром доступе можно забыть. И это не говоря о том, что календарь может тянутся на долгие годы, в итоге скроллить будем долго.

Xant1k ()
Ответ на: комментарий от blackst0ne

Пример программистского идиотского дизайна - это когда тебе нужно посмотреть изображение к тексту

Нет, не нужно. Впрочем, говноimgur без прямых ссылок тоже не нужен.

Ждать отработки JS

Суть современного говновеба.

h578b1bde ★☆ ()

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

vtVitus ★★★★★ ()

Наткнулся давеча на статью одного фронтэндщика. Недодизайнерам которые повсеместно выделяют код, свойства или ещё что-нибудь как на скрине (https://i.imgur.com/VfSmmzV.png) будет полезно. Хотя как по мне лучше применение моноширинного шрифта как тут, это подчёркивает что именно является частью кода.
Спасибо её автору за альтернативный взгляд. Я ещё больше убедился в надобности темы «хорошие и не очень практики в веб-дизайне».

Xant1k ()
Ответ на: комментарий от Xant1k

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

anonymous ()

Понятно что используется популярный wordpress или drupal шаблон.

Скорее просто модный, мне кажется. У меня страничка тоже на вордпрессе, но на «современное» явно не тянет. Да мне и не нужна эта «современность».

Zhbert ★★★★★ ()