Создаем дизайн интернет магазина в Photoshop

Создание дизайна сайта в фотошопе с нуля

Прежде чем верстать шаблон сайта в HTML/CSS, его надо проработать. Отрисовывать дизайн принято в программе Photoshop. Готовый макет сохраняется в файл формата .PSD.

В качестве примера создадим дизайн сайта на рисунке ниже.

1. Открываем Photoshop и создаём в нём новый документ (Файл -> Создать или Ctrl+N).

2. Устанавливаем начальные параметры. На практике продумать дизайн с точностью до пикселя практически невозможно — в процессе вёрстки обязательно нужно будет что-то поменять, переместить, переделать. Поэтому размеры можно задавать приблизительные, причём ширину и высоту документа желательно указывать заведомо больше планируемых размеров сайта, чтобы в макете точно уместились все элементы. Наш документ сделаем 1000 пикселей шириной и 1500 пикселей высотой. Обратите внимание: пикселей, а не сантиметров. Другие параметры можно не трогать.

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

Если линеек нет — включите их (Просмотр -> Линейки или Ctrl+R).

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

4. Проверяем, чтобы размер шрифта был указан в пикселях, а не в пунктах. Если настроено не так, идём в Редактирование -> Настройки -> Основные, в отобразившемся окне переходим на вкладку Единицы измерения и линейки, в выпадающем списке Текст выбираем Пиксели и нажимаем OK.

5. Сразу делаем подложку сайта. У нас это градиентная заливка оранжевого, переходящего в жёлтый цвет. На панели слева выбираем инструмент Градиент.

На появившейся вверху панели жмём кнопку Зеркальный градиент, выбираем цвет на палитре левее.

Используя инструменты открывшегося окна Редактор градиентов, выбираем нужные цвета. Чтобы задать точный цвет контрольной точки, щёлкните на ней, нажмите кнопку Цвет и в окне палитры цветов укажите его в формате RGB, HSB, CSS или любом другом из доступных.

В результате манипуляций градиент получился следующим.

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

6. Сохраняем подложку в файл. То, что мы сделали, должно отображаться под основной страницей и занимать всё окно браузера целиком — своего рода подложка. Например, ширина сайта — 800 пикселей, а разрешение экрана у пользователя гораздо больше. Оставшееся пространство (всё, кроме тех самых 800px, которые будут заняты блоком страницы) заполнится градиентным фоном.

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

Сохранить такую узкую полоску несложно.

6.1. Выбираем инструмент Прямоугольная область.

6.2. Выделяем полоску произвольной ширины, но по всей длине слоя.

6.3. Копируем выделенную область (Ctrl+C).

6.4. Создаём новый документ (Ctrl+N), устанавливаем для него ширину 1 пиксель и вставляем скопированное (Ctrl+V).

6.5. Сохраняем файл в JPG-формате.

7. Создаём фон страницы. Фоном будет простой белый цвет. Выбираем инструмент Прямоугольник и в окне свойств задаём нужные параметры. У нас получился прямоугольник 800×1100 пикселей, левый верхний угол которого лежит в точке 100,0.

8. Делаем фон шапки. Градиентная заливка, похожая на подложку, размерами 780x80px.

Сохраняем его отдельным графическим файлом шириной в 1 пиксель, как делали это с подложкой.

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

Здесь важно, чтобы все пункты распределились равномерно, поэтому крайне рекомендуется использовать линейки. Чтобы вытянуть вертикальную, проведите указателем, удерживая при этом нажатой кнопку мыши, слева направо. С помощью линеек отмеряйте расстояние, учитывая, что каждый пункт меню должен занимать в нашем случае 120 пикселей.

10. Аналогично вставляем остальные пункты меню.

11. Добавляем логотип. У нас уже есть готовый, поэтому его остаётся только аккуратно вставить в макет. Для этого нажимаем Файл -> Открыть, затем щёлкаем на изображении и, удерживая нажатой кнопку мыши, перемещаем его на заголовок документа-шаблона, когда он откроется, перетаскиваем картинку в нужное место макета и отпускаем кнопку мыши.

12. Пишем имя и слоган сайта. Уже известным нам инструментом Горизонтальный текст дополняем уже почти созданный логотип надписями.

13. Переходим к боковой панели. Для начала создадим и сохраним отдельным файлом градиентную заливку для её заголовков. С инструментами знакомы, пояснения не требуются.

14. Добавляем на только что созданный градиент текст-заголовок информационного блока.

15. Рисуем обрамление области. Для этого достаточно использовать прозрачный прямоугольник с чёрными линиями контура. Выбираем инструмент Прямоугольник, задаём тип заливки фигуры Нет цвета, щёлкаем значок Задать тип штриха фигуры и выбираем чёрный цвет, иначе линий не будет. Если контур получился слишком толстым, устанавливаем ширине линий значение 0,5 пт.

16. Ниже добавляем заголовок блока с градиентной заливкой, как в п. 12-13.

17. Создаём блок меню левой панели. Добавляем оранжевый прямоугольник шириной 100px с жёлтым контуром 0,2 пт.

18. Добавляем на него текст.

19. С помощью дублирования слоёв и линеек создаём ещё пять пунктов меню левой панели.

20. Прописываем текст в основной части страницы, используя всё тот же инструмент Горизонтальный текст.

21. Добавляем фото в основную часть страницы, как мы делали это с логотипом. Для копирования изображения просто перемещайте его мышью, удерживая при этом нажатой клавишу Alt. Если вдруг картинка не подходит по размеру, используйте инструмент Трансформация (Ctrl+T).

22. Рисуем фон нижней части сайта — оранжевый градиент длиной 64 пикселя.

23. Сохраняем полоску нижнего фона шириной 1 пиксель в отдельный графический файл.

24. Уменьшаем высоту страницы. Получилось так, что все элементы уже прорисованы, а лишнее место ещё осталось. Вот тут-то нам и пригодились осмысленные имена слоёв. Среди прочих выбираем фоновый слой (у нас он так и называется — Фон) и с помощью инструмента Трансформация уменьшаем высоту нашего белого прямоугольника до нижнего края футера страницы.

25. Сохраняем шаблон в файл формата .PSD (Файл -> Сохранить).

26. Результатом сего действа и стал ещё простой, но уже нормально выглядящий шаблон сайта.

Теперь из PSD-макета остаётся средствами HTML/CSS сверстать шаблон сайта, но об этом я расскажу уже в следующей статье.

Полезные ссылки:

• Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
• Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
• Вёрстка сайта с нуля 2.0 — полноценный платный курс.

Дизайн Shopify-шаблона для интернет-магазина

В этом уроке мы будем создавать макет для интернет-магазина «Изделия ручной работы», используя программу Photoshop. Я не буду вдаваться в подробности, вместо этого я сосредоточу ваше внимание на выборе шрифта, гаммы цветов, пропорций и так далее.

1. Определение бизнес идеи

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

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

Для начала ответьте для себя на следующие вопросы:

• Что продавать?
• Кто будет заинтересован в покупке вашей продукции?
• Почему они должны покупать именно на вашем сайте?
• Обеспечение гарантии?

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

2. Подготовка

Прежде чем приступить к работе в Photoshop, необходимо определиться с цветами макета, стилем и направлением.

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

Далее необходимо определиться с цветовой схемой дизайна, которая будет сочетаться с торговой маркой продукции и привлечет внимание целевой аудитории. В этом вам поможет специальный генератор цветовых схем Adobe Color CC (ранее Kuler), который сэкономит ваше время и правильно подберёт цвета.

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

