?

Log in

No account? Create an account

nobelfaik


Блог Игоря Штанга

light gray is the new white, dark gray is the new black


Previous Entry Поделиться Next Entry
Перевёрсточки — конкурс для дизайнеров
nobelfaik
У нас снова конкурс с разбором работ и призами. Я назвал его «Переверсточки», потому что все форматы небольшие и их не нужно переделывать с нуля. Важно найти принципиальное улучшение, полировать пиксели необязательно. Постарайтесь потратить на каждый макет не более получаса.

Вот наши красавцы:

1. Промоблок на сайте timepad.ru

Тот, что обведен серой рамкой. Переверстайте содержимое блока, не меняя надсистему и не переписывая текст (чуть-чуть можно). Не забывайте, что это веб. Я оставил на скриншоте соседние этажи, чтобы показать контекст.

Промоблок на сайте timepad.ru

2. Лицевая сторона упаковки Renewal

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

Упаковка анальгина Renewal

3. Рекламный банер «Азбуки вкуса»

Иллюстрацию и логотип оставляем на макете, формат не меняем.

Рекламный банер «Азбуки вкуса»


Картинки загрузите на файлообменник, к комментарию прикрепите ссылку. Объясните свое решение. Комментарии откроются 17 марта. Я разберу каждую работу, отдельным постом опубликую результаты и покажу свои варианты.

Автор самых удачных переверсточек получит одну из трех книг на выбор: раз, два, три. Или блокнот с грифоном :–)

Поехали!

Результаты конкурса

Записи из этого журнала по тегу «конкурс»



Анальгин.
Переверстка: много белого пространства, упорядоченность, сетка, спокойствие. То, что нужно для лекарства.
http://transfiles.ru/xjlsv

Горох - акцент на слове принцесса без оттягивания внимания от иллюстрации. Иллюстрация увеличена.
http://transfiles.ru/xjlsv

(Удалённый комментарий)
(Удалённый комментарий)
(Удалённый комментарий)
(Удалённый комментарий)
(Удалённый комментарий)
1. https://yadi.sk/i/4LjPojjc3FRu9a
Весь блок целиком сделать кликабельным. При уменьшении окна браузера верстка должна перестраиваться: размер шрифта уменьшаться, отступы пропорционально сокращаться. На сильно узких экранах блок перестраивается вертикально: заголовок на белом фоне — сверху, список пунктов — снизу, фоновая указующая стрелка станет указывать сверху вниз.

2. https://yadi.sk/i/vPkvLHUi3FRv7S
Название препаратов бывают очень длинные («Ацетилсалициловая кислота»), поэтому под заголовок резервируем всю ширину упаковки.

Форма препарата (капсулы или таблетки) уже показана пиктограммой, писать дополнительно не нужно. Рядом указываем количество. То, что таблетки принимают внутрь тоже избыточно. Для фармацевта, который ищет препарат в ящике, важно знать количество таблеток в упаковке и дозировку, если есть: «[пиктограмма] 20 х 500 мг».

3. https://yadi.sk/i/rstZ4kf73FRwTn
Осмелюсь предположить, что в рекламе будут участвовать и другие продукты. Название продукта в заголовке красим в цвет продукта.

+
1. Хорошо разобрались с заголовком и списком.
2. Конструкция блока стала лучше.


1. Левая колонка текста не выровнена с правой, строчки не совпадают.
2. Слишком крупный кегль по сравнению с теми, что есть на странице.
3. Без кнопки призыв к действию стал слабее.
4. Последний пункт списка должен начаться с большой буквы.

timepad.png

Edited at 2017-03-17 08:39 (UTC)

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

Азбука вкуса
Идею веселую с прицессой хотелось вынести из описания в графику. Добавил рисованной короны и, соответственно, рисованных букв, чтобы была некая игривость.
Попытки надеть корону на горошины не увенчались успехом.)

Анальгин
Верхнюю строчку оставляю целиком для названия. Избавляюсь от плашки в описании.
https://yadi.sk/d/DnyIjgHd3FTm3c




Edited at 2017-03-10 15:25 (UTC)

Хорошо разобрался с материалом, но передизайнил. Ни шрифты, ни цвета, ни иконки не подходят к этой странице.

timePad_fin.jpg

Edited at 2017-03-17 08:41 (UTC)

Конкурс "Перевёрсточки"

Акцентируем внимание на вопросе, добавим воздуха между строками, изменим цвет на зеленый, на тот что у кнопки выше.
https://drive.google.com/open?id=0B-JSagu5E7xlYUhiRFMzWldnTjA

