Как создать онлайн-проект

Как создать онлайн-проект

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

1) Подбор цветовой гаммы

Я помнил, что где то была адоубовская хрень, позволявшая подбирать цвета. Гугл как всегда спас. Называется она Kuler. Дальше все было относительно просто:

«Themes» ? «Highest rated» ? «Emotion Intensity»… Вуаля.

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

2) Создание модульной сетки

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

Этот этап я изначально хотел пропустить, как ненужный, но все же решил оставить, мало ли, может кому то так будет понятнее. Картинка это уменьшенная копия сетки, по которой я буду отрисовывать сайт. Фиксированная ширина в 973 пикселя. Сайдбар я сделал в 1/3 от общей ширины. Там больше и не надо.

3) Создание логотипа

У меня в голове сайт «рендерится» сверху вниз. Поэтому вспомнив структуру типичного шаблона в вордпрессе (об этом мы еще поговорим потом), я решил, что начну с логотипа. Особого желания делать что то супер крутое у меня не было, т. к. весь груз разработки лежал только на мне, поэтому я решил, что это будет шрифтовое решение. Также, я знал, что если стремиться к перфекционизму в каждой детали, то проект не запустится никогда. Поэтому я решил делать просто хорошо.

Сначала появился драфт логотипа самого проекта. Я взял за основу шрифт Agenda, и чуть-чуть подпилил его напильником.

Изменил, чтобы он хоть как то отличался от стандартного шрифта. Несмотря на то, что шрифт я редко где встречаю. На лавры мега-дизайнера я не претендую, но по моему получилось неплохо. Теперь можно было приделать к нему приставку «psd.».

Таким образом, была получена векторная шрифтовая заготовка, которую можно будет модифицировать дальше уже в фотошопе.

4) Отрисовка сайта

Хидер

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

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

Контент

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

Сайдбар

Главная страница к этому моменту уже была на 50% готова и состояла из недоделанного хидера и готовой контентной части. Оставался футер и сайдбар, и я решил, что поработаю над сайдбаром. Решил, что там обязательно будет блок подписки на RSS и свежие комментарии. Для начала хватит.

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

Коррекция ошибок

Что еще было сделано:

1. Футер (там слишком мало инфы, чтобы отдельно про него писать)

2. Текст постов исправлен с 12 на 14

3. Бэкграунд коричневый мне не понравился — изменен на серый

4. Поправлен цвет логотипа и перекос в шапке логотипа.


Карта сайта


Информационный сайт Webavtocat.ru