3. Выбор шрифта

Для своего макета я выбрал обычный шрифт Source Sans Pro и шрифт с засечками Source Serif Pro. В совокупности они придадут сайту сбалансированность и стильность.

4. Подготовка рабочей области

Перед началом работы в Adobe Photoshop давайте определимся с размерами нового документа и с другими параметрами.

Откройте Photoshop и создайте новый документ Ctrl + N. Определитесь с его размерами, чтобы они соответствовали требованиям вашего сайта, в моем случае это 1400х3564 пикселей.

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

Для этого войдите в меню View > New Guide (Просмотр – Новая направляющая). Обычно я выбираю значение 1000 пикселей в качестве начальной точки и добавляю несколько направляющих по углам для свободного места.

Примечание: положение направляющих для моего макета 200, 500, 550, 700, 850, 900 и 1200 пикселей.

Совет: чтобы автоматизировать данный процесс, можете воспользоваться плагином Photoshop GuideGuide .

5. Приветствие новых пользователей

Начнем мы с создания стильного меню и поля для поиска.

Создайте новую группу и назовите её Navigation. Установите новую горизонтальную направляющую на 130px. Здесь будут располагаться логотип, навигационное меню и поле для поиска. В левой части расположим логотип. Для него создайте черную форму прямоугольника и внутри напишите текст белым цветом.

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

Поле поиска – важная функция для сайта с коммерческой деятельностью. Сделайте его заметным и доступным, расположите его в правой части верхней панели навигации. Для его создания я использовал инструменты Текст (T) и Прямоугольник (U). Обратите внимание, цвета я подбирал при помощи генератора Adobe Color CC.

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

Изображение мы выберем высокого качества с сильным и четким акцентом, затем на него мы добавим текст и другие элементы.

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

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

После этого активируйте команду Свободное трансформирование Ctrl + T, чтобы изменить размер изображения. В процессе изменения зажимайте клавишу Shift для сохранения пропорций.

Чтобы изображение лучше сочеталось с тональностью сайта, добавим к нему градиент от прозрачному к черному. Активируйте инструмент Градиент (G), выберите тип от черного к прозрачному. Зажмите Shift и проведите линию градиента снизу до середины. Добавьте к градиенту обтравочную маску и уменьшите непрозрачность до 50%, чтобы сбавить интенсивность. Этот слой переименуйте в Shadow.

Теперь пришло время в центре изображения добавить заголовок, который привлечет внимание пользователей. Для заголовка я использовал шрифт Source Sans Pro, цвет черный, размер 70px, интервал между букв 160.

Чуть ниже необходимо добавить второстепенный заголовок и, самое главное, призыв к действию (известный как СТА). Для этого я использовал такие настройки: шрифт Source Serif Pro (Regular), размер 28 пикселей. Для вторичного заголовка я использовал кнопку, чтобы пользователь мог проделать дальнейшие действия.

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

Вы наверно заметили, что текстовые элементы расположены рядом друг с другом. Это обусловлено законом «Гештальт принцип близости».

Данный закон подразумевает совместное восприятие элементов (объектов), расположенных рядом друг с другом.

С верхней частью сайта мы закончили. Идем дальше.

6. Формирование доверия

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

Придумайте заголовок, который заинтересует вашу аудиторию и краткое описание к нему, который будет еще больше стимулировать к дальнейшим действиям. Здесь я использовал шрифт Source Sans Pro (Semibold), размером 24 пикселя, цвет темный оттенок серого #282723. Не забудьте оставить достаточно места над заголовком, чтобы он не сливался с изображением и отчетливо был виден.

Для описания я выбрал более светлый оттенок серого и поменьше размер шрифта, так как оно воспринимается вторично по значимости. Настройки: шрифт Source Serif Pro (Regular), размер 16 пикселей, цвет #adadad.

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

Изображения должны быть сделаны качественно и должны соответствовать рекламируемой продукции, можете заказать их у профессионально фотографа. Для этого урока я использовал вымышленную продукцию и фотографии к ним, которые я взял из Unsplash и Stock Up.

Выберите инструмент Прямоугольник и создайте его ниже описания. После этого перетащите выбранную фотографию в Photoshop и расположите на прямоугольник, добавьте к нему обтравочную маску. Если необходимо при помощи команды свободное трансформирование (Ctrl + T) измените размер фото.

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

Всю информацию мы будем писать тем же шрифтом Source Serif Pro. Название продукта напишите темно-серым, как и для заголовка этого раздела. Для цены используйте более светлый оттенок серого, так как это второстепенная информация.

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

Теперь все слои, относящиеся к продукции (название, цена, кнопка призыва к действию) поместите в одну группу и продублируйте её Ctrl + J. Копию разместите рядом во втором блоке, ранее отделенном вертикальными направляющими. Между блоками должно остаться пространство. Таким же образом заполните и третий блок.

Мы закончили с разделом Trending, в котором представлены три наименования продукта. По словам Paul Seys три варианта является оптимальным количеством для убеждения пользователя. Один из таких методов известен, как «Эффект Златовласки».

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

Теперь давайте разделим макет на части. Для этого я буду использовать инструмент Линия (U) светло-серого цвета #e6e6e6, чтобы она не бросалась в глаза. Проведите горизонтальную линию, отделив верхний раздел.

Совет: при создании линий удерживайте Shift, чтобы они получались идеально ровными.

Под линией создадим еще один раздел, в котором демонстрируется еще больше изделий, назовите его Popular. Продублируйте заголовок, название, описание продукции из раздела Trending. Добавьте больше продукции, сделав сетку 3х2.

7. Захват контактов лида

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

Возьмите инструмент Прямоугольник (U) и нарисуйте прямоугольную форму, которая будет служить фоном для этого раздела. Цвет для формы установите светло-серый #fbfafa, чтобы этот блок не слишком выделялся на фоне продукции. Продублируйте заголовок и описание из предыдущего раздела, и разместите их в верхней части созданной формы. Опирайтесь на скриншот.

Инструментом Текст напишите заголовок для статьи блока, дату и небольшой отрывок статьи. Для заголовка и описания я использовал шрифт Source Serif Pro, а для даты — Source Sans Pro.

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

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

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

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

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

Копию поместите на только что созданный раздел, на кнопке напишите призыв к действию.

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

Данный раздел поделите на несколько колонок, каждой колонке дайте заголовок, под каждый из которых добавьте ссылки. Колонки должны быть четко распределены в ряд.

Photoshop, Фото, Фотобанк

Финальный результат урока

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

Для выполнения урока вам понадобятся:

1. Фотографии с unsplash.com
2. Фотографии с stocksnap.io
3. Шрифт Source Sans Pro с Font Squirrel
4. Шрифт Source Serif Pro с Font Squirrel

Определяем цели

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

Для начала задайте себе такие вопросы:

1. Что мы будем продавать?
2. Кто будет заинтересован в покупке наших продуктов?
3. Почему они должны покупать именно наши продукты?
4. Как мы собираемся доказать ценность своего продукта?

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

Подготовка

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

Шаг 1

Начните собирать понравившиеся изображения для создания «доски настроения» и цветовой палитры. Обычно я использую Pinterest, но лучшим выбором станет gomoodboard.com. Этот сервис специально разработан для сбора вдохновляющих картинок в одном месте.

