ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Абсолютный ролевой каталог Эдельвейс

Объединяем ТРПГ вне зависимости от площадки их проведения.
Удобная мобильная версия и понятная система рейтингов.

На сайт

Акция! Индивидуальный дизайн бесплатно

Доработаем макет под ваш проект;
Сверстаем и оснастим;
По желанию сделаем мобильную версию.

Подробнее

Ролевой поисковик

Поиск роли на текстовых ролевых
Проект от команды FD

Спойлеры и обсуждение

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Макет для сайта «Fantasy Calalogue»

Детализированный макет «Fantasy catalogue» для тёмного дизайна многостраничного сайта
Стоимость при покупке эксклюзивно: 3600р
В стоимость входит корректировка макета и доработка недостающих страничек под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее

PROMOTION: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you have a desire to help us make our project better:
Become a moderator
SuggestionsReviews

Details
Голосование! "О чём думает новогодняя ёлка?" 🎄🎄🎄 Пожалуйста, отметьте работы которые вам понравились.
Голосование! Интерфейс и взаимодействие! Просьба проголосовать за понравившийся вариант.
⚡ Объявляется поиск верстальщика и дизайнера в команду ForumD! Узнать детали и подать заявку. ⚡
❗ ❗ ❗ Technical work is underway. Something here and there may be crooked. We'll fix it soon. :) If you're english-speaker and want you use our forum, switch to the russian language. That is temporary, until the works with multi-language option will be over. Sorry for the inconvenience.

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Голосование! Интерфейс и взаимодействие

Сообщений 1 страница 10 из 19

Опрос

Какая идея интерфейса вам понравилась больше всего?
Вариант №1

27% - 3
Вариант №2

0% - 0
Вариант №3

45% - 5
Вариант №4

0% - 0
Вариант №5

27% - 3
Вариант №6

0% - 0
Голосов: 11

1

Участники конкурса выступили в роли UI/UX дизайнера и предложили нам новый дизайн для списка разделов на главной странице форума.
Голосуем за самую лучшую работу! Как бы вы сами хотели видеть организацию разделов на главной ForumD.ru? Кто максимально близок к вашему комфорту?
По итогам голосования и ваших комментариев мы не только раздадим призы участникам, но и учтем ваши оценки при редизайне главной страницы!

Вариант №1

https://i.imgur.com/3rUzCL7.png

Вариант №2

Итак, схема категории на всю ширину, так как она сейчас есть.

https://forumupload.ru/uploads/0007/e3/f7/7629/27886.jpg

кнопки лежат под значками
значки остаются текущие с цветом через градиент
    background: -webkit-linear-gradient(#ddd, #008ecb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
остальное с текущими шрифтами и цветами
описание - на белом фоне, объединено в блок
рамки вокруг всей общей информации, самое главное для нас понимание что к чему относится, навигация с первого взгляда
гостевой доступ текстом, без наведения, возможно различными значками рядом с текстом
новые сообщения выделяются флажком рядом с кнопкой, категории с новыми сообщениями имеют более выраженную серую тень вокруг

Вариант №3

Ну тут поясню что идея в том чтобы структуру разделов сделать более привычную: описание под названием раздела и к каждому разделу привязать свой конкретный цвет. Разделы визуально "соединить" между собой и сделать для категорий такие же разделительные линии как на сайте. И ещё блок с топом мастеров оформить отлично от разделов, чтобы в глаза бросался.

И... тут я поняла что забыла иконку прав публикации постов в каждом разделе. Но она планировалась маленькая, раза в 2 меньше чем сейчас, скорее всего даже иконочным шрифтом в правом верхнем углу каждого раздела. Ну знаете, похожим дизайном как всплывающие подсказочки в ютубе, во время просмотра ролика. Лень уже открывать фотошоп и доделывать. Тем более не уверена что моя работа пригодится. Делала я не все разделы. Оставшиеся не такие трудные, там подфорумов и важных ссылок нет или их очень мало и потому не стала изображать на макете.

https://i.imgur.com/T6c0e4u.jpg

Вариант №4

https://i.imgur.com/sLRezRV.png

Вариант №5

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

Поэтому просто, как предложение, изменить верстку, сохранив всё от текущего дизайна, и иконки, и оформление, только собрать это в блоки(столбцы).
Каждая категорию объединяем в слайд и с помощью стрелок(чекбоксов) перемещаемся по категориям.
При смене категории, меняются и подкатегории. Я посмотрела, их на форуме немного - 3-4 штуки. Это отлично поделится на небольшие столбцы. Я для примера сделала три на примере первой категории.
При смене категории меняется её название - в шапке, одновременно с блоками(подкатегориями).
Анимацию можно сделать любую.
От себя предложу вариант: название в шапке перелистывается, а блоки поднимаются и отпускаются уже с новой информацией. В плане кода да, это нужно будет попотеть, но тут же главное на коды поставить, а так великая сила отладки и инспектора уже помогут)

