Readymag

Гибкий Хотспот

2022-01-13T13:23:52.999Z

Создавать бургерные меню, интерактивные галереи и ещё более сложные элементы интерфейса теперь проще.

Элемент Tip виджета Hotspot теперь можно перемещать независимо от элемента Pin. Контент в Tip (это может быть изображение или текст) отображается при активации Pin (по клику или ховеру).

Благодаря этому апдейту Hotspot намного удобнее использовать для всевозможных попапов, бургерных меню и более сложных элементов интерфейса:

Подробнее о том, как работает обновлённая функция, — в статье службы поддержки.

Это первое обновление Readymag в 2022 году. О том, какие функции появились в инструменте в 2021, чем они полезны и как могут упростить работу, читайте в наших итогах года.

Присоединяйтесь к бета-тестированию Readymag, чтобы узнавать о новых функциях в числе первых.

Кастомный курсор: теперь без кода и для каждого виджета

2021-12-09T14:40:18.727Z

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

Добавить кастомный курсор можно двумя способами. Первый — с помощью настроек всего проекта (вкладка Viewer в Project settings): так можно изменить и основной курсор (стрелка) и указатель (иконка с пальцем, которая появляется при наведении на ссылку).

Вторая опция — кастомный курсор при наведении на определенный виджет. Его можно добавить, выбрав виджет и нажав на атрибут Custom cursor (жирная стрелка, расположена прямо над Draggable). У каждого виджета может быть свой индивидуальный курсор — за исключением Video, Music и Maps. Чтобы сделать кастомный курсор для мультимедийного контента, добавьте его с помощью виджета Code (эта опция не работает с кодом iframe).

Курсор может быть загружен в формате PNG (в двойном разрешении, для экранов с Ретиной) или SVG (размер не больше 128 px).

Кстати, у нас есть коллекция готовых цветных курсоров, ее можно посмотреть здесь.

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

Создавайте цифровые журналы и веб-сайты с помощью Readymag.

Специальное упоминание: еще три вдохновляющих проекта из 2021

2021-12-09T12:14:16.067Z

Мы регулярно добавляем выдающиеся проекты, созданные пользователями Readymag, на страницу Examples — нашу виртуальную доску почета. Лучшие из лучших становятся номинантами конкурса Projects of the Year, голосование сейчас в самом разгаре. А пока мы хотим рассказать еще о трех достойных работах, вызвавших нашу симпатию и пристальный интерес.

Workincontext

На что обратить внимание: работа с типографикой, анимациями и перетаскивание изображений

Автор: Берталан Бессеней, дизайнер

Work In Context — онлайн-симпозиум по фотографии, который организует Университет искусства и дизайна имени Ласло Мохой-Надя (MOME) в Будапеште. Первый симпозиум прошел летом 2021 года и включал лекции, несколько круглых столов и выставку работ выпускников университета.

Мы с самого начала понимали, каким хотели бы видеть сайт. Readymag оказался настолько интуитивным и гибким, что почти все — от макетов страниц до кастомных анимаций — мы сделали сами, без помощи разработчиков. Наши любимые возможности в Readymag — загрузка шрифтов и вставка кастомного кода, ее мы использовали, чтобы дать возможность посетителям сайта перетаскивать изображения по экрану.

Сейчас для большинства виджетов в Readymag можно включать атрибут draggable, что дает возможность перетаскивать их в опубликованном проекте без применения кастомного кода.

Genocide.greatarmenia

На что обратить внимание: работа с типографикой и анимации по скроллу

Автор: Артем Милитонян, продакт и веб-дизайнер

Некоммерческий проект Genocide.greatarmenia — уникальный пример того, как даже самые сложные темы можно рассказать широкой аудитории в формате лонгрида. Этот проект принес мне первые важные веб-награды (The FWA, x4 Awwwards, CSSDA, Communication Arts и другие).

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

В Readymag ты принимаешь правила игры, его возможности и ограничения, и действуешь исходя из них. Интересно, что в этом проекте я ничего не планировал заранее: результат формировался прямо в процессе работы на белом холсте редактора. Я считаю Readymag лучшим продуктом на рынке, а самая главная функция для меня — работа со скроллом. Она позволяют создавать невероятные эффекты.

Портфолио Джонаса Маджиди

На что обратить внимание: геймификация и нелинейный скролл

