Блог Мудрого Кота
Советы и уроки для вебмастера, монетизация сайта и немного о SEO
Главная - Дизайн - Дизайн сайта — от зарисовки в тетрадке до готового макета

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


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

kot risyet

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

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

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

center-dm

center-dm

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

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

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

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

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

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

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

glavnaia

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

что за

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

Какой вид черновика вы считаете более удобным?

Посмотреть результаты

Loading ... Loading ...

Спасибо!

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

- Шапка:

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

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

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

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

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

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

sale

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

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

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

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

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

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

not bad

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

- Подвал:

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

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

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

zakaz

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

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

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

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

дизайн сайта

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

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

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

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

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

fon

Или такой:

fon

Вам кстати какой вариант больше нравится?

Loading ... Loading ...

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

заказ цветов

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

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

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

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

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

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

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

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

Подпишись и получай новые записи первым!

Подписаться вы можете с помощью или , но самый удобный способ это:


Ещё по теме:
Как проверить отображение сайта в разных браузерах, да ещё и с разными размерами экранов — онлайн
Добавляем в WordPress новые варианты Gravatar’ов, а затем выводим их в комментариях
Эффект прозрачности при наведении на ссылку и наоборот
Изменяем цвет выделения текста с помощью небольшого CSS кода
Навигация на блоге, часть вторая – пагинатор
Информация о статье:
Опубликовано: 16 марта 2012, в рубрику Дизайн.
Теги: .

Поделись статьёй с друзьями:

Оставляя комментарий - вы автоматически принимаете участие в конкурсе комментаторов, и имеете возможность выиграть очень, классные призы!
I место - Сквозняк!
II место - Заметка!
III место - 200 Рублей!
Подробнее о конкурсе тут.

Оставь коммент, не будь бякой!

  • Dneprolab
    17.03.2012

    Про магазин цветов понравилось больше. Видео вообще зачет!

    [Ответить]

  • Maxim
    17.03.2012

    Дизайн конечно получился прикольный, но для чего ты его рисовал? Для статьи или у тебя кто-то этот магазин заказал? :wink:

    [Ответить]

    Мудрый Кот ответил(а):

    Для статьи :oops:

    [Ответить]

    Maxim ответил(а):

    Я бы для статьи на такое не решился :D

    [Ответить]

    Dneprolab ответил(а):

    Ради читателей автор готов на все…даже рисовать :lol:

    [Ответить]

  • АлеКсандра Д. - Tyrise
    17.03.2012

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

    [Ответить]

    Мудрый Кот ответил(а):

    Готово :wink:

    [Ответить]

    АлеКсандра Д. - Tyrise ответил(а):

    Ну вот XD Я с этими розочками оказалась в меньшинстве) В общем-то да, сухие цветы на фон конпании живых букетов..не очень)

    [Ответить]

  • Roman
    18.03.2012

    Зарисовка хорошы

    [Ответить]



:wink: :twisted: :roll: :oops: :lol: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O 8)

*


Подпишись на обновления блога:

RSS    twitter    e-mail


143 подписчика

128 фолловеров




Подробно:

Как создать сайт с онлайн фильмами
Как создать сайт с онлайн фильмами
Создание

Раскрутка

Монетизация



Как создать шаблон и дизайн для сайта
Как создать шаблон и дизайн для сайта
Макет

Разметка

Вёрстка



  • Комментаторы
  • Комментарии
sdlprofi(45)
SEOpmr(43)
АлеКсандра Д. - Tyrise(17)
Dneprolab(10)
aldous(10)
Я читаю:

Записки ночного блогера
Blogger.omg-linux
telderi.ru, и еще много других