Мы предлагаем:У нас есть:
1 базу данных MySQL(50MB)PHP 5
Прикрепление своих доменовMySQL
Предустановленные движки сайтовPerl
Место под файлы(300MB)Ruby
Бесплатно и без рекламы!
Авторизация:
e-mail: Пароль:
Забыли пароль?    Запомнить  
Все блогиЖизнь сообщества → Эксперимент в веб-дизайне
Rss

cyber01 подкинул замечательный инструмент для прототипирования с помощью Twitter Bootstrap.
Называется Divshot. Это WYSIWYG-редактор. Конечно, при помощи обычного блокнота и HTML можно делать более крутые вещи. Но если вы этим занимались – знаете, насколько порой надоедает каждые пару десятков секунд сохранять страницу и перезагружать браузер. Возможно, я просто не сталкивался с инструментами, которые делают подобное занятие удобным? Буду рад совету в этом направлении среди комментариев. А я пока покажу, что надумал:

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

Пользователи не очень хорошо относятся к большим страницам. А почему так? Всё просто – им тяжело каждый раз прокручивать страницу, чтобы попасть в нужный её уголок. Некоторые дизайнеры справляются с этим, деля страницу на разделы и делая меню навигации где-то наверху, чтобы пользователь сразу мог попасть, куда нужно. Но стоит уехать от верха, и теряешься во всём объёме – приходится вернуться наверх, чтобы оценить, “где я”. Для этого иногда расставляются плавающие кнопки “тащи меня наверх”, или просто распределяются по заголовкам. Но взгляните сюда. Огромная страница с кучей образцов, фрагментов кода. И при этом не ней не чувствуешь себя потерянным среди всего объёма. Если хочется – можно читать это по очереди, но можно и быстро перескочить на интересующий раздел. Новые средства – новые техники. Как всё это сделано?

Ничего сложного. По ссылке выше в меню слева использовано два плагина: ScrollSpy и Affix. Последний фиксирует меню в окне браузера и не позволяет ему заезжать на элементы страницы, расположенные выше или ниже (это указывается при помощи JS или касающихся его атрибутов). А ScrollSpy показывает, какой раздел страницы в данный момент просматривает пользователь, подсвечивая его в меню.

Скажем, есть облако тегов. Чем оно больше – тем больше возможностей для поиска. А чем оно меньше, тем меньшим шрифтом нужно писать непопулярные теги – или и вовсе исключать такие. Если сделать его на всю ширь контента, то популярные темы будут выглядеть в нём, как заголовки – что вполне стыкуется с сущностью популярных тегов. “Нечто бурно обсуждаемое”.

В ранних образцах, которые были основаны на дизайне отсюда, с Окса, было меню со всеми блогами. Хотя от блогов можно и вовсе избавиться (оставшись на тегах) если они остаются – можно сделать их список в виде… обычного многоуровневого списка, вроде “карты сайта”.

На самом деле, можно сделать ещё хитрее! И запрятать отдельные блоки страницы в “аккордеон”, чтобы одновременно отображался только один из блоков. Но тогда при помощи Javascript придётся добавлять эти “скрывающие классы”, иначе у людей с отключенным JS возникнут серьёзные проблемы с отображением сайта.

Ох… мда, поток сознания вышел. Постараюсь отфильтровать по мере возникновения ценных мыслей. Поделитесь своими соображениями.
В порядке материала для размышления – разные найденные мной макеты:


Автор: Павел | Дата создания: 02 января 2013, 20:08 UTC | +2.297


Комментарии(22)
Денис  02 января 2013, 20:50 UTC  #
0.0
Index

Павел, не очень понял по какому принципу поделено меню слева и сверху. Судя по тексту – слева меню относится к текущей странице, причем оно отображает (делает пункт активным) тот участок, который сейчас пользователь читает? Мне кажется такое меню нам не наполнить, но сама идея понравилась, предлагаю туда перенести основное меню сверху. Наверх же запихать то, что относится к профилю пользователя – вход, сообщения.

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

Чтоб пользователь не терялся можно придумать и другие элементы, сейчас как раз занят в одном проекте, мы там сделали ракету справа (осторожно, трафик). Здесь если и делать, то это будет уже совершенно другое решение, т.к. меню не наполнить (сугубо мое личное мнение, можем обсудить), а всякие аналоги ракеты не пройдут идейно, с их ролью прекрасно справляется полоса прокрутки. Другие идеи?

Можно придумать туда (в фиксированный блок слева) какой-то динамичный контент, но у меня идей нет по этому поводу.

Блогосфера – хорошо, может поместить ее вниз всех страниц? Или это будет напоминать мусор? И предлагаю назвать ее “тегинариум” или другим словом. Блогосфера все же уже занято, не надо взрывать пользователям-новичкам мозг :)

Еще у нас сильно не охваченный раздел с сайтами пользователей, сейчас фактически невозможно узнать что кто-то где-то что-то написал. Предлагаю куда-либо вывести последние 2-5 комментариев именно оттуда.