Длина каждой подкатегории меняется в зависимости от контента. Но в пол оно в любом случае не уйдёт. Совмещая таким образом блоки и перемещение, мы сокращаем время пользователю по навигации и передвижению. Пока долистаешь до архива или пиара, уже забудешь, что нужно было. Увы, это специфика всех форумов. Но можно это перемещение сделать удобнее, не вертикально, а горизонтально)
С рекламой сложнее, я не смогла придумать, куда её красочно впихнуть, поэтому для варианта добавила в шапку затемненным вариантом.
Надеюсь, смогла помочь с идеей для переосмысления дизайна) Но графику менять не стала бы в любом случае. Она и сейчас актуальна и свежа.

https://i.imgur.com/qKykZso.jpg

Вариант №6

Без картинок, но думаю ход моих мыслей будет понятен. (покажу свою задумку в ссылке которую возможно воплощу)
Короче:
Так как большинство все-же сидит с мобилок/планшетов, то я думаю вполне можно обыграть все 100 подфорумов и 20-30 категорий так (к примеру вполне можно поставить горизонтальный блок, а в нем 10-15 пофорумов под категорию (а то и больше), не текстом а иконками (тем самым сократим ширину, но не потеряем смысл что под иконкой с фотографией что-то с графикой). Или соответственно главную страницу обыграть плиточно и иконками (у меня без подфорумов но смысл думаю понятен что в блок категории ниже иконки ставим 10 иконок подфорумов) так: [ссылка удалена администрацией]
Ну а как цифры с ново постами к иконкам повешать я думаю ты знаешь))))

Тупанул.... к чему я.... По ссылке видно что вполне можно 30 категорий которые вполне будут смотреться с мобилок (5 в ряд). Выйдет всего 5-6 итд блоков. Соответственно для пк мы ставим 10-20 в ряд (если общий диз будет) или же увеличивается ширина блоков (так как под иконками категорий возможно стоят иконки подфорумов).
Надеюсь не бредовая идея. Пасиб за внимание

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

Не пытайтесь отследить авторов, работы идут в разнобой. :playful: После окончания голосования, мы откроем скрытые тексты и рассекретим участников. :)
Голосование продлится 7 дней.

Не возброняется оставлять комментарии и отзывы. Все же это важное голосование и если вам что-то очень понравилось/не понравилось, стоит сказать об этом, чтобы идея вошла/не вошла в финальный дизайн категорий на главной.


Голосование администрации форума.
Для выявления победителя на денежный приз, просьба всех (кроме участвующих в конкурсе) из числа команды, админов и модеров оценить каждую работу по пятибальной шкале! Оценки будут просуммированы и выведено среднее арифметическое, которое определит победителя. Оценивают:
@Gerda @ocean @Deff @As @satsana @kozhilya @Dispatcher @nou @Тотал
Если вы не хотите "палить" свои оценки, можно сделать отписаться скрытым текстом.

+4

2

Вариант №1
очень нравятся иконочки мамочек и ссылочек, отличное разделение подфорумов и просто важных топиков, и рамочка ссылки просто огонь! :love: 
в заголовках категорий справа не уверена, но текст и рамка категорий - однозначно гуд  :cool:
не уверена, что стоит "лепить" иконку доступа в форум к последнему посту, ибо люди привыкшие, что рядом с такой ссылкой аватарка автора поста...
проблему вижу серьезную:
https://i.imgur.com/vkIkgtM.jpg
можно заблудиться и не понять, с какого раздела последний пост, ибо он идет под описанием предыдущего, далеко от заголовка
оценка - 4,5/5


Вариант №2
https://i.imgur.com/CpMnZ8k.jpg
1. на мой взгляд, кол-во тем и сообщений не такая важная инфа, чтоб выделять ей столько пространства
2. не поняла, что это за инока. догадываюсь, что ее место в белом кружке, но не понятно до конца.
3. на мой взгляд, слишком жирно выделать стока места для последнего поста. описание раздела может быть горааааздо длиннее, и сложно непрактично компоновать это так, чтоб ширина и высота блока последнего поста была такой же, как и описание.
4. не поняла, что делать со ссылками. три - максимум? а если их 5 - выбирать только три? а если их ноль - будут пустые ячейки?
5. сугубо имхо - не понимаю, как народ тексты с джусифаем читают. меня эти проблемы в тексте бесят ))) не сердчать, чисто личные тараканы :tomato:
оценка - 2/5


Вариант №3
че сказать - ахринетительно! :cool:
Идея с цветами мне нравится, фоны-разделители категорий как на сайте - шикарно!
не нравится - расположение "тем" и "сообщений" вот по этой причине:
https://i.imgur.com/UHXEC88.jpg
придется как-то выверять, чтоб не было длинных ссылок.
еще момент важный, что описания на макете длинноватые, а в реале бывает так, что ссылок много, а текста мало. получаем пустое пространство под описанием, а справа - куча всего.
оценка - 4/5


