[donor]

Как Вы заметили - слово "создать" в кавычках. Первый макет я не нарисовал, а собрал. И получилось это вполне красиво и уникально. Это моя первая поучающая тема, хотя врятли она кому-либо поможет.
Начнем с того, что нужно выбрать тему макета. Для лучшего понимания первый макет собирается на основе легкой тематики, которая не требует кучи блоков и мелких элементов. Моя мама имеет точку по продаже парфюмерии и косметики и она зарекнулась, что хочет сайт. Вот эту тематику я и выберу. Тут не идет речи о домене и хостинге, поэтому название макета и логотип будет примерным.
Этап 1. Логотип
Возможно это и не первый этап для дизайнеров, но когда я собираю логотип - я уже представляю, каков будет макет.
Что мы делаем? Открываем Яшу и вспоминаем, какие компании мы знаем. Я, например, знаю несколько компаний : лореаль, эйвон, орифлейм. Посмотрел логотипы и смекнул, что не нужно придумывать оригинальный дизайн. Достаточно сделать красивый текст. Точнее не красивый, а приятный и строгий. Назовем макет ELIT PARFUM.
Открываем PS или Paint и выбираем строгий и приятный шрифт. Ах да, совсем забыл. Будем рисовать макет на холсте размером 1040х1400 px (пикселей). Создаем холст и начинаем выбирать шрифт. Мне понравился шрифт под названием Palatino Linotype. Его и выберу. Смотрим, что у нас получилось :

Симпатично. Но не в тему. Нужно более элегантности. А давайте ширину увеличим? Получится вытянутый шрифт. Я думаю, что будет красиво :)
Смотрим результат :

Да, получилось не плохо. Но черный цвет - не совсем элегантен. Разбавим его белым. Самую малость. В палитре код будет такой : #646464
Смотрим :

Мне нравится:) А Вам?) Так, цвет цветом, но какой у большинства девушек любимый цвет? Догадались?) Розовый)) Давайте добавим элементы розового для того, чтобы логотип был не однотипный, а разнообразный и был воспринят женским населением) Думаю много розового не нужно. По первой букве в каждом слове - и хватит)
Палитра : #fd6dff
Результат :

Красяво) Только вот я не могу ставить только текст. Нужно что-то еще.... Какой язык привлекает слабый пол? Французский! Я его не знаю, но для этого есть Google Translate. Надо придумать предложение. Лучшее для Вас - хороший вариант. Смотрим как это будет по французски - Le Mieux Pour Vous. Не плохо. Вставляем под наш текст.
Смотрим результат :

По кайфу... Но! Все же не хватает какой-то картинки. Яндекс помогает найти нам красивый флакон с духами и мы добавляем его в логотип :

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

Продолжу. Я не нашел, как поместить новую информацию в первый пост, поэтому прошу модераторов помочь мне с этой проблемой)
Логотип мы собрали. Теперь подумаем над структурой макета. Я хочу сделать следующее : ниже логотипа будет размещаться большой блок-слайдер, а в его шапке будет находиться навигация по сайту. Если кому-то эти слова не понятны - смотрим дальше и все поймете.
Я делаю прямоугольник с закругленными углами. Т.к. фон сайта будет белым - я делаю прямоугольник чуть-чуть темнее (чтобы иметь представление о границах).
Что получается :

Вот у нас прямоугольник. В его шапке я буду делать меню. Для этого я выделяю верхний кусок шапки и меняю ему цвет. В палитре этот цвет обозначается так : #d3679b
Результат :

Для того, чтобы было немного понятно, где же находятся границы прямоугольника - делаю обводку самого прямоугольника того же цвета, что и кусок под меню :

Так, теперь заполним меню :

Более-менее представление появилось. Т.к. это просто макет - мы можем дать волю фантазии. Например, я хочу слайдер в промежутке между меню и дном прямоугольника. Для этого я ищу картинки в яндексе (девушка, которая подойдет для данной тематики), ищу любой брендовый товар (духи D&G, например), соединяю это все воедино и показываю Вам результат :

Вот такие пироги) Мне нравиться)
Ну вот мы оформили блок с меню и слайдером. Я на этом заканчиваю. В следующий раз - заполнение пустого пространства в шапке сайта. Спасибо за внимание:)

Продолжим. Как и обещал - заполнение пустого пространства в шапке сайта. У нас есть 2 варианта - поставить баннер 468х60 и тогда получится, что пустого места практически не останется. Но я думаю, что парфюмерия - это не та тематика, где будет полезен баннер. Тем более, что макет рисуется для своей продукции)) Что же сделать? Пойдем простым путем - товаров будет не мало, значит нам как минимум нужен поиск по сайту. Его мы и добавим) Нарисовать поиск по сайту - это самое легкое) Берем прямоугольник с закругленными углами (т.к. мы уже начали использовать закругленные углы - не будем портить задумку) и вставляем его в верх шапки. Потом делаем маленький прямоугольник для кнопки "поиск" и еще один - для ввода поискового запроса. Цвета выбирайте сами. Это поможет более-менее ориентироваться в цветовой гамме макета. Я же не буду писать какие цвета я выбрал(ну код палитры писать не буду:)). Смотрим результат :