Из тегов нельзя сделать аналогов карты сайта, т.к. не ясно какой тег в какой вложен, это идейно плоская структура, без иерархий. А так да, надо ставить на теги, не на список категорий\блогов.

Очень понравилось, что нет никаких сокращений, особенно “3 сайта ожидают приговора”. Интерфейс получился понятнее, чем сейчас. Результат больше понравился чем нет, направление мысли – отличное.

cyber01  02 января 2013, 23:42 UTC  #
0.0
Avatar

Прикольно получилось… при всем этом есть 2 НО (по крайней мере 2).

1. Этот и последующий макеты/дизайны ждет таже участь,что и предыдущие “посмотрели,обсудили и забыли”?

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

Ты предлагал/пытался воткнуть сюда отжившую ирку… но она не оправдала себя т.к. просто морально устарела…

Можно хоть обычный чат воткнуть/встроить сбоку или снизу.. У людей будет возможность просто пообщаться,обсудить что-либо, не борясь с часто криво работающим антиспамом здесь. Активность людей на главной подымется… люди будут заходить не ради “зайти сайт пересоздать” или “вот блин,я забыл FTP пароль, надо зайти глянуть”,а именно поддерживать контакт с сообществом…

Крик души так сказать… принимать это или нет – ваше дело…
Но банальное общение лишним точно не будет…

cyber01  02 января 2013, 23:44 UTC  #
0.0
Avatar

P.S. я считаю что именно из-за недостатка контакта/общения между членами сообщества нас осталось (активных) буквально человек 5… и то по праздникам

Activate  03 января 2013, 01:47 UTC  #
0.0
201

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

P.S. Все, что нужно пользователю-это пространство, поддержка и иногда совет. За которым он обратится на форум поддержки или тикет-систему, а все остальное…

Activate  03 января 2013, 01:51 UTC  #
0.0
201

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

Павел  03 января 2013, 10:43 UTC  #
0.0
2bfe965ab5ef94a0568bc61c36b46d4c

Я уже сказал, что это довольно ранний черновик. Впрочем, страница не будет намного сложнее – добавятся разновидности блоков, страница вырастет в размере, дизайн будет чуть поразнообразнее.
Да и вообще – если простой интерфейс делает всё тоже, что и эти сложные интерфейсы с кучей кнопок и блоков по бокам в то же количество кликов – чем они хуже?

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

Я примерно об этом и думал. В сущности, у нас получается некий гибрид из форума и CMS – просто комментарии стали полноценными удобными в использовании обсуждениями. В этом смысле, насыщенные комментариями блоги отличаются от форумов только тем, что там посты на главной идут в хронологическом порядке :) Мы же здесь можем сделать несколько различных сортировок. Я сейчас под это как раз пилю панельку.
Скажем, у 4PDA сделано наоборот – у них форум, а первые посты в топиках всегда плавают наверху и содержат основную информацию о топике. Ради интереса можно выводить в меню, помимо заголовка, количество комментариев. А делить статьи и обсуждения смысла нет, всё равно комментарии обычно на ту же тему.

Павел  03 января 2013, 11:03 UTC  #
0.0
2bfe965ab5ef94a0568bc61c36b46d4c

*то же, что и…

Чтоб пользователь не терялся можно придумать и другие элементы, сейчас как раз занят в одном проекте, мы там сделали ракету справа…

В том проекте – это скорее “visual candy”, чем реально полезная функция. Полоса прокрутки не умеет показывать “оглавление”, вот чем она плоха. Сделаем оглавление, а остальным и правда пусть занимается полоса прокрутки.

Можно придумать туда (в фиксированный блок слева) какой-то динамичный контент, но у меня идей нет по этому поводу.

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

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

И при этом статьи у нас всё ещё разбиты на блоги. Бросаем этот факт?

1. Этот и последующий макеты/дизайны ждет таже участь,что и предыдущие “посмотрели,обсудили и забыли”?

А даже если да – код найдёт применение в Монстре на моём сайтике.

У нас кроме формы комментария к заявке/статье нет больше ничего.

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

Павел  03 января 2013, 11:30 UTC  #
0.0
2bfe965ab5ef94a0568bc61c36b46d4c

Activate, совсем не на то смотришь, что демонстрируется. Тексты я от балды писал. Можно было Lorem Ipsum взять с тем же успехом. Сейчас я его только в облако тегов впилил, но лучше везде. Видимо, так и сделаю.

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

Activate  03 января 2013, 12:37 UTC  #
0.576
201

Вот, посмотрите как я представляю для себя оригинальным дизайном. Это шапка http://s017.radikal.ru/i425/1301/3a/c5f254820f3a.png
На что фантазии хватило. Но любую другую фантазию легко можно воплотить в реальность. Это не минимализм, но смотрится богаче.

Activate  03 января 2013, 12:38 UTC  #
0.0
201

Рисовал примерно часа два.

