О проекте



Привет, меня зовут Бугай Владимир, я работаю дизайнером-верстальщиком в издательстве.
В проекте «Переверстал» я критикую, выношу на обсуждение и переделываю (переверстываю) макеты,
которые с точки зрения дизайна, типографики, вкуса и здравого смысла являются непрофессиональными.
Частные объявления на столбах, афиши, наружная реклама, визитки, журналы, книги,
реклама в транспорте, фотографии, упаковки, наклейки на авто —
все это формируют нашу визуальную культуру, одновременно являясь ее зеркалом.



Открыт к общению и сотрудничеству.
Верстаю текст, рисую буквы, делаю логотипы и фирменные стили. Мое портфолио.

Контакты:
Республика Беларусь, г. Минск
e-mail:
pereverstal@yandex.ru

ЯВКонтакте
ЯФейсбук
Я
Твиттер

ЯТелеграм
ЯИнстаграм

Резюме для Максима Воробьева


Прыуэт!

Вчера в vk наткнулся на резюме Максима Воробьева.



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


Это, наверное, худшее резюме, которое я когда-либо видел в жизни.
Кстати «резюме» я уже произнес 4 раза.

Пизда рулю. Максим, сорян, приготовься, сейчас будет больно.

1) Формат резюме не может быть 2000x2000px. Максим, представь,
что его захотели распечатать и положить в папочку к другим кандидатам.

2) Без двойной рамки же никак, правда?


3)


Онлайн-резюме? А если распечатать, то оно станет оффлайн?



4)


Ухо, торт, дата рождения.
— Сколько вам лет, вы говорите?
— 23.01.1990


5)


Нет, серьезно, в 21 веке ты умеешь пользоваться
компом на уровне продвинутого пользователя?
НЕ ВЕ РО ЯТНО!  И зачем писать Intermediate?
Пиши уже Upper Intermediate, все равно разницу
никто не заметит. Зато выглядеть будет солиднее.


6)


Контакты... Если с первого раза непонятно, то Инфо

7)


Максим, английский язык — единственное число,
не множественное. Кстати, а зачем тут эти два кольца?
Нужно че-то дорисовать? Типа творческое задание?
Тогда вот




8)


Чувак, тебе 28 лет и ты в резюме пишешь,
что окончил среднюю школу?
Это из серии про продвинутого ПК-пользователя.
Надо еще дописать, что умеешь завязывать шнурки.


9)


Хронологию опыта работы надо начинать
с последней работы, а не наоборот.

Почему заголовок «Интересы» оторван от списка?
Почему в целом такие пляшущие вертикальные отступы?
А зачем пробел перед актерским искусством?
А зачем повторять про психологию и философию,
если уже писал о них в разделе «обо мне»?

Посмотрим еще раз на твое резюме



Шеф-редактор на моей предыдущей работе говорила
примерно такую фразу
«Возьми инфу и размажь ее равномерно по развороту»

У тебя как раз такой случай. Все размазано равномерно.
Настолько равномерно, что твои имя и фамилия
по размеру схожи с заголовками. Глазу вообще незачто
зацепиться. Скучно так, что нажраться хочется.
До кучи уродливые цвета, тухлые исконки
и уебанское оформление.

Максим, без обид. Кто же тебе еще правду скажет
как не Переверстал?

Я тут вообще, для того, чтобы тебе помочь.
Запилим тебе новое резюме.

Начнем, пожалуй.




Пробуем, крутим, вертим, ищем.











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

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

Во-первых поставим тебя в центр композиции.
Творческий человек обязан быть самовлюбленным
и говорить о себе в третьем лице.
Все такие «Да кто это такой Макс Воробьев?
Что за сноб, говорящий о себе в третьем лице?»
А ты такой — «а вот он телефон, звони и узнаешь».



Все ок, но твое имя и фамилию надо написать
поживее. Вооружаюсь планшетом и начинаю ваять.








Вот так лучше.



Надо подправить







Идем дальше. Расскажем о твоих достоинствах.




Хорошо, но не хватает изюма.
Ты же работал арт-менеджером, аниматором.

Камоон!






Твои достоинства напишем мельче.
Щепотка скромности тоже не помешает.



Готово. Теперь это резюме творческого
и талантливого человека.


Померяем в vk.





Просто отлично! Вот теперь можно тебя продавать
на рынке труда.


Пожалуйста!

Электронный билет БЖД




В июле я ездил в Брест на полдня.
Билеты впервые купил на сайте rw.by

После короткой процедуры выбора направления, дат,
ввода фамилии и данных карты сайт выплюнул мне вот это






Ну да, ну да. А чего собственно можно было ожидать от БЖД?
Красивой, понятной, удобной верстки?


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

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

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

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

А вообще, мы в 21 веке живем.
Можно и на смартфоне принести,
черт побери.


Ок, перейдем к билету. Посмотрим на него сверху вниз