Вариант №4
я очень в этой работе запуталась
https://i.imgur.com/mZY8wDF.jpg
в первом разделе под постом подфорумы, но в других - ссылки
в третьем разделе подфорумы под последним постом, в первом там ссылка...
над последнем постом в наличии ссылки, но не понятно, чем эти ссылки отличаются от тех, что в других местах, если именно они сверху справа, а другие - под описанием или снизу справа.
мелкий текст описаний - возможно, вариант, ибо действительно, его постояльцы особо не читают, но не настолько мелкий.
опять же, не разделяю удостаивания "тем" и "сообщений" такой видной позиции, на мой взгляд, это менее важная инфа.
в целом дизайн левой части напоминает то, что ща принято на ролках.
прикольно выведин аватар (или иконка доступности)
вот эти штуки перед заголовкоом не понимаю: >> - мне кажется, очевидно, что это что-то кликабельное и без них
кароч, есть интересные решения, но я не до конца поняла весь концепт.
оценка - 3/5


Вариант №5
это просто супер. я лично даю высшую награду этому варианту - за нестандарт, за смелость!
если мне позволят его воплотить, я буду описаюсь от счастья.

какие есть проблемы (некоторые автор упоминал)
1. геморойно - это сложно сделать и сверстать, надо будет "подбить" наших прогерров на упаковку категорий в слайдер (хотя нечто подобное мы уже делали)
2. это не привычно. олды-сторонники традиционных дизайнов и сейчас ноют, а что с ними станет, когда мы скажем, что вот это называется "форум"? старички просто взвоят.
но на самом деле "традиционное форумное" вымирает, а вот такое - шаг в будущее, шаг в сторону концепта "мы - САЙТ/ПОРТАЛ", "мы - межплатформенная техподдержка"  и привлечение новой аудитории. людей с соц-сетей или других платформ ничего не смутит.
3. реклама в слайдере воистину уйдет в забвение. не совсем, конечно, но теперь это будет менее "видное" место. но, блин... кому она нужна? немного места под нее есть справа - и норм. партнерам можно разрешить туда баннер пихать для большего эффекта привлечения внимания. и можно справа сделать мини-переключатель кружками для нее.
4. переключение категорий кружками или стрелками - это аналог листания. новичок не знает что за чем идет. Но проблема решается выводом где-нибудь вверху названий категорий, по клику на которые, ты оказываешься в нужной секции. + к кружкам/стрелкам прикрутить тултипы при наведении.
5. над дизайном внутри столбцов я бы еще поработала, возможно было бы приятнее воплотить что-то типа папок и ссылок из Варианта №1 - сейчас слишком много синих больших ссылок, они, как мне кажется, вытесняют собой заголовок.

оценка - 5/5 - за смелость и нестандарт!


Вариант №6
оценивать сложно: скриншота нет, есть только ОДНА идея
100 подфорумов и 20-30 категори - у нас вполне определенное количество категорий и подфорумов
блок категории ниже иконки ставим 10 иконок подфорумов - иконки не информативны. пока не кликнешь, ты не догадываешься что КОНКРЕТНО за этим скрывается.
я так понимаю, автор предлагает выкинуть все, оставить только кликабельные иконки.
как по мне - это не информативно для форума техподдержки.
оценка - 0/5

Отредактировано Gerda (21.01.23 19:16)

+3

3

Ну тупо первый вкуснее... Остальные как-то в корне меняют гамму (я говорю про тёмный вариант)

+2

4

Deff
оцени плз каждый вариант от 0 до 5
на цвет можно не смотреть. главное - интерфейс, расположение инфы

+1

5

Оценки выше специально не читала, чтобы отталкиваться от своего видения работ. Не буду перечислять все плюсы, а наоборот, уточню, за что снизила баллы:

1 - 4/5
Из-за разницы в ширине правых блоков кажется всё сумбурным, глаза разбегаются. Если этот момент подправить, то огонь.
2 - 3/5
Много ненужного свободного пространства. Смотрится громоздко. Покомпактнее бы)
3 - 5/5
Не вижу, к чему придраться хд
4 - 3/5
На цвета внимание не обращала. Схема напомнила стандартную /привычную/ разметку на форумах. Не поняла только, в чём конкретное различие ссылок снизу под блоками слева и справа.
5 - 3/5
В целом задумка класс, но я не любитель листать по стрелочкам, чтобы найти искомое, в данном случае категорию.
6 - 1/5
За участие)) А так, тяжело представить полную картинку описанного. Поняла лишь, что по иконкам будет ещё сложнее найти нужную тему.

