Напишите работодателю своей мечты письмо о себе. Работодатель должен захотеть пригласить вас в штат (ну или хотя бы на собеседование).
Это задание мне совсем плохо давалось. В первую очередь, потому что у меня нет никакого работодателя мечты. Можно было навыдумывать чего-нибудь, но я не стал играть в бирюльки.
Получилось простое письмо по структуре: вступление, опыт работы и портфолио, опыт учёбы, увлечения связанные с работой, заключение.
Ну и в конце хочется немного рассказать о выборе предварительной темы диплома.
На первой неделе нужно было выдумать проект и описать его в документе. Тогда я ещё не отошёл от крутости нейронок, вспомнил что моё образование связано с компьютерной наукой и решил обучить чатГПТ на текстах Максима Ильяхова.
Для подготовки «понимания» я взял чатГПТ и нагенерировал весь текст. Было забавно читать в рецензии от Артёма Горбунова, что пока нейросети с такой задачей не справляются. По моему, всё же неплохо получилось.
На второй неделе нужно было сделать анонс в социальных сетях. Я написал нейронкой небольшую статью, придумал какие-то простые брендирующие визуальные ходы, сгенерировал несколько изображений, приложил ссылку:
Пока выполнял задание нашёл прикольную фичу. Текст в вк-статье можно попросить озвучить с помощью помощника Маруси. Это помогает на слух определить предложения, которые написаны криво и неестественно. Получилось чуть-чуть подредачить текст основываясь на «чужой речи».
***
Рецензия Артёма до сих пор отдаёт больше вопросов, чем ответов.
Я до сих пор не понял прочитал ли вообще Артём статью. Кажется, что там относительно обстоятельно описано. Или я чего-то не понимаю.
Совет
Если хотите получить за это задание оценку повыше, рекомендую записать какое-нибудь видео, где вы рассказываете о проекте. По моим ощущениям такие работы оцениваются повыше вне зависимости от содержательной части проекта.
В неделю каникул между ступенями мы вместе с Ерусланом — учеником школы менеджеров написали основную механику бота, сцепив его с чатГПТ по АПИ. Стало понятно, что проект слишком лёгкий в своей сути и мы решили отказаться от этой темы.
В итоге Миша Нозик принёс нам покушать свою тему, но о том, что происходило на третьей ступени я расскажу в следующий раз.
Сегодня расскажу про дизайн продающей страницы. На этот раз проверяет Максим Ильяхов. Есть целых 5 вариантов. Я взял камеру.
Вариант 5. Камера для наблюдения за домом
Вы работаете редактором в российском представительстве «Алиэкспресса». Ваша задача — создавать промостраницы для ключевых покупателей вашей торговой площадки.
Новое задание — подготовить страницу для камеры наблюдения за домом «Манящий кошкообразное». Это статуэтка в форме кота с поднятой вверх лапкой, в которую вмонтирована едва заметная камера (в Японии такие фигурки называют «Манэки‑нэко»). Статуэтку ставят на видное место в доме, и она наблюдает за всем происходящим, записывая всё на огромный терабайтовый жёсткий диск.
К камере можно подключиться через интернет по паролю. Есть режим сторожа — камера определяет движение и отправляет фото и видео хозяину. В статуэтку встроена батарея, поэтому камера может работать без питания от сети до 12 часов.
Есть версия с вайфаем: камера зависит от домашнего вайфая и не сможет сообщить хозяину о движении, если интернет пропадёт. Цена — 9000 ₽. Есть полностью автономная версия с сим‑картой, цена — 14 000 ₽.
Аппарат сертифицирован для продажи в России, доставляется из склада в Ленинградской области за две недели почтой.
Придумайте название продукта, которое будет приятно русскому слуху. Спроектируйте промостраницу, на которой будет продаваться эта камера, и рекламную рассылку для всех, кто интересовался камерами и электроникой для дома. Шапку «Алиэкспресса» в обоих случаях можно не использовать.
Камера встроена в фигурку, которая называется манки-нэко. Она вся из себя японская, поэтому первым делом я пошёл на пинтерес вдохновляться азиатскими плакатами.
Понял что в этой культуре очень любят использовать няшных и странных маскотов. Так появился инспектор Кото — одноглазый кот-охранник. Он появляется на странице тут и там и хулиганит.
В этом задании я столкнулся с такой же проблемой, которая была с Электролюкс Манго. Не было нормальных фоток в интернете. Я пошёл искать какую-нибудь подходящую 3д-модельку, но ничего подходящего не нашёл. Пришлось смоделировать самостоятельно.
Дальше несколько этажей строятся по одной структуре. Фото, заголовок, текст и фактоид. Часть фотографий запросил у нейросети.
Придумал небольшой интерфейс телеграм-бота, в который устройство шлёт уведомления. Сначала там была только фотка и сообщение. А на второй неделе я подумал, что будет утомительно постоянно получать эти уведомления, если у тебя домашняя зверушка. Поэтому добавилась кнопка «добавить исключение». Якобы нейросеть под капотом может запомнить кота Бориса и игнорировать его.
Придумал, как хулигански, забавно, а главное наглядно показать технологию ночного зрения:
В блендере собрал взрыв-схемы камеры. Сначала она располагалась в горизонтальной плоскости и была подписана снизу. Позже я воспользовался принципом «увеличить красивое» и повернул:
Для демонстрации доступных цветов выстроил котиков в красивый вихрь:
Далее я собрал этаж о профессиональной версии камеры:
Тут тоже есть о чём рассказать. Пока я моделил кота, запустил генерацию ста картинок с манеки-неко в стейбл дифьюжн. В основном там дженерик идеи, но нашлось несколько годных.
Обратите внимание на последнюю картинку в сетке выше. Я подумал, что это классная метафора для про-версии устройства. Типа старший кот, защитник защитника все дела. Из этой идеи появилась картинка на коробке. Сейчас видно, что я немного накосячил с толщинами линий, но в целом получилось ок.
Внизу страницы несколько закрывающих этажей. Туда можно сложить всё, о чём хотелось рассказать, но не хватило времени на визуализацию. Там же кнопка «Наверх» с лапкой.
***
В итоге получилась кайфная страница, которая вобрала в себя большую часть моего скиллсета. Рецензия Максима Ильяхова:
Придумать интерфейс приложения для сканирования, распознавания и поиска значащих полей документов, например паспорта, медицинского полиса, ИНН. Пользователь фотографирует и загружает документ. Приложение его распознаёт. Поиск мгновенно находит любое поле.
Нарисуйте 3—5 экранов, которые, на ваш взгляд, наилучшим образом демонстрируют ключевые сценарии использования приложения. Как сделать, чтобы человеку было легко заснять все свои документы в программу?
Нарисовал небольшое приложение. Сейчас расскажу об особенностях.
Пользователя встречает экран приветствия, он же экран пустого состояния, когда не добавлен ни один документ:
Жмём «Добавить документы» и подносим к камере раскрытые доки один за другим. Можно добавлять все документы пачкой.
Приложение понимает, что ему показывают разные страницы одного документа и группирует их в стопки:
После сканирования сразу показываем список документов:
В нижних углах разместил плавающие кнопки с действиями: поиск,сканированиеи ручной ввод.
При первом использовании приложения всплывает большой и яркий поп-ап, который подсказывает пользователю как организована защита в приложении:
Тут потерялись часы и статус-бар на экране ввода пароля. Позже перезалью картинку.
Карточки в списках строятся по одной структуре. Сначала показывается фоточки в микроквадратах — они помогут быстрее найти нужный документ. Дальше цветной бейджик. Дальше заголовок с номером и в конце все значимые поля документа. Так можно решить большинство сценариев пользователя без открытия экрана документа.
Приложение само группирует доки по владельцам и типам:
Если срок действия документа скоро истекает, приложение сообщит об этом в своём интерфейсе и отправит пуш.
Интерфейс для ручного ввода документа вынесен в отдельную «модальную страницу». Такой паттерн позволяет вызывать этот интерфейс в любом месте приложения. Например, на скринах ниже этот интерфейс используется для редактирования значений во время сканирования документа и в основном списке документов.
А вот так выглядит экран с подробной информацией по документу. В этом окне все данные представлены в линейном виде.
Кнопка «Поделиться» поможет отправить все данные по документу через стандартный интерфейс шейринга.
При коротком тапе на поле данные копируются в буфер обмена. А длинный позволяет сразу отредактировать его значение: выезжает клавиатура с закрепленным полем. Здесь же выводится фотка-подсказка.
Последняя фича в приложении — поиск по всем полям, который фильтрует коллекцию документов в списке. Чтобы пользователю было легче сориентироваться, найденные данные подсвечиваются акцентным цветом: VIN
Такие дела.
***
Как результат задания я загрузил вот такую картинку:
Совет
При выполнения задания обратите внимание на разные бюрошные заповеди. типа «почти, но не совсем», «переворот мобильного интерфейса», «нормальные скругления» , «не забледняй». По штукам этим будут и оценки ваши.
Второй совет
Не прикрепляйте по этому заданию ничего, кроме картинки.
Я вот решил повыебываться и загрузил дополнительно прототип в фигме. Хотел показать всякие анимации, переходы и дополнительные экраны. Картинку я, естественно, загрузил выше, но в интерфейсе у Ильи ссылка почему-то вверх перебросилась.
Итог плачевный — Илья ничего не понял в прототипе, а когда дошел до картинки написал:
Из-за этой беды Илья не прокомментировал мою работу по существу на первой неделе. Я написал ему письмо, на него он тоже не ответил😉.
Поэтому во вторую итерацию просочились штуки, которые Илье не понравились. Показываю рецензию:
Следующая задача — сделать промостраницу. Сначала задизайнить, а потом заверстать в ХТМЛ. Есть две темы, я выбрал страницу о кондиционере.
Задание
Выберите одну из двух предложенных ниже тем. Ваша задача — сверстать модульную многоэтажную промостраницу. Работая над макетом, вы можете взять за основу тот стиль и дизайн, что делали для информационного текста для сайта под руководством Максима Ильяхова, а можете придумать что‑то новое.
Вариант 1. Кондиционер
«Айс бэйби» — интернет‑магазин кондиционеров и обогревателей. Хит этого сезона — переносной кондиционер Electrolux Mango: его можно поставить в любую комнату и охлаждать её, не вынося никаких блоков на улицу и не сверля стены. Это хит среди московских квартиросъёмщиков.
Расскажите об этом кондиционере на специальной промостранице. Обязательные элементы: заголовок, цена, изображение или несколько изображений, описание, ключевые технические характеристики, ссылки на инструкции. Не забудьте о шапке и подвале. По своему вкусу можете добавить отзывы, слоганы, выносы, видео и так далее.
Дизайн
На старте я столкнулся с проблемой — не нашлось нормальных фоток кондиционера в нужных мне ракурсах. Все картинки, которые я нашёл были либо плохого качества, либо уже много раз использовались другими студентами школ.
Мне хотелось не подстраивать страницу под имеющиеся материалы, а подстроить материалы под кайфную вёрстку. Поэтому я пошёл в блендер и собрал простую 3д-модель. С ней легко получить кондиционер в любом положении и с любым освещением.
Я собрал трёхточечную схему освещения с насыщенными цветами, зарендерил картинку и поставил её гигантской в промо-блок. Сразу видно, кто главный герой страницы.
Совет
Нашёл простой принцип, который помогает повысить выразительность макетов. Нужно взять самую красивую часть макета, обычно это какая-нибудь картинка и увеличить её до максимально большого масштаба. А потом взять и увеличить ещё раз.
Такой подход, наверняка, работает не всегда, но для дженерик-страниц и при отсутствии времени для вывода нужных визуальных ходов подходит идеально.
Дальше на нескольких этажах просто рассказал об основных преимуществах и фичах устройства.
Для дополнительных особенностей кондиционера изобрел яркий стиль иконок и собрал всё в сетку:
Добавил немного хулиганства и попытался написать бодрый текст.
Полезно до того, как начать рисовать макет выделить основные фичи устройства и придумать рассказ. После останется только найти наиболее прикольную раскладку для демонстрации идей.
Если вам понравился тип сетки, который я использовал в работе, то можете посмотреть разные примеры и просто вдохновиться: https://bentogrids.com/
***
В общем, итоговая работа мне нравится, кажется, что местами получилось довольно свежо. Обзор Миши Нозика:
ХТМЛ
Дальше нужно было заверстать несколько ключевых блоков в рабочую веб-страницу. Если вы не имеете навыка ХТМЛ-вёрстки, это задание будет сложным.
По этому заданию мне сложно что-то сказать. Я просто выбрал несколько шаблонных этажей, заверстал и залил на Гитхабпейджс. Вот что получилось в итоге: https://ice-baby-bureau.github.io/
Кроме самой вёрстки, я прикрепил фавикон и нарисовал простую обложку с помощью оупенграфа.
На второй неделе добавил мобильную версию. Времени, чтобы рисовать макеты под телефоны у меня не было, поэтому она получилась простой, но рабочей.
Совет
В школе совсем слабо учат вебу, поэтому я бы рекомендовал в перерыве между первой и второй ступенью подтянуть. Например, пройти бесплатную часть ХТМЛ-академии: https://htmlacademy.ru/
Навык разработки — очень полезный скилл для любого диджитал дизайнера.
Расскажу о проектировании сайта. Это 5 задание в школе дизайнеров бюро.
Задание
Необходимо сделать новый дизайн сайта Битцевской фабрики.
Вам нужно придумать его структуру и показать одну любую страницу на выбор.
Клиент хочет, чтобы люди лучше понимали, как выглядят качественные современные валенки, чем они хороши и как их выбирать — было бы здорово как‑то помочь с этим на сайте. Москвичам важно более заметно рассказать про московский магазин.
В рамках задания можно сделать каталог или страницу товара. Подумал, что рассказать про конкретный товар интереснее. Получилась такая страница →
Взял двуколоночную раскладку — слева фотки, отзывы и основная информация о товаре, справа простая форма.
Интерфейс очень простой — стандартный набор. Можно выбрать цвет, размер, добавить в избранное, в корзину или сразу перейти к оформлению:
Во время поиска визуального решения я подумал, что прикольно соединить скрепность валенок с современной наивностью. Поэтому взял за основу русский стиль и добавил кокаину.
В меру таланта нарисовал какие-то иллюстрации со скрепными образами. Курочка там, снигирёк.
Нарядил девочку в кокошник, а змея в валенки. Добавил модноты чёрным фоном и неоновой зеленью в иллюстрациях.
Часть фич я поместил рядом с товаром:
А более абстрактные штуки в сетку на отдельном этаже. Типа современненько.
Овцу попросил у Мидджорни. Можете попросить своих:
Insanely detailed studio portrait shot photo of intricately detailed beautiful sheep, smirking mischievously at the camera with mischievous detailed yellow green eyes , very detailed, rim light, photo, rim light, ultra-realistic, photorealistic, hyper detailed, photography, shot on Canon DSLR, f/2. 8 , photography by Felix Kunze and Annie Leibovitz and retouched by Pratik Naik --ar 2:3 --q 2
В конце страницы добавил разводящий блок с другими валенками и коллекциями товаров.
***
Получил неплохую оценку, оставляю комментарий Ильи Бирмана с подсказками, как можно сделать работу ещё круче:
Совет
Можно заранее попросить Илью дать комментарии по работе. Для этого нужно написать ему письмо на электропочту. Такое письмо лучше отправлять прямо в первый день, потому что фидбек может сильно задержаться. Если повезёт, то в ответе будет что-нибудь полезное.
На этом задании многие надломились, документ выглядит довольно чудовищным. А мне было в кайф его оформлять. С одной стороны я понимаю, что похожие задачи часто встречаются в реальной работе, а с другой мне просто нравится текстики оформлять.
Чтобы успешно сделать задание, нужно учесть несколько нюансов.
Чувствуется, что текст сшит из нескольких разных юридических документов. Руки дизайнера чешутся подвигать всякое. Но если там что-то изменить, то компанию в теории смогут засудить. Этого нам не надо. Поэтому в самом документе нельзя менять ни текст ни нумерацию, можно только опечатки подфиксить (там таких проверок на дурака около пяти).
Прежде чем начать собирать макет в Фигме, хорошо потратить время на понимание структуры документа, выделить сущности и уровни вложенности списков.
Дальше начинаем верстать. Обязательно выставляем текстовые стили, превращаем шаблонные элементы в компоненты и закидываем всё в автолейаут. Это сэкономит миллион времени на фиксах, когда вы поймёте, что чего-то не учли.
При вёрстке я следил за тремя вещами:
Правило внутреннего и внешнего. Элементы каждого нового уровня должны быть всё ближе и ближе друг к другу. Чтобы не пришлось повторно править отступы по всему документу я рекомендую идти с глубины наружу — сначала определить комфортный интерлиньяж, потом добавить отступ между абзацами, потом между элементами списка, потом между текстом и заголовком последнего уровня и дальше идти наружу, каждый раз увеличивая отступ.
Размер шрифтов. Клёво, когда заголовки разных уровней однозначно воспринимаются таковыми. Можно воспользоваться таким хаком — выставить размер основного текста в 15—16 пикселей и у каждого заголовка, начиная с последнего уровня увеличивать кегль в 1,5 раза.
Типографские фишечки. Лучше пройтись по всему тексту типографом (плагин для фигмы). Он подправит пунктуационные символы, расставит неразрывайки у частиц, предлогов и союзов, заменит «е» на «ё». Также я использовал всякие приёмы высшей типографики — капитель с разрядкой для аббревиатур, наклонный для заскобочного текста, минискульные цифры в теле текста. Такие штуки разбавляют сплошное полотно текста и в теории должны помогать читателю легче ориентироваться в написанном.
Можно начать с моего шаблона и подфиксить, чтобы было краше. Шаблон в Фигме →
Совет
Коля Товеровский проверяет это задания наивнимательнейшим образом. Только представьте, ему нужно просмотреть ~30 очень похожих друг на друга работ, продолжать видеть косяки вёрстки и иметь бесконечное желание душить. Советую тысячу раз перепроверить работу. Если вы что-то забыли или на что-то забили, Коля найдёт.
Второй совет
Не выгружайте картинку в двойном разрешении. Звучит очевидно, но на моём потоке у студентов произошел какой-то групповой брейнлаг с макетами в тридцать две тысяч пикселей по высоте.
***
Кроме грамотного оформления нужно позаботиться о пользователе и помочь ему разобраться с этим сложным документом. Самое простое решение — продумать какую-нибудь навигацию по доку и разместить на полях объяснения на человеческом языке. Примерно, как в бюроферте.
Такое объяснение на полях было во многих работах, а ничего лучше не успел придумать. Поэтому на них я забил.
«Пофиг», подумал я. «4,75», подумал Коля Товеровский:
В этом посте расскажу о тексте для сайта. В рамках задания можно выбрать из двух тем. Я выбрал «Свитер».
Вариант 2. Свитер
«Вязань» — фабрика вязаных изделий в Рязани. Производят вязаные вещи из овечьей шерсти.
В начале недели в канале Mash появилась заметка о вспышке аллергических реакций на вещи из шерсти. Корреспонденты издания сообщают о новом штамме овечьего гриппа, который вызывает эту аллергию с потенциально летальным исходом. В соцсетях появились видео показательного сожжения шерстяных вещей. Петицию о запрете оборота шерстяных вещей подписали 50 тысяч человек.
Овечий грипп, как и вся история, — полная антинаучная чушь. Просто у группы людей была аллергия на шерсть, это нормально. Однако руководитель «Вязани» опасается, что скандал убьёт его бизнес.
У «Вязани» есть сайт. Соберите страницу для этого сайта, которая поможет снизить эффект «Великой шерстяной паники». Страница будет продвигаться в Фейсбуке, «Вконтакте» и «Одноклассниках», поэтому подготовьте также три макета публикаций для этих соцсетей: основное изображение, заголовок, подзаголовок, подводку. Публикации будут происходить от имени официального сообщества «Вязани».
Ширина макета — 1000 пикселей. В конце документа добавьте три макета публикаций в соцсетях.
Я посмотрел разбор работ студентов прошлых курсов и сразу стало понятно, что у задачи есть принятая модель решения.
Основная задача в том, чтобы объяснить читателю, что компания делает, чтобы шерсть была безопасной, без упоминания бредятины про овечий грипп. Самый простой способ — показать техпроцесс обработки сырья.
Дальше текст в одну колонку с маргиналией под подписи.
У меня уже был опыт создания таких статей, поэтому основную задачу я сделал быстро. Хотелось найти дополнительную пользу от задания, поэтому в оставшееся время я решил потестировать нейросети.
Так, большую часть изображений на странице я сгенерировал в Мидджорни.
Нейросеть хорошо справилась с портретами. Дед получился как живой:
Для абстрактных штук, типа макрофоток шерстяных узоров нейронка тоже сгодилась. Придумал показывать состояние шерсти на разных этапах обработки в виде такого фигуристого элемента. Кстати, этот элемент — жирный намёк на то, как можно эту страницу сделать ещё круче.
Тогда я не смог сгенерить нормальную фотку для первого этапа обработки из-за пальцевой проблемы, поэтому просто перекрыл весь срач цехов светлыми прямоугольниками. Смотрится, конечно, наивно. Сегодня я бы решил эту проблему через оверпеинтинг или имейдж-ту-имейдж в стейбл диффьюжн, но тогда я решил, что сгодится.
А вот с машинами пришлось повозиться. В общем, результат миджорни был неплох, но так как нейросеть не умеет считать, она добавляла миллион дубликатов отверстий, болтов и других деталей. Пришлось каждую картинку сильно подчищать в фотошопе.
В завершении нужно было нарисовать обложки публикации для социальных сетей:
Тут я попробовал учесть аудиторию и нарисовать для каждой сети разные картинки. Пока рисовал для фейсбука подумал, что можно на обложку сразу вывести основные тейки из текста. Получается, что вообще не нужно читать статью, чтобы понять о чём там.
***
В целом, результат использования нейронки мне понравился. Она помогла сэкономить время на поиски нужных картинок в нормальном качестве. Сейчас периодически использую генераторы в реальных проектах.
Разбор работы от Максима Ильяхова:
Совет
Дайте шанс нейросетям. Нужно немного разобраться, чтобы получались вменяемые картинки, но выигрыш в скорости и количестве вариантов отбивает затраченное время.
Сначала в голову пришла вот такая миссия переговоров:
«Помочь Геннадию понять, что ему нужно».
С точки зрения логики она выглядит правильно, но за такую абстракцию сложно подцепить какие-то переговорные идеи. Поэтому я остановился на более приземлённой:
«Помочь Геннадию увидеть, как увеличить объём продаж в автоателье „Кожаный салон“».
Дальше нужно прописать повестку, которая состоит из проблемы, багажа, желания и последствий.
Проблема — корень переговорной ситуации и причина, почему переговоры вообще начались. С неё начинается разговор. Она очевидна:
«Я не могу ответить, сколько будет стоить проект прямо сейчас. Нужно подробнее изучить бизнес-задачу и понять, какое решение подойдёт лучше. Иначе я рискую обмануть клиента.»
Дальше нужно описать багаж. Багаж в переговорах — любые штуки, которые могут стать дополнительной проблемой. Там я описал какие-то пять потенциальных проблем. Можно больше, можно меньше, можно столько же.
Александр Тубольцев, проверщик этого задания, сказал, что в багаже нужно дублировать проблему. Я не согласен.
Проблема — часть повестки. Повестку нужно согласовать с клиентом в начале переговоров. Если продублировать, получается глупо. Как будто ты сначала говоришь о том, что не можешь стоимость сказать, а потом говоришь об этом ещё раз. ¯\_(ツ)_/¯
Тафти с его минимизацией чернил был бы недоволен.
Совет
Несмотря на то, что это ошибка, я всё же рекомендую в рамках учёбы продублировать проблему в двух местах. Так уменьшается вероятность потерять баллы на ерунде.
Дальше в повестке прописываются желания. У меня получилась немного неестественная формулировка, но она прямо даёт клиенту «право на нет». Это сильно ценится в переговорной системе бюро:
«Я хочу, чтобы клиент предоставил ясную и полную картину того, что именно ему нужно, или отказался это сделать.»
Следующий пункт — последствия. Он совсем простой:
«Если переговоры пройдут удачно, я пришлю клиенту документ с пониманием задачи на согласование и договорюсь о следующей встрече.»
В последней части карточки переговоров нужно прописать план переговоров = список вопросов.
Здесь можно задавать вопросы про бизнес, процессы, рынок, услуги, ожидания клиента и т. д. Главное — следить, чтобы все вопросы были открытыми. Закрытость — формальный признак, по которому снимают баллы.
Переговоры с преподавателем
Следующий этап задания — переговоры с Ильёй Синельниковым в образе Геннадия.
На этом этапе студенты самоорганизовываются и выбирают парламентёров🏴☠️. Лучше выбрать одного, но обычно все стрессуют и боятся, поэтому обойтись без пары запасных не получится.
На моём созвоне творился балаган, все сильно нервничали. Кажется, это самая сложная часть второй ступени, которая, к счастью, не влияет на оценку. По самим переговорам у меня кристаллизовалась только одна мысль.
Дело такое. В нашем потоке ребята сразу начали внедрять Илье-Геннадию идею, что сайт ему не нужен и что мы лучше знаем как сделать. Щас научим! Да как запустим! Шооок!
Это плохая стратегия. Клиент может задушиться, обидеться, засмущаться. Кажется, что тут нужно использовать принцип «не души, не научай, слушай».
Думаю, что в начале лучше уделить время изначальному запросу клиента. Поспрашивать, как он видит сайт, какие сайты ему нравится, что там у конкурентов и т. п. А после спросить один главный вопрос: «а как клиенты узнают, что такой крутой сайт запустился?». В этом случае клиент сам может понять, что настоящая задача не в разработке сайте, а в том, чтобы придумать, где брать клиентов. Или мы поймём, что он уже знает где брать, а основная задача в разработке.
Такие дела.
Понимание задачи
На второй неделе нужно написать письмо-предложение по итогам переговоров. В реальной жизни такое, конечно, лучше делать голосом, в задании — текстом.
Разбираете встречу. Если она прошла не очень хорошо (что вероятно), то извиняемся, не забываем ещё раз сказать, что стоимость работы пока назвать не можете.
Описываете все вводные по задаче, которые выяснили на созвоне, и предлагаете план с упором на маркетинг.
Хорошо бы написать подробный план работ в виде таблички, но я ограничился описанием ближайшей итерации — так можно.
В конце добавляете призыв к действию в виде вопросов.
***
В итоге мои документы довольно высоко оценили. За предложение вообще получилось пятерку забрать. Разбор работы от Ильи Синельникова:
Совет
Потратьте хотя бы 10 минут на оформление документа, оттипографьте, разбейте на части заголовками, поставьте что-нибудь на плашку. Преподавателю будет приятно видеть такое внимание к заданию → больше вероятность того, что он закроет глаза на мелкие косячки.
Недавно закончил дизайнеров Школу Бюро Горбунова. Довольно удачно.
Решил написать о работах, которые я сделал на практической ступени школы бюро. Всего там 11 заданий, делаются две недели, дедлайны по четвергам. Попробую рассказать интересное и дать советы, как получить оценку повыше.
Сегодня расскажу о первом задании.
Задание
Сверстайте веб‑страницу о себе в двух версиях: для компьютера и телефона (модель по вашему выбору).
Версии страницы должны иметь одинаковое содержание и общий стиль, но могут иметь разную конструкцию.
Страницы должны помещаться в один экран, как страницы Бюросферы.
Обязательно наличие фотографии, заголовка и текста. Остальные элементы — по вашему усмотрению.
Нужно нарисовать промоблок для личной страницы с заголовком, текстом и изображением. Для выполнения задачи нужно было закрыть две проблемы.
Первая проблема состояла в том, что у меня не было супер-качественной фотки, которая выгодно вставала на какой-то простой странице. Решил иллюстрацию рисовать.
Вторая — было непонятно, какой формат страницы лучше выбрать. Можно было использовать стандартные схемы расположения элементов:
Но такие шаблоны показались мне унылыми и простыми, хотелось выдумать что-то новое. Идеи не находились, пока я не зашел в Телеграм. Там вселенная сама подсказала мне, что надо сделать.
История такая. На второй неделе всех студентов зовут в чатик с Мишей Нозиком. В нём можно показать свою работу и попросить комментарии у Миши и участников группы.
Первые ребята начали показывать там работы, и я заметил, что замечания от Миши Нозика в 95 % случаев повторяются. Наиболее частая проблема — «низкий контраст». Типа всё со всем спорит, типа сложно понять, в каком порядке смотреть на элементы, типа не иерархично. Позже нахлынули и другие советчики с этой формулировкой.
Контраст — слово дня:
Дальше мне стало лениво перепечатывать посты, но идея, думаю, понятна.
У меня от такого объёма контраста пригорело. Захотелось нарисовать штуку, которая игнорирует многие правила, но все равно выглядит круто. И вот что придумалось:
В работе я полностью растворил идею контраста, связал иллюстрацию и заголовок в один неразрывный объект. Для этого нужно было максимально плотно набрать заголовок.
Нашлась почти идеальная под эту задачу гарнитура, называется «Фит». Она обладала нужным рисунком и плотностью, но тянула некоторые проблемы. Самая главная — буквы не попадали в пиксельную сетку, поэтому текст подблюривался по контуру.
Когда текст используется, как текст, это не проблема. Но в моём случае нужно было добиться эффекта ровных плотных прямоугольников. Чтобы решить эту задачу, я решил нарисовать все буквы вручную. Дополнительный плюс — можно добавить альтернативные версии для повторяющихся символов.
Далее я сделал простую иллюстрацию. Чтобы упростить задачу, не потерять пропорции и оставить себя хотя бы немного узнаваемым, я взял случайную фотку и обвёл поверх. С помощью технического розового добавил акцент.
В пустое пространство добавил текст и поставил закрывающую угол звёздочку. Она помогает мозгу определить виртуальный прямоугольник, да и просто добавляет кайфа.
Посмотрим мобилку:
Чтобы было легче догадаться, чего там написано в заголовке, пришлось перерисовать все буквы и найти более удачное место для иллюстрации. Остальные элементы макета расставил по углам.
***
Итоговый макет мне нравится. Кажется, бодро вышло. У Миши тоже получилось забрать высокую оценку. Показываю разбор работы:
Совет
Если как-то серьёзно анализировать, то я не рекомендую повторять такое хулиганство. Уверен, что статистически выгоднее и намного быстрее сделать страницу в шаблонных лейаутах.
Второй совет
Не забывайте уделять внимание мелочам — поставьте рамку браузера и телефона, придумайте какой-нибудь урл и фавиконку. Работы с этими деталями выглядит в 10 000 раз круче, чем без.
