Золотые правила успешной кнопки

[korjik]

Эту статью стоит показать многим дизайнерам/верстальщикам со словами: «Учитесь, блин!».

[ha7y]

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

[Defite]

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

[deluser]

Радуйтесь, что с вами не начали спорить и сливать карму. :-D

Статья классная, про обводку запомнил.

[Defite]

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

[egormerkushev]

А клиенты потом не задают вопросов: «А почему тут кнопка не как в макете?»

[Defite]

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

[Night_Coder]

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

[yahujik]

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

[egormerkushev]

Скорее надо было ответить так: «Хороший верстальщик должен уметь объяснять дизайнеру, что тот не прав, до момента сдачи дизайна клиенту. А хороший дизайнер, соответственно, узнавать мнение верстальщика».

[Defite]

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

[ngreduce]

Хороший верстальщик сверстает то, что ему дадут. Проблема дизайна это проблема дизайнера и владельца сайта.

[Defite]

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

[ngreduce]

Между додумать, и сверстать как захочется есть тонкая, но важная грань.

[Defite]

Я имею в виду именно додумать. Сверстать как захочется я могу и без дизайнера.

[macgera]

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

Врпочем я считаю что людей которые не умеют верстать или ничего не знают о html/css вообще не пушечный выстрел нельзя к дизайну сайта подпускать!

[Defite]

Стало быть вы мне в карму плюнули за то, что мое мнение не совпадает с вашим? Ну удачи.

[macgera]

o.O

[spiritedflow]

Телепат, фигле. Что на самом деле нужно клиенту, догадается. Кто в карму плюнул, узнает :)

[Defite]

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

[macgera]

Вам сколько лет? Знаете, взрослость обязывает. Я 100000000 раз подумаю, перед теми как тратить свое время на религиозное «красиво» в убыток благосостояния своей семьи.

Я искренне понимаю ваше стремление к перфекционизму, но милуйте, ваши потуги будут ценить единицы! И когда среди масс говнокодеров-школьников(они кстати не все говнокодеры), которые демпенгуют рынок, тратить на работу 16 часов вместо 14 а то и 10-8 в зависимости от количества «неТорт» дизайнера, довольно не приятно. Рано или поздно РАЦИОНАЛЬНОСТЬ возмет над вами вверх.

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

Хотя в 90% случаев я отправляю ноты дизайнеру. Это нормально.

[Defite]

Скорее всего, мы друг друга просто не поняли. Я говорю не об извращенном pixel perfect, а об обычной красоте, когда бесит, что пиксель или два в блоке режут глаз.

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

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

[Nepherhotep]

Хотя бы потому, что не редкость — это одна и та же личность :))

[macgera]

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

[coocheenin]

Вот это образец настоящего юзабилити! Супер.
А не то, что некоторые «теоретики» пытаются нам за него выдать.

[Chesnovich]

В основном пользуюсь кнопками Twiiter bootstrap

[zim32]

Если бы ещё научились менять перспективу в зависимости от прокрутки — такое себе псевдо-3Д было вы вообще здорово

[DeleteOne]

Думаю, это вполне возможно сделать текущими средствами.

[LeeMiller]

Спасибо за перевод. А дайте ссылочку на источник пожалуйста.

[designiac]

В конце поста же. Между автором и социальными кнопками.

[LeeMiller]

простите туплю

[designiac]

Огромный плюс еще в том, что всё наглядно показано. Сохранил себе статью. Переводчику спасибо :)

[viem77]

В восьмом пункте кнопка все же «направо», а не «налево» (an arrow pointing right), а то когнитивный диссонанс приключается.

[shimapa23]

Исправил, спасибо

[This_man]

В избранное, однозначно.

[Mystex]

Какие красивые кнопки!

[Skpd]

Отличный перевод, спасибо =)

[RiderSx]

Спасибо за перевод! Кто знает, что за чудо-шрифт используется в кнопочках? :)

[XHunter]

По-моему, это обычная Хельветика. Может только немного сжатая

[RiderSx]

Нет, точно не Гельветика :)

[designiac]

Похож на Din

[shimapa23]

DIN 1451

[FreeS]

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

[designiac]

Возможно Din

[Avantasia]

Спасибо за перевод! Примеры очень стильные, без лишних деталей.

[vitaly44]

во многом согласен
во многом не согласен…

1. Кнопка должна быть Глаголом. Кнопка выполняет действие, это глагол. Пример: Загрузка — не правильное название. Загрузить — правильное, но после этого должна сразу пойти загрузка.

2. Про иконки — сложная тема. Иконка должна давать юзеру понять не что будет, а каково состояние кнопки сейчас. К теме про стрелочки… Стрелочка вбок означает что элемент свёрнут, а стрелочка вниз — развёрнут. Я бы такое вообще на кнопке не размещал.

3. Про состояние — во многих пунктах одно и тоже с разных сторон обмусоливается… Идея проста: определить возможные состояния и отрисовать их. Всё.

4. Надо учиывать локализацию.

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

[andrewleshchynskyy]

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

[Zaboday]

Перевод отличный.

Генератор кнопки для Bootstrap фреймворка
charliepark.org/bootstrap_buttons/
Кнопки на все случаи жизни
www.sciweavers.org/i2style
Еще кнопки
super.hubspot.com/buttons/
Еще известный генератор
css-tricks.com/examples/ButtonMaker/
Кнопки от зубров
www.zurb.com/blog_uploads/0000/0617/buttons-03.html

[Zagat]

Хороший и нужный перевод. А то сейчас такие сайты что хочется дизайнера сжечь или видеть натянутым на кол

[Siarhei]

Тему кнопок можно копать дальше: с т.з. WAI-ARIA и взаимоотношений с клавиатурой (особенно с tab-ом и нюансами outline свойства css)

[maDByte]

Также хотелось бы поделиться двумя пакетами для прототепирования интерфейсов. Мне кажется они позвоялют сильно экономить время при разработке интерфейсов:
Futurico UI Free: designmodo.com/futurico/
Impressionist UI Free: designmodo.com/impressionist-free/