+3

6

Итак... Скажу пару слов сразу. UI/UX — это обманчиво сложная, не побоюсь этого слова, наука. И я не буду притворяться, что я хорошо в ней разбираюсь в этом, однако я читал довольно много статей по этой теме, что бы иметь какое-то представление, для чего это нужно и на что обращать внимание. Однако я работаю, и заниматься этой темой серьёзно, к сожалению, не могу из-за времени.

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

Так же отмечу, что я не читал описания к представленным изображением (за 1 исключением, но об этом позже). Общий принцип здесь следующий: чем лучше я пойму функционал после короткого осмотра, тем лучше; и наоборот: чем больше мне нужно разбираться в представленном интерфейсе, тем хуже.

Буду давать 3 оценки по 10-бальной шкале, где 1 — худшая оценка, а 10 — лучшая:

  • Оценка работы: оценка присланной работы до возможных исправлений внешнего вида. Другими словами, насколько представленный вариант далёк от возможного конечного варианта.

  • Оценка идеи: оценка того, насколько хорош по моему мнению может быть конечный, исправленный вариант присланной работы. Любая идея после исправления недочётов могут выглядеть хорошо... Вопрос в том, сколько нужно сделать таких изменений? 

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

Итак, приступим!

Вариант 1
  • Мне нравится иконки и цветовое кодирование ссылок и подфорумов. 

  • Выравнивание. Очень странное решение... Я понимаю идею отделить подфорумы и быстрые ссылки в разделе "Конкурсы, акции, бонусы", однако у них уже есть иконки с цветовым кодированием... Однако, как видно в разделе "Объявления и поиск специалистов", пихать всё в 1 столбец тоже не хорошо, ибо возникает довольно большая пустота. Компромиссное решение не помешало бы.

https://i.imgur.com/oN7UiKA.png

  • Информация об авторе последнего сообщения расположена так, что без дополнительного исследования окружения нельзя понять, как какому форуму она относится. Ситуация ухудшается тем, что интуитивно мы воспринимает полосу под этим блоком как разделитель от следующего блока.

https://i.imgur.com/GX2S9gj.png

  • И, пожалуй, я не соглашусь с выравниванием названий категорий по правому краю. Траектория движения глаз при просмотре названий категорий и форумов

Оценка работы: 7/10
Оценка идеи: 8/10

Средняя оценка: 7.5/10

Вариант 2
  • Персонально не люблю таблицы такого вида. Обилие границ в таких блоках, как мне кажется, "душат" всё содержимое, отчего иногда хочется сломать некоторым блокам стенку и сказать "Дыши!.."

  • В частности, весь концепт улетит под гору, если у форума не ровно 3 ссылки для вставки в правый блок. 

  • Выравнивание длинного текста в узком столбике по ширине блока... Это очень плохая идея. Да, такое делают в некоторых газетах, но в газетах, если им приходится впихивать такие штуки, специально трудятся над текстом, что бы в них было минимальное количество длинных слов, а если они и необходимы — не устраивали анархию типа пробела в 5 раз шире предлога перед этим пробелом.
    Очень рекомендую всем интересующихся прочитать что-то о том, как работает типографика в газетах.
    Например, http://www.vestnik.vsu.ru/pdf/phylolog/ … _02_36.pdf — здесь на с.166 первые 3 абазаца посвящены ровно теме широких межсловных пробелов.

  • Зачем иконка справа от количества тем? Что означает треугольник с "2"? Чем больше новому пользователю нужно, что бы понять, что происходит на экране — тем хуже, и это одна из фундаментальных  причин, зачем вообще существует UX (User Experience) в UI/UX.

  • Что бы блок с последним сообщением не выглядел пустым, автор увеличил блок в тексте на 4-5 пунктов... Но блок всё равно кажется пустым.

  • Кернинг у названия. Просто... Не надо так. Да, Bebas — это фирменный шрифт FD... Но весь смысл высокого шрифта — быть узким, но оставаться читабельным. Нет абсолютно никакого смысла и резона увеличивать кернинг, что бы сделать текст шире, лучше просто использовать другой шрифт.

Оценка работы: 4/10
Оценка идеи: 2/10

Средняя оценка: 3/10

Вариант 3
  • Не очень понимаю, зачем разбивать блок автора с ссылок на тем от блока с описанием форума. В таком виде кажется, что блоки с последними сообщениями как-то связаны друг другом... Но это не так.

  • Визуал может посыпаться, если блок названия и описания окажется ниже блока с важными темами и последним сообщением... Однако это можно исправить, написав больше описания. Наверное.

  • Блок с важными темами нарисован так, как его (почти) невозможно запрограммировать. 

https://i.imgur.com/QNfXUIU.png

Оценка работы: 8/10
Оценка идеи: 9/10

Средняя оценка: 8.5/10