Автор: Джонас Маджиди, мультимедийный дизайнер

Мое портфолио концептуально представляет собой (очень упрощенную) версию игр Tony Hawk’s Underground 2 и Skate 3. В проекте много отсылок к культурным феноменам, которые меня вдохновляют. Возможно, вы заметите некоторые из них с первого раза, но я уверен, далеко не все. Этот элемент игры привлекает на мой сайт снова и снова.

Я решил сделать портфолио при помощи Readymag, потому что мне нравится легкость, с которой в нем можно анимировать виджеты: альтернативные инструменты не дают такой скорости работы. С точки зрения drag-and-drop дизайн в Readymag похож на работу в Illustrator, что очень удобно.

Регистрируйтесь в Readymag и создавайте интерактивный дизайн прямо в браузере

Голосуйте за Проекты Года до 15 декабря 2021

Новый интерактивный режим, новые способы активации Shots

2021-11-25T13:33:21.253Z

Почти все объекты в опубликованном проекте теперь можно сделать подвижными: если включить атрибут Draggable, любой посетитель вашего сайта сможет перетаскивать текст, картинки и объекты по странице. Посмотрите, как Draggable используется в проекте Readymag Design Workout.

Draggable доступен для всех виджетов, кроме Video, Music и Google Maps. Мультимедийный контент можно сделать перетаскиваемым, вставив его через виджет Code. Draggable можно применить и к нескольким сгруппированным виджетам — но перетаскивать их можно будет только по отдельности. Подробнее про Draggable читайте в разделе Help.

Виджет Shots проигрывает последовательность изображений при активации определенного события. Теперь таких событий четыре (вдвое больше, чем было):

Mouse move (📱Touch move)
Движение курсора или пальца над определенным виджетом

Hover (📱Hold)
Удержание курсора или пальца над определенным виджетом

Click (📱Tap)
Клик или тап по определенному виджету

Scroll
Скролл страницы вверх или вниз

События, активирующие Shots, задаются отдельно для десктопной и мобильной версии. Подробнее про работу Shots можно прочитать в разделе Help.

Регистрируйтесь в Readymag и создавайте интерактивный дизайн прямо в браузере.

Скоро вас ждут и другие обновления! Чтобы ничего не пропустить, подписывайтесь на нашу русскоязычную рассылку.

Галереи в режиме Lightbox, готовые секвенции для Shots

2021-11-11T14:42:14.609Z

У нас два небольших, но приятных апдейта.

С помощью виджета Shots можно быстро создать анимацию по скроллу — из видеофайла или набора статичных изображений. Благодаря нашему партнеру Wannathis, в Shots теперь есть коллекция готовых секвенций. Подробнее про Shots можно узнать в разделе Help (на русском языке).

Режим Lightbox теперь позволяет посмотреть все изображения со страницы в одной галерее (ее можно листать стрелками) — раньше каждую картинку нужно было открывать отдельно. Узнать больше про Lightbox можно в разделе Help (на русском языке).

Регистрируйтесь в Readymag, создавайте собственные проекты и экспериментируйте с типографикой.

Выбор, ресайз, снэп — теперь еще удобнее

2021-11-02T11:51:16.931Z

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

Селект

Раньше виджеты внутри группы можно было выбрать двойным кликом. Мы сохранили эту механику, но добавили еще одну, более удобную: наведите курсор на виджет удерживая Cmd / Ctrl, чтобы увидеть его рамку — и выберите его одним кликом.

Выбор виджета с зажатым Cmd / Ctrl

Удерживая Shift + Cmd / Ctrl можно выбрать несколько виджетов — вне зависимости от того, сгруппированы они или нет.

Выбор нескольких виджетов с зажатыми Shift + Cmd / Ctrl

На рамке выбранного виджета теперь восемь точек для ресайза — чтобы можно было менять размер в любом направлении. Рамка скрывается, когда вы передвигаете виджет с помощью стрелок на клавиатуре или меняете его размер с помощью стрелок и зажатого Cmd / Ctrl. В виджетах мельче 15 x 15px точка для ресайза только одна, и показывается она только при наведении.

Бандл-драг

Чтобы добавить виджет в середину сверстанного макета, приходится двигать остальные объекты — вручную это может занять довольно много времени. К счастью, у нас есть фича под названием бандл-драг.

