мая 14 2014
+7

Список страниц для разработки дизайна типового скина

aVadim    14 мая 2014, 12:36    в избранное в избранном    20 комментариев
Скины и шаблоны - принципы, концепции, стандарты   
Решил составить список страниц, которые необходимо разработать при создании нового дизайна для движка. Перечень получился, доложу я вам, неслабый, аж сам удивился. Делал я этот список не с нуля, когда-то давно LeX подобный списочек выкладывал. И я, опираясь на него, подготовил свой, с учетом всех изменений и дополнений, прошедших с того времени, ну и с учетом своего опыта, конечно.

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

И всех, кто имеет уже опыт разработки дизайна и/или проектирования интерфейса для сайтов на Альто, я приглашаю к обсуждению, и готов выслушать любые предложения по дополнению и изменению этого списка.
0000 – Главная страница
Дополнительные элементы и режимы
  1. Вид для неавторизованного пользователя (кнопки «Вход»/«Регистрация»)
  2. Вид для авторизованного пользователя
  3. Пользовательское меню
  4. Неактивная и активная входящих сообщений (с числом новых сообщений)
  5. Кнопка «Создать» и модальное окно «Создать» (черновик, топик, блог, категория, сообщение, событие, галерея, место, карту, новость)
  6. Сайдбар и общий вид виджетов в сайдбаре (если есть)
  7. Виджеты – Прямой эфир, Список категорий, Список блогов, Теги
  8. Попап-блок с текстом комментария для Прямого эфира
  9. Попап-блок со статистикой голосов
  10. Всплывающие системные сообщения (Notice, Error)
  11. Статические системные сообщения (Notice, Error)
0010 – Модальные окна
  1. 1) Общий вид модальных окон – форма, информационное сообщение, важное сообщение
  2. 2) Окно авторизации – вход, регистрация, восстановление пароля
  3. 3) Ошибка авторизации/регистрации
0100 – Список топиков
  1. Виды топиков: черновик, отложенный, опубликованный, из закрытого блога, на модерации
  2. Топик с превью и без
  3. Топик с фотосетом, с голосованием, с сылкой-источником
  4. Сайдбар и общий вид виджетов в сайдбаре
  5. Виджеты – Прямой эфир, Список категорий, Список блогов, Теги
  6. Пагинация (блок со списком страниц)
0200 – Просмотр топика
  1. Вид топика: черновик, отложенный, опубликованный, из закрытого блога, на модерации
  2. Служебное меню: Редактировать / Удалить
  3. Элементы текста: заголовки (h4, h5, h6), изображения, списки, цитаты, ссылка на пользователя
  4. Фотосет, голосование (выбор и результаты), ссылка на источник
  5. Дополнительные поля: теги, дата, место, прикрепленные файлы
  6. Голосование за топик (+/-/воздержался)
  7. Комментарии разрешены/запрещены
  8. Дерево комментариев (авторский, новый, прочитанный, помеченный на удаление, удаленный)
  9. Написать комментарий
0210 – Создание/редактиование топика
  1. Виджет – Информация о блоге
  2. Блок «Доступные теги»
  3. Блоки — Фотосет, голосование, ссылка на источник
  4. Дополнительные поля: теги, дата, место, прикрепленные файлы
  5. Предпросмотр топика
0300 – Список блогов
  1. Типы блогов: персональные, открытые, закрытые, тайные, корпоративные
  2. Кнопки «Подписаться»/«Отписаться»
04xx – Блог
0400 – Блог. Лента топиков
  1. Информация о блоге (свернутая/развернутая)
  2. Служебное меню: Редактировать/Администрировать/Удалить
0410 – Блог. Администрирование
  1. 1) Виджет – Приглашение в блог
0420 – Блог. Создание/Редактирование
0500 – Люди
  1. Виджеты – Города, Страны, Статистика
06xx – Профиль чужой
0600 – Информация
  1. Без заметки
  2. Добавить заметку
  3. С заметкой
  4. В пунктах Публикации, Избранное, Друзья – бейджи с числом
0610 – Стена
  1. Просмотр
  2. Написать/Ответить
0620 – Публикации (топики/комментарии)
0630 – Избранное (топики/комментарии)
0640 – Друзья
0650 – Активность
07xx – Профиль свой
0600 – Информация
0610 – Стена
0620 – Публикации (топики/комментарии)
0630 – Избранное (топики/комментарии)
0640 – Друзья
0650 – Активность
0660 – Настройки профиля
0670 – Настройки аккаунта
0680 – Настройки сайта
08xx – Система сообщений
0800 – Список сообщений
  1. Раскрывающийся блок «Поиск сообщений»
