Portfolio Klim Falkenberg

Иконки и декор

Используем на сайте и в рекламных
материалах

Поиск Адрес Отмена

46



Сайт фонда МФТИ

Вас назначили редактором сайта, но Вы не умеете работать с
HTML и CSS или же не хотите тратить на это время? Наша
команда нашла решение этой проблемы, создав удобный
инструмент для сборки страниц, получивший широкое
распространение для Физтехов. Если раньше Вам пришлось
бы осваивать язык разметки гипертекстовых страниц, то
теперь из блоков нашего контентного процессора страницы
новостей, событий, релизов новых проектов собирются сами
в пару кликов. Система работает по принципу «что видишь, то
и получишь» – с созданием живой страницы, отвечающей
бренду Фонда, легко справится человек, не являющийся
профессионалом в области веб-дизайна.

Сайт Админка Руководство

48

Сайт для МФТИ

С появлением инструмента для сборки работа редактора в
разы упростится: время, выигранное за счет
автоматизированности блоков контентного процессора,
позволит заняться наполнением ресурса материалами, SEO-
продвижением, обратной связью и гостевой .

49

Мобильная версия

Помимо создания удобного
инструмента, была внедрена
адаптированная версия сайта. Она
ориентирована на отображение
расписания, что играет
первостепенную роль для
пользователя. Затрагивая
дополнительные изменения, основная
деятельность была направлена на
работу с двумя основными разделами.

Форма пожертвования

50

Руководство по элементам сайта

В рамках проекта был разработан фирменный логотип, а
также брендбук, описывающий концепцию бренда и его
основную идеологию.

51

Палитра

во всех компонентах
используются 4 цвета

Black Accent Primary Background

RGB Web RGB Web RGB Web RGB Web
#121721 #DE2620 #193D93 #DBDAD8
R: 18 R: 222 R: 25 R: 219
G: 23 G: 38 G: 61 G: 218
B: 33 B: 32 B: 147 B: 216

Тень Параметры тени:

Белый блок на фоне X: 0 px
должен иметь тень Y: 12 px
Blur: 24 px
Opacity: 10%

Пример блока с текстом Пример блока с фото

Развитие факультета
проблем физики и
энергетики

Собрано: 1 428 000 ₽

5024

Блоки

в дизвйне применена
островная концепция

R = 8px Важное замечание

Примеры ≥20px Блоки имеют белый фон, они должны
иметь подложку цвета Background.
Заголовок Возможно использование
Но чтобы вы изображений в качестве фона
поняли, откуда Радиус скругления равен 8px.
возникает это Отступы от блока должны быть не
превратное менее 20px
представление
людей, Развитие
порицающих факультета
проблем физики
и энергетики

Собрано:

1 428 000 ₽

Проблемы физики и энергетики

Но чтобы вы поняли, откуда возникает это
превратное представление людей, порицающих.

Откуда возникает это представление. Кнопка

53 04

Контент

Правила компоновки
элементов

Все элементы должны равномерно распределяться по всей
ширине контента страницы

≤ 960px

Примеры

54

Элементы

Кнопки, логотипы,
формы

Кнопки Формы Прочее
Информация
Primary button Input
Accent button Файл 1
Border button Input on focus Файл 2
le right
Select box
Выбери это

Логотипы

Типографика

Основной шрифт -
PF DIN Text Pro

Тонкий Обычный Жирный

Для заголовков используется тонкий шрифт, для
подзаголовков и основного текста - обычный
Жирный шрифт нужен для выделения отдельных частей
текста и кнопок

36pt Заголовок статьи

24pt Достаточно длинный подзаголовок

20pt Но чтобы вы поняли, откуда возникает это превратное
представление людей, порицающих наслаждение и восхваляющих
страдания, я раскрою перед вами всю картину и разъясню, что
именно говорил этот человек, открывший истину, которого я бы
назвал зодчим счастливой жизни. Действительно, никто не
отвергает, не презирает, не избегает наслаждений только из-за
того, что это наслаждения, но лишь из-за того, что тех, кто не умеет
разумно предаваться наслаждениям, постигают великие страдания.
Равно как нет никого, кто возлюбил бы, предпочел и возжаждал бы
само страдание только за то, что это страдание, а не потому, что
иной раз возникают такие обстоятельства, когда страдания и боль
приносят некое и немалое наслаждение. Какими бы то ни было
тягостными физическими упражнениями, если бы это не приносило
с собой некоей пользы? И кто мог бы упрекнуть никаких
неприятностей, или того, кто избегал бы такого страдания, которое
не приносило бы с собой никакого наслаждения?

5046



Логотип и оформление канала

Набирающий популярность и в то же время уже получивший
признание немалого количества зрителей канал - «Так.
Можно.» Основной контент завязан на интервьюировании
медийных личностей, добившихся определенного успеха.
Эксклюзивные истории, которые до этого никто не слышал,
нелегкий путь к славе и переменам в жизни. На этот раз
кричащий заголовок не будет кликбейтом, мы Вам это
гарантируем.

Логотип Айдентика Брендбук

Оформление 58

Логотип и айдентика

В рамках проекта был разработан фирменный логотип, а
также брендбук, описывающий концепцию бренда и его
основную идеологию.

59

Логотип и иконка!

Иконка Логотип

Охранная зона X

X 60
X
X
X

Великий смысл!

(он тут правда есть) !

" А что, логотип со смыслом?
Да, тут реально
глубокий смысл!

Взаимодействие противоположных
цветов и композиция, состоящая всего из
двух простых слов, на подсознательном
уровне вызывают ассоциациативный ряд,
приводящий к отношению гендеров.
«Так.» и «Можно.» создают диалог,
сравнимый с деятельностью
интервьюера и респондента.

