Подписка на блог

Customize in /user/extras/follow-sheet.tmpl.php.

Sample text.

Twitter, Facebook, VK, Telegram, LinkedIn, Odnoklassniki, Pinterest, YouTube, TikTok, РСС JSON Feed

Sample text.

Школа бюро. Принципы вёрстки

Недавно закончил дизайнеров Школу Бюро Горбунова. Довольно удачно.



Оценки в дипломе

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

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

Задание

Сверстайте веб‑страницу о себе в двух версиях: для компьютера и телефона (модель по вашему выбору).
Версии страницы должны иметь одинаковое содержание и общий стиль, но могут иметь разную конструкцию.

Страницы должны помещаться в один экран, как страницы Бюросферы.

Обязательно наличие фотографии, заголовка и текста. Остальные элементы — по вашему усмотрению.

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

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

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



Вайрфреймы безопасных шаблонов

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

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

Первые ребята начали показывать там работы, и я заметил, что замечания от Миши Нозика в 95 % случаев повторяются. Наиболее частая проблема — «низкий контраст». Типа всё со всем спорит, типа сложно понять, в каком порядке смотреть на элементы, типа не иерархично. Позже нахлынули и другие советчики с этой формулировкой.

Контраст — слово дня:



20 постов о контрасте

Дальше мне стало лениво перепечатывать посты, но идея, думаю, понятна.

У меня от такого объёма контраста пригорело. Захотелось нарисовать штуку, которая игнорирует многие правила, но все равно выглядит круто. И вот что придумалось:

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

Нашлась почти идеальная под эту задачу гарнитура, называется «Фит». Она обладала нужным рисунком и плотностью, но тянула некоторые проблемы. Самая главная — буквы не попадали в пиксельную сетку, поэтому текст подблюривался по контуру.

Фит на Адоб Фонтс →

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

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

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

Посмотрим мобилку:

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

***

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



М. Н. Класс.

Совет

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

Второй совет

Не забывайте уделять внимание мелочам — поставьте рамку браузера и телефона, придумайте какой-нибудь урл и фавиконку. Работы с этими деталями выглядит в 10 000 раз круче, чем без.

Дальше
1 комментарий
Максим Антропов 5 мес

Привет,

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

А есть какие-то советы как еще и тесты хорошо сдавать на первой? Что-то кроме зубрить теорию, делать конспекты и тд.