1 Декабря 2013 19:35

Общие требования при выполнении работ по дизйну

Данная инструкция предназначена для начинающих технических WEB дизайнеров

Приступая к работе по созданию WEB-сайта первым делом необходимо определиться с цветовой схемой сайта, выбрать цветовую палитру. Обычно таких цветов бывает не более 6-8. Определяем какие цвета будут главными. Записываем их на листочек, чтобы можно было в любую минуту подглядеть. Зачастую у клиента уже есть свои гайды, тогда еще проще - используем их, но при добавлении новых цветов незабываем согласовывать их с клиентом. Посмотрите как выглядит их текущий сайт или продукция, это упростит обоснование включения нового цвета. Но не старайтесь заменить основные цвета, это не поучится. Гайды - есть гайды.
Далее, используя эту палитру определите, какие цвета будут отвечать за стилистическое оформление текстов. Определитесь с размером и типом шрифтов. Как будут выглядеть булеты, выпадающие списки, кнопки. Потом, когда сайт приобретет очертания требования могут поменяться, но с чего-то начинать надо, а если Вы уже на этом этапе представляете стиль сайта, то в будущем это только ускорит работу.
Следующий шаг. Создаем макет будущей главной страницы, смотрим ТЗ и определяем максимальную ширину холста. Разрешение ставим 72 dpi. Хотя в зависимости от экрана оно может быть и больше, но при таком разрешении вы получите правильное соотношение pt и px. В противном случае вы услышите много лесных слов от коллег занимающихся версткой.
Холст создан, но не спешите начинать рисовать. Прежде чем это сделать перейдите в окно "Layers" и создайте группы, из которых будет состоять сайт. Группы первого уровня это - header, workarea, footer. Для тех кто сталкивался с версткой это должно быть знакомо. Внутри этих групп создаем подгруппы, называя их по английски, например logo, menu_top, menu_left и т.п., желательно согласовать их с человеком, который занимается версткой, так как это ускорит его работу, а также работу специалистов по тестированию.
Не спешите, еще не все. ;-)
Теперь нужно установить сетку и задать границы каждого блока. Это нужно чтобы элементы дизайна были ровными изначально, а не прыгали на пару пикселей влево-вправо, вверх-вниз.

Вот теперь все, начинайте рисовать, но помните, что photoshop уже имеет ряд инструментов, который облегчает работу и не надо изобретать велосипед, его уже изобрели до вас. А то я знаю некоторых дизайнеров, которые, для того чтобы узнать высоту и ширину элемента рисовали прямоугольник (shape) и смотрели какого он размера получился.
В заключении подытожим наши действия.
  1. Определяем палитру цветов
  2. Прорабатываем шрифты, кнопки, списки и др. элементы
  3. Создаем каркас макета
  4. Рисуем дизайн.

Просмотров:4077 0   Комментариев:0 Теги: WEB дизайн
'bitrix:asd.share.buttons' is not a component


IT-технологии
WEB сервера, настройка и конфигурирование, интересные решения
Программирование
WEB программирование, WEB дизайн, Кросс-браузерная верстка
Технические науки
Физика, Математика, Химия и все-то, что лежит в основе наших знаний