Сейчас я заметил маленькую не стыковку, а именно - поиск находится на уровне краем слайдера, а логотип немного выступает. Нужно исправить. Самое хорошее решение - сместить логотип. Отдельный скрин делать не буду, ибо модераторы поругают. Так же высота поиска слишком велика, нужно опустить чуть ниже. Теперь нужно сделать следующее - т.к. с сайта можно будет заказать продукцию - выделяем место под личный кабинет. Это не обязательно должен быть сам кабинет. Достаточно сделать ссылочки на вход. Так же не стоит забывать, что после входа тоже должны появиться разделы личного кабинета, так что рисуем и их тоже. Я решил сделать так - при просмотре сайта как не авторизованный пользователь мы видим только 2 ссылочки - вход и регистрация. Когда авторизовались - вместо входа и регистрации появляется помощь и выход. А в середине шапки - личный кабинет. Более подробно - на примере :


Не забываем, что в данный момент мы делаем набросок. Когда Вы почувствуете, что все готово - начинаем графическую доработку макета. А пока что - продолжаем.
Вот так мы заполнили пустое пространство. Следующим шагом у нас будет заполнение пространства, которое находится ниже слайдера. Тут придется напрячь фантазию, т.к. у нас уже есть и меню, и личный кабинет. Вот такие вот дела. Думаю, что хоть один человек, но ждет продолжения статьи))) Возможно и ошибаюсь.

[Andrey_andrey]

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

[donor]

Andrey_andrey, ну на вкус и цвет) Я же написал, чтобы просто в нужное русло направить логику) А там уже по желанию каждый делает так, как хочет)

[ArhStrAngeR]

Отличный мануал, как раз для изучения этой темы. Перенес в обучающие статьи.

[donor]

Спасибо ArhStrAngeR, а мы продолжим. Т.к. шапка у нас заполнена - пора переходить в середину макета. В основном середина макета называется content, ибо почти всегда там выводятся новости, информация и прочее. Я же решил, что все-таки нужно вывести новость. Одну новость, которая будет являться главной страницей сайта. Возможно это не лучшее решение для SEO, но я в этом не силен и поэтому делаю так, как подсказывает мозг.
Практически на всех сайтах в блоке content есть навигация. Она либо с левой, либо с правой стороны. Но мы уже сделали навигацию по сайту. Предлагаю так же создать блок с левой стороны макета, но не для навигации, а для бестселлеров. Не, грубо говоря, для товаров, который пользуются большим спросом, чем остальные. А в центре - информация о магазине. Начнем с того, что нам нужно обозначить блок. Напишем крупным шрифтом "бестселлеры" и, как у меня началось - сделаем первую букву в слове розовой. Это даст стабильность гаммы в макете и не будет вызывать отвращения на фоне остального макета. Отделять я практически не буду, просто проведу пунктир для обозначения края блока. Чтобы лучше понимать, как будет выглядеть блок - мы сразу идем к Яше или Гоше и спрашиваем у них, какие самые популярные духи заказывает население. Но, в силу моей ленивости, я поступлю по другому. У меня есть группа в вк, в которой уже выложен товар и картинки к нему. Беру оттуда первые попавшиеся наименования и вставляю в навигацию. Давайте посмотрим результат :

Не очень красиво, но и не совсем плохо. В данный момент фантазия работает на 3%, так что прошу не судить строго. Далее я заполню информацию на странице, дабы увидеть, как это будет выглядеть.
На этом я не буду зацикливаться, ибо все равно при запуске сайта информация поменяется. Пока что мне хватит банального копипаста.

Тут сразу беру на заметку - нужно поработать с фоном страницы в том месте, где размещена информация. Ибо не совсем красиво и гармонично получается.
Так, с этим мы разобрались. На очереди - подвал сайта и внутренние страницы.
Подвал.
Подвал я сделаю такой же, как у большинства сайтов. Нам нужно следить за посещениями, мониторить ресурс. В общем - нам нужны баннеры 88х31. Делаем такой баннер (или где-нибудь воруем - значения не имеет) в четырех экземплярах. Располагаем его в подвале. Я выбираю стандартное место размещения баннеров. Да, кстати, цвет подвала так же не должен выделяться из основной гаммы макета. Что еще нужно? Я думаю, что нужно сделать мини-лого и поместить его в подвал. Не знаю почему, но я так хочу и с этим ничего не поделаешь. Нужно еще выставить копирайты, и, по традиции - немного информации о каре небесной за копирование материалов сайта.
В итоге приходим к такому варианту :

