Привет! Я дизайнер, работаю на фрилансе.
Два месяца назад в голове поселилась мысль: «Хочу работать в команде и создавать дизайн, не задумываясь о финансовом положении». Выход — устройство на работу, заработная плата которой будет равна среднему заработку за месяц на фрилансе.
Я откликнулся на вакансию UX/UI дизайнера в Everypixel (раньше Pressfoto) и получил тестовое задание:
Компания Everypixel Studio решила сделать редизайн текущего сайта. Для дизайнера, в первую очередь, ставилась задача уйти от текущего шаблонного дизайна сайта. В пример приводился основной продукт компании Everypixel Search. Как итог, финальный сайт компании должен был соответствовать айдентике и стайл гайду поисковика.
Для выполнения тестового задания вам необходимо провести ревью получившегося интерфейса страницы видеопродакшена и предложить свой вариант решения для блока с коммерческими текстами. ссылка на интерфейс.
Опиши, какие проблемы ты видишь в предложенном варианте страницы видеопродакшена.
— Почему ты считаешь, что это проблемы?
— Какие визуальные решения могут исправить ситуацию?
— Чего не хватает на твой взгляд в данном интерфейсе?
Предложи свое решение для первого блока с коммерческими текстами( Вы получаете не видео, а результат и т.д).
Забегая вперёд, расскажу: выполненное мною тестовое задание — черновик этой статьи и сайт, который состоял только из картинки.
Про шаблонность
Взявшись за задание, я решил зацепиться за задачу, о которой говорится в задании — уйти шаблонного дизайна. Задача в представленном макете не решена. Предоставленный макет редизайна — шаблонный лендинг:
Отсутствие сетки, «этажи» ничего не знают друг о друге:
Шапка малоинформативная. Полезной информацией является только заголовок:
Встречается выключка по правому краю — сложно читать:
Линейки и украшательства даже мешают:
Текст на фотографиях — ни фотографию рассмотреть, ни текст прочитать. Можно стилизовать фотографию в фотошопе, или подбирать и рисовать иллюстрацию на фон.
Про логику
После быстрого анализа макета я задумался над логикой сайта. Очевидно, что сайт показывают потенциальным заказчикам. Тогда мы находим большое количество логических ошибок:
Почему «Кейсы» находятся практически на последнем этаже?
Два объёмных этажа с текстом о себе. Заказчик больше поверит отзывам людей, чем такому рассказу.
Сайт-визитка даёт информацию заказчику: портфолио, список услуг, отзывы клиентов. В представленном макете и на сайте отсутствуют пакетные предложения. Даже средний чек услуги даст понять клиенту какие деньги он заплатит и какой результат в итоге получит . Это поможет клиенту сделать выбор в пользу студии.
Конфигуратор у Redmadrobot обещает ответить на финансовые вопросы, а «Логомашина» пишет фиксированную стоимость.
К делу
Начну с сетки. Ширина будет 1140–1170 пикселей. Часто делают шире, но читать такой контент сложнее. Колонок будет шесть.
Теперь по-порядку, начну с шапки. Полезная в ней только надпись, оставлю. Теперь нужен кейвижуал «в тему». Это сайт, который будут смотреть заказчики, поэтому полезным кейвижуалом будет фоторама с работами из портфолио. Если ещё двигаться будут, то супер. Скетчирую фотораму и этаж после:
Давайте соберём в «Скетче»:
Фоторама получилась скучной. Добавлю «воздуха» и увеличу контраст. Не забыть продумать внешний вид роликов при наведении:
Следующий этаж. Нужна редактура промо-заголовков и абзацев. Быстро и неумело отредактирую и сверстаю три колонки:
Выделю ключевые слова в заголовках и сделаю это немного криво, чтобы бросалось в глаза. Как в шапке, но не совсем:
Не хватает динамики. Раскидаю иконки из первого макета:
Тестовое задание выполнено. Но я решил сверстать ещё один этаж, так как это последняя полезная информация, которая была в исходном макете:
Этаж получился скучным, но для данного тестового задания думаю, что будет достаточно. Напоминаю, что выполненное тестовое задание можно рассмотреть внимательнее.
В итоге
По результатам тестового задания меня пригласили на собеседование и их было даже два. Я ещё фрилансер.