Прототипириуем будущий дизайн. Этап 2

В предыдущей статье мы с вами провели анализ дизайна на примере блога Курского бомжа.
В этой статье я покажу, как сделать прототип сайта на основе полученных из анализа результатов. Разработка прототипа сайта — очень важный и ответственный этап, поэтому уделите ему максимум своего внимания.

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

Для работы нам понадобится правильно настроенный Фотошоп не ниже CS3, IQ не ниже 25 и руки, растущие из области не ниже плеч. Если у вас имеется полный боекомплект – давайте приступим.

Разбор полетов

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

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

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

Шапка

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

Давайте, при помощи инструмента прямоугольник (U) и инструмента текст (A), нарисуем небольшую область под шапку, примерно 150px в высоту, разместив в ней логотип, горизонтальное меню и кнопки социальных сетей, не забыв привязать все это дело к сетке.

Смотреть результат

Лучшие статьи на блоге

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

Мне кажется, нужно сделать две области, которые будут разделять весь трафик на бездарных, тупых новичков и не менее бездарных новичков, с небольшим опытом за плечами, типа профессионалы.

При помощи все тех же инструментов Фотошопа, создайте две прямоугольных области, как это показано в моем прототипе. Иконки для блоков взяты с сайта Iconfinder.

Смотреть результат

Контент

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

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

Расположите миниатюру, краткий анонс и кое-какие технические данные (дату, рублику и количество комментариев) в произвольном порядке, а затем продублируйте это раза 3-4 по вертикали, примерно как это сделал я.

Смотреть результат

Кстати, забыл сказать, что под контент я отвел 8 колонок, судя по сетке, или 620px.

Сайдбар

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

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

Удаляем: about, контакты, лента комментариев, авто-метки, счетчики, и радостное известие о том, как Алексей умудряется выводить деньги через вебмани, минуя налоги, которые и так никто не платит.

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

• Популярные записи (желательно с миниатюрами)
• Подписка
• Рубрики
• Топ комментаторов, или что-то в этом духе

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

Смотреть результат

Футер

Прототип сайта практически готов, остался финальный аккорд. В футер добавьте свои копирайты и счетчики посещений. Вот и все, не сложно, правда?

Смотреть финальный результат

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

Автор: ТОха