1) «БЛАНК ЭЛЕКТРОННОГО ПРОЕЗДНОГО ДОКУМЕ.... БЛА БЛА БЛА»

2) Номер билета и номер заказа подозрительно похожи.



3) Зачем указан «год совершения поездки»? Чтобы нельзя было воспользоваться
билетом через год? А номер билета для чего? А дата покупки еще зачем?

4) «Кол-во пассажиров 1». Проверено — если купить два билета,
то сайт отрыгнет два отдельных листа. На каждом будет
написано кол-во пассажиров 1. Напрашивается вопрос,
если для каждого пассажира формируется персональный билет,
то зачем писать очевидное число пассажиров?




5) Не понимаю до сих пор, почему при транслитерации используется тарашкевица?
Неужели иностранцам понятно как это читать? Почему нельзя написать
MINSK PASAZHYRSKY? Или BREST CENTRALNY?





6) Спасибо, поржал




7) Заголовок оторван от направления на расстояние
в миллионы световых лет.



8) Вот какого хера тут такая дыра? А?


Перейдем к нижней части


9) Дата оформления и этап завершения электронной регистрации,
как мне показалось, это одно и тоже.




10) Охуенно нужная информация.




11) Вот это вот нужно показывать на сайте при оформлении заказа.
Что мне с этим сейчас делать? Нарисовать чек бокс и вписать в него
галку?


Ok, немного разобрались со структурой документа.
Огрехи верстки будем исправлять в процессе.

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










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








Слишком много инфы, пора избавляться от лишнего.







Внезапно вспоминаю, что текст с «Подтверждаю, что с правилами...»
должен быть на сайте, а тут он теряет всякий смысл,
а значит от него можно избавиться.






В шапку также идет крайняя дата отмены регистрации.
Получается она такой (слева-направо):
1) Лого,
2) Номер билета,
3) Дата регистрации,
4) Крайняя дата отмены

Все вполне логично.

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




По итогу лишняя инфа ушла, композиция стала
более уверенной и красивой. Но пока это не то, что нужно.



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



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




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




Продолжаю править мелочи.



Прихожу к выводу, что все-таки правильной схемой
будет «один пассажир – один билет».
Вот. Вроде готово..





Нет, вот теперь готово.




И еще картинка для любопытных







Та дааа!





Теперь все.

Бутылка воды. Совет дизайнерам

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








Да, чуваки, бутылка с водой просвечивается и это нужно учитывать.

Смотрите, как можно по-быстрому исправить ситуацию.
Берем бутылку, сфотканную на белом фоне.



И какой-нибудь фон




Вырезаем бутылку и ставим ее на фон. Обычно многие на этом останавливаются,
но мы же не многие?



Мы пойдем дальше. Возьмем нежесткую кисть и поставим ей непрозрачность, скажем,
40%. Легким движением проводом по той части бутылки, которая должна просвечивать фон.





И вот он результат. Гораздо правдоподобнее, чем то, что было.
Просто и быстро.



Потом можно добавлять всякие брызги, играться с каналами
и режимами наложения, как мы это любим.



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

Удачи, короче, все получится!

Говностихи



«... вас ожидает хороший обмен на период действия акции...»
Просто пиздец! Неспособность написать простую фразу по-русски
или хотя бы прочесть и понять какой бред уже написан.

Это рекламный модуль в вагоне метро стоит диких денег.
Считаю, что всех причастных к его созданию надо уволить
нахуй с волчьим билетом.


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


Точка.

Fresh KFC

Всем привет! В KFC висит вот такая надпись.



Помимо хуевой шрифтовой композиции и хуевого кернинга
в надписи «FRESH» меня очень волнует буква R.

Смотрю на нее и вижу вот это




Давайте я что-нибудь сделаю со всем этим.


Отрисовываю надпись




Правлю R



Еще раз правлю R (увеличиваю угол наколона штриха)



Правлю кернинг надписи


Немного огрубляю


Готово!



Люблю KFC.

Меню в столовой

Привет! Не знаю, есть ли музей СССР (не гуглил еще),
но точно знаю, что его филиалом может стать любая
студенческая или заводская столовая. Экспонаты на каждом шагу —
плитка на полу, столы, салфетницы, украшения на стенах, запах, поварихи.

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

А че? Вас много, верстальщик один!





Порядка никакого. Гарнир перемешан с напитками.
Горячее разорвано и разбросано по разным листам.
Куча инфы, линеечки, всякие рец 11 г сб 2к... да еб вашу мать!




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

Итак, я потратил немного своего времени, чтобы набрать весь текст.


И создать стили.




И начать переверстывать


Удаляя по дороге инфу про углеводы и жиры, килокалории и белки




Переписывая текст с нафталиново-канцелярского...


...
на человеческий.


Сравните.



И в итоге совок рухнул.






И мир стал гораздо лучше.

Правильное соседство

