Игорь Штанг (nobelfaik) wrote,
Игорь Штанг
nobelfaik

Переверстка №16. Инструкция голографического стола

Дарья пишет: Нужно было сделать короткий вариант инструкции для пользователей, в основном это девелоперы в офисах продаж.

О самом продукте: nettlebox.ru Для просмотра используются 3D-очки, по которым система отслеживает положение пользователя относительно экрана. На основе данных о положении зрителя система рассчитывает проекцию на плоскость экрана. Это похоже на рисунки на асфальте, которые выглядят объемными с определенного ракурса, только здесь проекция всё время перестраиваются относительно положения глаз.





Для начала помою окно — сотру линейки и плашки, чтобы проблемам некуда было спрятаться. Нумерация рисунков не нужна. В тексте есть только одна ссылка на рисунок, заменю ее ссылкой на пункт (выделил желтым):




Теперь хорошо видно, что:

  1. На левой странице колонка постоянно меняет ширину и вторгается на территорию другой колонки. Нельзя просто так взять и залезть одной колонкой на другую. Это неаккуратно и немодульно.

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




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




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




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

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




Выделяю цифры:




Если вы зануда и считаете, что растягивать стол на два пункта нелогично, вот вам другое решение:




Мне кажется, я передизайнил блок с телефоном и почтой. Надо быть проще:




Выровняю отступы над и под линейками. Поменяю начертание основного текста с light на regular. Обратите внимание, что я собрал побольше воздуха под заголовками «Настройка» и «Устранение неполадок» вместо того, чтобы равномерно размазывать этот воздух по макету:




Было и стало:

Инструкция голографического стола


ПС: Кириллица у шрифта Мириад не очень, да.

См. также: Переверстка №9. Инфографика для YouMagic

Присылайте макеты на переверстку. Описание и правила рубрики
Tags: верстка, знаю как, инструкция, линейка, переверстка, процесс
Subscribe

Posts from This Journal “переверстка” Tag

  • Переверстка №31. Подписка на Cover Commander

    Nail пишет: Посмотрел ваше видео про стирание линеек, полез на ваш сайт и заинтересовался рубрикой «Переверстка». Специального…

  • Мастер-класс по стиранию линеек

    Переверстываю пять макетов в режиме реального времени. 0:01:18 — Вступление 0:03:40 — Таблица «Допустимое рабочее…

  • Переверстка страницы FAQ

    Дизайнер Дженсон Камби рассказал о переделке сайта The New Yorker Festival и в частности о том, как поменялась страница FAQ. Было и стало:…

  • Post a new comment

    Error

    default userpic

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 4 comments