Дизайн сайта основные правила
Дизайн сайта основные правила5 основных правил веб-дизайна
=== Скачать файл ===
Мое хобби - разработка сайтов, но со временем это переросло в постоянный и стабильный источник дохода. С чего начинается разработка сайта? Правильно, с внешнего оформления или дизайна. Дизайн — это то, что в первую очередь видит посетитель, когда заходит на сайт. Вот основные правила, которыми должен руководствоваться дизайнер при разработке макета сайта. Пишу это от себя, как верстальщик. Уж кто, кто, а верстальщик эти правила точно знает. Уважаемый веб-дизайнер, если вы читаете эту статью, то, пожалуйста, отнеситесь серьезно ко всему, что изложено ниже и тогда у вас будет шанс остаться не укушенным взбесившимся верстальщиком. Прежде, чем приступить к работе обязательно внимательно ознакомьтесь с техническим заданием ТЗ. Вы должны детально его изучить, вникнуть в каждый элемент, понять в чем суть его интерактивности. Если вы в чем то сомневаетесь, то обязательно проконсультируетесь с руководителем проекта или с самим клиентом. Поверьте, впустую потраченное время, на не правильную прорисовку логотипа или какого либо центрального элемента сайта вам никто не возместит. Вы всегда должны знать возможности вашего верстальщика. Часто случались такие ситуации, когда дизайнер нарисовал, к примеру, видеоплеер с возможностью переключения качества видеопотока, да еще и с превью видеороликов, выстроенных строго под блоком самого плеера. Нет, реализовать конечно можно, но не в той пропорции бюджета и времени, что были озвучены изначально. Помните всегда о том, что веб-дизайнер должен тесно сотрудничать с верстальщиком, чтобы не случилось различных казусов. Если у вас стоит тридцатидюймовый дорогущий монитор, то это вовсе не означает, что вы должны рисовать макет в px по ширине. Вы должны понимать — вы пока в меньшинстве. Здесь существуют некоторые правила и стандарты. Ширина макета указывается в пикселях и должна быть с точностью до одного пикселя, то есть круглые цифры и никаких там px или px, к примеру. Также это касается всех блоков, которые у нас будут присутствовать в макете: Обычно ширину макета подстраивают под самое распространенное разрешение экрана. В последнее время я прошу дизайнера, чтобы он рисовал дизайн по модульной сетке фреймворка twitter bootstrap , шириной px. Когда дизайн нарисован строго по сетке это значительно упрощает верстку. Всегда придерживайтесь строго размеров блоков пиксель в пиксель. Поймите, эти несколько десятков неучтенных пикселей могут повлечь за собой в итоге серьезные последствия. Если сайт будет фиксированным, то обязательно указываем ширину холста чуть шире ширины основного блока контейнера сайта и задаем фон — в качестве фона может быть изображение, или просто градиент, или однотонная заливка. Впрочем, о фоне мы еще поговорим. Все слои в макете должны быть тщательно сгруппированы и подписаны адекватными именами. Вот, к примеру, на сайте есть различные модуля. У каждого модуля присутствует заголовок. Так вот, заголовок в макете имеет два слоя: Исходя из выше сказанного, должна быть некая иерархия групп слоев. Такая группировка очень упрощает жизнь верстальщику. Слои никогда не должны быть склеены, лучше объединить их в группу, а там уже верстальщик сам разберется, склеивать их или нет. Также, особое внимание уделите режиму перекрытия, чтобы не было такого, что отключаешь все слои, кроме нужного, а он изменил свой цвет — перекрасился из красного цвета в белый. Отключенные слои лучше не оставлять и удалять при передаче макета верстальщику. В слоях не должно быть ничего лишнего, так как верстальщик может легко запутаться. Задний фон — основная проблема начинающих дизайнеров, вернее это проблема встает перед верстальщиком. Дизайнер должен понимать, что макет сайта это не просто красивая картинка, это сложный и динамичный сайт, который может растягиваться и сжиматься как по вертикали, так и по горизонтали. Если вы рисуете картинку на заднем фоне и располагаете ее по центру, то она ни в коем случае не должна иметь обрезанные края. И еще, на заднем фоне всегда должен быть какой то фрагмент однородного фона, который верстальщик может пустить на повторение. Данный фрагмент может быть как однородной заливкой, так и градиентом. Здесь имеется ввиду переход на какой-то однородный фон. Веб-дизайнер при подборе шрифтов для сайта должен учитывать следующее: Что значит стандартные и нестандартные? Стандартные шрифты — это те шрифты, которые установлены в операционной системе по умолчанию. Можете их выписать и держать в качестве шпаргалки. Нестандартные шрифты — это шрифты, которые не установлены в операционной системе. Обычно нестандартные шрифты подгружаются в шаблоне сайте посредством правила font-face. Следует иметь ввиду, что использование нескольких нестандартных шрифтов — нежелательно, т. Здесь еще зависит от того, какие начертания шрифтов использует дизайнер — чем больше начертаний, тем тяжелее шрифт. Желательно не использовать платные шрифты, так как потом возникают проблемы с их преобразованием для WEB. Если раньше дизайнеры ограничивались стандартными шрифтами, то сегодня, когда прошли времена браузеров ИЕ6 — ИЕ8, дизайнерам дается полная свобода в полете фантазии подбора шрифтов. Если в макете используются нестандартные шрифты, то обязательно приложите их отдельно к макету сайта, или дайте ссылку на гугл шрифты. Размеры шрифта кегль обязательно указываем целыми числами, размеры типа 19,82 px и тому подобное не допустимы. Добавите немного головной боли верстальщику. Желательно не заливать цвет шрифта градиентом. Можно, но только без фанатизма. Лучше все же указать однотонным цветом. За данное деяние вам точно оторвут голову, не в буквальном смысле конечно. Старайтесь не пользоваться нестандартными цветовыми профилями. Это в итоге приводит к тому, что кто-то начнет вопить и бросаться тапочками, что в дизайне были цвета другие. И, конечно же, все претензии посыпятся на голову верстальщика. О том, как правильно настроить цветовой профиль в фотошопе я написал отдельную статейку, рекомендую почитать. Сайт это в первую очередь динамичный ресурс, на котором может быть анимация и будут выполняться различные действия. Например, обязательно следует указывать цвета ссылкам, как активных, так и при наведении даже желательно нарисовать руку. То же касается любых других активных элементов кнопки, поля форм, модальные окна и др. Это все предусматривает дизайнер в своем макете. Поймите, верстальщик не должен об этом думать. Что хотелось бы отметить последним пунктом так это то, что каждый веб-дизайнер должен быть еще и немножечко и верстальщиком, чтобы понимать какие могут возникнуть трудности у верстальщика. Да, пост получился большим, но думаю он пригодится многим, кто решил покорить азы веб-дизайна. Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог. Из своего опыта добавлю, что нужно бить по рукам за заливку букв не фона, именно букв, с фоном я обычно срез градиента вставляю с помощью background-image, так как linear-gradient не везде нормально работает градиентом где-то, кроме логотипов. Я однажды такое попробовал реализовать — обматерил всё на свете, нормально работает только в Мозилле. Почему нет правила заливки текста градиентом? Сегодня мой первый проект отдали в руки программиста. Страшно представить, каково будет его первое впечатление. Да, статья что надо. И последующие ошибки и задержки в работе уже будут точно не по вине дизайнера. Буду направлять дизайнеров на вашу статью что бы проверяли свои макеты и если надо могли исправиться и сделать как надо!!! Я данную статью скорее для своих дизайнеров написал, но как ни стараешься им объяснить, тыкая в данную статью — толка нет. Может плохо объясняю, а может они вовсе работать не хотят. В общем очень сложно начинающим дизайнерам довести какой должен быть дизайн для верстальщика. Надеюсь у Вас Виктор это лучше получится. Спасибо, Заур, за очередной полезный пост. Планируете ли Вы делать уроки по созданию шаблона на Joomla. Вот сейчас готовится к выходу бесплатный миникурс по верстке шаблона для Джумла 2. Да, у меня вопрос-предложение. А нельзя давать дизайнерам какой-либо шаблон psd-макет с правильной разметкой? Ссылку на него указать со статьи или в самой статье поместить. По опыту знаю — людям нравится визуальные подтверждения. Рад, что статейка понравилась. На счет, примерного PSD это хорошая идея. Обязательно выложу ссылку на скачивание примера к которому стоит стремиться. А за ссылку активную спасибо!!! Спасибо за полезную информацию, не первый раз убеждаюсь в том, что делаю всё правильно. Но для тех кто начинает — эта статья принесёт большую пользу. Возможно в ближайшее время выложу у себя на сайте Вашу статью. Спасибо, что статья понравилась. Статью размещайте, только про ссылку на источник не забывайте…. Ваш e-mail не будет опубликован. Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:. Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования. Копирование материалов сайта разрешается при условии установки активной ссылки на ресурс - zaurmag. Заказать верстку Заказать сайт под ключ. Структура статьи 1 Правила дизайна сайта 1. Правильная верстка шаблона - советы новичкам и не только Заур Магомедов Верстальщик с большим опытом работы. У меня вы можете: Основы семантической верстки на HTML5. Как выровнять горизонтальное меню по центру? Как установить Joomla на локальный сервер. Наталия Июн 17, в Антон Сен 29, в Лена Дек 12, в Все в жизни происходит когда то в первый раз: Все через это прошли…. Zloi Июл 01, в Причем тут статья про веб дизайн? Что конкретно не работает? Виктор Мар 14, в 3: Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами: Код HTML - тегами \\\\\\\\\\\\[html\\\\\\\\\\\\] ваш код Верстка шаблона для joomla 2. Подписаться на новости блога. Введите свой e-mail и подпишитесь на рассылку, чтобы не пропустить новые материалы на блоге. Каким методом вы бы хотели получить знания по верстке шаблонов для сайта? Вступить в закрытую школу верстальщиков Купить видеокурс по верстке Пройти курсы в offline Сам научусь, в сети много информации Мне вообще это не нужно Проголосовать Результаты. Для наилучшего представления сайта мы используем файлы Cookie. Если Вы продолжите использовать сайт, мы будем считать что Вы с этим согласны, в противном случае покиньте данный сайт. Да, меня все устраивает!
Желудочковая экстрасистолия на экг
Актуальные темы контрольных работ по истории отечества
Как настроить укулеле сопрано по тюнеру
Расписание электричек москва тверь яндекс