Вариант 4
  • Мне нравятся шрифты с засечками в заголовках. Minion — очень классное семейство, хотя он, как по мне, не очень работает как основной шрифт.

  • Но менять шрифт посреди предложения (см. "Последнее сообщение") — это просто не красиво.

  • ">>" перед названием темы бесполезно. Всё, что оно делает — отбивает название от левого края... А зачем его отбивать вообще? Там пустота, решать визуальное награмождение слева отбивкой не надо. Привлекать внимание к элементу тоже нет необходимости, шрифт, размер и положение вне блока и так справляются с этим. Уж лучше вернуть туда иконку.

  • Я не понимаю, по какому принципу должны быть расположены ссылки вокруг блока последнего сообщения. А что делать, если ссылок нет?

  • Комбинация "большого количества свободного пространства" и "тесных блоков текста"... Это не самая интересная для меня идея. 
    #9D886E на фоне и #FFFFFF для основного текста — это очень плохой контраст.

Оценка работы: 6/10
Оценка идеи: 6/10

Средняя оценка: 6/10

Вариант 5

Очень интересная идея... Но я скажу ей очень и очень резкое "нет".

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

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

Итого, самая главная проблема слайдера как элемента управления — это то, что это очень медленный способ навигации, который скрывает нужный тебе контент.

  • Блоки форумов будут очень разной высоты, и это уже заметно на демо-кадре. 

  • Выравнивание — почти идеальное. Жаль, что только почти...

https://i.imgur.com/ypHHCfy.png

Оценка работы: 8/10
Оценка идеи: 4/10

Средняя оценка: 6/10

Вариант 6
  • "Так как большинство все-же сидит с мобилок/планшетов" — смелое утверждение в отношении форума, связанного с дизайном сайтов, на котором сидят художники и программисты. Хотя я могу и ошибаться.

  • Идея заменить стандартную вёрстку на ряд горизонтальных иконок — эта идея, которую я бы очень хотел посмотреть... Потому что я не понимаю, как это должно работать. То, как понимаю это я — это то, что при нажатии на иконку будет в окошке будет появляться описание... А это вариация идеи Варианта 5. Да, тут можно будет сразу увидеть все варианты... И я не знаю, что я больше хотел бы видеть: все варианты сразу, или описание сразу нескольких. Пожалуй, что всё-таки сразу всё.

Оценка работы: 0/10
Оценка идеи: 3/10

Средняя оценка: 1.5/10

Напоследок скажу, что если бы я не был занят, я бы тоже что-нибудь сварганил. Например, меня удивило, что никто не предложил Masonry или хотя бы расположение в 2 столбца (вариант 5 ближе всего к этой идеи, если перенести "Последние сообщения" в основной блок), и я бы почти на 100% предложил бы именно его; Masonry может быть избыточным, учитывая, что на ФД почти нет категорий больше, чем с 6 форумами.

#p179038,Gerda написал(а):

сугубо имхо - не понимаю, как народ тексты с джусифаем читают. меня эти проблемы в тексте бесят ))) не сердчать, чисто личные тараканы :tomato:

Ух... Это довольно сложная тема.
Если говорить коротко: выравнивание по ширине нужно для чтения длинных текстов, из-за чего он используется во всех печатных изданиях. Однако есть большой, просто огромный нюанс, про который люди забывают.

Выравнивание по ширине работает хуже, чем выравнивание по левому краю, если отсутствует перенос слов.

Именно из-за этого есть общепринятое мнение, что тексты в интернете не должны выравниваться по ширине. Впрочем, современные браузеры поддерживают hyphens: auto, хотя я не наблюдаю поддержку русского языка в своём основанном Chromium браузере, только в Firefox.

Главный вопрос в том, какой именно текст мы читаем. На форуме поддержки или ФД нет смысла использовать "книжный" вариант, он имеет мало смысла. А вот на текстовых ролевых это вопрос открытый.

Пример

Добавлю, что спросил у пользователей моей ролёвки вопрос, какой им вариант проще читать. Пока голосов мало, так что поделюсь результатами позже, но один из пользователей уже отметил, что людям с дислексией проще читать текст без переносов, так что ещё и это.

+4

7

#p179046,kozhilya написал(а):

UI/UX — это обманчиво сложная, не побоюсь этого слова, наука.

Полностью согласна с предыдущим оратором, поэтому сразу скажу, что оценивала с точки зрения пользователя и первого впечатления на понятно/непонятно.

1 - 5/5
С первого взгляда - "о, красивое какое", а если присмотреться - небольшой композиционный перевес вправо. Причем, в первом форуме, дальше все уравновешивают аватарки мастеров. Думаю, если голубую кнопку перенести под "папочки" будет огонь. В остальном прям сейчас огонь, поэтому отдаю высший балл.