Бандл-драг по отдельному виджету

Раньше бандл-драг работал только с отдельными виджетами, а теперь его можно использовать и с группами.

Бандл-драг по группе виджетов

Треугольный контрол для бандл-драга стал компактнее, а для виджетов мельче 15 x 15px он отображается только при наведении.

Снэп

Снэп помогает выровнять виджет относительно направляющих и других виджетов, эту фичу можно включить на вкладке Grids & Guides. С новым апдейтом снэпить стало намного удобнее — теперь выбранный виджет выравнивается относительно соседей по обеим координатным осям, элементы с другого конца макета вам больше не помешают.

Снэппинг одного виджета к другому

Направляющие и сетка

Когда вам нужно задать колонки для макета, вы обращаетесь к направляющим. Теперь ширину колонки можно задать в пикселях, независимо от ширины макета.

Сетка (вроде той, что была в тетради по математике) — еще один инструмент для выравнивания графики. Теперь при ресайзе с зажатой клавишей Shift виджет будет выравниваться по сетке (если она включена).

Задаем ширину колонки

Фиксированная позиция

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

Регистрируйтесь в Readymag, создавайте собственные проекты и экспериментируйте с типографикой.

Почему дизайнерам стоит соревноваться друг с другом: что думает победитель конкурса Readymag Projects of the Year 2020

2021-10-21T15:26:29.607Z

Накануне голосования за финалистов конкурса Projects of the Year мы поговорили с одним из победителей прошлого года, арт-директором из Бразилии Андре Меццомо. Он поделился размышлениями о том, как победа повлияла на социальную миссию его проекта MyLinkIsYourLink и чем профессиональные конкурсы могут быть полезны для дизайнеров.

Как превратить социальный проект в вирусный

MyLinkIsYourLink — сайд-проект, который создали три моих друга (The Rock, Bb и Marcolino — люблю вас), пытаясь помочь знакомым и коллегам из креативных индустрий, оставшимся без работы из-за пандемии. Проект дал голос профессионалам, которые были в поисках работы — с помощью простого HTML-кода.

https://mylinkisyourlink.cc/

Я работаю арт-директром больше 13 лет и специализируюсь на рекламе — но этот проект произвел эффект больший, чем любая другая моя работа. Когда я узнал, что номинирован на Projects of the Year, я расшарил пост Readymag со списком финалистов у себя в инстаграме и попросил всех, кто участвует в MyLinkIsYourLink (всех, кто помогал и кто нуждался в помощи) поддержать проект, проголосовав за нас.

Приятно: Легендарный дизайнер Штефан Загмайстер тоже поделился проектом у себя в инстаграме. ❤

Во время финального голосования и после победы трафик сайта скакнул — а еще про нас написали несколько очень классных медиа, вроде Adweek, Shots и Directory. Благодаря этому о проекте узнали больше людей, многие из которых стали участниками нашей инициативы. И мы помогли очень многим — ссылки у себя на сайтах разместили люди из более чем 90 стран! К счастью, сейчас в MLIYL нет необходимости. Но если однажды она снова возникнет — мы будем рады помочь.

Побеждать всегда здорово — но победа на Projects of the Year, где мы соперничали с другими сильными проектами, стала для нас важным признанием заслуг: похоже, мы сделали что-то действительно значимое для всей индустрии. Я не раз получал награды за рекламу и креатив — и, все же, награда за дизайн-решение ощущается иначе, хотя суть ее все в том же: делай то, во что действительно веришь, что, по-твоему, может увлечь других, и признание не заставит себя ждать.

По-моему, есть несколько причин, по которым премии имеют значение для креативной индустрии:

Сила креативности

Вдохновение: Работы на конкурсах — всегда хороший источник вдохновения. Из них можно понять, что именно сегодня считается актуальным и прорывным — а в творческих индустриях всегда важно держать руку на пульсе.

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

Делимся креативностью: Я верю, что творческий подход обладает вирусной природой. Чем больше люди смотрят на творчество, тем больше они создают. Это бесконечный круг, который делает наш мир интереснее — и в конце концов, помогает отыскать креативные решения новых проблем.

Прочитать оригинал этого материала на английском можно здесь.

Создать свой первый проект на Readymag бесплатно — здесь.

Личный опыт: как я запустила собственную студию дизайна во время пандемии

