На чем создавать web дизайн

/ Сергей Нуйкин / Веб-дизайн

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

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

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

О некоторых я уже говорил в ранних моих статьях, одно упоминалось в первой статье о макетах сайта, другое это размеры макета сайта.

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

Организационные правила, начальный этап создания дизайна сайта

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

1) Создаем папку с проектом, в ней создаем папку, в которой будем хранить все ресурсы, такие как нестандартные (несистемные) шрифты, документы, пояснительные записки, паттерны и так далее все что потребуется в дальнейшей разработке сайта. Сами основные psd-исходники страниц сохраняем в корне папки с проектом.

основы веб дизайна

2) Папки и файлы желательно называть на английском, так как если дизайн сайта создается на платформе windows, а дальнейшая работа дизайн будет производиться на mac все названия могут слететь и получится нечитаемые названия документов, с которыми работать очень неудобно.  Названия документов будут похожи на html страницы, когда имеется проблема с кодировкой, многие вебмастера об этом знают.

названия файлов основы веб дизайна

3) Давайте понятные названия psd файлам (index, contact, faq либо транслитом glavnaia, kontakti, vopros-otvet).  Хоть это и неправильно, но я часто называю на русском мне так удобно,  главное заранее уточнить на какой платформе будет производиться дальнейшая работа.

4) Размеры макета создавайте  с учетом стандартных разрешений мониторов. Контентную часть делайте в пределах 1000 пикс. если хотите чтобы будущий сайт корректно отображался на большинстве экранных разрешений мониторов в браузере.

контент сайта

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

создание дизайна сайта в фотошопе

Разработка дизайна сайта, работа

1) Создавайте группы слоев. По принципу (шапка, слайдер, тело, сайтбар подвал и т.д.  (header, slider, body, sitebar, footer)). Задавайте цвета группам слоев, это поможет ориентироваться в исходнике.

слои в фотошопе

2) Давайте названия слоям, иначе, когда их будет множество, сориентироваться будет гораздо сложнее. Это поможет как верстальщику, так и Вам, если придется вносить правки в макет.

названия слоев в фотошопе

3) Не склеивайте слои в фотошопе без необходимости, это повысит скорость внесения изменений в макет при необходимости.  Не растрируйте шрифты без надобности.

основы веб дизайна

4) Высоту шрифтов задавайте целыми числами. Иначе верстка получится отличной от макета.

высота штрифта в фотошопе

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

6) Оставляйте заметки о том, что нарисовали, если это необходимо.

разработка сайтов

7) Показывайте на макетах указателями курсоров как реагируют элементы.

разработка сайтов

Подготовка к сдаче дизайна сайта

  • Удаляем все лишние файлы из папок с проектом дизайна.
  • Удаляем все лишние слои из исходников, ато верстальщик отверстает и их.

удаляем лишние слои в фотошопе

  • Удаляем все лишние направляющие, можно оставить только те, что использовались в качестве сетки.
  • Проверяем орфографию, чтобы не пришлось краснеть из-за ошибок или опечаток, и переделывать.
  • Проверяем, все ли дополнительные материалы приложены к проекту (шрифты, текстуры, документы).
  • При необходимости создаем пояснительную записку, в которой описываем работу интерфейсов и т.д.
  • Для веба сохраняйте изображения через (файл > сохранить для Web и устройств…( Save for Web & Devices…)) таким образом файлы будут весить меньше.

sawe-for-web

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

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


Источник: http://FotoDizArt.ru/razrabotka-saitov.html



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Веб дизайн обучение: 10 бесплатных курсов по созданию сайтов MotoCMS Blog Как совместить интерьер однокомнатной квартиры

На чем создавать web дизайн На чем создавать web дизайн На чем создавать web дизайн На чем создавать web дизайн На чем создавать web дизайн На чем создавать web дизайн На чем создавать web дизайн На чем создавать web дизайн На чем создавать web дизайн