01.02.2009

Правила которых я придерживаюсь в веб-дизайне

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


Работа с текстом
При возможности стараться не использовать буллиты. Особенно там, где они не играют особой роли. К примеру, в меню, в списке услуг (продукции), и т.д. Также не использовать стандартные, при необходимости постараться их обыграть.

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

Так же можно не писать слова «телефон». Я думаю, что только дурак не сможет догадаться о том, что это номер телефона. Особенно если рядом указан код города.
Использовать один, два шрифта. Разумеется гротеск и антикву. Не использовать на странице два гротеска. К примеру, Verdan-y и Tahom-y.


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

В любом случаи делать ссылки подчеркнутыми. Я знаю, что это правило теперь и первоклассник знает. Но все же, иногда делают некоторые ссылки не подчеркнутыми, а например другого цвета или размера. Хотя все остальные ссылки, все равно подчеркнуты.
Все ссылки всегда должны быть подчеркнуты.  Можно не подчеркивать, если, к примеру, у нас меню такого вида. Тут и так будет ясно, что все кликабельно.

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

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

Работа с сеткой
Делать все макеты в разрешении 1000 пикселей, также минимальный отступ по 10 пикселей с каждой стороны. Это элементарные правила верстки.

На заметку: Макеты делаются в разрешении 1000 пикселей, а не 1024 (минимальное разрешение на сегодняшний день для разработки сайтов) для того чтобы при появлении вертикальной прокрутки, страница не выходила за края, и не появляясь горизонтальная прокрутка. 


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


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

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

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

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


Поделись с друзьями:


Оставить комментарий:



If you have trouble reading the code, click on the code itself to generate a new random code.
Код на картинке:
 

dhfqyak gstgmy@ifizaq.com
iQfQAg , [url=http://ajtpgkrldfml.com/]ajtpgkrldfml[/url], [link=http://isceaxorrhqd.com/]isceaxorrhqd[/link], http://lgrukbsefxwz.com/
jaskaavfet iibxxj@akzajx.com
GOOHkd <a href="http://cdqbouzxtdxl.com/">cdqbouzxtdxl</a>
ohlehasnevu tpguww@zydcij.com
duJdSX , [url=http://wtstquulbugm.com/]wtstquulbugm[/url], [link=http://xyfmfdwwlwhm.com/]xyfmfdwwlwhm[/link], http://smkhavwumzju.com/
kvwkawdz otitqw@tosbxb.com
D3swUv <a href="http://targyvcxljkv.com/">targyvcxljkv</a>
Deandra stylartstudio@gmail.com
Going to put this atricle to good use now.
Константин http://chuikoff.ru
Отлично, просто супер! Я обожаю читать статьи именно такого плана, все эти мелочи, очень важные и интересные. Хотелось бы по конкретнее узнать про разметку для верстальщика, каким образом ему показать где резина а где нет.

Ещё вы выкладывали пэ-эс-дэ макет, где были направляющие, каким образом и для чего они нужны в макете? Какие особенности их построения? Слышали о золотом сечении? Когда-нибудь применяли?

И жду ещё подобных статей! =)

- - -
С уважением, Константин! www.chuikoff.ru
EfremovBOGDAN jamessmith@mail333.com
"Абсолют-Медиа" - эффективная <a href="http://www.absolute-media.com.ua/index.php?&page=press">реклама в прессе</a>, недорого
Евгений http://designtvoy.com/
интерестные статьи!!!
Евгений дофига
Абсолютно случайно попал на страницы этого блога. Сам уже много лет плодотворно работаю в сфере онлайн-разработок.

Автору - искренний респект.
Как пишет, так и и есть.
Конечно со временем у каждого веб-дизайнера формируется своя манера прорисовки шаблонов, но в целом, все перечисленные пункты - это тот экологический минимум в культуре прорисовки своих (либо чужых) идей.
Сергей artlebedev.ru
Все блять тоже самое в ководстве у Атемия Лебедева. Африку, бля, не откроешь и велосипед не изобретешь, если это уже сделано. И вообще блог отстой, очень похоже на плохую пародию известного дизайнера, хотя иногда встречаются толковые вещи.
Артем alanpaint.ru
Мое имхо, что было бы полезней указать что между заголовком и текстом? вне зависимости от гарнитуры, нужен здоровый отступ, что белый текст на светло-сером фоне не читается (хоть с подчеркиванием, хоть без)
Создание http://blog.ayashimedia.com
Отличный сайт получился!!!
derGriza
Угу. А еще нихера не сразу понятно как коментить пост, и почему ошибки в тексте присутствуют. А так все красиво :)
Виктория http://2estudio.ru/
Спасибо. Хорошая статья. http://2estudio.ru/
Serjart serjart.name
Полезная конструктивная статья для начинающего веб-дизайнера. Такого как я :D
Сорокин Алексей http://amsorokin.ru
http://tema.ru/gb/
Тёма http://tema.ru/
- Детки не надо сориться, правила дизайна они или есть, или их нет!