Сгруппируем элементы и избавимся от хаотичности.
https://drive.google.com/open?id=0B-JSagu5E7xlODhCM3FuTnQ0X0k

Поменяем местами текст и картинку, так легче воспринимать информацию.
https://drive.google.com/open?id=0B-JSagu5E7xlakY3dUtDa2xnSDQ

Re: Конкурс "Перевёрсточки"

Лучше не стало)

1-1.png

Edited at 2017-03-17 08:42 (UTC)

Таймпэд
Блок стал контрастнее. Переписал заголовок на более мотивирующий, разбил текст на список. Синтаксис на кнопке, которая к тому же ссылка — неверный, но так прикольнее.
https://www.dropbox.com/s/914j5youv5m08qj/timepad.png?dl=0


Анальгин
Сократил количество кеглей до 2-х. 55пт для названия и 21пт для остальной информации. «Ацетилсалициловая кислота» нормально влезет в том же кегле что и «Анальгин». Избавился от цветной плашки по заветам Мюллера-Брокмана, просто покрасил текст из блока «назначения или состава». Сделал явный контраст между формой выпуска и способом приема. Поместил важную, но набранную небольшим
кеглем информацию на краю пачки чтобы проще было найти.
https://www.dropbox.com/s/zeq42rj2evrgpfm/renewal.jpg?dl=0


Азбука вкуса
Избавился от правого флага. Набрал крупнее и жирнее. Фотографию с горохом подобрал бы более подходящую, но раз не надо, то не надо.
https://www.dropbox.com/s/rna7i1i3fw3suz8/azbuka.jpg?dl=0

Re: Перевёрсточка

Хорошо разобрался с материалом, но передизайнил. У них на сайте всё светленькое и бледненькое, а тут такой кирпич.

Мелочи:
1. На кнопку лучше поставить глагол.
2. Линейки точно лишние.
3. «С помощью Таймпада» — с окончанием.

timepad.png

+
Короткий заголовок и текст списком ок.


1. Слишком крупный кегль по сравнению с теми, что есть на странице.
2. Конструкция не очень. Что будет, если количество или объем пунктов изменятся?
3. Правый нижний угол пустует.

timepad.png

https://yadi.sk/d/iOKflgzT3FX6hb

1) Убираем расшаркивания в заголовке, все преимущества оформляем списком. Кнопка особо ничего не решает (CTA ради CTA), поэтому задаем заголовку формат ссылки и вообще делаем весь блок кликабельным. Правый край поддерживаем какой нибудь тематической картинкой для привлечения внимания. Убираем рамки, заливаем легким серым, чтоб блок лучше выделялся (хотя можно и так оставить было)
2) Идем в аптеку и видим, что все лекарства там уже расставлены по категориям, а дома убеждаемся, что большинство таблеток у нас хранится вовсе без упаковки, поэтому смело кикаем надпись "от боли и жара". Устанавливаем размер заголовка таким образом, чтоб влез "уголь активированный" (пример на сайте), пишем с маленькой буквы, чтоб сравнять модульность с пилюлей в логотипе (why not?). Количество таблеток и иконку ставим под загом. Награждаем себя витаминкой.
3) Уносим текст влево, убираем "у нас" (а у кого еще-то?), в ту же сторону - логотип и текст, увеличиваем горох и закрываем правую сторону. Делаем еще один вариант, без копирайта и слегка в другой компоновке, на всякий случай

Re: Переверстка

+
1. Хорошо разобрался с материалом.
2. Блок вписался в дизайн сайта.


1. Не разобрался с полями и отступами.
2. Пунктуацию в списке можно опустить.
3. Картинку хочется поставить поживее, на контрасте с ровным прямоугольником текста.

Безымянный-1-01.jpg

Общее решение ок.

1. Верхнее и нижнее поля получились слишком большими. Блок хочется поджать по вертикали.
2. Левая колонка не выровнена с правой. Элементы не совпадают по горизонтали.
3. Ссылка лишняя.

timepad.jpg

Edited at 2017-03-17 18:01 (UTC)

1. Таймпад

Этот блок рекламирует Таймпад, поэтому должен быть привлекательным. Делаем весь блок кликабельным — по клику переходим на сайт. Считаю, что кнопка "узнать больше" неуместна, так как за кнопкой должно быть действие, а по клику открывается новая вкладка. Центральная верстка редко хорошо получается, поэтому левый флаг.