Ну приблизительно так. Только пожалуйста, запомните, что этот макет - просто пример. Душу в него я не вкладываю, вообще не собираюсь ему жизнь давать. Так что помните, что макет всегда можно доработать. После того, как Вы создали полную структуру макета - подумайте еще несколько дней, тупо смотря на него по 10-15 минут. Этого будет достаточно для того, чтобы понять - чего же не хватает? Хотя я погорячился. Возможно этот макет обретет право на жизнь, но уже описывать все доработки я не буду.
Продолжим.
Внутренние страницы. Банальную внутреннюю страницу я рисовать не буду. Открываем любой паблик шаблон и выбираем подходящую страницу. А вот страницу с товаром мне придется делать в любом случае. Получается, что нужно сделать еще 2 страницы - на первой будет наименование товаров одной из категорий, а на второй - детальное описание выбранного товара. Ну что же, приступим...
Бестселлеры не убираю, т.к. это залог того, что человек, скорее всего, перейдет по ссылке и ему приглянется один из товаров. Убираем нашу новость и ее заголовок. Вместо заголовка будет наименование категории.
Делаем блок под товар, размножаем его на всю страницу (методом копирования слоя). Ищем картинку бестселлера и вставляем ее так, чтобы поместилась цена. Я решил, что цена будет написана на купоне, который будет приложен к картинке. Я криво-косо нарисовал маленький не-знаю-как-назвать-этот-сверток и пометил на него цену. Выглядит это так (сильно не ругайтесь, бессонная ночь дает о себе знать. На часах 5 утра) :

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

Вот мы и собрали первый макет) Поздравляю. НО! Мы его просто собрали. В нем многого не хватает. Например, на странице описания товара я бы сделал счетчик, который бы считал заказы именно этого товара и написал что-то типа "Уже купили N человек". На странице с материалами нужно очень плотно доработать графику, ибо сейчас выглядит не очень. И т.д. и т.п. Включаем фантазию - и понеслось!) Если Вам понравилось - могу "до собирать" этот макет, внести в него необходимые изменения и выложить его всем на показ, хоть мне и стремно. Я не дизайнер, многого могу не учесть при разработке макета, многое сделать в минус оптимизации и т.д. Да и собрал этот макет я не с хорошим настроением, поэтому получилось немного г*вно)) Спасибо за потраченное время. Надеюсь, что Вы потратили его не зря.

[DmStarkoff]

Ещё бы по натяжке гайдик)

[donor]

Могу организовать, но тоже более для новичков) И только для WP, т.к. не увлекаюсь версткой)

[Славка]

Чем обусловлен выбор ширины в 1040 пикселей?

[donor]

Славка, Дело в том, что как бы Вы не верстали - в любом случае размеры перегоняются под браузеры. Фиксированный макет имеет свое расширение, но подгонять холст по этот размер бессмысленно. Почему? Потому что раз у нас есть фиксированный макет, значит, что в любом случае у нас будет пустое окружающее пространство до краев браузера. Я не помню какую там выбирают фиксированную ширину... Вроде 960. Так вот, при ширине 960px у нас остается как минимум по 40px с каждой стороны от макета. Это дает визуальное представление о том, как будет выглядеть готовый вариант. Что касается резиновых шаблонов - тут я для себя подчеркнул, что чем шире холст - тем больше хочется занять места. А потом в процессе верстки выясняется, что не под каждое разрешение экрана подойдет. Где-то блок вниз уползает, где-то пустое пространство между буквами как карьер, где-то еще что-либо. Именно такой холст я выбрал, т.к. раньше верстал полу-резиновые макеты, где минимальное разрешение экрана 600х400px, а максимальное - 1280х1024px. Получается, что на холсте шириной 1040px я могу разгуляться до самых краев. Хотя тут тоже обоснование не совсем точное, т.к. я не могу внятно объяснить, почему же я выбрал такую ширину. Могу сказать одно - удобно. Хотя это мое мнение и его могут не разделять многие люди.

[Славка]

Я вот смотрю свою стату и вижу что юзеров с разрешением 1024 -15%, с 1280 -30% ну и с бОльшими разрешениями куча.
Вот и возникает вопрос по сайту. Получается если делаем большой фикс, то имеем скрол горизонтальный, а это гадость редкая. Ставим малый фикс, получаем большой бэкграунд Понятно, что резиновый шаблон интересней с этой точки зрения, но иногда он только портит, если много внутренних блоков. Вот сижу и ломаю голову "к умным или красивым" :)