С вами говорил автоответчик.
К сожалению, Артемий Лебедев не сможет дать вам интервью или принять участие в вашей программе.
Дэн riber
Я говорил о населении России в целом.
Mikola http://tsekhan.com
Дэн riber: "Существенный процент? Людей слабо различающих цвета меньше 5%."

Пять процентов — это очень существенно. Для меня несущественно начинается с одного-двух процентов.
Если вы считаете, что пятью процентами вашей аудитории можно попуститься, то вам никто не мешает.
Алексей, Сорокин http://amsorokin.ru
designcool.ru, я хоть слово сказал про Лебедева?)

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

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

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

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

да и если бы писали имя или хотя бы ник вместо повтора своего блога(сайта, портала как вам угодно) было куда приятней....

P.S.: я не пытаюсь кого то обидеть или унизить. Просто высказываю свое мнение. Учитесь относиться к критике и будет вам счастье =)
Дэн riber
Существенный процент? Людей слабо различающих цвета меньше 5%. Я говорю именно о цвете, а не о всех нарушениях зрения.

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

Исходя из Вашего (Designcool) утверждения, каждый сайт стоит «делать пригодным» для читалок*.

* Используемые слепыми искусственные синтезаторы речи.
designcool.ru http://designcool.ru/
Алексей Сорокин, думаю автор блога тебе еще ответит, но я тоже скажу пару слов.

Подчеркивание ссылок придумал не Лебедев. Т.к существует приличный процент людей с дефектами зрения, которые слабо различают цвета, то ссылки подчеркивают. Это как съезды для инвалидов.

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

Если вы занимаетесь дизайном, то постарайтесь изучить правила русcкого языка и верстки. Троеточие — нормально, дофигаточие — плохо. Запятая после имени и фамилии — хорошо, но не между ними.
Алексей, Сорокин http://amsorokin.ru
глупость это все с подчеркиванием ссылок... подчеркивание всегда с большой легкостью заменяется как цветовым, так и графическим выделением... и пользователи это хорошо кушают и глаз это не мозолит...

а вот у вас комменты идут снизу вверх, когда у большинства наборот... это тоже ваше правило? и дату написание коммента убрали, еще одно глупое правило? только по тексту можно понять откуда читать..... но читать статью сверху вниз, а потом пролистывать до низа и читать коменты в обратном направление... имхо полнейший бред....
........
а если не можете аргументировать то не стоит писать.....или вы конкрекно кому то не можете аргументировать? к критике нужно относится спокойно...
Дэн riber
Алексей, т.е обосновать не можете? Так и думал.
Алексей
Дэн,мне не интересно вам ничего аргументировать.
Дэн http://riber.ru
На счёт ссылок — аргументируй на счёт подчёркивания. Буржуи, например, редко подчёркивают ссылки, им хватает простого выделения цветом. И на таких сайтах достаточно комфортно.

Если Тёма сказал что нужно всегда подчёркивать, это не аргумент.
Mfz http://otrapuse.mfz.lv
Спасибо! Понравилос, как написал.
Юрий http://noblesdesign.ru
Неплохо!) ...основы, начинающим будет полезно.