Как и в любом языке планеты, так и на любой вэб-странице есть свой набор фундаментальных правил. Это делать можно, то делать нельзя; суть правил. Тот кто их нарушает — получает палкой в глаз. Где это оправдано, а где нет — и будет идти речь.
Начнём с банального. Сайт сразу должен давать представление о чём он.
_WVbJlmJ.png)
Выглядят хреново, посредственно. Но суть показывают
Вы представляете информацию, а нескольких лет на знакомство у вас нет. Посетитель должен знать, что его ждёт и что он получит.
Ссылка — любой элемент перенаправляющий на отдельную страницу, таб. Она всегда должна давать понять, что она ссылка. Это можно выражать через выделение, подчёркивание, указательный палец-курсор или стрелку, как в данном случае:
Слева понятно, что мы перейдём на другую страницу. Посередине, — нет. Справа, как нужно было сделать
iPhone
https://www.apple.com/iphone/
— Если ссылка открывает таб, а подчеркивание не подходит — можно использовать стрелки, любые другие пиктограммы.
— Ссылка должна подчеркиваться, реагировать тем или иным способом, либо изначально, либо при наведении.
— Если это тема, а не ссылка — достаточно выделения и курсора.
Если ссылка ведёт на другую страницу, и при этом открывает таб — её нужно подчёркивать линией. Если нет — пунктиром.
Пример с сайта студии Артемия Лебедева
Если логотип играет роль ссылки — перечисленное к нему относится тоже. Подчеркивание, пиктограммы большинству логотипов только навредят. Решить дилемму можно по разному:
Меняется цвет, увеличивается ширина вертикальных штрихов
Студия Артемия Лебедева | 25 лет принципиальности
https://www.artlebedev.ru/
После нажатия ссылка должна выделятся цветом. Пользователь должен понимать, что он здесь был. Когда открываешь одну ссылку — не критично. Когда будете что-то выбирать и по открываете ссылок 50, — почувствуете насколько это важно.
tema
https://www.tema.ru/main.html
Логин, пароль не должны исчезать ни при каких обстоятельствах:
Слева — сайт студии Артемия Лебедева. Справа — Эппл
Также, не стоит переусложнять:
Надпись привлекает ненужное внимание своей анимацией. Нужно было сделать как на сайте Эппл
Не нужно надоедать своему пользователю.
Слева — неправильно (сайт Эппл). Справа — правильно (сайт студии Артемия Лебедева)
Это тоже правильный, но устаревший вариант. Так делать уже не надо:
Под имя пользователя и пароль уходит слишком много места. Текст нужно зашивать непосредственно в блок
Также, не нужно использовать насиловать пользователя расспросами: «не хотите получать уведомления», «хотите задать вопрос», «оставьте нам свой телефон и мы перезвоним».
Нет!!! Пошли нахуй. Раньше мне было на вас похуй, а теперь желаю сгореть в аду. Если была мысль что-то спросить — теперь, она точно растворилась
Их нужно использовать ни в одной ситуации. Они являются показателем банальной лени верстальщика. Их большинство, верстают на типичном как говно движках. Сайты мало того что похожи друг на друга, так ещё кучу дефолтных функций оставляют.
wasd
https://wasd.tv/faq/questions
Также подобного рода блоки не стоит симметрировать. Не нужно стеснятся делать их короткими. Иначе будет получатся нелепость. Если в данной ситуации их укоротить — получится не лучше. Ведь, да. Страницу нужно подстраивать под изменения.
Анимация — это попытка дизайнером объяснить, как в данном месте появился данный элемент. Если что-то появляется «без спроса» — это вызывает удивление.
Пример правильных анимаций
Если где-то накосячили — не покидает ощущение будто что-то не то:
Пиктограмма не реагирует на нажатие. Одного блика при переходе не хватает
Также важно понимать: если страница часто посещаема — она должна открываться максимально быстро. Продолжительными и мягкими анимациями можно, и нужно пренебрегать. Если не втерпёж сделать красивую анимацию — её нужно показывать лишь один раз (сохранить в куках); дальше пускать обычную.
Названия страниц должны быть читабельны и понятны, а не быть похожими на шифр пьяного деда.
Слева неправильно. Справа наоборот
Четырехзначные числа должны писаться слитно.
Разделение четырехзначных цифр выглядит безграмотно и нелепо
Интернет магазин Rozetka.com.ua. Электроника, бытовая техника, одежда и обувь, товары для дома. Официальная гарантия. Доставка по всей Украине.
https://rozetka.com.ua/mobile-phones/c80003/preset=smartfon;seller=rozetka/
Простая визуализация почему: 10, 100, 1000, 10000 (ААА НЕПАНЯТНА, хочу 10 000).
Но есть исключения. Например, поля ввода мобильных номеров. Исторически принято разделять на три, два числа поочерёдно:
Слева — сайт студии Артемия Лебедева. Справа — интернет-магазина «Розетка»
Также стоит помнить, что код города, оператора (в ((почти)) начале; 3 цифры) не нужно вносить в скобки, — вверху слева правильно, справа — нет.
Конечно же, здесь не было затронуто даже половины из фундаментальных правил. Но это скорее к счастью, чем к несчастью. Иначе, на половину интернета вы бы смотрели со слезами.