2021-10-01T11:19:13.894Z

Ханна Спрингетт — британская дизайнерка и бизнесвумен: она читает лекции по визуальному сторителлингу в колледже Condé Nast и руководит собственной компанией HanSpringett Ltd. Мы расспросили Ханну о том, как ей удалось основать дизайн-агентство во время пандемии и какую роль в этом сыграл Readymag.

Предпочитаю эдиториалы и интерактивный дизайн

Меня всегда очень интересовал дизайн редакторских материалов, поэтому во время учебы в Кингстонском университете Лондона я стала креативным директором студенческого журнала. Но по-настоящему интерактивный дизайн я полюбила после двухдневного воркшопа по Флэшу, который проводили у нас в университете. (Flash — технология анимации, которую широко использовали в веб-дизайне примерно до 2010 года. Помимо визуального редактора, проекты на Flash делались с помощью языка программирования ActionScript. В 2021 году компания Adobe прекратила поддержку Flash — прим. переводчика)

Работать во Флэше было прикольно, мне понравился принцип drag-and-drop, который позволял общаться с конечным пользователем в более свободной манере. Я начала скачивать разнообразные флэш-шаблоны и верстать небольшие сайты-портфолио, из которых в итоге вырос мой выпускной проект в Кингстоне — это был интерактивный тачскрин, демонстрирующий экспериментальную фэшн-коллекцию.

Как я стала владелицей агентства

Проработав несколько лет в лондонском агентстве (где я в основном создавала интерактивные журналы с помощью плагинов Индизайна), я уехала в Нью-Йорк, чтобы работать диджитал-дизайнером в Ceros. Сложный интерактивный дизайн без помощи кода я стала делать именно в Америке. В конце концов я вернулась в Великобританию и обосновалась в крупном агентстве, где применила новые навыки в работе с клиентами. Именно там я приобрела бесценный опыт и встретила множество невероятных профессионалов — с некоторыми из них я работаю до сих пор.

В прошлом году, перед самой пандемией, я решила пойти на риск и попробовать поработать на себя. Как ни странно, мой проект быстро масштабировался, и теперь у меня есть небольшая команда, с которой мы все и создаем. Я думаю, мне все удалось, потому что мы заняли свободную нишу диджитал-дизайна без кода, всегда мыслили историями и хорошо делали свою работу.

На карантине с Readymag

Мой первый проект на Readymag назывался Creative Colabs — это некоммерческая площадка, призванная поддержать фрилансеров и малый бизнес, во время из-за локдауна.

creativecolabs.co.uk

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

Аудиторию Creative Colabs мы просили делиться интересными историями, из которых могли бы получиться сайты. Мы поддерживали кейтеринг-компании, художников, фотографов, стартапы и создателей подкастов.

Вдохновением для Isolation Creation Club послужило чужое творчество во время локдауна. Я узнала про двух юных дизайнерок, которые сделали раскраску про COVID-19, пока находились на домашнем обучении: спросила у них, можно ли перевести эту замечательную книжку в интерактивный формат, и при поддержке их отца — сотрудника Waste Studio — мы выпустили сайт-коллаборацию.

isolationcreation.club

Весь проект сделан на Readymag, с помощью его главных фич — там классные ховеры, геймификации, статьи сделанные совместно с иллюстраторами, и анимации, которые за такое короткое время нельзя было бы сделать ни на одной другой платформе. Readymag подошел идеально. Мы сделали все за две недели — а потом нас даже упомянули на радио BBC и в журнале Time Out.

Дизайн со смыслом

Я всегда подхожу к дизайну с коммерческой точки зрения — так я расту как бизнесвумен, а еще даю своим клиентам реально работающие инструменты.

Моим первым клиентом был Argos, крупный британский магазин товаров для дома. Ничего глянцевого в этой работе не было, зато наш журнал приносил магазину дополнительных клиентов — благодаря идеально точному таргетированию материалов. Эта тактика пришлась мне по душе, поэтому теперь я всегда стараюсь сначала понять задачу клиента — и уже от нее выстраивать дизайн.

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

Советы по типографике и анимации

Типографика невероятно важна в дизайне лонгридов и оказывает огромное влияние на поведение пользователей на странице. Когда мы внедряли Readymag как инструмент для колледжа Condé Nast , то прежде всего размечали типографическую иерархию.

