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

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

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

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

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

Скачиваем 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> сделать выше по коду.

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

Оцените статью