gomoodboard.com – простой способ собрать вдохновляющие материалы в одном месте

Шаг 2

Следующим шагом будет подбор цветовой палитры для нашего дизайна; она должна сочетаться с брендом, а также привлекать целевую аудиторию. Очень полезно использовать генераторы цветовой палитры, например, Adobe Color CC (бывший Kuler), которые помогут сэкономить время на подбор цветов.

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

Выбираем шрифты

Получив достаточно вдохновения, мы будем работать с шрифтами Source Pro, включая sans и serif версии. Их использование придаст дизайну сбалансированный вид, а заголовки сделает заметнее.

Подготавливаем документ

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

Шаг 1

Создайте новый документ, нажав Ctrl + N. Выберите комфортный размер — в моем случае это 1400х3564px.

Шаг 2

Теперь нужно добавить направляющие, чтобы у макета было достаточно места, а сам он выглядел сбалансированным. Направляющие обеспечат аккуратность, а также позволят определить ширину нашего сайта. Перейдите в меню Просмотр > Новая направляющая (View > New Guide) и добавьте несколько направляющих. Я обычно выбираю 1000px в качестве точки отсчета, после чего добавляю несколько дополнительных линий по краям для создания чувства свободы..

Примечание: В этом уроке использовались такие направляющие: вертикальные на 200px, 500px, 550px, 700px, 850px, 900px, 1200px.

Совет: Также можете использовать Photoshop плагин GuideGuide. Это еще больше упростит процесс.

Приветствуем новых покупателей

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

Шаг 1

Создайте новую группу под названием «Navigation», добавьте новую горизонтальную направляющую на 130px. Здесь будет размещен наш логотип, меню навигации и поиск. Разместите логотип слева. Если у вас его нет, просто создайте прямоугольник, а на нем напишите название сайта.

Шаг 2

Теперь напишите названия ссылок меню. Еще на этапе планирования вы должны знать, что необходимо включить в навигацию для максимального удобства посетителя. Используйте инструмент Горизонтальный текст (Horizontal Type Tool), чтобы написать названия пунктов. Разместите их рядом с логотипом, оставив достаточно свободного места.

Шаг 3

Поиск — невероятно важная функция для интернет-магазина. Сделайте поле поиска заметным и доступным, разместив его в правой верхней части. Для его создания используйте инструмент Прямоугольник (Rectangle Tool), а затем Горизонтальный текст (Horizontal Type Tool). Обратите внимание на то, что цвета получены из изображения при помощи Adobe Color CC.

Шаг 4

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

При помощи инструмента Прямоугольник (Rectangle Tool) нарисуйте прямоугольник размером 1400x700px (цвет не имеет значения). Разместите его прямо под навигацией (помните горизонтальную направляющую на 130px? Она как раз для этой фигуры). Затем перетяните выбранное изображение, разместив его над слоем с прямоугольником.

После этого зажмите клавишу Alt и подведите курсор к линии между слоями на панели Слоев (Layers panel). Когда вы увидите небольшую стрелку, указывающую вниз, кликните мышкой. Это создаст Обтравочную маску (Clipping Mask). Таким образом, изображение будет видно только в зоне прямоугольника.

Нажмите Ctrl + T, чтобы изменить размер изображения. При этом удерживайте нажатой клавишу Shift. Так вы сохраните пропорции во время редактирования.

Шаг 5

Чтобы наше изображение привлекало больше внимания, давайте добавим градиент, переходящий от прозрачного вверху до черного внизу. Выберите инструмент Градиент (Gradient Tool), затем настройте его так, чтобы цвет переходил от черного #000000 до прозрачного. После этого, удерживая нажатой клавишу Shift, перетяните мышку от низа до середины изображения. Затем применитеОбтравочную маску (Clipping Mask) и сократите Непрозрачность (Opacity) слоя до 50%. Переименуйте слой, назвав его «Shadow» для более простой идентификации в дальнейшем.

Шаг 6

Теперь пришло время для мощного заголовка, который привлечет внимание посетителя и заставит его узнать больше. Используйте крупный, жирный Source Sans Pro для короткого заголовка. Я выбрал Source Sans Pro (Black) размером 70px с трекингом (tracking) 160.

Шаг 7

Мы завладели вниманием посетителя, теперь нам нужно дополнительное сообщение и, что еще важнее, призыв к действию (часто называемый Call To Action — CTA). Я использовал Source Serif Pro (Regular) размером 28px для подзаголовка, а для CTA кнопки взял цвет блока поиска, чтобы сохранить общий стиль.

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

«Согласно с законом близости, предметы, размещенные рядом друг с другом кажутся частью одной группы».

Создаем доверие

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

Шаг 1

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

Разместите заголовок, который заинтересует посетителя и небольшое описание, которое привлечет его еще больше. Я использовал Source Sans Pro (Semibold) размером 24px темно-серого цвета #282723. Убедитесь, что вы оставили достаточно места над заголовком, чтобы он сочетался с верхней частью макета.

Для описания используйте что-нибудь более светлое. Тогда текст будет выглядеть визуально слабее и восприниматься как второстепенный. Для этого я использовал шрифт Source Serif Pro (Regular) размером 16px серого цвета #adadad.

Шаг 2

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

Выберите инструмент Прямоугольник (Rectangle Tool), нарисуйте прямоугольную фигуру. После этого перетяните фотографию своего продукта в документ, разместите ее над прямоугольником, а затем создайте Обравочную маску (Clipping Mask). Если требуется, измените размер изображения, нажав Ctrl + T.

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

Шаг 3

Для сохранения простоты шаблона мы предоставим только базовую информацию, включая название продукта и цену (это может заставить посетителя узнать больше).

Выберите тот же Source Serif Pro, затем введите название продукта, используя темно-серый цвет, который мы взяли для заголовка этой секции (Создаем доверие. Шаг 1 – прим. переводчика). После этого выберите чуть более светлый оттенок для цены, так как это второстепенная информация и она не должна визуально выделяться. Важно помнить, что все элементы (заголовки, кнопки и описания) должны быть отцентрированы.

Шаг 4

Теперь сгруппируйте все слои блока продукта и дублируйте их, нажав Ctrl + J. Затем разместите копии между вертикальными направляющими, не забывая о расстоянии между ними.

Шаг 5

Мы закончили с секцией «Trending», показывающей три продукта. Как было указано в одном из исследований, три варианта выбора лучше побуждают посетителя к действиям.

«Одна из таких техник — это так называемый «Goldilocks Effect» (так же известный как «Goldilocks Pricing»). Термин происходит от сказки «Три медведя», в которой Златовласка съела три миски каши; первая была слишком горячей; вторая — слишком холодной; третья — такой, как надо.»

Теперь давайте добавим небольшую линию, которая разделит наш макет на две секции. Я использовал инструмент Линия (Line Tool) с толщиной 1px светло-серого цвета #e6e6e6, чтобы она получилась заметной, но не слишком выделялась.

Совет: удерживайте нажатой клавишу Shift, чтобы создать ровную линию.

Шаг 6

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

Дублируйте (Ctrl + J) продукты секции «Trending», но при этом измените их заголовки, названия и описания. Сделайте еще несколько копий, чтобы получилась сетка 3х2.

Генерируем продажи

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

Шаг 1

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

Выберите инструмент Прямоугольник (Rectangle Tool) и нарисуйте большой прямоугольник, который будет служить фоном нашей секции. Используйте очень светлый серый #fbfafa, чтобы визуально отделить новую секцию от предыдущих блоков. Теперь дублируйте заголовок и описание предыдущей секции, а затем разместите их над фоном.

