Переверстка №16. Инструкция голографического стола
Дарья пишет: Нужно было сделать короткий вариант инструкции для пользователей, в основном это девелоперы в офисах продаж.
О самом продукте: nettlebox.ru Для просмотра используются 3D-очки, по которым система отслеживает положение пользователя относительно экрана. На основе данных о положении зрителя система рассчитывает проекцию на плоскость экрана. Это похоже на рисунки на асфальте, которые выглядят объемными с определенного ракурса, только здесь проекция всё время перестраиваются относительно положения глаз.
Для начала помою окно - сотру линейки и плашки, чтобы проблемам некуда было спрятаться. Нумерация рисунков не нужна. В тексте есть только одна ссылка на рисунок, заменю ее ссылкой на пункт (выделил желтым):
Теперь хорошо видно, что:
Начнем с самого простого решения - пусть у всех четырех шагов будет одинаковая конструкция: заголовок, текст, картинка. Выноски «Проверка» и «Важно» стали частью основного текста:
То же самое в два столбца. Текст здесь первичен, поэтому иллюстрации под ним: сначала читаем, потом смотрим на картинку. Прекрасное решение, вот только у второго пункта нет иллюстрации. «Устранение неполадок» тоже в два столбца. Выглядит хорошо, но остается слишком много пустого места:
Если заголовок «Инструкция» заменить на «Настройка», он встанет в один ряд с «Устранением неполадок»: теперь это заголовки одного уровня. Набираю их крупно и светлым шрифтом. Пункт про «Выключение голографического стола» - внизу под шагами.
Чтобы занять больше места на правой странице, выношу заголовки в отдельную колонку. Расставляю акценты в тексте про техническую поддержку: телефон и почту крупно, остальное мелким шрифтом:
Выделяю цифры:
Если вы зануда и считаете, что растягивать стол на два пункта нелогично, вот вам другое решение:
Мне кажется, я передизайнил блок с телефоном и почтой. Надо быть проще:
Выровняю отступы над и под линейками. Поменяю начертание основного текста с light на regular. Обратите внимание, что я собрал побольше воздуха под заголовками «Настройка» и «Устранение неполадок» вместо того, чтобы равномерно размазывать этот воздух по макету:
Было и стало:
ПС: Кириллица у шрифта Мириад не очень, да.
См. также: Переверстка №9. Инфографика для YouMagic
Присылайте макеты на переверстку. Описание и правила рубрики
О самом продукте: nettlebox.ru Для просмотра используются 3D-очки, по которым система отслеживает положение пользователя относительно экрана. На основе данных о положении зрителя система рассчитывает проекцию на плоскость экрана. Это похоже на рисунки на асфальте, которые выглядят объемными с определенного ракурса, только здесь проекция всё время перестраиваются относительно положения глаз.
Для начала помою окно - сотру линейки и плашки, чтобы проблемам некуда было спрятаться. Нумерация рисунков не нужна. В тексте есть только одна ссылка на рисунок, заменю ее ссылкой на пункт (выделил желтым):
Теперь хорошо видно, что:
- На левой странице колонка постоянно меняет ширину и вторгается на территорию другой колонки. Нельзя просто так взять и залезть одной колонкой на другую. Это неаккуратно и немодульно.
- На правой странице та же проблема с шириной колонки, но особенно бросаются в глаза беспорядочные отступы. Текст искусственно растянут в высоту.
Начнем с самого простого решения - пусть у всех четырех шагов будет одинаковая конструкция: заголовок, текст, картинка. Выноски «Проверка» и «Важно» стали частью основного текста:
То же самое в два столбца. Текст здесь первичен, поэтому иллюстрации под ним: сначала читаем, потом смотрим на картинку. Прекрасное решение, вот только у второго пункта нет иллюстрации. «Устранение неполадок» тоже в два столбца. Выглядит хорошо, но остается слишком много пустого места:
Если заголовок «Инструкция» заменить на «Настройка», он встанет в один ряд с «Устранением неполадок»: теперь это заголовки одного уровня. Набираю их крупно и светлым шрифтом. Пункт про «Выключение голографического стола» - внизу под шагами.
Чтобы занять больше места на правой странице, выношу заголовки в отдельную колонку. Расставляю акценты в тексте про техническую поддержку: телефон и почту крупно, остальное мелким шрифтом:
Выделяю цифры:
Если вы зануда и считаете, что растягивать стол на два пункта нелогично, вот вам другое решение:
Мне кажется, я передизайнил блок с телефоном и почтой. Надо быть проще:
Выровняю отступы над и под линейками. Поменяю начертание основного текста с light на regular. Обратите внимание, что я собрал побольше воздуха под заголовками «Настройка» и «Устранение неполадок» вместо того, чтобы равномерно размазывать этот воздух по макету:
Было и стало:
ПС: Кириллица у шрифта Мириад не очень, да.
См. также: Переверстка №9. Инфографика для YouMagic
Присылайте макеты на переверстку. Описание и правила рубрики