Рекомендации по настройке внешнего вида профиля / Сайт / Форум Шикимори

23 декабря 2016

Доброго времени суток.
Как вы уже могли заметить, недавнее нововведение, позволяющее редактировать css личной страницы сайта, не всегда лучшим образом отражается на странице некоторых пользователей. Это не мой личный взгляд, скорее нарушение простых правил оформления и дизайна большинством пользователей, которые сразу же побежали менять цвета и шрифты как душе угодно. Не каждому человеку, что может зайти к Вам на страницу, может прийтись по вкусу чрезмерно броский дизайн, а посему я хотел бы дать несколько советов, которые могут помочь вам этого избежать. Всё описанное ниже - всего лишь рекомендации, ничего более, но они могут помочь вам не ударить в грязь лицом при оформлении вашего профиля.
1. Диссонанс в дизайне сайта и вашей страницы.
Старайтесь избегать слишком сильных различий вашего дизайна с дизайном сайта.

спойлер

Используйте картинки с белым, а ещё лучше прозрачным фоном, не уходите слишком далеко от стандартных цветов сайта, не меняйте цвет каждого элемента страницы просто "для красоты". Это может стать очень серьёзным отталкивающим фактором для посетителей страницы. Базовый фон сайта - белый. Центральная область либо белая, либо серая. Всё остальное пользователи сайта используют гораздо реже. Верхняя панель - чёрная. Если при переходе на вашу страницу, кто-то увидит жёлтый фон и синюю панель, то с большей вероятностью, это кто-то просто убежит подальше и никогда не вернётся. Не слишком сильное изменение цветов вполне допустимо и даже может оказаться приятно глазу, но не перестарайтесь с этим.

2. Фоновые картинки. Не делайте центральную область прозрачной. Если очень хотите засветить свою фоновую картинку, то ставьте прозрачность как можно меньше.

спойлер

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

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

спойлер

Они созданы для оформления всяческих шапок/постеров/аватарок, но никак не для основного текста. Не стоит прибегать к курсивным/жирным/рукописным шрифтам. Привычные шрифты, по типу Arial, Times New Roman и всё, что на них похоже намного проще воспринимается пользователем.
Пример рукописного шрифта, который тяжело воспринимать, если этот шрифт используется как основной.

4. Масштабируемость. Это касается и объектов, и картинок. Не забывайте, что не все могут видеть ваш профиль так же, как и вы всё из-за разницы в разрешениях.

спойлер

Будьте осторожны. Из-за подобного сдвига весь профиль может выглядеть совсем не так, как вы задумывали.

5. Размер текста и объектов. Увеличение всего, что есть на вашей странице, в том числе и шрифта, создаст ад для глаз пользователей с низким разрешением экрана, в том числе и пользователей большинства ноутбуков. Если знать меру в увеличении объектов, то ни к чему плохому это не приведёт, но вот разница в размерах текста слишком сильно ощущается при просмотре страницы.
6. Цвет текста. В большинстве случаев, грамотное использование цветов приятно скажется на восприятий, но не перестарайтесь.

спойлер

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

7. Курсор. Если у вас прямо-таки жгучее желание поменять курсор со скучного и стандартного на более оригинальный, то пожалуйста, будьте сдержаннее.

спойлер

Слишком большие и чрезмерно отличающиеся от стандартной "стрелочки" курсоры удивят лишь на секунду, а затем начнётся негодование из-за неудобства пользованием.
Красиво, но размер слишком велик. Более того, таким курсором немного тяжелее управлять с непривычки.

8. Gif-анимации. Будьте осторожны с их использованием, чрезмерно активная "гифка" может здорово помешать восприятию вашего профиля, а так же может подлагивать на слабых компьютерах и съедать трафик у тех, для кого он ограничен.

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

Комментарии

Скрыть 70 комментариев

Показать 70 комментариев

Загрузить ещё 20 из 70 комментариев

ASHITA NO ANIMATION 6 мая 2023#

@Ego Sum, Спасибо, а Вы не знаете как вместить фото загружаемое? А то не помещается в избранное и там только часть видно

@Ego Sum

Ego Sum 6 мая 2023#

@ASHITA NO ANIMATION, скорее всего можно поэкспериментировать со значениями "size" & "position"

kondrick23 июня 2023#

Друзья, может кто помочь фон в профиле поставить?

@YourFirstLover

Ringa* 8 июля 2023#

Можно ли, как-нибудь, Сделать так, чтобы список друзей был над клубами?

@spokoynoinochi

spokoynoinochi12 октября 2023#

@Ringa*, контейнеру display: flex, flex-direction: column

@Ringa*

Ringa*13 октября 2023#

@spokoynoinochi, Спасибо")

Harano18 октября 2023#

Можно как-то увеличить список избранного ? А то у меня максимум 144, очень мало ;c
И зависит ли это вообще от стиля, или это ограничение самого сайта ?

@5yhcbj

YourFirstLover17 ноября 2023#

@kondrick, Если хочешь по лайтовому не слишком ломая внешний вид сайта, то вот

body {
background-size: cover;
background-image: url(загрузи картинку на imgur.com и вставь ссылку);
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
}.l-page {
background-color: rgba(255, 255, 255, 0.78); }

@kondrick

5yhcbj17 ноября 2023#

@Harano, нельзя, не зависит.

kondrick22 ноября 2023#

@YourFirstLover, уже не надо, но спасибо большое!

варёный рис 9 ноября 2025#

Я хочу посмотреть в глаза тому человеку, которому взбрело в голову сделать возможность добавлять фоновые картинки не через какой нибудь Pinterest, а через imgur

@NotSoOff, @Aoimaru

NotSoOff11 ноября 2025#

@варёный рис, Получается тому, кто придумал фундаментальные основы интернета?
Кастомная картинка на фон ставится через background-image и содержит в себе ссылку на картинку, которая получается через запрос к этой картинке и ставится браузером на фон. Это может быть сссылка на практически любую картинку в интернете. Или Вы имеете ввиду придумать костыль, запрещающий ставить ссылки на определённый список сайтов?

Aoimaru11 ноября 2025#

@варёный рис, ты можешь ссылки с любых сайтов использовать, в т.ч. с пинтереста, если тебе так хочется, только это должна быть ссылка именно на изображение, а не на пост. Можешь через девтул (F12, потом Ctrl+Shift+C) выделить картинку и посмотреть ссылку на неё, на пинтересте она должна быть в таком формате.

@варёный рис