Часто забываемые элементы дизайна

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

    Итак, начнем. Если Вы рисуете:

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

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

    ru | en, имейте ввиду, что заголовки и разделы на разных языках, имеют разное количество символов.

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

    Новости или всяческого вида ленту, не забывайте про постраничную навигацию (пагинацию). Сейчас еще в моду вошла подгрузка новой партии контента по достижению конца страницы, но при этом контент подгружается не бесконечно, а к примеру 3-4 партии, а после появляется ссылка «загрузить еще...». Да, это тоже желательно отрисовать.

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

    Форму, не забывайте отрисовывать «код антибот», чтоб при верстке, верстальщик заранее вставлял туда какое нибудь статическое изображение, а программист уже заменит на нужный ему код.

    Аватарки (соц. сеть, блог, форум), когда представляете их в различных его видах (профиль, комментарии, пост, топ 10 и т.д), то соблюдайте пропорции, а лучше определите заранее, какие размеры нужно сразу генерировать (50х50, 100х100...) и уже в дальнейшем опираться на эти размеры. Или хотя бы, чтоб можно было варьировать в масштабе, а не так чтобы в одном месте было 100х100, в другом 50х50, а в третьем 64х45.

    Страницы с текстом, наносите на них сразу всевозможные элементы в разном порядке (списки, ссылки, изображения, заголовки, переносы и т.д.). Тогда верстальщик сразу определит стили для них и уже будет меньше проблем с WYSIWYG редактором.

    Ссылки, определите для них цвета (hover, visited).

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

    Ну. И что?
    Реклама
    Комментарии 48
    • +3
      ru | en — вот в этом я много времени потерял. Особенно в формах. Зачастую приходится создавать отдельные css файлы :)
      • +33
        Да, очень часто дизайнеры рисуют общую концепцию в виде двух-трех страниц для заказчика, а верстальщику и программисту говорят волшебное: «А остальное стандартно, ну как обычно». Ох это бесит!..
        • +10
          Такие посылаются сразу лесом. Не впрямую, а посредством повышения стоимости верстки/сборки этих двух-трех страниц. Повышения стоимости ровно настолько, сколько стоили бы недостающие страницы. Потому что это заказчик так пытается сэкономить и на дизайнере, и на верстальщике.
          • +8
            f еще бывает когда выдаешь верстаку все-вымереное до пиксела, делаешь гайд и UI файл с разметкой-говоришь что интерлиньяж у блоков такой-то, отсупы от заголовков 1,5 между анонсами 2-итд-а вотом видишь что он тупо все воткнул копипастом-к заголовкам стили прикрутил, к ссылкам прикрутил и все. А на вопрос а чего интерлиньяж такой-он говорит-а сколько должно быть?

            Все кнопки с 1 стейтом, все криво косо, и он тебе говорит-ну блин на тесте поправим. Так что разные бывают люди-попрошу не обобщать.
            • +6
              Говнюки встречаются везде, друг мой :(
              Это потрясающе, когда дизайнер делает свою работа настолько кропотливо и выдает на выходе достойный результат, с которым приятно работать, серьезно. Жаль только, что таких дизайнеров мало. Я своего друга в дизайне подтягиваю и заставляю прорисовывать все до мелочей, поначалу это его действительно раздражало и постоянно звучала фраза: «Ну ты что, сам не можешь там уже сделать?». Тогда я сделал сам ;) Да так сделал, что ай-ай-ай, после этого урока подобных фраз я не слышал уже полтора года и всегда получаю практически идеальные макеты: с сеткой, в wide и minimal состоянии, со всеми состояниями активных элементов, со всеми формами (хотя с ними дела обстоят пока хреново) и, что самое главное, с текстовым файликом с параметрами документа :) Это безумно удобно, когда все цвета, размеры и характеристики собраны в одном файле, что не приходится постоянно тыкаться в фотошоп.
              • 0
                Полностью поддерживаю. Я хоть и не проф. верстальщик, но верстать приходится иногда. Про состояние кнопок и ссылок я уже забыл давно, PSD у 70% составляют пронумерованные layer (layer1, layer2, layer3, etc..). Часто даже на цвета забивают, а потом начинается «а тут не такой должен быть цвет, на других страничках же другой», хотя я буквально пипетка -> скопировать цвет как html.
            • +1
              Бывает что дизайнеру заказывают «Общую концепцию», а заказчик за остальные страницы просто не готов платить и отмахивается на «Остальное стандартно». Как правило тут и верстальщик шарашит Стандартно за 500 рублей. Заказчик съэкономил и доволен.

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

              Если же говорить про процесс в студии, то тут уже договоренности Дизайнер-Технолог. У нас как правило Технолог говорит что ему необходимо отрисовать и сделать, а что он сам сделает. Наш Технолог молодец и он вполне многое делает сам.
              • +7
                А ещё бывают макеты, в которых среди нормально названные и группированных слоёв, есть пицот слоёв с названиями типа «Layer28». 80% из них отмерли в процессе работы над макетом, а вот 20% ещё актуальны. Увлекательнейший, мля, квест…
                • 0
                  ой тут все просто-кнопка есть-убить все выключеные слои

                  макет-final? значит все что видно -надо-сотальное нет. Если там были всякие ховеры-то об этом можно спросить-типа дизайнер а у тебя все стейты в макете? или я убиваю все слои не влюченые-обычно если дизайнер не уверен-то начинает сам шелестеть.

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

                  Поверьте не всегда в 30 скринах бывает возможно поправить 60 завитушек-которые в последний момент заказчик именил-в уже заапрувленых макетах. Не всегда имеет смысл пдписывать все слои-если есть папка-которая называется «иконка»- вы ее сливаете в 1 и все. У всех бывают косяки и недоработки-на это у людей есть язык и разум-что бы спрашивать и искать компромисы. Потому что у всех на выходе одна цель-сделать так, что бы не стыдно показать было.
                  • 0
                    Вот пусть дизайнер и нажмет эту кнопочку, прежде чем отдавать макет. А так же распихает оставшиеся «LayerХХ» по папкам, к которым они логически относятся (а то ведь они в корне валяются), если ему уж так в лом дать им вменяемые имена.
                    При чём тут поправка 30 скринов?
                    P.S. <irony>Из вашего камента куда-то пропала часть пробелов, запятых и точек. Парсер — лох?</irony>
                  • 0
                    Да кстати-я дизайнер)))
                    • 0
                      Это было очевидно после первого прдложение предыдущего вашего сообщения.
                      • 0
                        «после первого предложения предыдущего вашего сообщения» имелось ввиду. Хотел 2 варианта одной мысли разом написать :)
                        • 0
                          Блин, заработался :( Перечитал свой первый пост и не понял его. Переписал его заного, засабмитил, оказалось тоже самое, только ошибку в слове поправил, что изначально и хотел сделать…
                  • 0
                    Когда работаешь постоянно с одними и теми же людьми, то как раз такое «взаимопонимание», прешедшее со временем совмествой работы, хорошо экономит время, затрачиваемое на проект. И имхо верстальщик не программист =)
                    • 0
                      Да и программист не всегда верстальщик :-)
                      Конечно, базовые принципы он знать обязан, и проверить верстку должен уметь, мелкие фиксы сам сделать. Но сделать полноценную верстку — часто уже за пределами.
                      • 0
                        Верстальщик должен быть слегка программистом, он должен понимать, как лучше сверстать динамически элементы с расчетом на то, что они скоро оживут.
                    • –1
                      Спасибо, полезно.
                      • 0
                        Аватарки (соц. сеть, блог, форум), когда представляете их в различных его видах (профиль, комментарии, пост, топ 10 и т.д), то соблюдайте пропорции, а лучше определите заранее, какие размеры нужно сразу генерировать (50х50, 100х100...) и уже в дальнейшем опираться на эти размеры. Или хотя бы, чтоб можно было варьировать в масштабе, а не так чтобы в одном месте было 100х100, в другом 50х50, а в третьем 64х45.

                        А написать

                        <style type="text/css">
                        .avatar {
                          width:200px;
                          height:200px;
                          text-align: center;
                          vertical-align: middle;
                          display: table-cell;
                        }
                        </style>

                        <div class="avatar">
                          <img src="img.jpg" alt="">
                        </div>


                        вам какая религия не позволяет?
                        • –1
                          Ваш css некорректен, правильней сделать так .avatar img {}
                          Даже если я сделаю по Вашему, вы считаете будет красиво если сгенерированная превьюшка будет квадратной, а дизайнер ее представит прямоугольной? По моему вы написали именно про варьирование масштаба, как я и описал.
                          • +3
                            Извиняюсь, обознался. Стиль именно к диву прописан.
                            • 0
                              Я написал про центровку аватарки, дабы выглядело лучше на фоне разного размера аватарок.
                              Вместо 200px ставите любые цифры, при аплоуде аватарки ресайзите пропорционально по большей стороне, максимальная сторона — 200px (к примеру).
                              • +2
                                Все верно, но вы не считаете, что это костыль?
                                • 0
                                  Ну лично мое мнение что тут более применим термин «унификация» с пояснением: «Все по центру, не больше 200px по сторонам».
                                  • 0
                                    Я считаю тут должен дизайнер стандартизировать, дабы избежать унификаций верстальщиком.
                                    • 0
                                      Дизайнер не может, хоть и должен, рассмотреть все use-case'ы какого-либо элемента дизайна в голове, нужна «рыба», которую делает верстальщик.
                                      И, к слову, я — программист :)
                                      • +4
                                        Остановимся на ключевой фразе «Дизайнер не может, хоть и должен» :)
                          • +1
                            По-большему счету вы описали некоторые части проектировки сайта и элементы из gui-файла, который обычно никто вообще мне не передает, потому что дизайнеры впервые о таком слышат. Я уже молчу про всякие там layer comps.

                            И да, с чего вы взяли, что форма логина у всех одна?
                            • +1
                              Я описал классический случай с формой.
                              • 0
                                Ну да — я тоже видел кодеров которые в первый раз слышат про UI файл-а когда его видят, предпочитают туда не заглядывать-что бы не было столько возни. А то дизайнеры понарисуют, понаизёёёё-ся, а им бедняжкам делай.
                                • 0
                                  Я без этой штуки уже не могу работать. Если нет, то мучаю дизайнера где глобальные настройки текста, какие ссылки бывают, кнопки, элементы форм, не стандартизированы ли размеры иконок и прочее. Собираю всё в один файл и по нему переопределяю значения «по умолчанию».
                              • +8
                                Еще очень часто дизайнеры забывают, что контента на сайте, как правило, больше или меньше чем обычно рисуется в дизайне. Причем, если дизайнер никогда не верстал, ему очень тяжело что-либо объяснить. Вывод: «для улучшения взаимопонимания на пару недель посадить дизайнера на верстку. Причем дать верстать именно его макет».
                                • 0
                                  Причем дать верстать именно его макет


                                  Это дааа. Вытаскивать из колес палки, которые сам себе туда засунул — пренепреятнейшее занятие, в итоге желание засовывать палки в колеса отпадает.
                                  • 0
                                    Ага, а перед этим еще научить его верстке. профессиональной. иначе то что он сверстает можно будет почти сразу выкинуть.
                                  • 0
                                    хи хи-а верстака на дизайн))))
                                    МЫ кстати делали так-только внутри отдела-полиграфистов сажали на веб, а веберов на видео или 3Д-очень полезно бывает кстати))))
                                  • 0
                                    > Форму входа, не забывайте про «восстановление пароля», про чекбокс «запомнить меня», а так же про страницу регистрации пользователей.

                                    Как же меня бесят сайты, где сразу не видно кнопки регистрации. И причем ладно бы это был один сайт. Заходишь, хочешь зарегестрироваться. Ан нет кнопки. Вбиваешь в поле логи накой нить бред и нажимаешь войти. Появляется страница «Логин пароль не верны, возможно вы еще не зарегестрированны (ссылка)»
                                    • 0
                                      А вы на сайте skype.com попробуйте с первого раза сам скайп скачать. Тут некоторые регистрации отдохнули и нервно перекурили в сторонке. Но согласна, что регистрация где-то в правом верхнем уголке промиж рекламы — это вынос мозга…
                                      • +1
                                        А меня вот бесят пользователи, желающие зарегистрироваться. Когда регистрации просто нет. Да, бывает и так — логин и пароль есть, зарегистрированные пользователи есть, а регистрации открытой — нет. И написано об этом «на каждом заборе», включая и саму форму регистрации. Но чукча ж не читатель… приходится держать в почте шаблон письма «Открытой регистрации у нас нет, никогда не было и не будет».
                                        • 0
                                          … включая и саму форму регистрации авторизации, конечно же. Прошу прощения.
                                      • +4
                                        К слову, комментарии дали мне советов гораздо больше, чем статья.
                                        • +2
                                          А ещё в меню (где ожидается «Новости» или «Главная») заказчик может воткнуть надпись вроде
                                          «Общественно-благотворительный фонд развития гимназии номер восемьдесят девять».
                                          • +1
                                            А ещё бы я написал о том, что страницы в Web иногда бывают высотой 2000-3000 пикселей, и эта вон огромная фоновая красивая картинка-рамка не растягивается по вертикали.
                                            • +1
                                              Дизайнеры разные попадаются, у некоторых просто нет чувства дизайна страниц, при том что они неплохие дизайнеры в целом. Часто приходится встречать отрисованные фиксированные блоки, к примеру под меню, которые не раздвинуть. Чем они руководствуются? Хотя это видимо как раз и есть разница между математическим и креативным мышлением — такие люди не привыкли думать на несколько ходов вперед.
                                              • 0
                                                не только начинающие, но и «гуру» тоже часто забывают про это всё.
                                                • 0
                                                  Часто и программисты, и верстальщики забывают все то, что вы описали!
                                                  Как нарисовали, так и сверстали, не подумав как будет тянутся и т.д.

                                                  Я, обычно, не надеясь на память дизайнера, сам предоставляю набор требований к техническому дизайну (кнопочки, стили списков, таблиц, форм… ). Так экономится время и сразу можно показать дизайнеру, как то что он нарисует должно в итоге работать.
                                                  • +2
                                                    на моей памяти всегда забывают нарисовать форму восстановления пароля («забыли пароль»).
                                                    а так же «ошибки валидаци и прочие ошибки».
                                                    • +2
                                                      У нас дизайнер на проекте — француз, никогда не верставший, сидящий за маком в хроме и понятия не имеющий про ИЕ и его трудности. Рисует от души… рядом 6 кнопочек, 2 из них высотой 26 пикселей, одна 25, одна 27, одна 28, одна 24… хотя все кнопочки равнозначны. Относительно друг друга кнопочки сдвинуты на различное расстояние. А у нас есть и гайдлайны и т.п. Он же их и правит. В итоге получается, что значения берутся из фотошопа и border-radius в 1px у кнопочки при верстке не видать в принципе… Пыталась его учить, что-то объяснять. Но тогда он прикидывается валенком и ничего не понимает по-английски ) Это не языковой барьер — это творческий подход. Но подход печалит…
                                                      • +2
                                                        В статью можно еще favicon добавить и страницу с 404 ошибкой

                                                        Ну а со стороны дизайнера я устал говорить что:
                                                        Favicon можно ставить пнгшкой
                                                        Trebuchet MS действительно web-safe шрифт
                                                        Шрифты из google.com/webfonts не нужно верстать картинками, если используется более чем 1 раз в сайте
                                                        итд

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

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

                                                        Самое читаемое