Дизайн формы

[Vlad]

Сюда вы можете выкладывать свои работы по мини-конкурсу Дизайн формы. Работа должна быть сделана в формате PNG-24 или PSD, здесь вы указываете лишь ссылку на неё в следующем виде:

[ hide ] http://htmlbook.ru/themes/hb/logo.png [ /hide ]

BB-коды пишутся слитно без пробелов.

[Petro21]

http://www.fotolink.su/pic_b/1d1a5680f825c289f8a3cc794c4bd687.png

[Vlad]

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

[Petro21]

Беда (

Не могу сделать prtScr выпадающего списка, цвет фона #FFEFD5, а optgroup (фон) - #DEB887

У меня Ubuntu 11.04, Chrome.

Edited September 9, 2011 by Petro21

[Verder]

http://freeway-design.ru/files/form.png Edited September 13, 2011 by Vlad

[s0rr0w]

Как это работает

Выбор коктейля начинается с выбора бокала. От него зависят пункты меню в разделах "Тип", "Крепость", "Основа", как видим, часть из них становится неактивными в определенных случаях.

Ингридиенты выполнены не в виде форм ввода, а таблицы. Это облегчает восприятие информации, хоть и требует немного больше телодвижений. Зато появляется возможность реализовать простую сортировку пунктов при помощи drag'n'drop и не ограничивать выбор пользователя только 7-ю игредиентами. Цветовое решение названий компонентов акцентирует внимание на украшениях.

Время приготовления изменяет шкалу в зависимости от выбора чекбокса "увеличенное время".

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

Размер формы намеренно сжат, чтобы она лучше помещалась на экран пользователя, что повышает удобство пользования.

При заполнении данных об ингридиентах выбор названия и единиц измерения был заменен с нечитаемых списков на форму ввода с автоматическим поиском названия по шаблону. Это существенно ускоряет процесс заполнения формы за счет отказа от более внимательного пролистывания опций.

Дизайн формы

[Temiks]

Edited September 11, 2011 by Temiks

[Анна]

Не успеваю, выкладываю то, что сделала.

http://itmages.ru/image/view/279641/ffe73f93

http://itmages.ru/image/view/279642/33c41190

http://itmages.ru/image/view/279640/fac5fb4c

http://itmages.ru/image/view/279639/543ec27c

[Vlad]

До завтра ещё есть время, на том берегу моря будет примерно полдень, когда приём работ завершится.

[Анна]

До завтра ещё есть время, на том берегу моря будет примерно полдень, когда приём работ завершится.

на всякий случай подстрахуюсь, сегодня - воскресенье, день семье посвящен, завтра, если успею - докончу!

[ctpz]

Времени не хватает. Надо еще кое-что доделать. Если надо закончу. Короче влад лови

Форма на конкурс.psd

Edited September 13, 2011 by Vlad

[Shader]

Моя ссылка

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

Тут крч все ссылки.

Моя ссылка

А вообще тоже многое не успел, последние две страницы - вообще не довел до ума.

И мне кажется, надо было какую-то другую идею брать, более скромную и тихую)

Влад, тебе видны ссылки? А то я все запихал в один bb-код [ hide ]. Так будет тебе отображать все ссылки?

Ответьте, хоть кто-то, ибо мне щас идти нада и завтра буду поздно не успею выложить, если ему не будет видно(((

Edited September 13, 2011 by Vlad

[Shader]

Моя ссылка

Моя ссылка

Моя ссылка

Моя ссылка

Моя ссылка

Моя ссылка

Моя ссылка

Короче, я тут натупил и накидал много раз, ибо не знал можно ли много ссылок в один[hide]

Edited September 13, 2011 by Vlad

[amelice]

http://cheburek.nightmail.ru/notmy/zadanie.png Edited September 13, 2011 by Vlad

[Verder]

А народу то поднабралось, это радует

Edited September 11, 2011 by Verder

[s0rr0w]

Дело не в количестве народа, а в его качестве. Сильная конкуренция расставляет все точки над "ї", давая дизайнеру хороший повод задуматься, а так ли он хорош, как он о себе думает.

[Verder]

Дело не в количестве народа, а в его качестве. Сильная конкуренция расставляет все точки над "ї", давая дизайнеру хороший повод задуматься, а так ли он хорош, как он о себе думает.

Давай объективно - назови еще двух человек (кроме тебя и меня), кто может выдать качественный продукт.

[s0rr0w]

Давай объективно - назови еще двух человек (кроме тебя и меня), кто может выдать качественный продукт.

А фиг его знает. Завтра увидим.

Да, меня из списка вычеркивай. Я не сильно талантливый дизайнер, и я это объективно понимаю и принимаю. Мои работы слишком рациональны, не эмоциональны.

[Verder]

Давай объективно - назови еще двух человек (кроме тебя и меня), кто может выдать качественный продукт.

А фиг его знает. Завтра увидим.

Да, меня из списка вычеркивай. Я не сильно талантливый дизайнер, и я это объективно понимаю и принимаю. Мои работы слишком рациональны, не эмоциональны.

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

[s0rr0w]

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

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

[Vlad]

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

Все работы по ссылкам доступны.

[paracelso]

Доброго утра.

Хочу вам представить, что успел наверстать. Сначала пару слов о том, что здесь где, и почему.

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

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

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

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

Из особенностей хочу выделить два пункта:

1 - Чтобы избавиться от лишних полей на первой вкладке, написал скрипт на js для имитации placeholder'ов в среде IE. Для него и пригодились id у элементов с placeholder'ом. В плане дизайна/вёрстки id мне никак не помогали. Итог - "вроде работает"

2 - Обработка элементов с параметром required тоже потребовала пары строк: форма листается, а значит, в зависимости от незаполненного обязательного поля, придется её для пользователя перелистывать, что и было сделано. На этом всё, надеюсь работа придется по душе. Ссылку и скриншоты с разных браузеров прилагаю.

Ссылка на форму

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

Edited September 13, 2011 by Vlad

[Vlad]

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

[Gidroplan]

http://img546.imageshack.us/img546/3171/litlez.png

при нажамтии на "плюс" добавляется новая строка с ингредиентом

http://img28.imageshack.us/img28/2525/bigc.png

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

[d4rk5eed]

Прикрепляю 2 картинки.Суть формы в том, что она - "аккордеон". То есть если я заполняю один из пунктов в данный момент, то он у меня раскрыт и показывает все свое содержимое. А остальные при этом свернуты. Так, на картинке "Forma_svernutyi_vid" раскрыт (заполняется сейчас) первый пункт списка - "Что готовим?"; остальные сейчас не нужны, поэтому они свернуты. Однако любой из пунктов можно в любой момент скрыть и раскрыть, нажав на треугольничек у заголовка.