Шаг 2

Выберите инструмент Горизонтальный текст (Horizontal Type Tool) и введите заголовок, дату, а также короткий текст поста. Я снова использую Source Serif Pro для заголовка и описания, а Source Sans Pro — для даты.

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

Шаг 3

Теперь поместите все слои с постом блога в одну группу, затем дважды дублируйте ее, нажав Ctrl + J. Разместите копии между вертикальными направляющими, так само оставляя достаточно места по бокам.

Шаг 4

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

Снова выберите инструмент Прямоугольник (Rectangle Tool), выберите более темный цвет, например, #282723, после чего нарисуйте фон для нашей секции. При помощи заметно более темного цвета вы создадите контраст, который привлечет внимание посетителя.

Шаг 5

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

Перетяните скопированные слои, разместив их над слоем с фоном, измените тексты полей и кнопки.

Шаг 6

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

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

Последний штрих: добавьте строчку с информацией об авторских правах в самом низу.

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

Автор: Tomas Laurinavicius

С чего приступить к разработке дизайна интернет-магазина?

Доброго времени суток!

Господа дизайнеры, подскажите пожалуйста, при отрисовке дизайна для интернет магазина, нужно ли в фотошопе отрисовывать абсолютно все страницы либо можно сделать какой-то общий шаблон для однотипных страниц и в таком виде передать его верстальщику?

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

Спасибо заранее за ответы-советы!))

• Вопрос задан более трёх лет назад
• 2850 просмотров

@vikarik
Делайте страницы:
— Главная
— Страница с товарами
— Страница с выбранным товаром
— Страница с информацией (для инфы по контактам, инфо о фирме и т.д.)

Самое основное это согласовать первые три страницы (главная, товары, описание выбранного товара). Страницы с инфо о товаре может и не быть, мб у Вас там всплывающее окно при клике будет.

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

@vikarik да, один общий шаблон, а уникальная инфа по товару (фото, описание и т.д.) должна браться из базы, заполнение которой уже к дизайнеру отношения не имеет.

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

@vikarik Еще бывает что заказчик хочет как-то выделить и дополнительно стилизовать страницы с товарами в зависимости от категории товара, но это всё из разряда хотелок. Если за хотелки готовы оплатить, делайте. 🙂

Если Вам что-то не понятно или в чем-то не уверены, уточняйте у заказчика или у того кто с ним общается. Дизайн сразу на 100% не стоит прорабатывать, иногда лучше сделать парочку набросков и спросить какой вариант больше нравится.

1) Нужно сделать прототипы и согласовать с заказчиком (Взять готовые UI шаблоны)
2) Согласовать прототипы с заказчиком
3) Отрисовать главную страницу
4) Согласовать с заказчиком
5) Отрисовать внутрении

При разработке структуры сайта важно начать с проработки модели конверсии — пошагового алгоритма успешного (приносящего заказы) поведения пользователя на сайте.
Это не стандартизируемый процесс — для каждого сайта свой алгоритм
Почти никто этого не делает и поэтому так часты последующие доработки сайта
А если изначально вдумчиво проработать модель поведения то сайт будет давать максимально возможные для него конверсии
При разработке мыслить можно так:
— Какие этапы принятия решения происходят в голове пользователя
— Какие практические шаги, действия должен выполнить пользователь чтобы достичь страницы благодарности за заказ — это на самом деле ваша основная целевая страница на сайте, остальные лишь промежуточные на пути к цели
— Практические шаги часто подразумевают вариативность (зарегин пользователь или нет, раньше делал покупку или нет и так далее) поэтому модель поведения нужно прописывать с вариантами А и Б, на практике больше вариантов конечно.
Делать это можно в МС ворд или визио.
Черпать идеи лучше у сайтов-лидеров вашей тематики
И только потом накладывать дизайн на модель поведения

Только тогда вы сможете создать действительно продающий сайт

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

Кроме того, то что лично я практикую: разбираю бизнес заказчика «по косточкам», чтобы понять как лучше сделать ему и пользователю; потом идут прототипы в axure/balsamiq — их собирать быстрее и проще, чем рисовать дизайн и только потом, когда прототипы разобраны и одобрены, идет отрисовка визуальных стилей.

Лучшие PSD макеты интернет магазинов для верстки

Создание сайта обычно предполагает разработку макета, верстку и адаптацию под конкретную систему управления контентом. К счастью современные пользователи могут спокойно обойти все эти этапы и сразу выбрать готовый шаблон под нужную систему и создать сайт буквально за 50$. Именно такой способ является оптимальным для новичков. Продвинутые юзеры, в частности специалисты по верстке, могут использовать Photoshop-макеты. В частности, если им нужно создать коммерческую площадку, они используют PSD макеты интернет магазинов.

Макет разрабатывается веб-дизайнером и представляет собой готовый графический файл со всеми прорисованными страницами. В случае с интернет-магазином вы получите макеты оформления домашней страницы, страницы каталога, товара, промо-кампаний и многих других страниц. Перед вами будет готовый дизайнерский проект, над которым дальше должен работать верстальщик. Он будет резать макеты на компоненты и с помощью кода заново их собирать воедино. Но если вы новичок, то вам не нужны все эти сложности. Конечно, вы можете на будущее прочесть этот обзор, но советуем присмотреться к готовым шаблонам на WordPress, Magento, VirtueMart и OpenCart.

В обзоре собрана двадцатка лучших макетов PSD для различных коммерческих площадок, разбитых для удобства по категориям. Кстати, аналогичный обзор мы уже делали и раньше. На площадке ThemeForest доступна полная коллекция из 1200+ eCommerce-макетов, откуда мы и взяли представленные макеты.

Лучшие PSD макеты интернет магазинов для верстки

PSD макеты для любых интернет-магазинов

Auray – eCommerce-шаблон Photoshop для стильных магазинов

Светлый дизайн в духе современности, который подойдет и большим, и маленьким коммерческим площадкам. Комплектация включает 40 уникальных PSD-файлов со всеми страницами, в том числе страницами категорий, товаров и регистрации. Девять стилей футера и шапки.

Tumbas – PSD шаблон интернет-магазина любых товаров

Современный дизайн под любую современную коммерческую площадку. Страницы с детальным описанием товара, отзывы, макет отображения сеткой/списком, корзина, страница оплаты, блог, страница входа и другие. Файлы легко настраиваются благодаря организованной структуре слоев. Есть и WordPress-версия за 59$.

Shopping – многозадачный макет Photoshop под любой магазин

Перед вами полный комплект вариантов дизайна интернет-магазина для продажи любых товаров. 70 файлов с 78 UI-компонентами и всеми страницами магазина. Макет можно использовать со всеми системами, включая WooCommerce, Magento и Prestashop. Используются стильные иконки FontAwesome.

Linda – универсальный eCommerce-макет PSD

Этот уникальный шаблон поддерживает HTML и Magento версии. Имеет современный дизайн в чистом стиле, поэтому клиенты получат эстетическое удовольствие от покупок. 81 хорошо организованный файл Photoshop для создания магазина на WordPress, Shopify и других системах.

PSD макеты интернет магазинов в духе минимализма

Unero – минималистский шаблон магазина для ценителей элегантности

