Как получить хороший дизайн для информационника?

Если хотите получить хороший дизайн, причем быстро и дешевле, придерживайтесь всего двух простых правил:

  • Знайте, чего хотите, составьте четкое ТЗ
  • Не еб#те мозг дизайнеру

Подготавливаем ТЗ

Скачиваем Balsamiq Mockups с официального сайта и устанавливаем себе на ПК. Ищем в выдаче красивые, функциональные и современные информационные сайты, у которых стоит контекстная реклама, особое внимание уделяем сайты с контекстной рекламой РСЯ.

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

Ищем только информационные сайты - не сайты фирм, не корпоративные блоги, не информационные разделы в коммерческих тематиках, а именно - информационные сайты.

Допустим, я хочу себе шаблон для сайта по тематике "заборы", и я нашел подходящие под выше написанные требования сайты:

  • vamzabor.net
  • zavorota.ru
  • moizabor.com

И просто сайты строительной тематики:

  • 1metallocherepica.ru
  • 1podveryam.ru
  • 1polestnicam.ru
  • 1postroike.ru
  • 1pooknam.ru
  • 1poclimaty.ru

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

Balsamiq Mockups очень просто в освоении, не требует специальных навыков и вообще набросать ТЗ в нем - минут 40 максимум.

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

Макет, который я создал можно скачать для примера.

Как экспортировать?

Screenshot_3

Screenshot_4

Образец ТЗ для составления PSD макета (для дизайнера)

Здравствуйте.

Необходимо 3 PSD макета для одного информационного сайта тематики %ваша тематика%: главная страница, страница рубрик (категория) и страница одиночных записей + логотип и favicon в стиле минимализм.

Логотип и favicon можно взять уже готовые отсюда: https://www.iconfinder.com/search/?q=fence или сделать на их основе.

Вместо ?q=fence - пишем ваш запрос, типа ?q=blood или ?q=pool

Нужно примерно такое:

Главная страница - http://jpegshare.net/20/33/2033b23369bf1111bbefc674159f9e18.png.html

Страница рубрик (категория) - http://jpegshare.net/57/3e/573e513b4c38cd1682fde4540f2f8e34.png.html

Одиночные страницы - http://jpegshare.net/23/ea/23ea4bcc1a8e2f8225853609f323e541.png.html

Возможно, вам придется скопировать текстовую информацию, поэтому прилагаю файл макета, который можно открыть в программе Balsamiq Mockups, официальный сайт: https://balsamiq.com/download/.

Соответственно, ссылки на то, что нарисовали ставите свои и файл макета тоже даете свой. Не перепутайте бл#ть!

Требования к шрифтам

Желательно использовать для всех текстов на сайте комбинацию из нескольких шрифтов: %понравившиеся шрифты%

Желательно использовать для текстов, заголовков и ссылок комбинацию 2 цветов: %понравившиеся цвета шрифтов%

Сайты, которые нравятся и почему:

1metallocherepica.ru - шрифты, цвет шрифтов и заголовков, цвета, логотип
1podveryam.ru - минимализм, цвета, логотип
1polestnicam.ru - минимализм, логотип
1postroike.ru - минимализм
1pooknam.ru - минимализм, логотип
1poclimaty.ru - минимализм, логотип

Обязательно нужно прорисовать для верстальщика:

  • Выпадающее меню
  • Ссылки при наведении
  • Подписать слои
  • Списки <ul> и <ol>
  • Выделения текста (цитата)

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

Если в горизонтальном меню 5 элементов - именно они и должны быть изображены в макете.

=== Конец ТЗ

Макет вам будут рисовать около где-то 5-9 рабочих дней. И на выходе вы получите примерно такое:

Главная - http://jpegshare.net/10/a2/10a20ff4e0e051d9921d80bab10ea332.png.html

Категории - http://jpegshare.net/fc/80/fc80c8e35393ddb03ec414414e915970.png.html

Одиночные страницы - http://jpegshare.net/54/34/543434b0cb512d7ca732ebea6e7d6c69.png.html

Оплачиваем, берем файлы и отдаем верстальщику, который сделает нам из этого шаблон wordpress. Но это тема для отдельного поста.

Прежде чем давать дизайнеру правки, почитайте эту статью и подумайте - не являются ли ваши правки ненужным перфекционизмом?

Далее, если в дизайне где-нибудь в заголовке или в тексте (который будет текстом, а не картиной) - ошибка или опечатка - не надо просить это исправить, это будет делать верстальщик и это можно будет потом поменять/изменить, вписать самому.

После этого берем наши файлы и отправляемся к верстальщику, ему мы даем такие требования:

  • Нужна адаптивная верстка
  • На каждой странице не должно быть тегов <H2>, <H3> и т.д., но должен быть только один тег <H1> на каждой странице, и в него должен быть помещен заголовок.
  • Нужно использовать теги <nav>, <aside> , <article> и т.д. Блок <article> сделать выше по коду.

Отвечайте на вопросы верстальщика, если стоит вопрос - удалить лишний элемент или упростить что-то - соглашайтесь, так будет быстрее и дешевле.

Теги:
Перелинковка ↓
  • Влад

    Спасибо