Павел  03 января 2013, 13:01 UTC  #
0.0
2bfe965ab5ef94a0568bc61c36b46d4c

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

Activate  03 января 2013, 13:10 UTC  #
0.0
201

Нет никаких проблем с написанием и автоматизацией PDA версии. Хотя я итак не вижу причин для этого. Мой HTC One S отлично просматривает страницу с этим дизайном. Я допишу его, позже покажу полный вариант.

cyber01  03 января 2013, 13:52 UTC  #
0.0
Avatar

чем-то смахивает на стиль dle

Павел  03 января 2013, 14:20 UTC  #
0.0
2bfe965ab5ef94a0568bc61c36b46d4c

Но это изначально было просто приятной плюшкой, и мы ничего не теряем :)

Конечно, рендеря страницу под десктопный экран, он любой дизайн выведет нормально. Вопрос в удобстве использования – оно очень сильно пострадает. Но опять же – вряд ли кто-то часто заходит на Окс со смарта или планшета (кроме меня).

Павел  03 января 2013, 17:03 UTC  #
0.444
2bfe965ab5ef94a0568bc61c36b46d4c


Ещё:

Можно придумать туда (в фиксированный блок слева) какой-то динамичный контент, но у меня идей нет по этому поводу.

Я решил проверить, как там будет смотреться форма входа. По-моему, неплохо =)

Павел  03 января 2013, 17:06 UTC  #
0.128
2bfe965ab5ef94a0568bc61c36b46d4c

В натуральную величину открывается через контекстное меню по изображению. Извините, ссылку забыл, а поправить никак.

cyber01  03 января 2013, 23:20 UTC  #
0.0
Avatar

норм)

Денис  05 января 2013, 08:36 UTC  #
0.363
Index

cyber01, обсуждение есть когда есть что обсуждать. От того, что здесь появится чатик ничего не изменится. Ирка устарела или нет, не имеет значения, никто же даже не знал, что это ирка. Тем более что веб-чатики будут обладать меньшим функционалом, и не совместимы с любыми клиентами… Сравнивать даже бессмысленно. А когда есть предмет обсуждения, то не важно где – люди сами найдут как обсуждать, будь то форум, комментарии, чат, скайп в конце концов. Пример эта же статья.

По поводу написания дизайна, предлагаю Павел это и доверить. Я начну, он подхватит. Как-то так. Это же все копится, копится… рано или поздно должно вылиться :)

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

По поводу блогов, они выполняют чисто формальную функцию. Можно и отказаться. Так даже логика упростится с отображением не прочитанного.

Павел  05 января 2013, 13:56 UTC  #
0.0
2bfe965ab5ef94a0568bc61c36b46d4c

если форма входа там, то и сообщения надеюсь будут там?

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

knivy  09 января 2013, 20:11 UTC  #
0.0
Noavatar

В виду отсутствия у меня опыта веб-дизайна большая часть здесь написанного для меня тёмный лес, но, поскольку идёт обсуждение новых вариантов дизайна главной страницы, то, на всякий случай, выскажу и свои пожелания:
1) вывести кнопку «Правила» на главную страницу. Ссылка на них есть в форме подачи заявки, но, похоже, не все их читают, и порой приходится давать на них ссылки в процессе обсуждения поданных заявок.
2) по поводу общения согласна, что его стоит интенсифицировать, особенно в части взаимоподдержки пользователей и взаимопомощи по развитию и продвижению сайтов.

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

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

cyber01  09 января 2013, 20:55 UTC  #
0.0
Avatar

knivy,согласен с вами, я частично тоже самое и предлагал(тут и в скайпе), но опять никто так и не одобрил

Павел  09 января 2013, 22:17 UTC  #
0.458
2bfe965ab5ef94a0568bc61c36b46d4c

Ну, о веб-дизайне тут не так много. Скорее больше именно о компоновке и содержимом страницы.
Да, о ссылке на правила в своём макете уже задумывался Андрей. Так что это идея не новая и бесспорно необходимая.

У нас ещё завязалось неслабое обсуждение в скайпе. Тут имел место своеобразный “раскол”. Когда-то Окс был форумом. А потом Денис сделал то, что мы сейчас зовём “главной”, и начался весёлый переезд сюда со спорами о том, что лучше, форум или Это (Денис зовёт это “блогофорумом”, об этом позже).
А начался этот разговор со следующей фразы из комментов выше:

В сущности, у нас получается некий гибрид из форума и CMS – просто комментарии стали полноценными удобными в использовании обсуждениями. В этом смысле, насыщенные комментариями блоги отличаются от форумов только тем, что там посты на главной идут в хронологическом порядке :) Мы же здесь можем сделать несколько различных сортировок.

Вот сейчас мы разделились на два лагеря.
Один (cyber01, например) считает, что на форуме лучше.
Другой лагерь (я, и Денис со мной согласен) считает, что система здесь воспроизводит форум при помощи комментариев.

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


Простите, Ваш браузер не поддерживает html5
Управление стрелками. Пробел - пауза.