Минималистский дизайн и акцент на товарах – что еще нужно для успешных продаж? Дизайн создан с нацеленностью на высокую конверсию и привлечение внимания. Все элементы будут выглядеть четко на любых устройствах. 64 файла для магазина одежды и мебельного магазина. Новички смогут использовать шаблон Unero под WordPress, Shopify и Magento.

Negan – чистый макет для продажи различных товаров

15 уникальных демо с элегантным современным дизайном и простой настройкой. В комплекте 56 файлов Photoshop. Дизайн создан по принципу Pixel Perfect на базе сетки 1170px. Есть несколько макетов блога и портфолио.

PSD шаблоны интернет магазинов органических и экологических товаров

Naturix – макет PSD магазина органических товаров

Простая настройка и чистый уникальный дизайн. Четыре вида оформления домашней страницы. Несколько вариантов каталога магазина. PSD-файлы в высоком разрешении для наивысшего качества отображения. При разработке были использованы бесплатные иконки Font Awesome.

Origano – PSD-макет эко- и органических товаров

39 файлов Photoshop, в которых скрыто шесть макетов главной страницы и несколько вариантов оформления магазина и блога. Дизайн подойдет под продажу эко-товаров, продуктов питания и даже под сайт пекарни. Чтобы пропустить этап верстки, используйте HTML5-версию макета.

Kelis – шаблон PSD для продажи органической и экологической продукции

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

Oars – простой PSD-макет магазина органических товаров с творческим оформлением

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

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

PSD макеты сайтов интернет магазин одежды, обуви и аксессуаров

Elegant – PSD макет магазина для продажи модных товаров

Дизайн этого макета невероятно стильный и чистый. Любителям минимализма очень понравится. Оформление Elegant покорит и покупателей. 33 идеальных файла в формате PSD, созданных на базе сетки Bootstrap 1170px.

April – стильная тема с десятками файлов PSD

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

WowMall – макет спортивного интернет магазина PSD и не только

В этом стильном современном макете спрятано 8 концепций магазина на любой вкус. Мобильно-адаптированный дизайн и сетка Bootstrap 1724px. Вместе с макетом вы получите комплект стильных иконок. Доступна и WooCommerce-версия этого макета.

MoodShop – современный шаблон PSD для продажи обуви

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

Sapphire – шаблон PSD для продажи дорогих часов

В этом PSD-макете собраны уникальные варианты дизайна элитного интернет-магазина часов. Комплект из 13 правильно организованных файлов PSD позволит вам легко настроить магазин под свои нужды.

У нас есть и готовые WordPress шаблоны интернет-магазинов одежды, обуви и часов.

PSD макеты интернет магазинов косметики

FLO Cosmetic – макет стильного магазина косметики

Дизайн в духе минимализма идеально подойдет под продажу косметики. 27 PSD-файлов со страницами фильтра товаров, категорий, оплаты и вариантами главной страницы. Эй, новички, для вас специально есть версия под WordPress для быстрой разработки!

Прочтите также отличную подборку WordPress шаблонов для интернет-магазина косметики.

PSD макеты мебельных интернет магазинов

Furnihome – eCommerce-макет для продажи мебели

Давно искали простой макет для верстки магазина стильной мебели? Перед вами отличный вариант с поддержкой светлого и темного стиля оформления в комплекте с 68 PSD-файлами.

Modus – изысканный макет PSD магазина мебели

Современный и чистый стиль этого макета позволит вашей эксклюзивной мебели выглядеть просто потрясающе. Он гибкий и настраивается легко и быстро. Базируется на сетке Twitter Bootstrap 1140px.

SMarket – коммерческий шаблон PSD с чистым дизайном

Этот макет предназначен для магазинов с большим количеством товаров. Поддержка категорий товаров, в том числе акционных. 18 PSD-файлов с четырьмя концепциями магазина.

PSD макеты интернет магазинов техники и электроники

Techmarket – макет Photoshop магазина электроники

Чистый и стильный макет с поддержкой вертикального и горизонтального меню. Современная сетка 1740px для эффективного использования пространства сайта.

Вам также может быть интересно узнать о готовых шаблонах для магазина электроники.

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

Мульт канал

Создать аккаунт

Как Создать Дизайн Интернет-Магазина В Photoshop С Нуля

Спасибо! Поделитесь с друзьями!

Вам не понравилось видео. Спасибо за то что поделились своим мнением!

Описание

Урок: как создать современный дизайн главной интернет-магазина в Photoshop с нуля: практика, разбор лучших современных магазинов, фишки и секреты. СКАЧАТЬ РАЗРАБОТАННЫЙ МАКЕТ: https://wayup.in/lm/load/lm35 и еще кое-что.

Смотрите другие ценные видео по веб-дизайну:

Создаем дизайн интернет магазина в Photoshop

Никакой «воды» – только ценная информация и работающие лайфхаки по веб-дизайну и программированию

Photoshop-лектор: Дизайн макета сайта в Photoshop. Детальное руководство

Что нужно знать о рисовке макета сайта в Photoshop?

Главным образом, почти 98% проектов функциональных сайтов начинаются с разработки и рисовки веб-дизайна в Фотошопе.

Дизайн-макет сайта – будущий Интернет-ресурс на стадии разработки. В будущем его можно применить к порталу, блогу или к торговой Интернет площадке. Также, это может быть лендинг страницей, отдельно прорисованным графическим образом и т.п. Дизайн сайта может быть как нейтральным, так и иметь функцию – главного представителя образа предоставленной продукции в нем или информационного контента.

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

• шапка;
• расположение меню;
• навигация;
• цветовая гамма;
• шрифты и т. д.

Первое что тебе нужно – концепция.

Ответь себе на вопрос: «Для чего\кого тебе нужно создать дизайн веб-сайта?». Про рисуй целевую аудиторию и просчитай в уме перечень функций и задач, которые должен обязательно выполнять сайт.

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

Пошаговое создание дизайна сайта в Photoshop

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

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

Твой макет сайте будет шириной в 960 пикселов (px). Нажми «Файл» — «Создать» (> File > New Document) или комбинацию клавиш «Ctrl+N». Поставь размер 1200х1500 пикселов и разрешение 72 пиксела. Цвет RGB, 8 бит, фон – белый.

Выдели весь документ при помощи инструмента «Прямоугольная область» (> Rectangular Marque Tool) или нажми комбинацию клавиш «Ctrl+A» -она автоматически выделит всю область документа без исключений.

Перейди в меню «Выделение» – «Трансформировать выделенную область» (> Select > Transform Selection).

Сверху, на панели настроек установи значение ширины – 960 px. Это будет главная рабочая область макета, в которой тебе предстоит работать.

Установи линейки (направляющие) точно по границам выделения. Перетащи их вручную указателем мыши. Если у тебя в Фотошопе не включены линейки, зайди в «Просмотр» и нажми галочку напротив — «Линейки» (> View > Rulers).

Далее, сделай отступ между краями рабочей области макета и зоной главного контента. Перейди в меню «Выделение» – «Трансформировать выделенную область» (Select > Transform Selection). Уменьши выделение по ширине до отметки в 920 пикселов.

Следующее, что нужно сделать – создать выделение высотой в 465 пикселов, как это показано на примере.

Создай новый слой и залейте выделенную область серым, используя, например, «Инструмент Кисть» (> Brush Tool) или «Инструмент Заливка» (> Paint Bucket Tool).

Выбери цвета для градиента, используя палитру цветов – она на панели инструментов слева.

