1. Если бы каждая редакция потратила два часа на продумывание дерева будущего сайта до того, как прийти к разработчикам, это сэкономило бы много времени и дизайнерам, и редакции.


2. Различайте два типа онлайн-изданий: журнал (пример — The Village) и газета (The Guardian).


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


4. Существуют разные подходы к управлению контентом главной страницы: можно дать редакции возможность самостоятельно формировать вёрстку (но это требует наличия редакционного дизайнера и соответствующего интерфейса), можно формировать главную автоматически, а можно комбинировать подходы в разных блоках макета.


5. Charmer выделяют три условных типа макетов главных страниц изданий: этажи смысловых блоков (пример — The Guardian), конструктор по сетке (гибкий вариант, когда минимальные условные единицы могут объединяться и трансформироваться, пример — Meduza) и «олдскульный» поток (страница плиточно заполняется контентом).

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


7. Если материалы сменяются медленно, то на первом экране стоит сделать один самый важный акцент. Широкий фичер с иллюстрацией под шапкой, например.


8. В онлайн-газетах отлично работает гибкое формирование картины дня на первом экране.


9. Ресурсы, у которых сейчас можно поучиться: Vox, Sientific Magazine, The Quartz, The Outline, The Guardian.


10. В онлайнах важно не забывать выделять ключевые новости.

11. Как правило, Charmer запускают обновлённые сайты в три этапа. Первый: бета-версия на поддомене с основным функционалом (главная и технические страницы, агрегация контента, статьи), на этом этапе редакция учится работать с новым сайтом. Второй этап: добавление важного для пользователей функционала (авторизация, комментарии). Третий: полная версия с дополнительными форматами (онлайны, тесты, опросы, и так далее).


12. Для читателей запуск выглядит так: сначала появление анонса и объяснительного лендинга, потом баннер на основном сайте с предложением попробовать новую бету-версию (тут важно не забыть сделать объясняющие подсказки, если что-то работает не так, как на предыдущем), потом дублирование контента в двух версиях и переход на новую с сохранением ссылки на старый сайт.


13. Обвесы-врезки в статьях (картина дня, топ 5 материалов, мультимедиа) увеличивают глубину просмотра сайта.


14. Читайте The Guardian Developer Blog.


15. Методом проб и ошибок студия пришла к 5-пиксельный модульной кратности в макете, когда размер элементов и отступов делится на 5. Шрифтов это не касается. Будьте осторожны, процесс затягивает.

16. Удобны макеты на 12 или 16 колонок. Только вот вопрос: если межколонник равен ширине колонки, то это 12-колоночный или 23-колоночный макет?


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


18. Вам должно хватить 4 типов заголовков. У студии это часто заголовки в 60, 45, 27, 21 пикселей.


19. Оптимальный шрифт текста статьи — 17 по высоте и 25 межстрочный интервал.


20. Погуглите, что такое антиалиасинг, это очень важно для чистоты макета.

21. Хинтинг не менее важен.


22. Полезно продумать и отрисовать все сущности и вариации типов контента заранее.


23. Заканчивать проект стайлгайдом — правило хорошего тона.


24. Студии Area 17 разработала свой дизайн-гид, с ним полезно познакомиться.


25. Отрисовывать по 10 макетов десктопа — бессмысленная трата времени, хватит 2 макетов с брейкпоинтами на 1280 и 1600.