Хотя у каждого дизайнера свои предпочтения, я в основном пользуюсь лаконичными, современными гротесками. Когда лень подбирать шрифт, возьмите Helvetica Bold и Helvetica Light — так говорили мои преподаватели, и они во многом правы!

Тем не менее, шрифт может быть любым. Следите за тем, как сочетается трекинг, кернинг и контраст — если все в гармонии, то вы сделали правильный выбор.

Очень важно не перегружать пользователя избыточным движением на странице — поэтому чаще всего мы анимируем по скроллу. Анимацией выделяются избранные цитаты или цифры, в основном наборе мы ее не используем.

gradshowcase2020.condenastcollege.ac.uk

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

Любой дизайн должен учитывать тематику контента, особенно если в дело вступает анимация — иначе можно сделать что-то очень неудобное или похожее на презентацию PowerPoint из начала 2000-х!

Совет начинающим дизайнерам

Профессия дизайнера прекрасна тем, что в ней не обязательно следовать заранее понятному карьерному маршруту. Креативные индустрии — очень разнообразный и подвижный ландшафт, через который каждый пробирается по-своему. А когда найдете свою нишу — работайте бескомпромиссно и прислушивайтесь к своим желаниям.

Делайте то, что делает вас счастливыми — и не останавливайтесь.

Прочитать оригинал этого материала на английском можно здесь.

Создать свой первый проект на Readymag бесплатно — здесь.

Исследуем цвет: четыре упражнения от дизайн-преподавателей + список фильмов

2021-07-14T14:37:50.116Z

Способность различать оттенки цвета — это мускул. Начните его тренировать, и вы заметите, что в мире гораздо больше цветов, чем вы видели изначально. В этом материале дизайн-преподаватели делятся упражнениями, которые помогают «расширить угол зрения» и научиться лучше видеть цветовые нюансы.

Рисуйте акварелью

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

«Если вы попросите английскую компанию прислать вам на пробу набор красок, в нем будет три оттенка зеленого, а в наборе японской компании — сотня. Но для полноценной работы мало даже этого! Если я вижу, что дизайнер, с которым я сотрудничаю, листает цветовой справочник Pantone в поисках правильного оттенка зеленого, я отправляю его в ближайший парк с коробкой акварели. Потому что в парке миллионы оттенков зелени, а в справочнике — всего десять», — объясняет он.

Ходите на выставки

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

Напишите эссе

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

Отправьтесь на прогулку

«Также я могу отправить студентов в пешее путешествие, которое конституируется условиями задачи: нужно, например, искать в городе присутствие какого-то конкретного цвета и идти по его следам — так, чтобы эти следы складывались в связную историю», — добавляет Пащенко.

Напоследок — вот список художественных фильмов, в которых мастерски используется цвет:

«Кабинет доктора Калигари» — Роберт Вине, 1920
«Метрополис» — Фриц Ланг, 1927
«Третий человек» — Кэрол Рид, 1949
«Леопард» — Лукино Висконти, 1963
«Космическая одиссея» — Стэнли Кубрик, 1968
«Бегущий по лезвию» — Ридли Скотт, 1982
«Повар, вор, его жена и ее любовник» — Питер Гринуэй, 1989
«Орландо» — Салли Поттер, 1992
«Русский ковчег» — Александр Сокуров, 2002
«Город грехов» — Роберт Родригес, Фрэнк Миллер, 2005
«Отель Гранд Будапешт» — Уэс Андерсон, 2014
«Фарго» (сериал) — Ноа Хоули, 2014

Прочитать оригинал этого материала на английском можно здесь.

Создать свой первый проект на Readymag бесплатно — здесь.

Больше размышлений о работе с цветом от выдающихся современных дизайнеров — в Альманахе Readymag.

Сделайте свой сайт на Readymag более доступным

2021-07-07T16:03:27.001Z

На ваш сайт могут зайти самые разные посетители — в том числе, пользователи с медленным интернет-соединением, пожилые и слабовидящие люди. Доступность (accessibility) — это то, насколько пользователям с различными потребностями комфортно взаимодействовать с проектом. Наш чек-лист поможет в создании доступного сайта.

Обратите внимание, что некоторые настройки, связанные с доступностью, по умолчанию присутствуют в Readymag — например, в формах нельзя скрывать заголовки полей.