Примени градиент. Его можно найти также на панели инструментов или кликнув два раза мышкой по необходимому слою. На примере пошагово объяснено что за чем нужно кликать – 1. «Наложение градиента», 2. «Градиент», 3. Выбрать ваши цвета из палитры «Набор». 4. Указать желаемый угол градиента.

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

Итак, продолжи. Создай новый слой (сразу его проименуй!) – «Ctrl + Alt + Shift + N»и выберите мягкую кисть, размер, например около 600 пикселов (можешь менять размеры по своем вкусу).

Передвинь все слои в следующем порядке – «Подсветка» — «Шапка» — «Фон».

Кликни кистью один раз в центре шапки. Поставь прозрачность и удали потом часть пятна – разруби его, например, инструментом «Прямоугольная область» и нажмите клавишу «Delete». Слой с подсветкой сожми по вертикали и растяни (комбинация клавиш «Ctrl + T»).

Чтобы отцентрировать необходимые слои – выбери их и выбери инструмент «Перемещение» (> Move Tool) или клавиша «V». На панели свойств (вверху) нажми «Выравнивание центров по горизонтали» (> Align Horizontal Centers).

Создай новый слой («Shift + Ctrl + N»). Поставь карандашом (> Pencil Tool) точку. Растяни ее по горизонтали («Ctrl+T») и сгладь края градиентом как делал это ранее.

Временно отключи видимость фонового слоя. Ставим там две точки инструментом «Каранадш» (Pencil Tool), размером в 2 пиксела. Жми далее «Редактирование» – «Определить узор» (Edit > Define Pattern).

Создаем новый слой («Shift + Ctrl + N») и нажми «Редактирование» — «Выполнить заливку».

Выбери далее «Регулярный» и кликни на созданный тобой узор.

Выбери область как указанно на примере и примени задачу.

Как видишь, у нас получилась «шашечка», непрозрачность которой стоит уменьшить.

Далее, выделяй узор в произвольном порядке инструментом «Овальная область» (> Elliptical Marquee Tool). Применяй инверсию выделенной области и при помощи «Растушевки» (> Feather) сгладь края и удаляй ненужную область узора.

Затем пишем название логотипа при помощи инструмента «Горизонтальный текст». К слою с логотипом можно также добавить стиль слоя «Тень» (>Drop Shadow), что находится в меню слоя (два раза жми кнопкой мыши на нужный слой).

Добавь новые области границ линейкой, чтобы визуально текст не прыгал в разных абзацах друг от друга.

Напиши название для будущих кнопок.

Здесь в дальнейшем будет так званный – слайдер для контента. Выдели область размером 580х295 пикселов и помести туда любой снимок.

Далее, создай визуальный эффект к слайдеру. Создай новый слой («Shift + Ctrl + N»), выбери «Кисть» (> Brush Tool) и по тому же принципу, что и с точкой – поставь точку диаметром около 400 пикселов и растяни ее (Ctrl+T).

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

Убираем ненужные края, чтобы смотрелось аккуратнее.

Делай два новых слой и рисуй прямоугольные кнопки для слайдера. Делай их полупрозрачными.

Добавь указательные стрелки инструментом «Произвольная фигура».

Создай новый слой и прямоугольником выдели область внизу слайдера — инструмент «Прямоугольная область выделения» (> Rectangular Marqee Tool). Сделай ее полупрозрачной (непрозрачность — 50%). Напиши текст.

Продающий дизайн интернет-магазина. Часть 1. Аналитика

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

Это первая статья. Всего их будет 3.

Вступление

Сегодня всё больше людей совершают покупки в интернет-магазинах. Процент таких покупок с каждым годом растёт и всё больше набирает обороты. В России 22 млн. человек покупают в онлайне (по данным агентства Data Insight 2013 г.). Сейчас практически всё можно купить в Интернете, и все те товары, за которыми раньше мы традиционно ходили на рынки и в супермаркеты, теперь мы можем найти и купить, не выходя из дома. Масштабы интернет-магазинов самые разные, от крупных мировых лидеров, таких как Amazon, Ebay, Alibaba и др., где можно найти самые различные группы товаров, до небольших тематических магазинов.

Как и в любой розничной торговле, здесь существует огромная конкуренция. Создать и запустить интернет-магазин в наши дни стало проще, чем это было каких-то 10-15 лет назад. Интернет-магазинов сейчас становится всё больше и больше, но вперед вырываются лишь немногие. Единицы из них имеют хорошую конверсию и, как следствие, высокую прибыль.

В чём же секрет? Как сделать интернет-магазин успешным? Кроме грамотно продуманной стратегии и хорошего маркетинга, необходимо создать привлекательную оболочку, внешний вид. По статистике, человек в течение лишь нескольких секунд решает (на уровне подсознания), оставаться ему на сайте или нет. Немногие из нас могут отличить понятия «красиво» от «некрасиво» мгновенно, лишь взглянув на что-то, но наше подсознание – уж оно то знает, что к чему. В данном случае это выбор решения – остаться на сайте или продолжить путешествовать по другим интернет-магазинам. Решит ли сам человек, «да, здесь всё понятно и просто, этому магазину можно доверять», или за него это сделает подсознание – не столь важно, наша цель – задержать человека на сайте, будь то потенциальный покупатель, целенаправленно ищущий конкретный товар, или простой пользователь, который зашел на сайт случайно. Наша задача – задержать обоих, сформировать у них хорошее мнение о магазине, вызвать доверие и привести их к покупке. Не сейчас, так позже.

Пожалуй, мало таких людей, которые, зайдя первый раз в новый интернет-магазин, решат, что им вдруг срочно нужно купить электрокомбайн, непременно сейчас, и что жизнь без него теряет все краски. Конечно же нет! Но важно сделать магазин запоминающимся, интуитивно понятным, чтобы человек, зайдя сюда в первый раз, почувствовал себя комфортно, мог с легкостью найти необходимую ему вещь, информацию, да и вообще – не попадал на сайте в ситуации, из которых бы не видел выхода. Всё должно быть предельно просто и доступно для понимания. Если это сработало – процесс пошёл. Человек запомнит магазин, и, пусть даже не совершив покупку сейчас, вернётся за ней позже. И вот тогда уже крайне важно ничем не спугнуть нашего покупателя и довести его до конечной цели – совершения покупки, которой он должен будет остаться доволен.

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

Почему дизайн так важен для интернет-магазина?

Мы сегодня не будем говорить «обо всем», а сосредоточимся только на одной стороне создания успешного интернет-магазина, а именно – на дизайне. Поговорим о визуальной оболочке, интерфейсе. Затронем, конечно, и юзабилити, как же без него?

А начнём мы с того, что главная цель любого интернет-магазина – продавать. А цель дизайна – помочь магазину продать что-то покупателю. Разработка интернет-магазина обычно состоит из таких основных этапов, как исследования и аналитика, проектирование, дизайн, верстка, программирование, контроль качества, запуск проекта, продвижение и поддержка. Несмотря на то, что этапов создания так много, в конечном итоге простой пользователь не увидит, например, аналитику или проектирование, верстку или программирование. Это невероятно важные и незаменимые процессы, без которых сайт попросту не будет эффективно работать, но о них простой пользователь может даже не знать, о них знаем мы, разработчики. Простой пользователь увидит дизайн, увидит удобство или неудобство пользования. А это – интерфейс, дизайн, юзабилити. Хороший дизайн будет способствовать продажам и наша с вами цель будет достигнута.

