Решил рассказать некоторые аспекты, которых я придерживаюсь при разработке веб-дизайна. Возможно, многим будет полезно ознакомиться с некоторыми тонкостями, с которыми постоянно приходится сталкиваться при разработке макетов. А также тем, кто только начинает учиться данному ремеслу.
Работа с текстом
При возможности стараться не использовать буллиты. Особенно там, где они не играют особой роли. К примеру, в меню, в списке услуг (продукции), и т.д. Также не использовать стандартные, при необходимости постараться их обыграть.
Использовать сокращения, повторяющихся кодов, номеров.
Достаточно написать один раз, все поймут.
Так же можно не писать слова «телефон». Я думаю, что только дурак не сможет догадаться о том, что это номер телефона. Особенно если рядом указан код города.
Использовать один, два шрифта. Разумеется гротеск и антикву. Не использовать на странице два гротеска. К примеру, Verdan-y и Tahom-y.
Работа с ссылками
Всегда ставить иконку перед ссылкой, если она открывается в новом окне. Например, форма обратной связи, оформлении заявки и т.д.
В любом случаи делать ссылки подчеркнутыми. Я знаю, что это правило теперь и первоклассник знает. Но все же, иногда делают некоторые ссылки не подчеркнутыми, а например другого цвета или размера. Хотя все остальные ссылки, все равно подчеркнуты.
Все ссылки всегда должны быть подчеркнуты. Можно не подчеркивать, если, к примеру, у нас меню такого вида. Тут и так будет ясно, что все кликабельно.
Также если это меню, то обязательно у ссылок должно быть несколько состояний. При наведении, а также, в каком сейчас разделе находится пользователь. Делать ссылку главная на главной странице, и обозначать ее другим цветом не нужно. В других разделах тоже не нужно ставить в меню ссылку на главную страницу. Достаточно того, что у нас есть логотип. Который всегда должен вести на стартовую страницу.
В верстке также не стоит делать логотип на главной странице, ссылающийся на главную страницу.
То есть, ссылку ему назначать не нужно. Можно прописать ссылку только в том случаи, если ссылка в логотипе будет вести на главный сайт компании, а вы, к примеру, находитесь на его дочернем сайте.
Работа с сеткой
Делать все макеты в разрешении 1000 пикселей, также минимальный отступ по 10 пикселей с каждой стороны. Это элементарные правила верстки.
На заметку: Макеты делаются в разрешении 1000 пикселей, а не 1024 (минимальное разрешение на сегодняшний день для разработки сайтов) для того чтобы при появлении вертикальной прокрутки, страница не выходила за края, и не появляясь горизонтальная прокрутка.
Все с чем-то должно быть взаимосвязано. Это уже из оперы композиции, но тем не менее. Стоит помнить, что при добавлении нового шрифта или иконки в макет, работа с композицией начинает быть все тяжелее и тяжелее. К примеру, при добавлении нового стиля шрифта, не стоит забывать, что он должен будет повториться еще где-нибудь, например, на других страницах.
Не забыть о друге верстальщике
Я также помню о тех, кто будет продолжать работать с моим макетом. Поэтому стараюсь делать макеты с обозначенными блоками, дабы показать, что будет резиной, а что нет. Ведь из-за неправильного растягивания, макет может выглядеть абсолютно по-другому.
Если же макет будет статический по центру экрана, то я также, делаю дополнительный вид, как он будет смотреться на широкоформатных мониторах. Или обозначаю это в самом макете.
Подача макета
Всегда показывать макет в окне браузера, плюс делать макет в естественном масштабе, и также превью. Чтобы можно было охватить взглядом весь макет. Это необходимо также и в разработке дизайна сайта. Чтобы охватить всю композицию, а не только шапку или подвал.
Конечно, это не все. В работе всегда встречается что-то новое, охватить все за раз очень сложно. Буду стараться по мере возможности вспоминать и публиковать. Также, если что-то упустил, то дополняйте. Для этого комментарии и существуют, а не для рекламы ваших сайтов.
Отлично, просто супер! Я обожаю читать статьи именно такого плана, все эти мелочи, очень важные и интересные. Хотелось бы по конкретнее узнать про разметку для верстальщика, каким образом ему показать где резина а где нет.
Ещё вы выкладывали пэ-эс-дэ макет, где были направляющие, каким образом и для чего они нужны в макете? Какие особенности их построения? Слышали о золотом сечении? Когда-нибудь применяли?
И жду ещё подобных статей! =)
- - -
С уважением, Константин! www.chuikoff.ru
EfremovBOGDAN
"Абсолют-Медиа" - эффективная <a href="http://www.absolute-media.com.ua/index.php?&page=press">реклама в прессе</a>, недорого
Евгений
интерестные статьи!!!
Евгений
Абсолютно случайно попал на страницы этого блога. Сам уже много лет плодотворно работаю в сфере онлайн-разработок.
Автору - искренний респект.
Как пишет, так и и есть.
Конечно со временем у каждого веб-дизайнера формируется своя манера прорисовки шаблонов, но в целом, все перечисленные пункты - это тот экологический минимум в культуре прорисовки своих (либо чужых) идей.
Сергей
Все блять тоже самое в ководстве у Атемия Лебедева. Африку, бля, не откроешь и велосипед не изобретешь, если это уже сделано. И вообще блог отстой, очень похоже на плохую пародию известного дизайнера, хотя иногда встречаются толковые вещи.
Артем
Мое имхо, что было бы полезней указать что между заголовком и текстом? вне зависимости от гарнитуры, нужен здоровый отступ, что белый текст на светло-сером фоне не читается (хоть с подчеркиванием, хоть без)
Создание
Отличный сайт получился!!!
derGriza
Угу. А еще нихера не сразу понятно как коментить пост, и почему ошибки в тексте присутствуют. А так все красиво :)
Виктория
Спасибо. Хорошая статья. http://2estudio.ru/
Serjart
Полезная конструктивная статья для начинающего веб-дизайнера. Такого как я :D
Сорокин Алексей
http://tema.ru/gb/
Тёма
- Детки не надо сориться, правила дизайна они или есть, или их нет!
С вами говорил автоответчик.
К сожалению, Артемий Лебедев не сможет дать вам интервью или принять участие в вашей программе.
Дэн
Я говорил о населении России в целом.
Mikola
Дэн riber: "Существенный процент? Людей слабо различающих цвета меньше 5%."
Пять процентов — это очень существенно. Для меня несущественно начинается с одного-двух процентов.
Если вы считаете, что пятью процентами вашей аудитории можно попуститься, то вам никто не мешает.
Алексей, Сорокин
designcool.ru, я хоть слово сказал про Лебедева?)
"существует приличный процент людей с дефектами зрения"
всегда есть кому не угодишь... сейчас уже много пользователей у кого мониторы от 20 и выше дюймов, но все же есть те у кого 17шки...
Не возможно все сразу угодить... так что про какие то проценты определенных людей говорить не стоит...
"Если комментарии у всех одинаковые из-за попсового Wordpress"
а смысл был не в движке блога... вы попробуй почитать темы где по несколько комментариев, не всегда сможете понять что было первым написано, а что ответом...
Если автор статьи так гонится за юзабилити для пользователей, основываясь на его правилах, то почему же в комментах нету этого самого юзабилити... всего лишь нужно добавить строчечку с датой и все сразу прояснится...
"Если вы занимаетесь дизайном, то постарайтесь изучить правила русского языка и верстки."
они как-то тесно пересекаются?) удивлен.... я пару лет проработал дизайнером интерьера и что-то ниразу не заметил что правила русского мне нужно учить)))... может быть потому что работал на буржуев, хотя их грамматические правила связанные с "точками" я уж точно не знаю...
"Запятая после имени и фамилии — хорошо, но не между ними."
я хотел написать просто Алексей, но как вы наверно уже заметили под таким именем пишет автор и я долго не выбираю выбрал что выпала из списка автозаполнения...
да и если бы писали имя или хотя бы ник вместо повтора своего блога(сайта, портала как вам угодно) было куда приятней....
P.S.: я не пытаюсь кого то обидеть или унизить. Просто высказываю свое мнение. Учитесь относиться к критике и будет вам счастье =)
Дэн
Существенный процент? Людей слабо различающих цвета меньше 5%. Я говорю именно о цвете, а не о всех нарушениях зрения.
Если целевая аудитория сайта специфична — то имеет смысл подстраиваться. Но не всегда! Правил — нет, есть ситуации, исходя из которых мы решаем как и что будем делать.
Исходя из Вашего (Designcool) утверждения, каждый сайт стоит «делать пригодным» для читалок*.
Алексей Сорокин, думаю автор блога тебе еще ответит, но я тоже скажу пару слов.
Подчеркивание ссылок придумал не Лебедев. Т.к существует приличный процент людей с дефектами зрения, которые слабо различают цвета, то ссылки подчеркивают. Это как съезды для инвалидов.
Если комментарии у всех одинаковые из-за попсового Wordpress, то это еще не объективная причина для жалоб. Идея писать комментарии в обратном направление, вполне логична. Сравните публикацию новостей на блогах и сайтах.
Если вы занимаетесь дизайном, то постарайтесь изучить правила русcкого языка и верстки. Троеточие — нормально, дофигаточие — плохо. Запятая после имени и фамилии — хорошо, но не между ними.
Алексей, Сорокин
глупость это все с подчеркиванием ссылок... подчеркивание всегда с большой легкостью заменяется как цветовым, так и графическим выделением... и пользователи это хорошо кушают и глаз это не мозолит...
а вот у вас комменты идут снизу вверх, когда у большинства наборот... это тоже ваше правило? и дату написание коммента убрали, еще одно глупое правило? только по тексту можно понять откуда читать..... но читать статью сверху вниз, а потом пролистывать до низа и читать коменты в обратном направление... имхо полнейший бред....
........
а если не можете аргументировать то не стоит писать.....или вы конкрекно кому то не можете аргументировать? к критике нужно относится спокойно...
Дэн
Алексей, т.е обосновать не можете? Так и думал.
Алексей
Дэн,мне не интересно вам ничего аргументировать.
Дэн
На счёт ссылок — аргументируй на счёт подчёркивания. Буржуи, например, редко подчёркивают ссылки, им хватает простого выделения цветом. И на таких сайтах достаточно комфортно.
Если Тёма сказал что нужно всегда подчёркивать, это не аргумент.