0810 – Просмотр сообщения
  1. Ответить
0820 – Создать сообщение
0830 – Блокировать
0900 – Активность
  1. Виджет – Список отслеживаемых пользователей, добавить пользователя
10xx – Лента
  1. Контекстное меню: Подписки, Комментарии, Новые
1010 – Подписки (лента топиков)
  1. Виджеты – Люди, на которых подписан, Друзья, Блоги
1020 – Комментарии (лента топиков)
  1. Виджеты – Топики, в которых отслеживаются комментарии
1030 – Новые
1100 – Статическая страница (например, «About»)
  1. Родительская страница без дочерних
  2. Родительская страница с дочерними страницами
  3. Дочерняя страница
1200 – Страница ошибки (404)

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

Кстати, к вопросу о трудоемкости разработки шаблонов для Альто/ЛС — давно предполагал (а сейчас в этом утвердился), что одна из причин более высокой трудоемкости разработки — наш движок «из коробки» имеет гораздо больше функционала, и для него поэтому требуется гораздо больше страниц и элементов.
Теги:

Похожие статьи

20 комментариев

0
Предлагаю отказаться от адаптивности, по крайней мере, не сейчас это реализовывать.

Адаптивность — это вроде-бы очень круто, но вместе с тем будут свои минусы.

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

Как вариант — адаптивность можно реализовать после, в виде некой надстройки, которую можно активировать при желании.
Отредактирован:
0
Неадаптивный шаблон это шаг назад, тем более, что базовый шаблон уже есть demo.altocms.ru и он адаптивный :)
0
Просто я, например, не понимаю, зачем адаптивный шаблон, если смартфоны и планшеты созданы специально для того, что бы нормально отображать сайты.
Возможно, что я не прав, но до сих пор вижу больше косяков в адаптивных шаблонах, чем в простых. И причина, как понимаю, в том, что сделать адаптивный шаблон, который будет выполнять заявленным требования — практически невозможно.
Отредактирован:
0
Часть экранов с hd и fullhd разрешением действительно нормально отображают обычные не адаптивные сайты, с другой стороны пользоваться такими сайтом на небольшом экране смартфона/планшета неудобно. Плюс к этому есть много устройств с низким разрешением 800x480, 480x320, 320x240. А учитывая, что мобильный трафик в последнее время уже обогнал десктопы, такая функция как адаптивность превратилась в необходимость. Можно конечно разработать отдельно мобильную версию(имея например бюджет хабра), но по сути в чем будет ее отличие от адаптивного шаблона? :)
0
Часть экранов с hd и fullhd разрешением действительно нормально отображают обычные не адаптивные сайты, с другой стороны пользоваться такими сайтом на небольшом экране смартфона/планшета неудобно.
Тут дело вкуса. Никто не мешает по монитору два раза пальцем тыкнуть(я про смартфон), а на других телефонах вообще смысла нет в инет выходить. Благодаря такой замечательной функции мы получим полный функционал сайта, а не раскрывать разные менюшки и искать, а куда мне дальше, а потом вообще осознать, что в адаптивной версии урезали этот функционал, а потом еще и понять, что на нормальную то версию с телефона не попасть.
Самый большой прикол будет если вначале еще пойдут блоки, а потом только контент =)
Хотя спорить конечно смысла нет, но я считаю что адаптивность это все таки больше тренд чем что-то полезное в плане юзаблити.
+1
Так список ведь не для конкретного скина, а вообще — «хозяйке на заметку», как говорится. Просто уже не раз было у меня самого, что рисует кто-то дизайн, а потом начинается верстка, и возникают вопросы — вот это непонятно, как делать, вот там неясно. А дизайнер может быть и весьма опытный, но если у него нет богатого опыта работы с конкретным движком, то он может просто не догадываться в полной мере, чего от него требуется
0
Абсолютно согласна. Читала тоже когда то топик Алексея на хабре (ссылка кому интересно habrahabr.ru/post/148374/, сам список на livestreet /blog/dev_livestreet/11532.html). Вообще шаблон Synio до сих пор остается самым проработанным на livestreet. Поэтому глядя на результат, бюджет конкурса на дефолтный дизайн livestreet уже не кажется таким значительным )) Другое дело, что Synio устарел по всем параметрам.