Как мы уже сказали, первое, что видит человек, заходя на сайт – это дизайн. С юзабилити, удобством пользования и другими важными нюансами он столкнется позже, но самое первое, что он видит, заходя на сайт, (особенно на новый сайт, неизвестный) – это непременно дизайн. Это важнейшая составляющая сайта, формирующая первое впечатление у человека и очень важно, чтобы это впечатление не было испорчено. «У вас не будет второго шанса произвести первое впечатление», как говорила Коко Шанель.

Рис. 1. Примеры интернет-магазинов с хорошим дизайном: goodlife.com, flipkart.com, beauty.com.

Каким должен быть успешный дизайн для интернет-магазина?

Первое, что мы должны понять и признать, – это то, что мы делаем дизайн для широкой аудитории. Пользователи интернет-магазинов самые разные: люди разных возрастов, взглядов, вкусов, разного социального положения. Конечно, есть узкотематические интернет-магазины с узкой ЦА, но это скорее исключение, чем правило. Так что, кроме уникальности, о которой мы писали выше, крайне важно сделать наш дизайн универсальным и понятным любому пользователю, будь то ультрамодный тинэйджер, успешный бизнесмен, или сердобольная старушка. Всем должен быть понятен наш сайт. Каждый человек уникален и индивидуален, у всех нас свои вкусы и взгляды. Но в дизайне, как и в любом другом виде искусства, есть своя классика, то, что проходит через время, поколения и не меняется.

«Мода проходит, стиль остается», как гласит известное высказывание. Мода диктует новые тенденции дизайна, в том числе и в веб-индустрии. Сегодня актуально что-то одно, завтра оно сменится другим. Но, если мы хотим приблизиться к универсальности, нам нужно делать упор на то, что признает каждый из нас, несмотря на время и тенденции моды. Это классика. Она есть во всём. Простота и в то же время богатство, однородные цвета, простые формы, внимание к деталям. Это всегда будет актуально. Возьмите, к примеру, автомобили Mercedes Benz классического черного цвета. На одном из них ездил Штирлиц, а сегодня ездят главы государств и многие другие. Мерседес не нужно красить красным цветом в белый горошек, чтобы угодить моде. Это классика, эталон дизайна, это выражение бренда, то, что всегда было актуально, то, что всегда будет на уровне и на ступень выше любого другого дизайна.

Классика есть и в веб-дизайне. Используйте простые геометрические формы элементов, спокойные, не кричащие цвета, правильные цветовые схемы, незагруженность информацией. Хороший дизайн – это когда уже нечего убрать. Как работает скульптор? Берёт каменную глыбу и отсекает от нее всё лишнее. Этот принцип, несомненно, применим и к созданию хорошего дизайна сайта. Не стоит также забывать о логике дизайна, о его правильности. Правильный дизайн человек воспримет подсознательно, такой дизайн выделяет самое главное, цель сайта. Это, прежде всего, правила Золотого Сечения, пропорции Фибоначчи, модульные сетки.

Рис. 2. Еще примеры хорошего дизайна, zappos.com, 2modern.com, tmlewin.co.uk

Рассмотрим основные этапы создания дизайна, а также отдельных его элементов.

Исследования и аналитика

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

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

Маркетинг в дизайне

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

AIDA. В маркетинге существует такая модель как AIDA. Расшифровывается это так: Attention, Interest, Desire, Action (Внимание, Интерес, Желание, Действие). Принцип её – общий порядок событий, которые могут возникнуть, когда потребитель взаимодействует с рекламой, а в нашем случае – с контентом на страницах сайта. Пользуясь этой системой, мы можем «продать за 4 шага».

AIDA является бизнес логикой, которую мы рекомендуем использовать при создании дизайна. Эта модель может применяться на всем сайте в целом и на отдельных его страницах. У каждой из этих страниц может быть своя цель, для достижения которой можно использовать АИДУ.

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

Рис. 3. Как работает AIDA на примере страницы товара

По статистике, более 30% посетителей уходят с сайта после оформления покупки, не завершив её. Они передумывают, или что-то их отвлекает, или недостаточно продумана логика их мышления. Чтобы снизить этот процент, рекомендуем вам использовать AIDA. Это, несомненно, сыграет большую роль для достижения целей сайта и увеличения конверсии. Но мы говорим в этой статье не о маркетинге, а о дизайне, поэтому едем дальше.

Юзабилити

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

Сценарии поведения (User Story). Этот этап призван выявить ошибки в логике, расставить приоритеты и улучшить придуманные нами решения. Сценарии поведения – схема общего системного мышления, пошаговый путь пользователя, то, как человек приходит к целям на сайте. Сценарии эти детально описывают варианты решения пользователями конкретных задач, в нашем случае это путь к покупке. Продумывание сценариев поведения предполагает анализ поведения пользователей на страницах сайта: какие действия выполняются, сколько затрачивается времени, что привлекает внимание и т.д. Это применяется до процесса макетирования, чтобы лучше понимать, как проектировать, а также для проверки готовых макетов: все ли мы учли, все ли сделали правильно с точки зрения юзабилити.

Сценарии поведения в нашем случае могут иметь разные логики: старт пользователя с главной страницы магазина, при переходе в магазин из поисковой системы, социальной сети, баннера и др. По данным исследований inFOLIO Research Group, в 2012 году самым популярным средством поиска товаров были поисковые системы – 92% аудитории. Если пользователь, например, искал конкретный товар через поисковую систему и попал на наш сайт – он окажется на странице нужного ему товара, или на странице категории, или на странице статьи-обзора. Одним словом, близко к цели. Но если он у нас впервые – само собой, у него могут возникнуть сомнения, можно ли доверять этому магазину. Его могут заинтересовать разделы «О магазине», или «Контакты», чтобы убедиться в том, что магазин «живой» и его не обманут. Кажется, наш покупатель отклонился от цели, ушёл со страницы товара. Вот поэтому и продумываются разные сценарии поведения, которыми мы с вами должны руководствоваться, создавая дизайн. Если наш покупатель оказался, допустим, на странице контактов, напомните ему о его цели, например, с помощью блока «недавно просмотренные товары». Он увидит фотографию того, что искал, вспомнит, что хотел это купить, и вернется к своей цели.

Рис. 4. Пример сценария поведения по получении консультации

Journey Map — карта пути пользователя. Начинаться она может всего-лишь с идеи с идеи что-то купить, и далее показывает путь решения этой идеи. На этой карте отображаются важные шаги, которые делают клиенты в процессе принятия решения. На этой карте также отмечены разнообразные элементы, возникающие на каждом шаге. Будущее клиентского опыта заключается, помимо всего прочего, в создании подобных карт.

Рис. 5. Пример Journey Map

Зачем мы всё это описываем в статье про дизайн? Дело в том, что дизайнер должен мыслить не только как дизайнер, но и как маркетолог, как юзабилист, и как покупатель тоже. Когда мы уже провели исследования, изучили ЦА, проработали маркетинг и собираемся делать дизайн – дизайнер наш должен построить свою работу на основе результатов предыдущих этапов. Как бы взять заложенный фундамент и на его основе уже строить, делать дизайн. Так как всё это – командная работа, последовательная и взаимосвязанная.

Проектирование

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

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

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

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

Рис. 6. Прототип главной страницы интернет-магазина Kibet