2 - 2/5
В целом задумка понятна, непонятно, что делать, если навигации справа будем много? Описание растянется, появится пустота. При этом место для подфорумов хорошее. Есть подозрения, что при использовании шаблона форум будет выглядеть очень мелко-дробно, отчего сложно будет сфокусироваться и искать конкретную информацию/ссылки. В общем, думаю, стремиться стоит к простоте и правильным отступам.

3 - 5/5
Вот такое я, как ролевик, люблю, для меня это максимально привычная схема хд С точки зрения функционала тоже все понятно; непонятно, как будет выглядеть с большим количеством кнопок/разделов. Вроде бы оно и вместится, а в форуме, где на макете кнопки в две строки уже как-то не очень, перевес влево. Но тут точно мое ролевиковское да хд

4 - 2/5
Сначала не поняла, потом присмотрелась, поняла, но не оценила хд Скажем так, тут два разных по важности информации блока уравновешены одинаковым оформлением. С точки зрения дизайна такое может быть (но лучше нет), с точки зрения навигации - лучше нет. Тем более, в угоду "зеркальному" дизайну на макете обозначены ссылки, которые сольются в одну сплошную при использовании на сайте. Уверена, что вычленить что-то конкретное при таком расположении будет сложно.

5 - 3/5
Мне нравится идея и то, как она выглядит на макете, но боюсь сойти с ума, пока тыкаю на стрелочки хд Тут чисто имхо, не люблю такое в интерфейсе. Промотать экран можно одним свайпом или нажатием, а тут пользователь вынужден тыкать. Конечно, можно сделать карусельку с ползунком, но я бы скорее не стала с таким возиться, как юзер. Особенно, если заходишь на сайт в первый раз в поисках чего-то конкретного - одну страничку можно промотать и бегло просмотреть, а тут - не получится. Ну и святой Ctrl+F не сработает.

6 - надо что-то писать? хд пусть будет 1/5

+3

8

вариант 5 мог бы работать как переключение вкладками/кнопками

слайдер - это воистину не удобно
но идея со столбцами - круть.

0

9

#p179060,Gerda написал(а):

но идея со столбцами - круть.

Просто для справки: колонки мы проходили в ролевых заявках. Там тогда народ раскритиковал идею дизайна заявок в столбик и поэтому в новой версии делаются карточки. Ещё помню что кто-то говорил что колонки - не самая удачная форма если нужно скомпоновать много информации. В нашем случае инфы действительно много: название раздела, описание, подфорумы, статистика разделов и ссылки. Обычно столбики используются для случаев, когда инфы мало. Если информации много лучше строки (собственно, классический дизайн форумов) или утрамбовывать всё в квадратики.

#p179046,kozhilya написал(а):

Напоследок скажу, что если бы я не был занят, я бы тоже что-нибудь сварганил. Например, меня удивило, что никто не предложил Masonry или хотя бы расположение в 2 столбца (вариант 5 ближе всего к этой идеи, если перенести "Последние сообщения" в основной блок), и я бы почти на 100% предложил бы именно его; Masonry может быть избыточным, учитывая, что на ФД почти нет категорий больше, чем с 6 форумами.

Если честно, я даже не представляю как это выглядело бы на ФД. Можешь сварганишь на листочке на скорую руку вне конкурса? Интересно будет поглядеть...

0

10

#p179061,Automation Baby написал(а):

колонки мы проходили в ролевых заявках. Там тогда народ раскритиковал идею дизайна заявок в столбик

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

конечно, в ролевых заявках можно на них ориентироваться, но в нашем интерфейсе - вряд ли.
я б ориентировалась на что-то типа крупных форумов/сайтов, в том числе зарубежных.
например: https://demiart.ru/forum/ - это очень старый форум, но от концепта стандартной главной они ушли.

#p179061,Automation Baby написал(а):

Если информации много лучше строки (собственно, классический дизайн форумов) или утрамбовывать всё в квадратики.

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

0

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляй ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удали символы: "http://", "https://" или "www."

Теги оформления специальных постов

Сделать пост специальным[block="portfoliopost"]portfoliopost[/block],
Красный пост[block="saledpost"]saledpost[/block],
Синий пост[block="forsalepost"]forsalepost[/block],
Зеленый пост[block="freepost"]freepost[/block],

Пост без профиля[block="no-prof"]no-prof[/block],
Портфолио FD[block="FDteam-portf"]FDteam-portf[/block],

Теги оформления картинок

Обложки: Для одной картинки по центру в рамке, автоматически уменьшается до ширины 480px