Но скажу по своему опыту, что основной принцип работы над дизайном не сильно отличается от работы с другими CMS. Для примера приведу дизайн для портала на Drupal — после отрисовки и верстки основных страниц, нашей дизайнерской группой было дополнительно отрисовано более 20 макетов различных экранов и отдельных элементов.

Конечно например в Experience, в этом плане несколько легче, т.к многие экраны и принципы используются из базового скина. Но даже при всем при этом, уже отрисовано около 10 макетов (не сочтите за рекламу :)) и после верстки основных страниц будут отрисованы дополнительные экраны.
0
Другое дело, что Synio устарел по всем параметрам.
На ЛС сейчас нет шаблона лучше чем Synio, а хотя есть еще Social.
Прелесть этих шаблонов в том, что их можно очень хорошо адаптировать под разные условия при минимальных временных затрат.
Хотя дело вкуса.
0
Список просто ужасает. Даже если взять за основу стандартный шаблон, каждую из этих страниц придется дополнительно тестировать на всех поддерживаемых устройствах и браузерах… Дизайнерам будет тяжело отрабатывать свой хлеб. Вернее, не так — уникальный дизайн золотым выйдет. Да и стоковый просто так натянуть не получится.

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

Не воспринимайте это за наезд лично на себя, просто я одно время рассматривал разработку дополнений под opencart — другой пошедший простым путем движок — и там даже с учетом ecommerce направленности она не окупалась, т.к. совместимость со сторонними шаблонами настолько плоха, что почти что каждое дополнение приходилось бы дорабатывать под клиента.

Заранее скажу, что полного решения этой проблемы не знаю. Частичное, виденное мною неоднократно — провести стандартизацию css-классов и паттернов элементов управления для возможности доработки дизайне через css (ага, как в zen garden), сделать наследование одного шаблона от другого, привить дизайнерам мысль, что *не надо* в своих шаблонах изобретать каждую форму заново.
+1
Ну да, прикинул сейчас в уме число экранов для WP — главная, страница, топик с комментариями. Все! Если юзать Альто примерно на уровне WP, то и здесь примерно столько же страниц нужно будет нарисовать (может, плюс парочку). Если юзать функционал по полной, да еще и наращивать его сторонними плагинами, то деваться некуда — надо продумывать. Или, как минимум, надо проверять все экраны, и вот тут этот список очень даже поможет.

По решению — идеального полного решения, наверное, и нет, ибо нет идеала в реальном мире. Но ход ваших мыслей почти один в один совпадает с моими. Вообще, если по хорошему, то, проанализировав этот список, следующим шагом нужно подготовить набор типовых блоков/элементов (методология БЭМ совсем недурная штука), а потом — набор CSS-классов. Это — с методологически. А технологически, тем временем, обеспечить полноценную поддержку LESS и наследование шаблонов, да.
0
Ну да, прикинул сейчас в уме число экранов для WP — главная, страница, топик с комментариями.
Ну если эти страницы по полочкам разложить, то получиться чуть меньше половины от списка в главном топик, но при этом по возможностям от наголову выше, а заработок на нем вообще сказка.
Суть в том, что такого результата можно достичь и на Альто, но нужно разобрать всю структуру подачи по полочкам.
0
Этот топик и создан именно для того, что бы решить проблему, о которой вы говорите. Грамотное проектирование — это 70% успеха. У меня есть твердое убеждение, что в итоге получится совсем немного элементов, которые будут фигурировать в шаблоне, и их сочетание между собой даст множество вариантов.
Отредактирован:
0
Я для себя выделил только 8 макетов страниц, а остальное это UIkit.
Главное найти хорошего верстальщика который знаком со структурой движка и тогда проблемы с кучей макетов отпадут, но это задача не из простых =) Можно конечно мне не везло, но порой они даже главную не могут сверстать по макету( и приходиться постоянно обрисовывать красные кружки.
По большому счету для шаблонов на продажу в каталоге адаптивную версию имеет смысл делать под разрешения 970px и 480px, а то и вовсе только под 480px.
Вообще считаю, что стоимость шаблонов для Альто и ЛС должна начинаться от 2000р., а с базой юзеров которая есть сейчас и того с 3000р.
К примеру верстка шаблона сейчас от 10000р. + затраченное время на дизайн = от 50000р.

ИМХО: Выкиньте к чертям свои iphone и телефоны прошлого века и тогда поймете, что адаптивные шаблоны это полное убожество и сайты с ним лично моего внимания не заслуживают.
0
ИМХО: Выкиньте к чертям свои iphone и телефоны прошлого века и тогда поймете, что адаптивные шаблоны это полное убожество и сайты с ним лично моего внимания не заслуживают.
Поддерживаю!

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

А главное — я уже крах подобного явления видел. В начале нулевых, когда пытались делать программы, в неизменном виде запускающиеся на разных ОС. Тогда это закончилось тихой катастрофой, так как системы слишком между собой отличались, и никто, за редким исключением, не захотел пользоваться получившимися программами. Очередные сотни тысяч человеко-часов были потрачены впустую. А тут не просто другая ОС, а другой способ взаимодействия с пользователем и намного более примитивные, чем в то время, средства.

Чего реально добились адаптивщики — так это усложнения всего и вся. Я, например, только с их появлением стал с трудом читать код сайтов. Да и компьютер, на котором я прошел Crysis, уже не способен без рывков прокручивать даже некоторые информационные сайты.
+1
Качество адаптивного сайта зависит от дизайнера и верстальщика. За всю свою жизнь в веб-разработке (о боже, больше 10 лет) я встретил только один макет, который был прорисован для адаптивной верстки так, что я верстал и наслаждался. Ну и сайт получился отличный, да.

Поэтому надо идти по пути унификации, модулей, БЭМ и т.д. и т.п. Но это — огромный кусок работы.

Я как-то делал такой «фреймворк» для одной студии, где был один html-шаблон и проработанные блоки данных, но классами навешивалась структура лэйаута (типа body.sidebar-left, body.sidebar-right, body.sidebar-both) + css компилился из less/sass, чтобы игрой с переменными можно было менять цвета/шрифты/кнопочки. Это был отличный ход, студия не нарадовалась. Сочинил в свое время bootstrap ;)