Времени на дизайн одной страницы нужно намного больше, чем на один такой прототип. Если бы сначала дизайнер делал дизайн, и пытался утвердить его у заказчика, то в процессе работы постоянно бы возникали какие-то недоработки, недостающие или лишние элементы. Дизайн – дело тонкое и кропотливое, и чтобы сделать в дизайне какой-то новый элемент – нужно время. Процесс был бы длительным, бесконечным и ни к чему хорошему не привел. Поэтому и нужно проектировать страницы. Так как прототипы – это схемы, то и времени на их создание нужно намного меньше. Цель их – показать, как будет выглядеть страница, но без дизайна, а схематично. Показать все элементы, которые должны присутствовать и их примерное расположение. Так дизайнер сможет сконцентрировать всё свое внимание на дизайне, и не будет переживать, что что-то забыл или упустил. Как видите, роль проектирования очень важна и без него никак не обойтись, если мы хотим сделать сайт качественным и эффективным.

Рис. 7. Тот же Kibet, но уже в дизайне

Внешний вид, цветовая гамма

По-настоящему хороший дизайн магазина – этот тот, который не сильно заметен. «Хороший дизайн виден сразу. Отличный дизайн незаметен» как выразился Джо Спарано. Дизайн не должен отвлекать внимание пользователя от просмотра товаров, изучения информации, совершения покупок. Но при этом дизайн должен вызывать у пользователя правильные эмоции, которые подготовят его к совершению покупки. Это две стороны медали, которые вызывают конфликт: как сделать дизайн незаметным, но эмоциональным? Ниже мы постараемся ответить на этот вопрос. Очень часто многие допускают ошибку, делая красивые картинки, анимацию и другие «навороты» в дизайне интернет-магазина, но ведь цель то у нас какая? Мы ведь делаем дизайн для покупателей, а не для заказчика, помните это. И, так как это интернет-магазин, где продают товары (а они – самое главное здесь), то нам и нужно выставить их на передний план, а дизайн пусть будет на втором плане, как дополнение и завершение общей картины.

Рис. 7. Примеры, infibeam.com, alibaba.com

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

Если мы хотим создать качественный дизайн, чистый и элегантный, не нужно использовать более 2-3 цветов. Это прописная истина, которой не стоит пренебрегать. Речь идёт лишь о цветовой схеме самого сайта. Другие цвета появятся позже в рекламных баннерах, это нормально, баннеры и должны выделяться и привлекать внимание. Также будет огромное множество фотографий товара самых разных цветов. Но сама цветовая схема сайта не должна содержать много цветов. Не используйте кричащие, ядовитые цвета, они вызовут лишь негативные эмоции, человек не сможет долго находиться на таком сайте. Лучше использовать мягкие и спокойные цвета и цветовые схемы, они будут вызывать умиротворенность и доверие. Соблюдение этого правила станет одной из ступней создания эмоционального фона, который приведет человека к покупке.

Рис. 8. Примеры цветовых схем известных интернет-магазинов: ebay.com, amazon.com, bigbrownbox.com.au

Цвет фона также рекомендуется делать однородным, чистым. Если и применять паттерн, то лучше еле видный, неброский или однородный. Фон не должен отвлекать внимание от информации.

Рис. 9. Примеры использования паттернов и фоновых изображений, hushbabies.com, ballarddesigns.com

В целом, в дизайне не должно быть ничего лишнего, всё должно выглядеть предельно аккуратно, ничто не должно отвлекать внимание пользователя от контента. И, несмотря на то, что мы делаем магазин с огромным множеством товаров, всё-таки нужно избегать перегруженности информацией. Не создавайте лишних элементов, если они не несут никакого смысла и от них можно отказаться. Лучший дизайн в нашем случае – легкий и просторный, не стесненный и не перегруженный.

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

Анонсы от автора:

Курсы по электронной коммерции. Совсем скоро в нашей бизнес-школе «Digitov» стартуют практические курсы от авторов статьи: Проектирование серьезных сайтов, Маркетинг для интернет-магазина и Все о создании интернет-магазина. Спешите записаться на курс и получить скидку!

Книга по электронной коммерции. Мы заканчиваем писать книгу по созданию и продвижению интернет-магазинов. Желающие могут оставить заявку и получить первые экземпляры книги. Для этого нужно отправить на email: [email protected] письмо-заявку с темой «Книга по электронной коммерции» и сразу после выхода книги мы отправим подробную информацию.

Новые статьи. Чтобы получать наши новые статьи раньше других или просто не пропустить новые публикации — подписывайтесь на фан страницы SECL Group: Facebook, VK, и Twitter или на фан страницы Digitov, где будут выкладываться обучающие материалы и мероприятия, в том числе бесплатные: Facebook, VK, и Twitter.

Мульт канал

Создать аккаунт

Как Создать Дизайн Интернет-Магазина В Photoshop С Нуля

Спасибо! Поделитесь с друзьями!

Вам не понравилось видео. Спасибо за то что поделились своим мнением!

Описание

Урок: как создать современный дизайн главной интернет-магазина в Photoshop с нуля: практика, разбор лучших современных магазинов, фишки и секреты. СКАЧАТЬ РАЗРАБОТАННЫЙ МАКЕТ: https://wayup.in/lm/load/lm35 и еще кое-что.

Смотрите другие ценные видео по веб-дизайну:

Как сделать дизайн сайта, если вы новичок

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

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

Определитесь с целью

Для начала нужно понять, зачем вашему клиенту нужен сайт. Пусть он ответит на несколько простых вопросов:

• Чему посвящен сайт?
• Какие задачи должен решать?
• Как планируется продвигать сайт?
• Какая у сайта должна быть структура?
• Какой контент планируется размещать?
• Есть ли у клиента готовый брендбук?

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

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

Определитесь с типом сайта

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

Лендинг

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

Корпоративный сайт

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

Интернет-магазины

Эти сайты знакомы каждому из вас: AliExpress, OZON, «М.Видео» и десятки других аналогичных сайтов. Главный вызов дизайнеру здесь — в количестве информации и товаров, а также проектировании страницы заказа.

Изучите конкурентов

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

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

Даже если в вашей нише по каким-то причинам нет конкурентов, не пропускайте этот шаг. Попробуйте изучить сайты смежной ниши, составьте майндмэп в программе XMind или сервисе MindMeister, сделайте зарисовки будущего интерфейса и не забывайте анализировать каждый свой шаг, ведь любой элемент интерфейса должен отвечать какой-либо цели.

Найдите референсы

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

Если вы новичок в дизайне, делать это самому — сомнительное решение. Лучше всего найти примеры сайтов, которые вам нравятся, и перенять некоторые идеи. Только не перерисовывайте понравившийся сайт от шапки до футера — это уже откровенный плагиат. Рекомендуем сделать подборку из пары десятков (и больше) сайтов смежных тематик, оформление которых вам понравилось, и приглядеться к деталям, разобрав макеты на составные части.

Более того, подборку референсов вы можете смело показать заказчику. Вместе выберете подходящий стиль, что поможет избежать ненужных правок в дальнейшем. Найти множество хороших примеров можно на Behance, Awwwards и Pinterest.

Как сделать красивый сайт

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

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

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

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

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

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

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

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

Рассмотренные в статье принципы — первый шаг на пути становления дизайнера. Если вы действительно заинтересованы в создании классных продуктов, вам предстоит открыть для себя еще очень много нового и интересного. Начать можно с наших вебинаров, а стать настоящим профессионалом — с помощью годового курса «Веб-дизайн с 0 до PRO».