Дизайнер интерфейсов, арт-директор
Scitech
Информационный сайт с регистрацией на события и формой подачи проектов
Me:
WEB-DESIGN
Team:
JS
METEOR
FIREBALL (CUSTOM FRAMEWORK)
BACK OFFICE
Перейти на сайт ↗︎
Презентация
Описание работы
Швейцарская типографика
Строгая сетка, линии, акцент на типографику
Каждому проекту — свой цвет
Обсуждаем фичи
Личный кабинет и регистрация
На простом информационном сайте не нужна регистрация, потому что у нас нет данных для личного кабинета — эта функцональность будет бесполезна для пользователя
«Лид-магниты»
Это штуки, которые предлагают что-то полезное в обмен на контактные данные. Мы их не используем, потому что это создает ощущение, что ты на базаре и тебя разводят: сначала заплати, а потом померь, подходит ли это тебе. Этот подход нравится маркетологам, но я предпочитаю его честную вариацию: сначала дать что-то полезное, а потом, если понравилось — предложить подписаться на рассылку.
Карусель на первом экране
Это серое поле, в котором бесполезно гуглить исследования: все проекты разные. Поэтому мы в агентстве решили для себя: просто никогда не использовать корусель. Причина одна: часть информации всегда скрыта. Поэтому мы предпочитаем от греха подальше выкладывать информацию открытым списком.
Поиск по сайту
Неоднозначная фича — предполагаем, что она больше нужна для админов сайта, чем для пользователей. Оставляем на потом
Прототип от клиента на коленке — очень полезная штука, чтобы начать диалог
Делаю прототип структуры
Я всегда делаю прототипы в Фигме, вместо карты сайта, потому что:
- структура постоянно меняется,
- клиент может сразу «потыкать».
Три страницы: главная, проекты, страницы проекта. После разговора поняли, что страница проектов не нужна, потому что их мало
Обсуждаем дизайн
У клиента уже был разработан логотип и они попросили сделать сайт в этой стилистике: черно-белый с цветными акцентами
Значит, сайт будет в стиле швейцарской типографики: строгая сетка, акцент исключительно на текст, контрастные цвета.

Составляю референсы, чтобы заранее согласовать с клиентом, правильно ли мы друг друга поняли.
Обсуждаем дизайн с клиентом
Тут клиенту не понравился цвет страницы, хотелось больше к чб прийти. И просят добавить красную линюю)
Тут мы думали над навигацией: нужно одновременно привязаться к сетке и отвязаться от количества пунктов меню
Решили отказаться от такого хаотичного расположения фото, несмотря на то, что они стоят по сетке
Вроде решили вопрос с сеткой в меню: разделил весь body на aside и container
А красные линии, которые просил клиент, — выглядят слишком невнятно. Надо по-увереннее
Потом думаем как показать блок с проектами и вспоминаем про то, что у нас градиенты в логотипе и что их можно перенести на дизайн всего сайта.
P.S.: Черный цвет в проектах специально сделан так, чтобы привлечь к себе внимание.
Созваниваюсь с другим дизайнером, чтобы получить взгляд со стороны, она готовит мне док с комментариями
Собираем всё в кучу
Внятные линии толщиной 2px вместо 1px, становятся красными при наведении
Фото выровняли, без хаоса, по сетке
У каждого проекта — свой цвет. Унаследовали эту идею с логотипа
Добавили лица проекта, чтобы поразвлекать пользователей сайта
А вот развитие идеи с градиентами проектов
Другие проекты
Made on
Tilda