4

Редизайн шапки сообщества ВК

Серия Редизайн дизайнов

Привет, пикабу.

Очередной пост по редизайну, сегодня будем перерисовывать шапку одной из сообществ, реклама которой мне попалась в ленте. Давайте посмотрим на то, как сейчас выглядит эта группа:

Исходная шапка ВК сообщества.

Исходная шапка ВК сообщества.

В целом концепция мне нравится, но есть некоторые недочёты в вёрстке, которые мы можем исправить.

Озвучу ошибки, которые были допущены в этой работе. Во-первых, текстовый блок слева сверху расположен не совсем корректно. Он будто прилип к верхнему краю и не выровнен относительно серой области изображения. Я понимаю, что акцент сделан на слове «Стальная», ведь компания занимается металлами, и это также подчёркивает сварщик, расположенный по центру на изображении.

Дальше идёт момент, который мне непонятен: вторая строка меньше, чем третья и четвёртая. Если нам нужно выделить первое слово, мы можем это сделать, но остальные строки оставим одного размера. Например, так:

Пример заголовка.

Пример заголовка.

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

Также есть вопрос по изображению рабочего. Было бы лучше, если бы цвета на шапке были расположены наоборот: серый внизу, а белый вверху. Это помогло бы скрыть не самую удобную часть с рабочим столом сварщика. Сейчас же изображение вырезано слишком грубо, и цвет привлекает внимание именно к этой части.

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

Учитывая всё вышесказанное, делаю редизайн первого варианта. Вот такие результаты получились в итоге:

Обновленные варианты шапок для сообщества.

Обновленные варианты шапок для сообщества.

Большое спасибо что прочитали пост!

Графический и Веб-дизайн

1.1K поста12.5K подписчиков

Правила сообщества

Можно:


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


Вставить свои 5 копеек. Если будет своя альтернативная точка зрения или совет по какой-то теме, то это приветствуется.


Нельзя:


1. Публиковать сообщения, картинки, не соответствующие тематике;

2. Размещать ссылки рекламного характера;

3. Перегибать палку;


Если оступился:


в случае нарушений, доступ в группу будет закрыт, а пользователь занесен в бан-лист;

0
Автор поста оценил этот комментарий
Выглядит безусловно гармоничнее и чище, но действительно отдает атмосферой гейминга. Кмк из за эффекта глубины и распределения света, это похоже на 3д рендер, как в видео-играх.

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

Короче, как подбирать размеры шапкам?
раскрыть ветку (1)
1
Автор поста оценил этот комментарий

Привет. Да, все верно, размеры на моем примере взяты с потолка, т.к. это всего лишь пример как могла бы выглядеть шапка. Я просто взял горизонтальный формат.

Как работать с шапками: Ничего нового не скажу. Ориентируйся прежде всего на размеры которая диктует площадка для которой ты делаешь этот визуал (очевидно, но способ рабочий, и это первое на что нужно смотреть)). Второе - используй рабочие сетки для той или иной шапки. Обычно в интернете уже кто-то до нас их нарисовал и остается только позаимствовать размеры от туда и помещать все важные объекты внутри рабочей области. Третье - если не хочется гуглить, то остается прикидывать методом проб и ошибок. У меня для этого есть отдельная группа закрытая на которой я тестирую шапки прежде чем отправить клиенту. Сделал - прикинул - подвинул - сохранил. Больше никак. Сейчас соц сети в принципе адекватно подходят к мобайл/десктоп отображению страницы. ВК, например, позволяет для этого сделать отдельно два варианта - под пк и мобильный формат. С ютюбом потяжелее, но и в этом случае можно выкрутиться. С телевизора люди не так часто используют этот сайт, соответственно на формат ТВ можно сильно не опираться, а поработать над мобайл/десктоп версией.

Спасибо за фидбек.

Темы

Политика

Теги

Популярные авторы

Сообщества

18+

Теги

Популярные авторы

Сообщества

Игры

Теги

Популярные авторы

Сообщества

Юмор

Теги

Популярные авторы

Сообщества

Отношения

Теги

Популярные авторы

Сообщества

Здоровье

Теги

Популярные авторы

Сообщества

Путешествия

Теги

Популярные авторы

Сообщества

Спорт

Теги

Популярные авторы

Сообщества

Хобби

Теги

Популярные авторы

Сообщества

Сервис

Теги

Популярные авторы

Сообщества

Природа

Теги

Популярные авторы

Сообщества

Бизнес

Теги

Популярные авторы

Сообщества

Транспорт

Теги

Популярные авторы

Сообщества

Общение

Теги

Популярные авторы

Сообщества

Юриспруденция

Теги

Популярные авторы

Сообщества

Наука

Теги

Популярные авторы

Сообщества

IT

Теги

Популярные авторы

Сообщества

Животные

Теги

Популярные авторы

Сообщества

Кино и сериалы

Теги

Популярные авторы

Сообщества

Экономика

Теги

Популярные авторы

Сообщества

Кулинария

Теги

Популярные авторы

Сообщества

История

Теги

Популярные авторы

Сообщества

Недвижимость и ремонт

Теги

Популярные авторы

Сообщества