nobelfaik


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

Доктор, мой макет не дышит!


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

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


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

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


ну чо уж так-то совсем, положили в индизайне бы?


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

+
1. Хорошо, что перевернули таблицу, но других принципиальных изменений нет.

Мой вариант переверстки. Прикрепить картинку не вышло, поэтому ссылка:
http://joxi.ru/LmG3YOnhREWDRm

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

Мой вариант:

На странице источника по тексту нашлись ещё данные, которые можно также поместить в таблицу:



1. Нет заголовка.
2. Таблица растянута по горизонтали, можно компактнее.
3. Иконки в кружках непонятны сами по себе, приходится постоянно возвращаться к шапке или примечанию под таблицей.
4. Шапка массивная, многословная и разваливается. Текст в ячейках нужно выровнять по верху, а не по низу.
5. Боковик по левому краю, а не по правому.
6. Перебор с цветами, линейками и плашками. Не понял, что значит светло-желтое выделение под «Бухгалтерией», «Бухгалтерией+» и «Зарплатой+».
7. Скорее усложнили, чем упростили)

+
1. Хорошо, что нашли и добавили новые функции.

Edited at 2016-07-03 09:56 (UTC)

Мой вариант решения =)

(Анонимно)
У меня получилось так:
https://www.dropbox.com/s/k0mmob4bs8zxtka/table.png?dl=0
Я старался упростить таблицу и в тоже время сохранить главную функцию — сравнение тарифов =)

(Анонимно)
Попробовал упростить таблицу, как можно больше. Возможно это и не идеальное решение, но на мой субъективный взгляд, читать её стало проще.

https://www.dropbox.com/s/zyl1tipypo07o4f/accountant_table.jpg?dl=0

Спасибо за интересное задание.

Дмитрий


1. Нет заголовка.
2. Кружки непонятны сами по себе, приходится постоянно возвращаться к шапке.
3. Текст в шапке нужно выровнять по верху, а не по низу. В прографке — тоже по верху, а не по центру.
4. «(Подготовка и отправка)» перевыделены: мелкий кегль + серый цвет + скобки.
5. На группы разбирают числа от пяти знаков.
6. Кажется, крупный кегль еще и зажирнен.

+
1. Поаккуратней, чем исходный вариант, но принципиальных изменений нет.

Извините, не разобрался, отправился мой комментарий или нет. Дублирую на всякий случай:

Наши тарифы


1. Заголовок не раскрывает содержания. Наши — чьи? Тарифы на что?
2. Странно, что названия тарифов оказались в середине таблицы.
3. Можно подумать, что «Стандарт» — с подготовкой отчетности, «Комфорт» — с отправкой отчетности (но без подготовки), а «Люкс» — с фин. анализом и справочно-правовым модулем (но без подготовки и отправки отчетности). Это противоречие нужно устранить.
4. Текст не согласован грамматически: «с подготовкой ФНС» и рядом: «+ Отправка ФНС».
5. «Отправка этой отчетности» — слово «этой» лишнее. В примечании лишнее слово «функционал».
6. Плохо, что убрали проверку контрагентов в подвал.
7. На группы разбирают числа от пяти знаков.

+
1. Почти избавились от шапки. «В год / В квартал» тоже можно убрать.
2. Рубли не повторяются в каждой ячейке.
3. Сверстали компактно и аккуратно.

Edited at 2016-07-03 10:47 (UTC)


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

+
1. Хорошо, что объединили столбцы базового функционала. Надо было туда же перенести и доп. функционал.

Вариант когда таблица это селектор тарифного плана.





В нормальном разрешении https://www.dropbox.com/sh/7v39iqymv2fwd33/AAAdI_YGBlPEPR5vn4vmcY5Ea?dl=0



1. Заголовок не раскрывает содержания.
2. Можно обойтись без горизонтальных линеек и без точек в конце пунктов.
3. Слова «бухгалтерской» и «зарплатной» под соответствующими тарифами лишние.
4. На группы разбирают числа от пяти знаков.
5. Потерялся тариф «Комфорт».

+
1. Изящное решение для «Бухгалтерии+» и «Зарплаты+».
2. Грамотное использование цвета.
3. Очень аккуратно и чисто.

Что-то я не понял, как картинки прикладывать? Я только так: http://s48.radikal.ru/i119/1606/ed/6bb79334c8e8.jpg

Edited at 2016-06-29 08:27 (UTC)


1. Заголовок не раскрывает содержания. Я бы набрал его тем же кеглем, что и цены.
2. Боковик нужно убрать.
3. «Цена, ₽» не определилась по вертикали, «за квартал» тоже.
4. «Подготовка» хорошо сокращается.
5. Запятые в конце смотрятся странно, потому что пункты отделены друг от друга значительным расстоянием. Не похоже на предложение.

+
1. Хорошо, что таблица перевернута.
2. Удачно закрыт левый нижний угол, но что, если сносок не будет?
3. Цены рядом с названиями тарифов.
4. В целом аккуратно и чисто.

Edited at 2016-07-03 11:34 (UTC)

Заголовок убрал в шапку. Объединил базовый и доп. функционал. Выделил отчётность. Фиолетовым отметил доп. функции и отличия между обычными и плюс-пакетами. Цену за год и за квартал поменял местами



1. С первого взгляда непонятно, как читать таблицу, строками или столбцами. Горизонтальные и вертикальные связи примерно одинаковые. Хочется усилить «горизонтальность».
2. Странно, что заголовки (виды отчетности) оказались в середине таблицы.
3. Сложная пунктуация. Точки с запятой лишние. Возможно, и запятые тоже.
4. Из-за пунктуации одни строчки начинаются с большой буквы, другие с маленькой.
5. Сокращение «кв.» может быть непонятно.

+
1. «Заголовок убрал в шапку. Объединил базовый и доп. функционал. Выделил отчётность. Фиолетовым отметил доп. функции и отличия между обычными и плюс-пакетами. Цену за год и за квартал поменял местами» — это всё хорошо.
2. Компактно и аккуратно.


1. Заголовок не раскрывает содержания.
2. Выравнивание по центру сбивают с толку. Может показаться, что «ФНС, ПФР, ФСС» относятся только к «Комфорту», а не ко всем трем тарифам.
3. Плохо, что часть функций ушла в примечание. Теперь их легко не заметить.
4. От линеек лучше избавиться.
5. Непонятно, почему «Цена, ₽» выделена жирным.

+
1. Есть несколько мелких улучшений, но принципиальных отличий от исходной таблицы нет.

?

Log in

No account? Create an account