Лучший дизайн формы

[Vlad]

Участники располагаются в том порядке, как сдавали работы. Где только один рисунок, даётся прямая ссылка на него, если работа с описанием и несколькими изображениями, то ссылка идёт на сообщение.

Petro21 (http://www.fotolink.su/pic_b/1d1a5680f825c289f8a3cc794c4bd687.png)

Verder (http://freeway-design.ru/files/form.png)

s0rr0w (http://forum.htmlbook.ru/index.php?showtopic=29186&view=findpost&p=222128)

Temiks (http://forum.htmlbook.ru/index.php?showtopic=29186&view=findpost&p=222187)

AnnaP (http://forum.htmlbook.ru/index.php?showtopic=29186&view=findpost&p=222193)

ctpz (http://narod.ru/disk/24793330001/Форма на конкурс.psd.html)

Shader (http://forum.htmlbook.ru/index.php?showtopic=29186&view=findpost&p=222241)

cheburek (http://cheburek.nightmail.ru/notmy/zadanie.png)

paracelso (http://forum.htmlbook.ru/index.php?showtopic=29186&view=findpost&p=222281)

Gidroplan (http://forum.htmlbook.ru/index.php?showtopic=29186&view=findpost&p=222297)

d4rk5eed (http://forum.htmlbook.ru/index.php?showtopic=29186&view=findpost&p=222311)

exessqd1 (http://s3.dump.ru/viewer/5379905/)

Голосование продлится до 15 сентября 07:00 UTC. После этого определим победителя.

[Great Rash]

Мое мнение:

1 место - exessqd1 вне всяких сомнений!

+ Единственный человек который показал как будут выглядеть неправильно заполненные (незаполненные) поля.

+ Форма разбита на шаги, что очень удобно для юзера.

+ Дизайн приятный.

- Нестандартные поля типа <select>, верстать их будет очень непросто.

- В ИЕ пропадут тени от текста, из-за чего форма потеряет часть дизайнерских красивостей.

2 место - s0rr0w

+ Активны опции, необходимые только в определенном коктейле.

+ Подсказки при заполнении полей с названием ингредиента.

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

- Опять же шрифты не будут выглядеть так же в ИЕ.

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

- Чекбоксы не очевидны, все привыкли к галкам в них, а эти вводят в заблуждение (то ли неактивны, то ли чекнуты).

- Нет возможности загрузить свою картинку (или я не увидел).

3 место - Temiks

+ Форма разбита на шаги, что удобно.

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

- Нестандартные поля типа <select>. Осложняет верстку.

- Наличие некроссбраузерных контролов (выбор количества ингредиентов и порций), которые придется эмулировать для ИЕ.

- Опять же тени от текста, которых не будет в ИЕ.

4 место - Verder

+ Использование стандартных (для MAC) котнролов. Я так понял, что разрешается использовать для каждого браузера "родные".

+ Приятное общее впечатление.

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

- Мелковаты шрифты (имхо это просто болезнь автора).

- Форма не разбита на шаги (ну или это никак не продемонстрировано).

Остальные работы откровенно слабые. Работу ctpz не смотрел, т.к. надо скачивать архив, а это делать влом. Все - мое имхо, в судьях не состою

[lexxcode]

У, exessqd1, дизайн больше всего понравился, по всем параметрам.

Вариант Shader, оригинален и красив, но как-то перегружено выглядит, акцент уходит на всякие красивости вокруг, а с формы внимание уходит.

Остальное не впечатлило.

[mishka]

Голосование не продуманное.

Я хочу отдать одной работе 3 балла, другой 2 балла, третей 1 балл, но при голосовании приходится все работы ставить на один уровень.

Выделил 4 работы:

Verder (http://freeway-design.ru/files/form.png)

s0rr0w (http://forum.htmlbook.ru/index.php?showtopic=29186&st=0&p=222128entry222128)

Temiks (http://forum.htmlbook.ru/index.php?showtopic=29186&st=0&p=222187entry222187)

exessqd1 (http://s3.dump.ru/viewer/5379905/)

Работы где нужно чето скачивать не смотрел, так как лениво. Казалось бы, скачай да посмотри, но вот лениво и все тут.

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

По дизу я бы расставил данные работы так:

1. exessqd1

2. Temiks

3. Verder

4. s0rr0w

По юзабельности:

1. s0rr0w

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

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

Все пошли на поводу задания и сделали это селектами. И только s0rr0w сделал это самым удобным для заполнения.

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

Селект нам такой возможности не предоставит.

2-3. exessqd1, Temiks

Работы почти одинаковые, у Temiks выбор бокалов лучше сделан. Но диз приятнее у exessqd1 это тоже улучшает восприятие.

4. Verder

Отличная работа, но по юзабельности уступает(имхо) первым трем.

голосовал за все 4 работы

если совместить работы s0rr0w и exessqd1 получится что-то близкое к идеалу

Shader (http://forum.htmlbook.ru/index.php?showtopic=29186&st=0&p=222241entry222241) Удобство под сомнением, но оригинальность вне всяких похвал. Не резюмировал работу, так как не считаю ее жизнеспособной и удобной.

Сделать можно и такое, но удобнее она не станет.

P.S. Резюме от Great Rash увидел только после того как свое опубликовал.

[exessqd1]

Голос за s0rr0w, но правда где-то посередине.

[Shader]

Shader (http://forum.htmlbook.ru/index.php?showtopic=29186&st=0&p=222241entry222241) Удобство под сомнением, но оригинальность вне всяких похвал. Не резюмировал работу, так как не считаю ее жизнеспособной и удобной.

Сделать можно и такое, но удобнее она не станет.

Не успел доделать.

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

[Vlad]

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

[CalvinKlein]

Отдал свой голос за exessqd1(s3.dump.ru/viewer/5379905/)

Следующий конкурс можно делать на вёрстку этой формы)))

Edited September 12, 2011 by CalvinKlein

[mishka]

Не успел доделать.

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

По твоей работе можно сделать вывод что к тебе можно обращаться за креативом.

[1nfecteD]

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

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

Шейдер, не так ли?

[Shader]

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

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

Шейдер, не так ли?

Совершенно верно!

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

[Android]

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

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

Шейдер, не так ли?

форма КЛАСНАЯ получилась, но постоянно хочется наклонить голову набок немного неудобно

[Shader]

форма КЛАСНАЯ получилась, но постоянно хочется наклонить голову набок немного неудобно

Уже вижу некоторые ошибки, которые бы блин прям щас поменял, но все уже

Спс, конечно, рад, что понравилось!

[Vlad]

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

[Shader]

Первое место - exessqd1, работа хорошая, но стандартная - такие везде, на всех сайтах и у всех ребят практически.

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

Дальше либо вердер либо сорров, ну так у вердера понравилось, только перая страничка, а у соррова - уже как-то перебор с фичами, уж слишком "детальная работа" получилась и такой диз, только на виндовс ставить, а не на сайт о коктейлях!

Edited September 12, 2011 by Shader

[Great Rash]

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

Как предполагается верстать повернутую форму? С учетом того, что в ИЕ проблематично повернуть элемент на странице.

[mishka]

Первое место - exessqd1, работа хорошая, но стандартная - такие везде, на всех сайтах и у всех ребят практически.

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

Дальше либо вердер либо сорров, ну так у вердера понравилось, только перая страничка, а у соррова - уже как-то перебор с фичами, уж слишком "детальная работа" получилась и такой диз, только на виндовс ставить, а не на сайт о коктейлях!

Ты подходи к делу так:

Эта форма не для развлекушек и заманивания юзверей.

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

Посмотрите на дизайны приложений айфона:

Они серы и не впечатляющие, но они мягкие и не отталкивающие, именно это и нужно.

У s0rr0w форма удобная для заполнения + видна вся целостная картина того что получится. А это и есть главное.

[Shader]

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

Как предполагается верстать повернутую форму? С учетом того, что в ИЕ проблематично повернуть элемент на странице.

Блин, когда делал ориентировался на повернутую тетрадь, если будет нужно я поверну..

И думал верстатся будет под новейшие браузеры и поворот там не ...т, не мешает крч)

Первое место - exessqd1, работа хорошая, но стандартная - такие везде, на всех сайтах и у всех ребят практически.

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

Дальше либо вердер либо сорров, ну так у вердера понравилось, только перая страничка, а у соррова - уже как-то перебор с фичами, уж слишком "детальная работа" получилась и такой диз, только на виндовс ставить, а не на сайт о коктейлях!

Ты подходи к делу так:

Эта форма не для развлекушек и заманивания юзверей.

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

Посмотрите на дизайны приложений айфона:

Они серы и не впечатляющие, но они мягкие и не отталкивающие, именно это и нужно.

А что вам не нравится, я тут посмотрел вы росставили участников практически так же... Только не считая 3-4 место.

Я понимаю это все... зачем мне тут про айфоны заливать?) Просто у первого участника (ник уже забыл, ексес как-то) тоже серый, но смотрится получше!

Edited September 12, 2011 by Shader

[mishka]

А что вам не нравится, я тут посмотрел вы росставили участников практически так же... Только не считая 3-4 место.

Я понимаю это все... зачем мне тут про айфоны заливать?) Просто у первого участника (ник уже забыл, ексес как-то) тоже серый, но смотрится получше!

Давай на "ты".

Это мой ответ тебе на

Первое место - exessqd1, работа хорошая, но стандартная - такие везде, на всех сайтах и у всех ребят практически.

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

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

Посмотрев на твою форму я скажу: "Вау, красиво, оригинально." Но если мне скажут что мне ее нужно практически каждый день заполнять, то я от нее откажусь.

[Shader]

У каждого свое мнение! У тебя такое, у меня такой, я тебя не заставляю думать иначе, просто объяснил как я думаю.

[Akaciya]

Мое субьективное мнение:

Petro21 - нет... шрифты из разных семейств сбивают с толку, набор полей никак абы как, ацкие вишенки вместо галочки).

Verder - да, единственное что меня устроило по дизайну и юзабилити, только заголовки бы покрупнее сделала. Бегунки бы убрала. И если уж все такое закругленненькое, почему-то "Теги", "Бокалы" и т.п. прямоугольные.

s0rr0w - нет, я бы замучилась выбирать бокал, да еще такой огромный он зачем-то. Скролы вертикальные не нравятся в виде бледной полоски, бэкграунд в скроле "Сложность" не нра). А еще шрифт утопленный не нравится, ощущение что я настройки к игре рассматриваю, что-то типа громкость звука, четкость изображения и т.д. Никак меня это не настраивает на выбор коктейля.

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

AnnaP - то ли недорисовано, снизу выступает кусок бэкграунда, мягкости/сглаживания не хвататет чтоли... Сама идея нравится, доработать и будет вкусно.

ctpz - не стала скачивать

Shader - мелко как-то и пошаговость не нра.

cheburek - нет, бледновато, текст плохо читается на просвечиваемом фоне, хотя цвет приятен. Шрифты разные - не кул, в боксе "Украшения и бокал" откуда ни возьмись наклонный шрифт, чуть получше чем у Petro21

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

Gidroplan - красиво... для плаката. Непривычные селекторы торкают в мозг. Как интересно они бы выглядели раскрытыми), очень мелкие радио-батоны - раздражало бы заполнять такую форму.

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

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

Edited September 12, 2011 by Akaciya

[mishka]

Вспомнил конкурс канваса.

Приятнее всего было играть, несмотря на самый прозаичный дизайн, вот в эту версию игры: http://forum.htmlbook.ru/index.php?showtopic=28492&view=findpost&p=214975

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

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

ничего общего с коктейлями - ну и ладно .

Блог на вордпрессе про цветы.

Захожу в админку, а там, о какой ужас, ничего общего с цветами.

Не буду я вести этот блог.

[Temiks]

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

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

[Vlad]

Поддерживаю, здесь скромность в цветах достоинство, а не изъян.

[Petro21]

Мое субьективное мнение:

Petro21 - нет... шрифты из разных семейств сбивают с толку,

Да ладно, шрифт один и тот же, просто один увеличен, второй с наклоном сделан и цвет поменял. О каких семействах может идти речь.

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

Вот мое мнение.

Edited September 12, 2011 by Petro21