?

Log in

No account? Create an account

nobelfaik


Блог Игоря Штанга

light gray is the new white, dark gray is the new black


Previous Entry Поделиться Next Entry
Переверстка №11. Тарифы «Контур-Бухгалтерии»: конкурс
nobelfaik
На московском курсе переверстывали вот такую таблицу:



Таблица оказалось непростой и вызвала много разногласий. Предлагаю читателям журнала переверстать ее самостоятельно и прикрепить свой вариант комментарием к этой записи. Комментарии будут скрыты до 2 июля включительно. 3 июля мы начнем обсуждение. Я разберу каждую работу, выделю ошибки и удачные приемы. Еще через неделю, 10 июля, опубликую пост с результатами и расскажу о том, как переверстал сам.

Авторы лучших таблиц получат в подарок блокнот с грифоном.

Источник: http://www.kontur-online.ru/blog/novyie-tarifyi-stali-deshevle.html
В набранном виде: https://docs.google.com/spreadsheets/d/1DimBF_ZpPvVxIDfMsadEfoiKvs7U-r7EjhDaJjlM1lo/edit?usp=sharing

Апдейт: Всем спасибо за участие, получилось здорово! Прокомментировал 28 таблиц и выбрал двух победителей. Блокноты с грифоном достаются Евгению Решетневу и Роману Гладенко (напишите мне вконтакте или на почту). Вот их варианты.

Евгений Решетнев:
i_want_a_griffon.png

Роман Гладенко:


Моя переверстка через неделю.

Записи из этого журнала по тегу «конкурс»


попытка переверстки

Вот такая попытка от архитектора:

https://pp.vk.me/c633520/v633520426/34458/HxRAfpH55yY.jpg


1. Пропала «горизонтальность» исходной таблицы. Теперь хочется читать по столбцам, а не по строкам, что не соответствует содержанию.
2. Первый столбец не считывается как одно предложение, несмотря на грамматику.
3. Перед ценами дырка.
4. На группы разбивают числа от пяти знаков.

+
1. Заголовок раскрывает содержание, наконец-то) Можно короче.
2. Сортировка по учету ок.
3. Избавились от слова «подготовка» (отчетности).
4. Стало аккуратнее, но существенных изменений нет.

Нарушил все правила, которые смог.

38.jpg

Плохая идея превращать прографку в бинарный код. Сами по себе кружки ни о чем не говорят, приходится постоянно возвращаться к подписям. Всё усложнилось, очень трудно расшифровывать этот ребус. Местами структара ломается. Например, подпись «Проверка контрагентов» залезает на столбец «ФСС». Потерялась «Бухгалтерия+».

Edited at 2016-07-03 12:26 (UTC)

Что-то пошло не так) Загрузите картинку снова или дайте ссылку на файлообменник.

Вариант переверстки по ссылке:
https://www.dropbox.com/s/xz7keds1wm03895/Pereverstka_severtsova.jpg?dl=0

Отказалась от колонок «Бухгалтерия» и «Зарплата», т.к особого смысла в них нет, специалисту достаточно будет описания тарифного функционала. Также отказалась от разделения на базовый и дополнительный функционалы, т.к в данном случае это не влияет на ценообразование, поэтому объединила их в одну колонку.

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

В первом варианте я попробовал «вынести за скобки» эти галочки и разделить таблицу на три. Получилось менее компактно, но все не так сваливается в кучу. Добавил также процент экономии при оплате за год и сразу видно, что можно сэкономить 25% и больше.
https://dl.dropboxusercontent.com/u/16123327/%D0%9D%D0%A2-1-02.png

Потом я захотел вообще уйти от таблицы как таковой и добавить тект о пользе простых тарифов (для кого они подходят прежде всего). На сайте Контура под таблицей написано вкратце, какой тариф для чего. Стоит эту информацию дать сразу возле описания тарифа.
https://dl.dropboxusercontent.com/u/16123327/%D0%9D%D0%A2-1-04.png

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


1. Нет заголовка.
2. Кажется, что это две таблицы, а не одна. Слишком большой отступ получился.
3. Слово «Тариф» и линейки убираем.
4. «г.» и «кв-л» лучше написать без сокращений и вынести за скобки. Как и знак рубля.

+
1. Объединили все базовые функции в один столбец. Туда же надо было добавить и доп. функции.
2. Переписали текст по-человечески.

По-моему, нужно делать каждый пункт самодостаточным. И повторения тут никак не вредят.


1. Заголовок не раскрывает содержания. Наши — чьи? Тарифы на что?
2. Убираем линейки и буллиты.
3. «₽ за квартал» и «₽ за год» выносим за скобки.
4. Цвет можно использовать со смыслом.

+
1. Объединили все базовые и дополнительные функции в один столбец.
2. Получилось просто и аккуратно.

Спасибо за возможность попрактиковаться и получить обратную связь.


1. Галочки сами по себе ни о чем не говорят, приходится постоянно возвращаться к боковику.
2. Не сразу понятно, что «в пенсионку и соцстрах» — продолжение верхнего текста. Надо это разрулить.
3. Массивная трехэтажная шапка.
4. Потерялись цены за квартал.
5. Много цвета.
6. Перебор с плашками.

+
1. Перевернули таблицу.
2. Объединили заголовок и шапку.
3. Расшифровали аббревиатуры!
4. Добавили иконки.


1. Заголовок не раскрывает содержания.
2. Галочки сами по себе ни о чем не говорят, приходится постоянно возвращаться к боковику.
3. Зря разгруппировали функции, теперь в боковике всё одной батареей.
4. «Отправка» чего?
5. На разряды разбивают числа от пяти знаков.

+
1. Стало чище и аккуратнее, но в ущерб смыслу.
2. Сразу видно, какие тарифы круче, но непросто разобраться, чем именно круче.

Переверстка таблицы

Доброго времени суток!

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

https://cloud.mail.ru/public/N4Bw/Vo5SKbako

Заранее большое спасибо!


1. Заголовок не раскрывает содержания. Наши — чьи? Тарифы на что?
2. Шапку можно убрать полностью.
3. Сомнительная цветовая связь между подзаголовками и первыми двумя функциями.
4. Подготовка и оправка чего?
5. У таблицы не закрыт правый край и поэтому она получилась непрямоугольной. Это плохо, потому что а) смотрится неаккуратно, б) такую таблицу сложно заверстать на макете и состыковать с другими элементами.
6. На группы разбивают числа от пяти знаков.

+
1. Объединили заголовок и шапку.
2. Вынесли часть информации в подзаголовки.
3. Удачно оформили функции.
4. Сверстали чисто и просто.

Edited at 2016-07-03 16:28 (UTC)

Комментирую последний вариант.


1. Сейчас серые плашки не несут никакого смысла, а можно было обозначить группы или выделить «особенные» тарифы.
2. Столбцы цен нужно сгруппировать.
3. Линейка над примечанием лишняя.
4. Смысл красной иконки остался для меня непонятен, как и зеленый цвет цен.

+
1. Информативный заголовок.
2. Функции собраны в один блок, но лучше разбить их на строки, а не верстать в подбор.
3. Простое и аккуратное решение.

Edited at 2016-07-03 16:41 (UTC)