Главная » 2015 » Сентябрь » 6 » Регламент веб - дизайнера (часть 1)

Регламент веб - дизайнера (часть 1)

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

Сформулируем вначале кратко ряд требований, которые целесообразно учитывать дизайнеру в работе, в процессе проектирования и оформления сайта.

  1. Тщательное изучение технического задания (ТЗ) на веб-сайт или его составление совместно с заказчиком

Абсолютно понятно, что перед началом работы дизайнер обязан ознакомиться с ТЗ самым внимательным образом, изучить его, вникнуть и понять суть каждой идеи заказчика. При возникновении сомнений в правильности своего понимания, конечно, необходимо обсудить нюансы с клиентом. Вы можете подсказать ему где, по Вашему мнению, можно подкорректировать ТЗ. Но, конечно, самое главное это сначала подумать, а потом сделать. Запомните – все работы по дизайну только после усвоения или составления ТЗ. Самое лучшее – это читать ТЗ с бумагой и карандашом. Понимая идеи и задачи, которые заложены клиентом в будущий проект, дизайнер накидывает быстрые черновые эскизы, которые отражают общую стилистику сайта, вид страниц, концепцию логотипа, примерную блок-схему сайта и его функционал. Только после того, как будущий сайт появится в быстрых набросках на бумаге и получит общее одобрение заказчика – можно садится за компьютер. В договоре на выполнении работ можно указать, что любое отступление от исходного ТЗ учитывается и оплачивается как дополнительные работы.

  1. Разработка макета

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

Необходимо определится, каким будет сайт резиновым или фиксированным, но независимо от этого ширина основного контейнера сайта должна быть не менее 1000 px. Ширина макета указывается в пикселях и должна быть с точностью до одного пикселя, т.е. круглые цифры и никаких там 899 px или 955 px, к примеру. Также это касается всех блоков, которые у нас будут присутствовать в макете: левая, правая колонки, форма авторизации, различные модуля и т.д. Определяемся  с шириной макета основного блока (контейнера) сайта. Обычно ширину макета подстраивают под самое распространенное разрешение экрана. В последнее время я рисую дизайн по модульной сетке шириной 1170px. Когда дизайн нарисован строго по сетке это значительно упрощает верстку.Всегда придерживайтесь строго размеров блоков пиксель в пиксель. 

Если сайт фиксированный, то обязательно нужен задний фон – достаточно проблематичный вопрос у начинающих дизайнеров. Ширину холста  нужно указывать чуть шире ширины основного блока (контейнера) сайта и задаем фон – в качестве фона может быть изображение, или просто градиент, или однотонная заливка.  Если вы рисуете картинку на заднем фоне и располагаете ее по центру, то она ни в коем случае не должна иметь обрезанные края. И еще, на заднем фоне всегда должен быть какой то фрагмент однородного фона, который верстальщик может пустить на повторение. Данный фрагмент может быть как однородной заливкой, так и градиентом. Края картинки должны плавно переходить на нет. Здесь имеется ввиду переход на какой то однородный фон.Если в качестве заднего фона используется текстура, то обязательно сохраните один повторяющийся фрагмент для верстальщика отдельным файлом в формате jpg, png или gif.

Если Вы определили будущему сайту такие свойства как Адаптивность и масштабируемость, значит Вы делаете «резиновый» сайт. Такой дизайн позволит вашему сайту подстроиться под различное разрешение мониторов пользователей.

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

Все элементы масштабируются в зависимости от размера экрана пользователя и размера шрифта.

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

Все шрифты, отступы, почти все вертикали масштабируются в em. Во многих случаях, это касается даже рамок (border).

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

Теперь необходимо это найти минимальное сжатие сайта. Фактически сейчас есть только два минимальных параметра: 760 px и 990 px. Первый оптимален для корпоративных сайтов либо ресурсов, рассчитанных на самую массовую и разношерстную аудиторию (например, массовые сервисы: почтовые, поисковые, новостные и т.п.). Второй подходит для сайтов имиджевого и промоушен назначения.

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

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

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

Рисуем все иллюстрации и неповторяющиеся фоны из принципа «у кого больше монитор, тот больше увидит». Обычно, ширина иллюстраций обусловлена шириной отведенных под них блоков модульной сетки в состоянии max.

Некоторые рекомендации к организации PSD файла от П. Колодяжного:

- Макет страницы сайта выполняется с использований сетки. Настроить сетку можно при помощи направляющих (Guides). При передаче файлов из сетки должны быть удалены все вспомогательные или временные направляющие. - - Основная сетка должна быть сохранена.

- Если не сказано иное, дизайн-макет страницы сайта выполняется по сетке 960/1170 px для десктопной версии сайта.

- Высоту шрифта (кегль) необходимо задавать целым числом.

- Все слои в дизайн-макете должны быть логично сгруппированы.

- Все слои и группы должны быть названы латиницей.

- Необходимо соблюдать иерархию элементов сайта при группировании --(header, slider*, content, footer)

- Все дополнительные файлы для макета должны находится в отдельной папке (например картинки, иллюстрации).

- В архиве должен быть сводный PSD файл, в котором собраны все элементы управления и показаны все их возможные состояния (default, hover, active)

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

- Помните -все слои в макете должны быть сгруппированы и каждый элемент, будь то форма авторизации или форма поиска должен быть отрисован.

Продолжение следует...

 

Категория: Регламент веб-дизайнера | Просмотров: 2450 | Добавил: nikozavr | Рейтинг: 5.0/1
Всего комментариев: 0
avatar

Категории раздела

Заметки разработчика [8]
Заметки на тему работы с HTML. Уроки от дизайнеров и программистов студии НИКА. От простого к сложному.
Регламент веб-дизайнера [4]
Специалисты веб студии НИКА расскажут о секретках и правилах веб-дизайна.
Регламент копирайтера [2]
Специалисты студии НИКА пишут тексты с уникальностью до 100% на любую тематику. Некоторыми правилами и приемами копирайтинга делимся с начинающими писать.
Секреты дизайнера сайтов [2]
Основы работы с CSS
Опыт создания сайтов [1]
Специалисты студии НИКА рассказывают о нюансах при разработке веб-сайтов

Вход на сайт

Поиск