2. Анальгин

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

Логотип сделала чуть меньше, поставила на линию с названием, положение фиксируем в правом верхнем углу.

Подпись про количество таблеток сделала в одну строку под названием. Опять же, в длинную строку влезут все варианты для разных таблеток. Рисунок таблетки уменьшила, он и так считывается.

Цветную плашку "от боли и жара" немного утопила в рисунок. Тогда она не мешает основному тексту и ее все равно видно. Поставила все-таки справа, под текстом смотрится громоздко.

3. Азбука вкуса

Баннером можно назвать и рекламу в интернете, и рекламу на щите. Я предполагала, что это должен быть большой формат, чтобы было видно издалека, пока едешь на машине.

Фраза "делаем все, чтобы вы выбирали из лучшего" — это рекламный слоган, он повторяется от баннера к баннеру. Поэтому она и логотип находятся в фиксированном месте — оба верхних угла.

Главное — фраза про овощ или фрукт — она по центру и крупно. Вкусная большая картинка выглядывает снизу.

https://drive.google.com/open?id=0B-nmRCSh2D5aVVBNWVlBTWdrNkk

Сделать привлекательным — да, но не превращать в рекламный банер. С материалом не разобралась: заголовок длинный, а пункты сплошным текстом.

01-Таймпад.png

Картинки https://yadi.sk/d/O1LSZpYJ3FbPE4

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

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

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

Направление верное.

1. Список не выглядит как список. Похож на сплошной текст.
2. Большие и неуверенные внешние поля.
3. Бледно-зеленый цвет не очень.
4. На кнопке должен быть другой текст.

Timepad.ru.png

Edited at 2017-03-17 18:03 (UTC)

(Удалённый комментарий)
Таймпэд. По-моему, здесь главная проблема — в том, что блок скучный. Длинный заголовок и текст, главный визуальный акцент на кнопке с ничего не говорящими словами «Узнать больше» — блок не хочется изучать. Поэтому я его разгомогенизировал, чтобы можно было быстро сосканировать, не вчитываясь в весь текст: jeniasofronov.ru/files/timepad.png (http://jeniasofronov.ru/files/timepad.png)

Анальгин. Думаю, что здесь проблема в том, что все элементы спорят друг с другом за внимание. Поэтому сделал более внятную визуальную иерархию: jeniasofronov.ru/files/analgin.png (http://jeniasofronov.ru/files/analgin.png)

Азбука вкуса. Здесь, по-моему, проблема в противоречии: по смыслу самое главное — это шутка про горошину, а визуально самое главное — иллюстрация. Поэтому я сделал шутку визуально главным элементом: jeniasofronov.ru/files/azbuka.png (http://jeniasofronov.ru/files/azbuka.png)

Разгомогенизировал хорошо, собрал плохо.

1. Заголовок не накрывает свой текст.
2. Колонки разной ширины.
3. Дыра между колонками.
4. Лишняя линейка.
5. Пустующая правая сторона.
6. Список не очень похож на список.

timepad.png

Edited at 2017-03-17 18:04 (UTC)

1. Промоблок на сайте timepad.ru
Выровнял текст по левому краю, чтоб проще считывалось.
Добавил буллиты. Так преимущества считываются лучше, чем просто в одну строчку.
Добавил кнопку "Попробовать бесплатно", чтоб пользователь сразу конвертился.
Но оставил "узнать больше" для сомневающихся.

2. Лицевая сторона упаковки Renewal
Оставил красную плашку, возможно цветовая индикация помогает фармацевту. Но сделал её более квадратной, чтоб блок был более устойчивым.
Убрал иконку таблетки. Кажется она добавляла шума, а полезной информации не несла. Какая разница какой формы таблетка?
А вот количество таблеток, кажется, важно. Думал убрать текст "для приема внутрь", но подумал я чего-то не знаю и решил оставить.
Логотип убрал ниже на плашку.

3. Рекламный банер «Азбуки вкуса»
Добавил контраста. Сделал заголовок жирным. Картинку увеличил, правда немного пиксели побились, но горох стал интересней. Чтобы как-то поиграться добавил цвет и иконку. Кажется стало веселее)

https://yadi.sk/d/49eRMbtj3Fd4XQ

Направление верное, но собрал не очень.

1. Пустая правая сторона, это почти треть макета.
2. Некрасивый рваный край.
3. Двустрочный заголовок.
4. Лишние точки в конце пунктов списка.

timepad_after.png

Edited at 2017-03-17 18:05 (UTC)