Московский государственный университет имени М. В. Ломоносова Факультет журналистики «Оформление, как его видят создатели Tilda» Реферат Студентки 307 группы Дневного отделения А. С. Ивановой Научный руководитель: Доцент Д. Ю. Кульчицкая Москва 2018 Оглавление Введение..........................................................................................................................3 Характеристика материалов........................................................................................5 MOSQUI.................................................................................................................................. 5 Иван Дорн.............................................................................................................................. 6 66°33’...................................................................................................................................... 7 «Близкие».............................................................................................................................. 7 «Work Hero»........................................................................................................................... 8 «Renovate»............................................................................................................................. 8 «Seedlab Branding».............................................................................................................. 9 «Wine Cases»......................................................................................................................... 9 «Anastasia Vladychynska Consulting»..............................................................................10 «BestDoctor»........................................................................................................................ 10 Что их объединяет.......................................................................................................11 Об оформлении............................................................................................................12 Заключение...................................................................................................................14 Приложение: ссылки на материалы Tilda, в которых очень хорошо объясняется что и как следует оформлять............................................................15 Список литературы.....................................................................................................17 2 Введение «Сейчасоченьважното, какты подал свойматериал , то , каконоформлен , насколько он аккуратен. … Нужно, чтобы визуально всевыглядело гармонично, чтобы приятно было смотреть на этот текст 1». Аудитория СМИ переходит в онлайн. По-прежнему для неё важен текст. Но с каждым годом возрастаетроль его подачи — оформление. Одним из способов организации контента является лонгрид. Большая часть материалов, выполненных в этом жанре, создаётся с помощью Tilda, которая несмотря на это считает себя в первую очередь конструктором сайтов. Однако и по оформлению сайтов можно выделить критерии, которые нужны дляоформления качественного лонгрида. Сотрудники этого конструктора ведут блог «Tilda Publishing», на котором выставляются материалы, обучающие работе на сервисе, рассказывающие о новинках дизайна, и составляется подборка месяца «#madeontilda: Интересные сайты пользователей». В неё попадает десять лучших материалов, по мнению сотрудников Tilda. Цельэтогореферата узнатькак , должен быть оформлен материал, чтобы считаться успешным у создателей Tilda, а, значит , и у большинства читателей . В подборку октября «#madeontilda: Интересные сайтыпользователей » попало десять материалов: 1. MOSQUI, представляющие средство от насекомых : http://mosquirepellent.com/ 2. ИванДорну , которого сайтсделан с помощью Tilda: https://ivandorn.com/ 3. Сайт конкурсаработ , посвященных исследованию Арктики 66°33’: http://go6633.ru/ 4. Сайтпоподбору сиделок «Близкие »: https://blizkie.ru/ 5. Сайтпоподбору фрилансеров -дизайнеров «Work Hero»: http://workhero.ru/ 1 Лонгриды в онлайн-СМИ: особенности и технология создания / Д. Ю. Кульчицкая, А. А. Галустян. — М.: Аспект Пресс, 2016. — 80 с. 3 6. Сайт украинского маркетинговогоагентства «Renovate»: http://renovate.agency/ 7. Сайтстудиизанимающейся , раскруткой стартаповSeedlab « Branding»: http://seedlabbranding.com/ 8. Сайтпопродаже вина«Wine Cases»: http://winecas.es/ 9. Сайтукраинского консультанта по продвижению и раскрутке интернет сервисов Анастасии Владичинской: http://vladychynska.com/ 10. Сайтпопредложению оказания медицинских обследований корпорациям «Best Doctor»: https://bestdoctor.ru/ В подборкененаписано про критерии, по которым отбирали эти материалы. 4 Характеристика материалов MOSQUI Технический состав: • Белый фон, • Шрифт бирюзовый, светло-оранжевый, светло-коричневый, светлозелёный длябелого фона, • Шрифтбелый длясветло-зелёных плашек, • Фотографии, • Плашки, • Видео с Vimeo продолжительностью 01:15 минут, • Картинки-условные обозначения • Один спецэффект. Визуально материал делится на две части фотографиями, растянутыми на весь экран. Первая часть посвящена объяснению кому, зачем понадобится средство от насекомых, в чём его преимущество от остальных. Вторая часть посвященаразбору основных компонентов средства. В материале всего 1 821 знак с пробелами, не считая тех, которые находятся на заглавной фотографии (название средства) и картинках с плашками. Шрифт, использованный авторами, слишком светлый для белого фона, к тому же сами буквы очень тонкие, поэтому большую часть текста прочесть сложно. Но при этом всё выполнено в одном стиле, оттенки взяты пастельные, фотографии подобраны по размерам и теме. Главная фотография использована и как заставка длявидео. Единственный спецэффект в этом материале — уезжающая вверх главная фотография. 5 Выглядит красиво и просто в хорошем смысле этого слова — нет никаких технических нагромождений, которые отвлекали бы на себя внимание или мешали просмотру. Иван Дорн Технический состав: • Фон, стилизованный подгазетную бежевую бумагу, • Светло- и просто коричневый цветшрифтадлязаголовков, • Чёрный и белый цвета дляосновного текста, • Оранжевый цвет шрифта для ссылок (но две ссылки коричневым шрифтом), • Семь видео с YouTube, • Латиница и кириллица, • Фотографии, • Из спецэффектов — выезжающиезаголовки на фотографиях. Этот сайт строится в хронологическом порядке: начинается с самых свежих событий, заканчивается теми, что были ранее. В нём около 2 686 символа с пробелами. Самое странное здесь — использование и английского, и русского вместе, то есть большая часть материала написана на русском языке, но какая-то часть представлена на английском. Непонятно использованы шрифты: есть слова, написанные капсом, есть курсивом — выглядит неопрятно. Но если заглавными буквами написаны названия песен, что оправдывает использованиекапса, то курсивом выделены «значимые » частифразы , которые вполне можнобылои невыделять . Фотографии есть чёрно-белые, есть цветные, а есть чёрно-белые с цветными элементами — это выглядит органично. Но они все разных размеров, есть 6 фотографии, на которых что-то написано, есть фотографии на плашках, есть фотографии на плашках, гденаписано что-то на плашках. Первое видео представлено на плашке-фотографии, а все остальные плашки — простобелыйфон. Вообщеклипыразмещены либона плашках , либо просто на основном фоне. Хотя в интеграции видео- и фотоматериалов есть разнопёрость, в целом лонгридвыглядит однородно. 66°33’ Технический состав: • Белый фон, • Плашки подсеверное сияние, • Гифки подсеверное сияние, • Фотографии, • Видео с YouTube продолжительностью 01:28, • Цвет шрифтабелый и чёрный, ссылки — оранжевые, • Спецэффект: фотоальбом. Проект содержит около 3 617 символов с пробелами. Единственный минус проекта в том, что не полностью открывается окно с другими направлениями исследований, которые подходят для предоставления работ. Мне кажется, он мог быть более воздушным. Оформление передаёт детали, которые большинство людей представляют себе при упоминании Арктики: северное сияние, льды и снега. «Близкие » Технический состав: 7 • Бежевый фон, • Чёрный цветшрифта, • Чёрно-бело-оранжевыеиллюстрации, • Фотографии-портреты специалистов в униформена белом фоне. На сайтесостоит из 3 705 символов с пробелами. Проект легко читать, в нём всё сделано красиво, просто и удобно. Спецэффектов в нём нет. «Work Hero» Технический состав лонгрида: • Белый фон, • Всплывающий текст, • Слегка двигающиеся сине-жёлтыеиллюстрации, • Тёмно-синий и чёрный цветшрифта, • Голубые плашки. 6 529 символов с пробелами в этомпроекте . В нём всё удобно, читать легко. Не уверена, что синий и жёлтый хорошее сочетание. «Renovate» Технический состав сайта: • Фон сиренево-синий, • Белый цвет шрифта, • Одна фотография-портрет «лидера команды Renovate», • 3D элементы , • Спецэффекты: гифки, вылетающий текст. В проекте 3 567 символов с пробелами. 8 Очень красивый проект, легко читаемый, интересный, с технической точки зрения. «Seedlab Branding» Технический состав сайта: • Белый фон с тремя серыми мазками, • Абстрактные фотографии, • Белый и темно-серый цветашрифта, • Иллюстрации-символы, • Разноцветные плашки • Спецэффекты: выезжающий текст (не везде), проявляющиеся фотографии. На главной странице сайта 1 373 символов с пробелами. Проект эстетичный, читать текст легко, цвета пастельные у плашек, поэтому всё выглядит однородно. «Wine Cases» Технический состав: 9 • Белый фон, • Плашки, • Фотографии, • Иллюстрации, • Цвет шрифта — серый и тёмно-синий, • Видео продолжительностью 01:03, • «Карта » — в нейпоказано , чтовходит в праздничный набор , • Спецэффекты: выезжающиетексты, фотографии и плашки. Очень интересный ход — обрезанные фотографии, расположенные в краях лонгрида. Около каждого начального слова заголовка находится плашка в стилесерого мрамора. Цвета дляплашек взяты пастельные. Смотрится эстетично. На сайтеоколо 3 269 символов с пробелами. «Anastasia Vladychynska Consulting» Технический состав : • Белый фон, • Фиолетовые, серыеплашки, • Чёрно-белыефотографии, • Фиолетовый, тёмно- и светло-серый, белый цвет шрифта. На сайтемного геометрии и цифр — это его отличительная черта. Мне не очень нравится цветовое сочетание, потому что оно мрачное. Но смотрится лонгридцельным и органичным. Состоит из примерно 6 059 символов с пробелами. «BestDoctor» Технический состав: • Белый фон, • Белый, оранжевый, тёмно-серый цветашрифта, • Фотографии, • Светло-серыеплашки, • Иллюстрации, • Спецэффекты: проявляющийся текст и фотографии. Очень простое оформление, зато всё читается легко и выглядит органично. 10 Всего 2 538 символов с пробелами. Что их объединяет Хотя представленные здесь темы кажутся разнообразными, по сути они все направлены на продвижение какого-либо продукта или услуги. Нет материалов, посвящённых историям, журналистским длинным текстам, хотя изредкаони появляются в таких подборках. В половине из представленных здесь оформлений есть какой-либо уникальный элемент. Примеры: 1) Сочетание чёрно-белых, цветных и чёрно-белых с цветными элементами фотографий у Ивана Дорна, 2) Отсылка к геометрии у сайта «Anastasia Vladychynska Consulting», 3) Обрезанные фотографии у «Wine Cases», 4) 3D элементы у «Renovate», 5) Отсылка к природеАрктики в проекте 66°33’. Остальные просто красивые. Каждый проект строится на основных цветах, среди которых чащевстречаются пастельные оттенки. Сложных спецэффектов у этих материалов небыло. 11 Об оформлении «Самоекрутоечто , будутделатьвсе, — это коллаборация с брендами , когдасам материалстановится имиджевым. Например, можно выпустить статью на Lifehacker.ru продесятьсамыхглавных ошибок в бегеисделать это всотрудничестве с Nike. Такоговидаматериалы в сотрудничестве с брендами будуточеньпопулярны . Причем это будет непродакт-плейсмент, когда журналист где-то незаметно упоминает имя бренда, это будет совместный спецпроект. У брендов есть знания, какая-то информация. Но они немедиа, им нужно широко о себе рассказывать. Медиа и должны им помочь. … Вопрос втом, чтобы выпустить материал, который былбы интересенчитателю ипомогалбы брендупопуляризоваться2». Из интервью с создателем Tilda Как видно по краткой сводке, из чего состоят сайты, попавшие в подборку, Tilda считает , чтооформление должно бытьцелостным . В немдолжны быть продуманы цвета, чтобы они подходили друг к другу и повторялись. Шрифты должны быть разных размеров, чтобы было ясно, где заголовок, где подзаголовок, чтобы выделять значимыемысли. Графический контент очень важен для оформления. Как говорит создатель Tilda: «Сейчасвсеготовящиеся к публикации материалы будутоформляться так. … Недостаточно взять кусок текста и снабдить его двумя фотографиями3». Tilda Publishing выпустила материал «9 трендов , которые мы будемвидеть , слышать и обсуждать в 2019 году4». В немавторы отмечают лишьодинтренд тематический — все чаще поднимаются проблемы экологии. Но эта тема будет отражаться и в дизайне. Все остальные тренды относятся именно к визуальному оформлению материалов. Tilda Publishing отмечают, что сайты все чащеоформляются под старину: «Мы возвращаемся в прошлое. Все чаще создают коллажи и используют старые фотографии , чтобы добавить новый 2 Лонгриды в онлайн-СМИ: особенности и технология создания / Д. Ю. Кульчицкая, А. А. Галустян. — М.: Аспект Пресс, 2016. — 80 с. 3 Там же. 4 https://ru.depositphotos.com/trends2019 12 смысл и задать новые вопросы о прошлом5». Кромеэтоговсебольше , будет на сайтах видео, анимации, 3D элементов. В материалах подборки эти тренды просматриваются. Фотографии есть в каждом из материалов. Другое дело, что в некоторых материалах было лишь по одной фотографии, а в большинстве они были абстрактные. Но недостаток фотографий восполнялся иллюстрациями: значками, геометрическими фигурами, в том числе и 3D элементами , фономс рисунками. Менее важным оказался видеоконтент. Всего в четырех материалах были видеоролики. В некоторых других замещающим видео оказался формат гифок или спецэффекты, благодаря которым тоже создается движение. Большинство материалов из подборки не используют все возможности, которыепредоставляет платформа. Но Tilda Publishing такжеговорито влияниина фотографии и интерьер соцсетей, — мейнстримом становится минимализм: «Роскошный минимализм — это очень утонченная, отполированная, чистая эстетика. Мода на идеальный дизайн с использованием натуральных материалов (дерева, цветов, камня) заполняет соцсети, и в ответ lifestyle фотография становится более изысканной6», «Фотографы -минималисты всегдабылипопулярны , но сейчас они становятся более концептуальными. Недостаточно просто запечатлеть что-то красивое, вам нужно создать историю, передать более глубокий смысл. Такие фотографии часто выглядят как кадр из фильма, вы понимаете, что это только часть истории, у которой есть начало, середина и конец. Это не просто разбитая чашка, например. Это конец чьих-то отношений. Или распадобщества7». 5 https://ru.depositphotos.com/trends2019 6 https://ru.depositphotos.com/trends2019 7 https://ru.depositphotos.com/trends2019 13 Заключение Tilda считает, что материалы должны быть оформлены не только красиво, чтобы выделяться среди других, но и удобно, что означает правильный подбор цветов, размера и толщины шрифта. Кроме этого, информация в материалах должны быть правильно подана, что означает логичное разделение на блоки, где сначала подается новая или самая важная, самая интересная информация, потом детали и затем то, что в журналистике называется бэкграунд, а на сайте это, скорее всего, будут ссылки на примеры, отзывы, авторов, контакты. Материалы, которые попали в подборку Tilda оформлены более-менее по канонам конструктора и отражают некоторые тренды, которые можно будет увидеть в большинстве материалов 2019 года. 14 Приложение: ссылки на материалы Tilda, в которых очень хорошообъясняется что и как следуетоформлять Сейчас на сайте Tilda возможно не только воспользоваться шаблонами, но и создать оформление сайта с нуля с помощью сервиса Zero Block. Но создатели конструктора написали несколько материалов в помощь и тем, и другим. Очень удобно то, что в каждой статье есть примеры, как надо или не надо делать и что конце каждой из статей приводится краткое резюме по материалу. 1. «Как делать красивые статьина Tilda»: http://tilda.education/articles- how-to-make-articles-on-tilda В материале огромное внимание уделяется тексту: какой шрифт лучше выбрать, как что лучше расположить. Даются советы о грамотности текста. Даются рекомендации по вставке изображений в Tilda: какого размера должны они быть для какого блока, где искать бесплатные иллюстрации. Отдельный блок посвящен тому, как лучше оформить обложку и заголовок всего материала. Авторы написали и про навигацию по сайту. 2. «Визуальная иерархия сайта »: http://tilda.education/articles-visual- hierarchy В материале объясняется, что такое иерархия сайта и зачем она нужна, как спланировать сайт. Как выделять каждый из блоков. Из материала можно узнать, как применяется на сайте принцип «перевернутой пирамиды», что такое схемы чтения Z и F, что нужно будет для грамотного расположения блоков. Как работать с цветом, как использовать визуальную иерархию. 3. «Какнеоблажаться с дизайном »: http://tilda.education/articles-guide-for- non-designer 15 Это переводной материал, чей автор — основатель платформы по поиску работы для дизайнеров, Марк Хемеон. Он дает очень простые, но важные, практические советы, которые помогут многим, например, использовать не черный, а темно-серый шрифт, чтобы читателю было проще воспринимать текст; убеждает обратить внимание на выравнивание и навигацию по сайту; оставлять «воздух» в тексте; думать о потребителе, который будет нажимать на кнопки большим пальцем правой руки через экран смартфона — ему должно быть удобно; приводит ссылки на ресурсы Apple и Google, которые могут помочь подобрать сочетания цветов, элементов. 4. «Каксделать навигацию насайте удобной »: http://tilda.education/articles- navigation В этом материале рассказывается о ссылках: где их лучше сделать, какой текст должен быть в ссылках, где расположить меню и как его оформить. В материале предлагается сделать несколько дополнительных кнопок, например, «показать еще», «наверх»; объясняется, какие кнопки стоит выделить цветом; какой придумать сайту URL. 16 Список литературы 1. «Как делать красивые статьи на Tilda»: http://tilda.education/articles-how- to-make-articles-on-tilda 2. «Визуальная иерархия сайта»: http://tilda.education/articles-visual- hierarchy 3. «Как не облажаться с дизайном»: http://tilda.education/articles-guide-for- non-designer или https://medium.com/startup-grind/how-to-not-suck-atdesign-a-5-minute-guide-for-the-non-designer-291efac43037 4. «Как сделать навигацию на сайте удобной»: http://tilda.education/articles-navigation 5. Лонгриды в онлайн-СМИ: особенности и технология создания / Д. Ю. Кульчицкая, А. А. Галустян. — М.: Аспект Пресс, 2016. — 80 с. 6. «Как новые медиа изменили журналистику: мультимедийные лонгриды как новый формат онлайн-журналистики»: http://newmedia2016.digitalbooks.ru/kniga/mul-timedijny-e-longridy-kak-novy-j-format-onlajnzhurnalistiki/ 7. «9 трендов, которые мы будем видеть, слышать и обсуждать в 2019 году»: https://ru.depositphotos.com/trends2019 8. Tilda о себе: https://tilda.cc/ru/ Диз| 17