Обложка[block="cover"][block="picture"][img]ссылка на картинку,[/img][/block][/block]
Закрыто[block="cover"][block="icon material-icons"]lock[/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]
Продажа[block="cover"][block="icon fa-solid fa-sack-dollar"][/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]
Подарок[block="cover"][block="icon fa-solid fa-gift"][/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Превью: Для любого количества картинок по центру в рамке, автоматически уменьшается до ширины или высоты 300px

Блок для превью[block="morepics"],[/block]

Разноцветные картинки-ссылки: Для любого количества картинок по центру в разноцветных рамках с заголовком, автоматически уменьшается до ширины 350px, минимальная высота 230px (если высота больше, картинка "обрезается" снизу, но не сжимается)

Блок для картинок-ссылок[block="port-block"],[/block]
Красный[block="p-out saled"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]
Синий[block="p-out forsale"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]
Зеленый[block="p-out free"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]
Желтый[block="p-out yellow"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Теги оформления контента

Блок контента спец-поста[block="texts"],[/block]

Обведенный текст[block="details"] [block="det"],[/block] [/block]
Добавить еще блок[block="det"],[/block]

Кнопки[block="links"] [block="demo"][url=ссылка]синяя кнопка,[/url][/block] [block="store"][url=ссылка]оранжевая кнопка[/url][/block] [/block]
Синяя кнопка[block="demo"][url=ссылка]текст,[/url][/block]
Оранжевая кнопка[block="store"][url=ссылка]текст,[/url][/block]

добавить работу [block="wow bounceIn p-out,"] иконка [block="p-descr"][url=https://forumd.ru/viewtopic.php?id=]описание[/url][/block] [block="p-inner"][url=https://forumd.ru/viewtopic.php?id=][img]картинка[/img][/url][/block] [/block]

Иконки:

lock[block="icon material-icons"]lock,[/block]

[block="icon fa-solid fa-sack-dollar"],[/block]

[block="icon fa-solid fa-gift"],[/block]

ТЕГИ (вставить в p-out через пробел)
Тип работы:

под заказ saled,

на продажу forsale,

бесплатно free,



Основная категория:

Вебдизайн dis,

(для всего связанного с работой на сайтах/форумах, кроме готовых скриптов и мелкой графики)

Графика graf,

(для графона, НЕ включающего кодинг/скрипты)

Скрипты/коды code,

(для готовых разработок и работы по верстке/кодингу)

Мини-фильтры дизайнов:

адаптивные mob,

ролевые игры frpg,

компьютерные игры game,

нейтральные flat,

Подкатегории:

Дизайн форумов/сайтов fulldis,

(для полных работ по дизайну)

Макеты layout,

(для дизайнов, где только макет без кода, или работ по созданию макетов чего-либо)

Верстка dis-code,

(для работ по верстке чужих дизайнов или отдельных штук)

Соц-сети/стримы graf-s,

(графон для оформления соцсетей/стримов)

Ролевая графика/арт art,

(для мелкой графики)

Javascript/CSS js,

(для скриптов или выложенных цсс кодов)

Бесплатный диз от FD [block="p-out free fd"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

Платный диз от FD [block="p-out forsale fd"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

Дизайн от юзеров [block="p-out yellow"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

ТЕГИ (вставить в p-out через пробел)
Платформа:

MyBB.ru mybb-ru,

Макет (любая платформа) any,



Параметры:

+ PSD psd-in,

(в наличии макет помимо кодов)

+ адаптивка mob,

(есть версия для мобилок)
Тематика:

нейтральные flat,

ролевые игры frpg,

компьютерные игры game,

фентези fant,

аниме anime,

кино/сериалы kino,

стимпанк/киберпанк cyb,

мультфильмы kids,

животные cats,



Цвета:

тёмные darkst,

светлые light,

яркие bright,

добавить скрипт/код [block="SCRBLOCK"] [block="stforlink"] иконка, [block="link"][url=https://forumd.ru/viewtopic.php?id=]название[/url][/block] [/block] [block="sttags"] теги [/block] [/block]

Иконки:

[block="icon fa-brands fa-js"],[/block]

[block="icon fa-brands fa-css3-alt"],[/block]

[block="icon fa-regular fa-file-lines"],[/block]

[block="icon fa-solid fa-file-code"],[/block]

[block="icon fa-solid fa-file-invoice-dollar"],[/block]

ТЕГИ (*значение в скобках вставить в SCRBLOCK через пробел)
Тип кода:

скрипт (js)[block="js"]скрипт, js[/block]

css код (css)[block="css"]css код, css[/block]

HTML/CSS шаблоны (shab)[block="shab"]HTML/CSS шаблоны, shab[/block]

Модули/Расширения (global)[block="global"]Модули/Расширения, global[/block]

Платформа:

MyBB.ru (mybb-ru)[block="mybb-ru"]MyBB.ru, mybb-ru[/block]

Любой движок (any)[block="any"]Любой движок, any[/block]

Тип для форума:

Пользователи (users)[block="users"]Пользователи, users[/block]

Профиль (userprof)[block="userprof"]Профиль, userprof[/block]

Доп. поля профиля (adfield)[block="adfield"]Доп. поля профиля, adfield[/block]

Аватары (avatars)[block="avatars"]Аватары, avatars[/block]

Репутация (repa)[block="repa"]Репутация, repa[/block]


Группы (groups)[block="groups"]Группы, groups[/block]

Гoсти (guest)[block="guest"]Гoсти, guest[/block]

Администраторы (admins)[block="admins"]Администраторы, admins[/block]

Модераторы (moders)[block="moders"]Модераторы, moders[/block]


Регистрация (regis)[block="regis"]Регистрация, regis[/block]

Личные сообщения (ls)[block="ls"]Личные сообщения, ls[/block]

Вход (login)[block="login"]Вход, login[/block]

Подписки (subsc)[block="subsc"]Подписки, subsc[/block]


Поиск (search)[block="search"]Поиск, search[/block]

Цитирование (quotes)[block="quotes"]Цитирование, quotes[/block]

Пагинация (pagin)[block="pagin"]Пагинация, pagin[/block]

Опросы (polls)[block="polls"]Опросы, polls[/block]

Смайлы (smiles)[block="smiles"]Смайлы, smiles[/block]


Фикс скриптов QuadroBoards (qbfix)[block="qbfix"]Фикс скриптов QuadroBoards, qbfix[/block]

Страница форума:

На всех страницах (allpages)[block="allpages"]На всех страницах, allpages[/block]

Страницы (созд. в админке) (fpages)[block="fpages"]Страницы (соз. в админке), fpages[/block]


Главная страница (mainpage)[block="mainpage"]Главная страница, mainpage[/block]

Объявление (announ)[block="announ"]Объявление, announ[/block]

Категории (categ)[block="categ"]Категории, categ[/block]

Форумы (forums)[block="forums"]Форумы, forums[/block]

Статистика (stats)[block="stats"]Статистика, stats[/block]


Список тем (topiclist)[block="topiclist"]Список тем, topiclist[/block]

Страница профиля (profpage)[block="profpage"]Страница профиля, profpage[/block]


Тема (topics)[block="topics"]Тема, topics[/block]

Сообщения (posts)[block="posts"]Сообщения, posts[/block]

Контент сообщений (p-content)[block="p-content"]Контент сообщений, p-content[/block]

Рейтинг постов (p-repa)[block="p-repa"]Рейтинг постов, p-repa[/block]

Профиль автора поста (p-prof)[block="p-prof"]Профиль автора поста, p-prof[/block]


Форма ответа (fo)[block="fo"]Форма ответа, fo[/block]

Модификация ФО (fomod)[block="fomod"]Модификация ФО, fomod[/block]

Новые BB-теги (newbb)[block="newbb"]Новые BB-теги, newbb[/block]

Инструментарий спец тем/постов (spesh)[block="spesh"]Инструментарий спец тем/постов, spesh[/block]

Универсальные теги:

Дизайн/стиль (dis)[block="dis"]Дизайн/стиль, dis[/block]

Замена элементов/атрибутов (chan)[block="chan"]Замена элементов/атрибутов, chan[/block]

Загрузка (load)[block="load"]Загрузка, load[/block]

Переадресация (redir)[block="redir"]Переадресация, redir[/block]

Скроллинг (scroll)[block="scroll"]Скроллинг, scroll[/block]


Виджеты (vidjet)[block="vidjet"]Виджеты, vidjet[/block]

Меню (menu)[block="menu"]Меню, menu[/block]

Вкладки (ttabs)[block="ttabs"]Вкладки, ttabs[/block]

Галереи (gall)[block="gall"]Галереи, gall[/block]

Слайдеры (sliders)[block="sliders"]Слайдеры, sliders[/block]

Ротаторы (rotat)[block="rotat"]Ротаторы, rotat[/block]

Таймеры/даты (timers)[block="timers"]Таймеры/даты, timers[/block]

Спойлеры (spoilers)[block="spoilers"]Спойлеры, spoilers[/block]


Реклама (adv)[block="adv"]Реклама, adv[/block]

Изображения (pics)[block="pics"]Изображения, pics[/block]

Медиа (media)[block="media"]Медиа, media[/block]

Ролевые игры (frpg)[block="frpg"]Ролевые игры, frpg[/block]


Hover-эффекты (hover)[block="hover"]Hover-эффекты, hover[/block]

Анимация (anim)[block="anim"]Анимация, anim[/block]

Украшения (decor)[block="decor"]Украшения, decor[/block]

Праздники (seleb)[block="seleb"]Праздники, seleb[/block]


Ограничения/запреты (stops)[block="stops"]Ограничения/запреты, stops[/block]

Антикопирование (nocopy)[block="nocopy"]Антикопирование, nocopy[/block]

Уведомления (notif)[block="notif"]Уведомления, notif[/block]