Всеобщий хай! Не мог пройти мимо вот этого указателя.




Вот он крупнее (инструмент исправления перспективы, спасибо).




Главный косяк тут в том, что расстояние до улицы
и стрелка разлучены друг с другом. Разорвана связь
между направлением движения и расстоянием.
Тут это два независимых объекта, что неверно, потому что
0,2 км — это поясняющая информация к стрелке, которая
является главным элементом, т.к. водителю важнее куда
поворачивать, чем знать, что до цели 0.2 км

Сейчас я попробую восстановить вселенскую справедливость
и покажу правильный вариант.

Но начну я с рисования стрелки, т.к. та, что есть сейчас
немного... мм... хуевая. Оптически слишком плотная по отношению
к надписи, с неприятным контрастом толщин и уродливой пропорцией.


Первые штрихи.





Кажется, нашел





Теперь гораздо лучше. Налицо логическая связь — «улица-направление-расстояние»





Беру другую стрелку, снижаю толщину штрихов
и делаю начертание расстояния не таким жирным.





Красота.




Тут я подумал — а что если название улицы не такое длинное.
Какие еще варианты могли бы быть и были бы они правильными?


К примеру могло быть так.



Плохой вариант, потому что снова стрелка и расстояние оторваны друг от друга.
Хотя композиционно довольно приятно.


Вот еще вариант.



Тоже не очень. Тут стрелка указывает на значение расстояния, от чего рождается
неверый посыл (в том направлении какие-то 0,2 м)


Как вариант можно вот так. Композиционно у нас тут две группы —
первая — улица, вторая — стрелка с расстоянием. Все ясно-понятно.
И да, красиво.





А что если расположить как в варианте с Кастрычнiцкой?


Не нравится. Слишком большие поля.



Вот так лучше будет.






Можно сделать крупнее и написать «200 м»






Кстати, пройдя пару лишних шагов я обнаружил
вот этот билборд с дружной парочкой.



Пока-пока.

Fielmann

Всем привет! Люблю ездить в метро. Быстро, дешево, иногда удобно
и комфортно. Вагон метро — моя изба-читальня.
Причем читаю я не только книги, но и рекламные листовки.

Вот из недавнего. Рекламу Фильмана, я видел еще, кажется,
в далеком детстве, в газете «Вечерний Минск».




По крайней мере, когда я смотрю на эту верстку
и этого чувака, то вспоминаю 90-е




У чувака из 90-х есть подруга. Она, как вы понимаете, тоже из 90-х.




У этих двоих есть друг дизайнер. Его фотки нет,
но давайте попробуем нарисовать его портрет,
опираясь на его работу.

1. Судя по всему он страдает от нервного тика.




2. Также это достаточно жадный человек.
Наверное, когда он выпивает весь сок, он разрезает пачку
и жадно лижет ее внутренности.




3. Это довольно не тактичный, грубый человек, неумеющий держать дистанцию.




4. Ну и наконец (как любой творец) он немного сумасшедший.



Получился сумасшедший, грубый, нетактичный, жадный невротик.

Предлагаю переверстать листовку и превратить
ее во что-нибудь из 2018 года. Заменим чувака из 90-х
чуваком из 2018.



Подруги у него не будет. Нууу... вы понимаете.

Дизайнер тоже будет новый. Щедрый, умный, тактичный, здоровый.

Я буду.


Поехали. Первые подходы к снаряду.








Уаааа




Закажи очки уже!



Первый вариант




Нолики я превратил в пенсне.



Идем дальше. Тоже простой, но очень хороший,
понятный и приятный вариант.



Самые наблюдательные заметили, что я убрал адреса
Гомеля, Бобруйска
и Могилева. Все просто — вагон минского
метро до этих городов не доедет.


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





Немного играюсь с формами и цветом.








Вот так хорошо.




Обратите внимание вот сюда


А все почему? Потому что я еще и смелый дизайнер.


А еще только трусы и невежды боятся переносов.






Ну вот совсем другое дело. Модное, современное, красивое.





Ура. Всем до скорых

#ПереверсталПомоги

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



«Вот мы и подошли к главной стадии — стадии определения
участвующих в финансиров...» Интересно читать, правда?


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



Кстати, о стоимости. Слово «сколько» в двух вопросах
повторяется 4 раза. Сколько-сколько? ЧЕТЫРЕ, БЛЯДЬ!
И еще. Длинные строки читать сложно.
Читатель, запомни:
Максимальная длина строки, удобная для чтения — 7-10 слов!

Канцелярщина (высший сорт)



Короче, за дело. Крупный, говорящий заголовок — это же полдела.
Затем можно перемешать вопросы в правильном порядке.


Т.к. все скрины процесса куда-то улетучились с моего компа,
то показываю сразу готовый вариант. Текста стало меньше,
смысл полностью сохранен, главное выделено.



Вот макет в жизни (спасибо за фото Антону)



Добро снова победило!