Разработка уникального дизайна сайтов. Профессиональный подход!

Разработка сайтов, основы веб-дизайна

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



разработка сайтовПриветствую на 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

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

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

Понравилась статья?
Подпишитесь на обновления сайта:


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

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

Комментарии к статье:
    • Руслан Ахтамьянов:

      Ну как всегда, приятно читать! Прямо мастер — класс Серега! Молодчик! :idea:

    • Сергей Нуйкин:

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

    • Вадим:

      Под все подписываюсь, раньше особо не уделял структуре внимания. Теперь это первое с чего начинаю работу. Особенно, если в photoshop.

    • Сергей Нуйкин:

      Наверное, все по началу не придают значения всем этим вещам, я не исключение. С опытом и требования к своим работам растут и профессионализм.

    • Webliberty:

      Я конечно не дизайнер, но потихоньку осваиваю фотошоп, начал с надписей и небольших корректировок, наложений эффектов. Я только картинки для блога там оформляю иногда, поэтому всегда объединяю слои и сохраняю растровым изображением. Исходники в psd не храню — и так весь диск завален уже всякими заготовками, примерами и бэкапами :grin: Нужно бы прибраться и привести все в порядок.

    • Сергей Нуйкин:

      Привет, Денис! Да по сути, хранить исходники простых вещей или одноразовой работы которая потом не пригодится, нет смысла, а вот исходник psd дизайна придется по крайней мере до сдачи проекта заказчику. У меня заготовок всяких тоже много, чем-то пользуюсь, чем-то нет, да довольно часто чистку провожу, так как разных изображений по работе набирается огромное множество.

    • Евгений Комиссаров:

      Ух, я когда свой первый макет делал, ну прям все как и написано…) Кроме анг. названий, Русским все же удобней подписывать… :|

    • Сергей Нуйкин:

      По поводу русских названий не так страшно, сам пренебрегаю часто. Но это наверное больше из-за того что верстальщик на винде сидит да и удобно. А так недавно проверяли последний макет с заказчиком у него на маке и с русскими нормально. Но бывает, и слетают, может из-за передачи макетов в архиве, при распаковке что-то происходит. Когда 1-3 страницы, то ничего, а когда макетов под 15 уже неудобно становится.

    • Ярослав:

      Привет, хотел вот что спросить
      «Показывайте на макетах указателями курсоров как реагируют элементы.»
      Значит мне нужно сделать два варианта как будет выглядеть тот или иной элемент? и оставить в макете? а если всплывающие меню при нажатию на кнопку, то его нужно создать и правильно подписать чтоб верстальщик не ошибся, правильно?

    • Сергей Нуйкин:

      Ярослав, здравствуйте!
      Да все верно. Если планируется что элемент будет откликаться на действие пользователя то Вы должны показать как это будет выглядеть. Следовательно, Вам необходимо отрисовать элемент, к примеру, кнопку во всех ее положениях (статичное, наведение, нажатие) и желательно показать верстальщику и заказчику как элемент будет выглядеть при работе пользователя с ним.

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

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

    • Дмитрий:

      Давно хотел проверить себя в качестве веб дизайнера, а сейчас как раз наступил момент когда самому требуется сделать проект блога! Спасибо за статью! Очень кстати и очень поучительно.

    • Сергей Нуйкин:

      Спасибо и вам Дмитрий за отзыв о статье.

Добавить комментарий:

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: