Дизайн сайта — от зарисовки в тетрадке до готового макета

Приветствую вас мои дорогие читатели.
Сегодня мы с вами поговорим о создании макета для своего сайта, но мы будем говорить не обо всём процессе в целом, а об отдельной его части.
А точнее о двух частях.
1 — Черновик;
2 — Photoshop;

Сначала давайте ка обсудим часть статьи под названием «Черновик».
Да-да, именно черновик.

Вот смотрите, когда вы заказываете дизайн, в какой либо web-студии, то первым делом дизайнер рисует макет на бумаге, потом его же он перерисовывает в Photoshop и отдаёт готовый дизайн верстальщику, который в свою очередь натягивает этот дизайн на сайт.
Но почему же нельзя пропустить пункт с черновиком и перейти сразу к Photoshop’у?
Всё очень просто!

Дизайнеру нужно точно представлять, где и что будет размещено, какие отступы, какие кнопки, каково их расположение? Всё это он должен видеть перед началом своей работы. Ну и разумеется его не должен мучать творческий кризис.
Кстати если какой-то элемент дизайна будет меняться, например, при наведении, на черновике это необходимо отметить, показать каким он должен быть при наведении, и описать свойства этого объекта.
А уже потом в Photoshop’е не забыть нарисовать эту деталь два раза, так как первая деталь должна быть стандартной, а вторая появляться при наведении.
Перед тем как начать давайте посмотрим на уже готовый пример, на черновик сайта Center-DM.ru:

Как видите всё довольно просто и понятно, однако я люблю более «чёрные» и более детальные черновики, и именно о таких черновиках сегодня пойдёт речь.

Что же мы сегодня всё-таки будем делать?

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

Но все-таки, перед тем как начать рисовать, давайте подумаем:
А каким должен быть черновик?

Красивым – не обязательно, красивым должен быть дизайн.
Ровным – опять же не обязательно!
Дак каким же?

Черновик в первую очередь должен быть понятным, чтобы было точно ясно где, как и какая деталь нарисована.
Не бойтесь писать на нём комментарии, ведь с ними вам будет намного проще.

Через 5-10 минут работы мною был нарисован следующий набросок (строго не судите, что умею то рисую):

Ваша первая реакция на моё «художество»:

Прошу принять участие в опросе:

 Loading ...

Спасибо!

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

- Шапка:

Тут всё довольно стандартно, логотип в форме цветка и название сайта, а так же тут размещена форма авторизации, ссылка на регистрацию и ссылки на самые важные страницы, такие как: о нас, оплата, как заказать.
При авторизации на сайте вместо формы авторизации и ссылки на регистрацию появится панель управления:

Я нарисовал её на отдельном листочке. В панели управления будут весьма стандартные возможности, а именно:

- пополнить баланс
- сделать заказ
- задать вопрос
- выход

На этом набросок шапки можно считать доделанным, поэтому идём дальше.

- Боковая колонка:

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

Кстати после Отзывов, а так же после статей идут ссылки «ещё», ведь не будете же вы перегружать боковую колонку слишком большим объёмом текста? Лучше разместить все ссылки и отзывы на отдельных страницах, а в боковой колонке выводить только последние записи и последние отзывы.
Кстати отзывы желательно выводить полным текстом, либо анонсами по 150-200 знаков.

- Основная часть:

Основная часть является важнейшим элементом, ведь именно там будут фотографии цветов, а так же их описание. Ну и, разумеется, кнопка «Заказать» будет находиться там же.

Всего будет выведено 10-15 букетов, на черновике я нарисовал всего два, это сделано лишь для того чтобы примерно представлять каким именно образом они будут выведены.
В самом верху основной части (сразу под шапкой), есть вкладки вот такого вида:

Цена: 100-500, 500-1000, 1000-2000, и т.д.

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

В самом низу основной части есть небольшая заметка «О нас», текст, написанный там, будет скорее для удобства продвижения, нежели для ознакомления. Так как всю информацию о компании лучше написать на отдельной странице.
А в заметку лучше вставить нужные ключи.

- Подвал:

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

Итак, с главной страницей я закончил. Теперь есть ещё она важная зарисовка, какая?

Страница с подробным описанием букета, на которую вы попадете, нажав на кнопку «Заказать».
Страница будет выглядеть так:

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

Первым делом идёт фотография цветка, справа от неё идёт описание этого цветка, под этим всем идут миниатюры фотографий этого же цветка, но уже с другого ракурса.
Под ними расположена кнопка заказа, а затем идут отзывы клиентов.
Либо отзывы будут гневные, либо наоборот весьма и весьма — положительные, что будет очень полезно.

Фууух…
Вроде бы все детали описал, так сказать – защитил проект. Но это ведь ещё не всё, теперь его нужно в Photoshop’e «начеркать».
Итак, переходим ко второй части статьи — к Photoshop’у!

Поработав, какое-то время в Photoshop я получил следующий результат:

Кликните по картинке, чтобы посмотреть её в полном размере.

P.S. к сожалению я забыл про парочку деталей, а так же есть кое-какие недоработки, но думаю вы мне это простите.

Итак, давайте немного посмотрим на готовый дизайн.

Для текста я выбрал два основных цвета, это красный и чёрный. Сам не знаю почему. Но мне показалось, что они неплохо сочетаются, особенно на сайте о цветах.
Ещё один важный момент.
Дизайн будет фиксированный, тоесть его размеры будут одинаковыми независимо от того какой размер экрана имеет пользователь зашедший на сайт.
Поэтому остальной участок экрана необходимо заполнить фоном. Но каким?
Я думаю, раз сайт о цветах, пускай, и фон сайта будет подходящий.

Например, такой:

Или такой:

 Loading ...

С главной страницей всё, но ведь есть ещё и страница, на которой человек сможет повнимательнее рассмотреть букет.
Поэтому давайте взглянем на ещё один макетик.

Кликните по картинке, чтобы посмотреть её в полном размере.

Тут всё весьма и весьма понятно, что тут и как я уже описывал выше.

А теперь давайте всё таки немного поговорим о вёрстке данного макета.

- Если вы будете верстать макет самостоятельно, то в ходе работы вы всегда сможете исправить недочёты или подкорректировать какие-либо детали.

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

- Если же вы собираетесь заказывать вёрстку у специалиста в этом деле (кстати о том где таких найти я рассказывал в статье про биржу MakeSale.ru), то заранее посмотрите на макет и подумайте, а не хотите ли вы здесь что-нибудь изменить?
Ведь верстальщик может потребовать от вас дополнительной платы за изменение его работы.
Либо вы сами должны будете вносить изменения в готовый дизайн, а если вы этого делать не умеете?

Вот вроде бы и всё, о чём я хотел вам рассказать. Если есть вопросы – прошу в комментарии!
Желаю вам удачи!
Всегда ваш – Мудрый Кот.

Видео у нас сегодня про учителя вождения, и про то почему не стоит с учителями этими ссориться.