PS: Я все жду таких макетов, где бы был не css, а less/sass/stylus, чтобы хотя бы цвета менять на сайте не кропотливым поиском и заменой (или самостоятельной перегонкой в stylus)
+1
Качество адаптивного сайта зависит от дизайнера и верстальщика...
Все верно. Но есть еще одна сторона, о которой редко вспоминают: это серверная часть. Если делать по настоящему адаптивный сайт, то не только на фронтэнде надо учитывать «мобильность», но и на бэкенде тоже. Например, можно скрывать на фронтэнде какой-нить баннер весом в 300К, но гораздо правильней вообще его не передавать на клиента, заведомо зная, что он там крутиться не будет.

Я все жду таких макетов, где бы был не css, а less/sass/stylus, чтобы хотя бы цвета менять на сайте...
Самые первые цветочки уже есть: темизация Start-kit выполняется именно через LESS. А вообще, лучше не ждать, конечно, а самому предлагать конкретные решения. Без опытных верстальщиков, которые не просто руку набили, но и владеют определенными методиками, могут анализировать и систематизировать, очень трудно решить все описанные выше проблемы. Если вообще возможно :)
0
Но есть еще одна сторона, о которой редко вспоминают: это серверная часть.

Ну это вообще на нобелевку тянет. Мы в работе используем различные ухищрения, но, как всегда, есть куча органичений и граблей.

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

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

А если нужны консультации/советы/мысли — мой инбокс всегда открыт.
Отредактирован:
0
А если нужны консультации/советы/мысли — мой инбокс всегда открыт...
Все это — консультации/советы/мысли от знающих людей — нужно всегда! Но беда в том, что иногда даже и не знаешь, о чем спрашивать :) Вот я, например, специализируясь, по большей части, на сервер-сайде, и хоть стараюсь отслеживать все, что касается веб-разработки, но наверняка просто не знаю о каких-то методиках, приемах, нюансах спецификации, связанных как непосредственно с HTML-версткой, так и, например, с той же адаптивность, о которой тут спор возник.

Поэтому, если будут конкретные вопросы, то обязательно обращусь. Но если и с твой стороны (равно как и стороны любых других юзеров) будут какие-то предложения по улучшению архитектуры, функционала, верстки и пр. — не стесняйся их высказывать
+1
Я для себя выделил только 8 макетов страниц, а остальное это UIkit...
Так, может, поделитесь своим видением? Или это проф. секреты? ;)
0
Да секрета нет.
activity, topic, blog list, home, messages, people list, profile, blog
Ну а остальное уже UIkit.
Конечно же это исключительно мой взгляд.
Многое будет зависеть насколько сильно шаблон будет отходить от стандартной структуры.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.