61

Палитра!

Цвета и градиенты, которые
нужно использовать при
оформлении канала и в любой
иной визуальной коммуникации

Цвета

Accent Midway Primary Light

#F34848 #FFFFFF #1783F2 #F4F8FF

Градиент

Primary Midway Accent

62

Варианты лого

Можно и так и сяк

63

Супер паттерн!

При правильном применении
корпоративный паттерн станет
опознавательным знаком бренда, но
важно помнить, что логотип и другие
элементы должны контрастировать с
фоном. Рекомендовано придерживаться
светлых оттенков.

64

Шрифты

В визуальной коммуникации бренда используется

AAaaшрифт Monserrat.
Montserrat
Black

Применим для заголовков, рекламных материалов,
промо и медийных носителей, в интерфейсах, на
сайтах и лендингах

Aa Montserrat
Bold

Распространен в интерфейсных элементах,
подписях и подаче данных, рекомендован для
мелких кеглей

Типографика

В работе с микро-типографикой нужно
придерживаться чётных размерностей в
значениях высот строк и размеров кеглей. Также
рекомендуется прибавлять по 0.2 к стандартной
высоте строки в случае, если текст форматируется
более чем на 2 строки.

65

Всякие приёмы

Прием №1 – Чатик

Часть диалога можно представить в виде чата, где
участники выступят в виде emoji.

!Выглядит стильно и легко для понимания.
" А что, так можно?

Да, можно!

Также этот прием отлично смотрится на тёмном

!или градиентном фоне.
" А что, так можно?

Да, можно!

66

Всякие приёмы

Прием №2 – Деление

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

Да, можно!

ННИАНБАОКОВА

Прием №3 – За рамки!

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

67

Логотип передачи

Цветовое сочетание передачи
исполнено в фирменных тонах.
Брутальность в коллаборации с
нежностью рождают полноценную
композицию.
Использование приема поддержки и
выдержанности симметрии заставляют
зрителя непроизвольно обратить
внимание на картинку. Подпись в свою
очередь выполнена простым полым
шрифтом, что облегает читабельность.

68

Варианты лого

Основной вариант используется на светлом
фоне, рекомендован размер массивных

носителей. Таким образом, части логотипа
приобретают равноценность, нежели в
инверсивном варианте.

На темном фоне или градиенте необходимо
использовать альтернативную версию
логотипа, тут больший акцент падает
именно на название программы.

69

Логотип передачи

Привычное оформление с указанием на
пол рассказчика рождает верные
ассоциации с предстоящим подкастом.
Говорящий значок с названием категории
видео призывает пользователя
воспользоваться кнопкой «Плейлисты»
для дальнейшего перехода к рубрике.

70

Варианты лого

Основной вариант используется на светлом
фоне, рекомендован размер массивных

носителей. Таким образом, части логотипа
приобретают равноценность, нежели в
инверсивном варианте.

На темном фоне или градиенте необходимо
использовать альтернативную версию
логотипа, тут больший акцент падает
именно на название программы.

71

Примеры :)

Примеры применения созданного дизайна в
оформлении полной картинки типа «Превью» к
видео для YouTube

Якаткаквосйе)

ОЛТЕИГНЬКОВ

ННИАНБАОКОВА

72



Solys — игра головоломка

Довольно непростая игра, тесно связанная с применением
основных законов физики. В решении этой головоломки
Вашей главной задачей будет проведение игрового шара к
выходной точке с обходом всех преград на пути. Уровни
градируются по сложности, так что, скучать точно не
придется. Тренируйте свою сообразительность и логику,
используйте кисть для создания цветных конструкций, с
помощью которых шарик без труда достигнет своей цели.
Меняйте гравитацию, импульс и скорость передвижения -
сделайте все возможное, чтобы пройти уровень и заполучить
все три звезды эффективности. Ищите свой уникальный
способ завершения начатого и добивайтесь отличных
результатов с Вашей безграничной фантазией.

Игра Логотип Интерфейс

74

Логотип

Иконочки Начать заново
Начало симуляции
Выход домой Выбрать ластик
Выбор уровня Выбрать карандаш
Помощь Управление
Назад
Навигация

75

Уровни

Миниатюры уровней показывают игроку миникарту-
прототип предстоящего уровня.

Бустеры Ускорение

Импульс

Сильный Слабый Сильное Слабое

Портал Замедление

Вход Выход Обычное Заморозка
Гравитация
Заморозка

Обычная С импульсом Вниз Вверх

76

Геймплей «Solys»

Выбор уровня

Начало уровня

77

Запуск симуляции
Рисование кривой

78



T-port — открой мир путешествий

Любите путешествовать, но в то же время не хотите
пользоваться услугами агенств? Тогда наше приложение -
именно то, чего Вам не хватало. Самостоятельный выбор даты
и времени перемещения всех транспортных средств на пути к
контрольной точке, оптимальное соотношение цены и
собственного запроса, а также работа в единственном
сервисе без перехода на сайты агрегаторов. Теперь Вы
можете распланировать поездку от двери до двери, не
заморачиваясь по поводу местных номеров Taxi. Экономия
времени и возможность изменить условия маршрута всего в
один клик - все это T-Port.

Проджект-менеджмент Логотип
Интерфейс

80

Приложение t-port

Телепортация стала возможна с появлением
модернизированной системы планирования маршрутов.
Технологичное будущее всего в паре кликов от Вас.

81

82



Instagram маски

По заказу от блогера @SvetaSollar были созданы две
набирающие в социальных сетях популярность маски для
Instagram-Stories. Использование данного продукта
увеличивает статистику охвата аккаунта, привлекая новую
аудиторию.

3D-моделирование Instagram маска

84