https://pereverstal.by/tags/zaryadka-dlya-telefonov/ E2 (v3254; Aegea) 59 https://pereverstal.by/all/avtomat-dlya-zaryadki-telefonov/ https://pereverstal.by/all/avtomat-dlya-zaryadki-telefonov/ <p>Привет! Недавно на вокзале обнаружил автомат для зарядки телефонов.<br /> Вещь крайне полезная, в особенности для приезжих, которые до этого заряжали<br /> телефоны в вокзальном туалете, сидя при этом на полу, в ожидании пока телефон<br /> хотя бы немного подзарядится.</p> <p>Пройти мимо я не смог, но не потому что батарея моего смартфона была<br /> на исходе. Причина проста — инструкция по использованию автомата,<br /> которую верстал не иначе как сам сатана.</p> <p>Смотрим:</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/131804_800.jpg" width="800" height="449" alt="" /> </div> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/131888_800.jpg" width="800" height="449" alt="" /> </div> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/136311_800.jpg" width="709" height="517" alt="" /> </div> <p>Надо сказать, что в процессе переверстки, мне доставляет большое<br /> удовольствие редакторская работа. Обожаю облегчать текст, выбрасывать<br /> из него фразы-штампы, повторения, упрощать сложные фразы.<br /> Сливать воду, короче.</p> <p>При редактировании текста я всегда использую один и тот же алгоритм —<br /> если без конкретного слова смысл сообщения не теряется, то слово это можно<br /> смело удалять. К примеру, слово «Инструкция» здесь лишнее, т. к. какой еще<br /> текст может быть на дисплее такого автомата?</p> <p>Далее — «Для осуществления зарядки необходимо» — от слова «необходимо»<br /> можно избавляться. Также из списка шагов я сразу удалил первый пункт,<br /> потому что прочтение публичного договора никоим образом не влияет на процесс<br /> подключения телефона к автомату — это чистой воды юридическая бюрокартия,<br /> которую обычно пропускают. Если вы не прочтете публичный договор,<br /> вы все равно успешно подключите свой телефон к зарядке. Разумеется бывают<br /> исключения, когда фразу не стоит упрощать, потому что существует вероятность<br /> понять ее иначе. Люди-то разные и не все одинаково сообразительные.<br /> Да, кстати, всегда меняю «Вы» на «вы» потому что терпеть не могу лебезения.</p> <p>Поехали переверстывать. Обычно в процессе работы я делаю около 8-10<br /> вариантов верстки. Это много, поэтому посты выходят не так часто как<br /> хотелось бы, но я не люблю экономить время в ущерб результату.<br /> Да и хороший результат просто не может появиться с первого раза.</p> <p>Ну вот, к примеру, пара вариантов из процесса. Попытки согласовать<br /> порядок чтения, блоки информации по степени важности, относительные<br /> размеры текстовых блоков, пустое и заполненное пространства.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/133016_800.jpg" width="800" height="463" alt="" /> </div> <p>Главная опасность тут — не стать заложником красивой конструкции макета,<br /> потому что его визуальная привлекательность и функциональность —<br /> это не всегда одно и тоже.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/133309_800.jpg" width="800" height="465" alt="" /> </div> <p>Вот эта конструкция мне вначале приглянулась, но, посмотрев на нее с точки<br /> зрения удобства и скорости нахождения нужной информации, стало понятно,<br /> что макет слабоватый.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/133622_800.jpg" width="800" height="481" alt="" /> </div> <p>На каком-то этапе мне захотелось добавить в макет поясняющие иконки.<br /> Открыл иллюстратор и стал рисовать.</p> <p>Вот что получилось</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/132793_800.jpg" width="800" height="390" alt="" /> </div> <p>В итоге хорошо в макете стала только иконка чека.<br /> Да, это итоговый вариант.</p> <div class="e2-text-picture"> <div class="fotorama" data-width="800" data-ratio="1.7167381974249"> <img src="https://pereverstal.by/pictures/134049_800.jpg" width="800" height="466" alt="" /> <img src="https://pereverstal.by/pictures/134777_800.jpg" width="800" height="449" alt="" /> </div> </div> <p>Основная часть работы сделана, теперь осталось совсем немного,<br /> а именно переверстать вот эту часть</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/131888_800.jpg" width="800" height="449" alt="" /> </div> <p>Здесь я решил не убирать дублирование заголовка «Не выбрасывайте чек!»,<br /> чтобы подчеркнуть значимость посыла. Только представьте, что вы не можете извлечь<br /> свой телефон из автомата, где-нибудь в Копенгагене, а ваш поезд отходит через 10 минут!<br /> Помните про чек!</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/134308_800.jpg" width="800" height="140" alt="" /> </div> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/134476_800.jpg" width="800" height="639" alt="" /> </div> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/135076_800.jpg" width="800" height="449" alt="" /> </div> <p>Готово! Теперь стоит попробовать сделать вариант потемнее.</p> <div class="e2-text-picture"> <div class="fotorama" data-width="800" data-ratio="1.7167381974249"> <img src="https://pereverstal.by/pictures/135924_800.jpg" width="800" height="466" alt="" /> <img src="https://pereverstal.by/pictures/135262_800.jpg" width="800" height="140" alt="" /> <img src="https://pereverstal.by/pictures/135491_800.jpg" width="800" height="639" alt="" /> </div> </div> <p>Вери гуд! Все пока!</p> Sat, 24 Nov 2018 18:20:10 +0300