Изображения

Для всех изображений прописан альтернативный текст

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

Чтобы добавить alt text к изображению, нажмите кнопку Semantics в настройках виджета и введите нужный текст во всплывающем окне. Если альтернативный текст прописан, при наведении курсора на изображение в режиме предпросмотра вы увидите желтое поле с текстом.

Добавьте описание

Текст

Заголовки расставлены в правильном порядке

Иерархия заголовков должна соответствовать логике документа. Например, тег <h3> описывает заголовок подсекции внутри <h2> — таким образом, тегу <h3> всегда должен предшествовать тег <h2>.

Чтобы изменить стиль текста, выберите нужный фрагмент и перейдите в раздел «стили» (Styles) в меню справа. Кликните на стрелку вниз возле названия стиля, чтобы изменить размер шрифта, цвет, высоту строки, выравнивание, межстрочный интервал, а также задать отступы.

Добавьте описание

Текст не вставлен картинкой

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

Цвета

Между виджетами и фоном достаточный контраст

Некоторые цвета и цветовые сочетания могут запутать посетителей с дальтонизмом. Для проверки используйте Webaim.org — набор инструментов для измерения контрастности. Также убедитесь, что цвет — не единственное средство передачи информации (избегайте, например, таких инструкций: «выберите красный кружок, чтобы продолжить»).

Также вы можете использовать функцию Lightbox — если она включена, при клике на картинку изображение будет выделено, а фон затемнен. Чтобы включить Lightbox, воспользуйтесь настройками виджета. Там же можно настроить цвет фона и его прозрачность.

Добавьте описание

Анимация

Анимация не мерцает слишком интенсивно

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

Ссылки

По ссылке понятно, куда она ведет

Убедитесь, что заголовки ваших внутренних страниц — емкие и ясные. Это помогает людям, использующим скринридеры, понять, куда они перейдут по клику. Заголовки страниц в Readymag можно изменить в настройках проекта.

Все ссылки на документы указывают на тип и размер документа

Если вы ссылаетесь на документ, убедитесь, что указан тип документа (DOC или PDF) и размер файла.

Люди, которые по тем или иным причинам не могут использовать мышку, часто перемещаются по сайтам с помощью клавиш-стрелок или вспомогательных технологий (например, навигации с голосовым управлением). Убедитесь, что при таком способе перемещения ваш проект не перестает быть логичным и понятным.

Прочитать оригинал этого материала на английском можно здесь.

Посмотреть самые вдохновляющие проекты, сделанные в Readymag — здесь.

Создать свой первый проект на Readymag бесплатно — здесь.

Readymag

Гибкий Хотспот

Кастомный курсор: теперь без кода и для каждого виджета

Специальное упоминание: еще три вдохновляющих проекта из 2021

Workincontext

Genocide.greatarmenia

Портфолио Джонаса Маджиди

Новый интерактивный режим, новые способы активации Shots

Галереи в режиме Lightbox, готовые секвенции для Shots

Выбор, ресайз, снэп — теперь еще удобнее

Селект

Бандл-драг

Снэп

Направляющие и сетка

Фиксированная позиция

Почему дизайнерам стоит соревноваться друг с другом: что думает победитель конкурса Readymag Projects of the Year 2020

Как превратить социальный проект в вирусный

Сила креативности

Личный опыт: как я запустила собственную студию дизайна во время пандемии

Предпочитаю эдиториалы и интерактивный дизайн

Как я стала владелицей агентства

На карантине с Readymag

Дизайн со смыслом

Советы по типографике и анимации

Совет начинающим дизайнерам

Исследуем цвет: четыре упражнения от дизайн-преподавателей + список фильмов

Рисуйте акварелью

Ходите на выставки

Напишите эссе

Отправьтесь на прогулку

Сделайте свой сайт на Readymag более доступным

Изображения

Для всех изображений прописан альтернативный текст

Текст

Заголовки расставлены в правильном порядке

Текст не вставлен картинкой

Цвета

Между виджетами и фоном достаточный контраст

Анимация

Анимация не мерцает слишком интенсивно

Ссылки

По ссылке понятно, куда она ведет

Все ссылки на документы указывают на тип и размер документа

Навигация

По сайту можно перемещаться с помощью клавиатуры