Как создать макет сайта в Ворде, Фотошопе и специализированном сервисе

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

Инструментов для создания макета много — от «Фотошопа» до «Ворда». Все зависит от познаний в этой области. Если вы с компьютером на «ты», то выбирайте первый вариант, если нет, то вполне будет достаточно и «Ворда». Кроме этого, в Сети есть специальные сервисы, где все интуитивно понятно. Лучше всего, конечно, заказать макет сайта у профессионала, но тут важно знать, какого фрилансера выбрать и как потом проверить его работу.

Необходимость макета сайта

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

Нередко случается, что дизайнер справился с макетом, отлично все прорисовал, но после верстки появляются проблемы:

• возникли отступы там, где их быть не должно;

• часть элементов просто исчезла;

• текст выползает из области контента.

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

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

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

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

Затем разработчик, получив макет в графическом формате, доводит его до вида, доступного для восприятия браузерами (используя язык для разметки HTML и таблицы стилей CSS).

5 преимуществ макета сайта

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

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

Почему необходимо создавать макет сайта:

1. Если есть какие-то визуальные недостатки, то они видны сразу.

2. Любые свои идеи дизайнер может изобразить в макете и предложить их заказчику.

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

4. Сразу можно составить представление о внешнем виде будущего сайта.

5. Клиенту и дизайнеру проще найти общий язык, когда все идеи на виду.

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

Требования к созданию макета сайта

• Визуальные блоки располагаются симметрично

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

  

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

• Прописываются все параметры

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

• Описывается изменение элементов на разных этапах их использования

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

• Блоки и иные элементы размещаются по сетке

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

• Повторяющиеся элементы собираются в одном файле

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

• Шрифты желательно брать стандартные

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

• Использовать направляющие для выравнивания объектов

  В процессе создания макета сайта сохраняйте направления. Для последующих шагов по разработке сайта это необходимо.

• Указывать цвет фона и ширину отступов от краев экрана

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

• Все элементы располагать на отдельных слоях

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

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

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

Основные элементы макета простого сайта

При создании макета страницы сайта важны следующие основные элементы:

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

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

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

  

• Призыв к действию. Любой владелец сайта заинтересован в том, чтобы посетитель не просто полистал сайт, но и стал клиентом компании. А для этого необходим эффективно работающий призыв к действию. К примеру, кнопки типа «Купить», «Заказать», «Оформить подписку», «Получить совет специалиста» и т. д.

Варианты создания макета сайта

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

• Обратиться в web-студию. Вам все сделают грамотно, без ошибок в коде и с удобной навигацией. Сайт будет отлично открываться на любом (хоть старом, хоть суперсовременном) устройстве. Разумеется, специалистам за работу придется заплатить (причем немало), и хорошо, если у вас есть на это деньги.

• Найти дизайнера-фрилансера. Это трудно (примерно, как искать инвесторов для нового бизнеса). Услуги опытного мастера стоят дорого (как было сказано в предыдущем пункте). А дилетант не сделает сразу все качественно — придется тратить время и нервы на доработку, исправление ошибок и т. п.



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

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

Пожалуй, наибольшей популярностью среди всех графических редакторов пользуется Adobe Photoshop. Новичок вряд ли сможет работать с ним с лету, но зато здесь отличные функциональные возможности и инструментарий. Люди, пользующиеся программой профессионально, постоянно оттачивают свои навыки и узнают все новые и новые тонкости. И все-таки, имея лишь набор базовых знаний, яркое воображение и пошаговую инструкцию по созданию макета сайта в «Фотошопе» для чайников, даже неопытный автор нарисует неплохой макет.

5 этапов создания макета сайта

Вот что необходимо поэтапно сделать при разработке макета сайта:

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

2. Продумать структуру сайта.

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

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

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

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

Создание макета сайта в «Ворде»

Word — это программа для создания и обработки бумажных документов. Там задаются определенный размер страниц, шрифты, общее оформление. Но дело в том, что далеко не у всех пользователей (которые захотят просмотреть сайт) все эти параметры будут отображаться корректно. Word заточен под работу с фиксированным документом, и код веб-страницы имеет нестандартный бумажный стиль. Может оказаться, что отображение, которого вы ожидали, будет нормальным лишь в Internet Explorer (потому что это тоже программа от Microsoft), а в других браузерах все получится искаженным.

Как создать макет сайта в «Ворде»:

1. Откройте программу Word.

2. На странице наберите слово «Homepage» («Домашняя страница»).

3. Кликните на «Файл» (File) ® «Сохранить как веб-страницу» (Save as Webpage). Если у вас установлен Office 2007, то путь такой: кнопка «Офис» (Office) ® «Сохранить как» (Save As) ® «Другие форматы» (Other Formats).

4. Страницу сохраняйте как html. В Office 2007 по-другому: зайти в меню «Сохранить как» (Save as type) и там тип файла установить «Веб-страница» (Web Page).

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

6. Чтобы каждый раз Word запоминал внесенные на веб-страницу изменения, чаще нажимайте на «Сохранить».

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

8. Под текстом напишите «Link to homepage» («Ссылка на домашнюю страницу»).

9. Выделите сам текст.

10. Нажмите «Вставка» (Insert) ® «Гиперссылка» (Hyperlink). Это действие одинаково для всех офисных пакетов.

11. Найдите файл html.

12. Теперь выберите его и кликните «Ок». Таким образом создалась гиперссылка. Теперь, когда вы кликнете по ней в браузере, она перебросит вас на другую страницу сайта.

13. Можно разместить у себя гиперссылку на сторонний сайт. Откройте диалоговое окно «Вставить ссылку» (Insert Hyperlink) и там в поле «Адрес» (Address) вбейте адрес веб-сайта.

14. Повторяйте эти действия до тех пор, пока не разместите на сайте все, что вам нужно.

Пошаговая инструкция по созданию макета сайта в «Фотошопе»

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

Шаг 1. Подготовим Mockup

Создание макета сайта в «Фотошопе» начинается с формирования эскиза, по которому примерно понятны внешний вид сайта и его возможности.

Шаг 2. Создаем новый документ

Пусть вы решили создать макет на 960 пикселей. Тогда формируете документ размером 1200 х 1500 пикселей (разрешение — 72 пикселя).

Таким образом ширина макета сайта — 960 пикселей. Эту область выделяете и намечаете направляющие. С помощью Ctrl + A выделите всю страницу.

Перейдите в меню «Выделение» — «Трансформировать выделенную область» (Select ® Transform Selection). Укажите рабочую область макета: вверху экрана в свойствах ширину выставьте 960 пикселей.

Направляющие располагают ровно по границам выделения.

Между краями рабочей области и области, выделенной под контент, необходимо сделать отступ. Опять выделите всю страницу, зайдите в «Выделение» — Трансформировать выделенную область» (Select ® Transform Selection). Затем установите ширину выделения 920 пикселей. Таким образом ширина макета уменьшится на 40 пикселей (по 20 слева и справа).

После нового выделения еще раз установите направляющие.

Шаг 3. Создаем шапку

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

Используя стиль слоя «Наложение градиента» (Gradient Overlay), добавьте заливку в виде двухцветного градиента.

Вид у шапки получится вот такой:

Следующий шаг — добавление подсветки. Для создания нового слоя нажмите Ctrl + Alt + Shift + N. Теперь воспользуйтесь мягкой кистью (600 пикселей). Кликните ею (цветом #19535a) один раз в середине шапки, в верхней ее части.

Создайте на шапке выделение на 100 пикселей.

Кликните Delete, и выделенная часть будет удалена.

Слой, в который добавили подсветку, сожмите по вертикали (клавишами Ctrl + T).

Это световое пятно необходимо разместить по центру: активизируйте слои, в которых находится шапка сайта и подсветка, а затем используйте «Перемещение» (Move Tool) (V). Там есть панель свойств (в верхней части), среди которых нужно выбрать «Выравнивание центров по горизонтали».

Снова сделайте новый слой (кнопками Shift + Ctrl + N) и, используя инструмент «Карандаш» (Pencil Tool), поставьте на этом слое точку (цвет #01bfd2, размер — 1 пиксель).

Теперь с помощью градиентной маски нужно растушевать этот слой с боков. Это делается с помощью инструмента «Градиент» (Gradient Tool). Получится так:

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

Шаг 4. Создаем узор

На данном этапе необходимо пририсовать к шапке узор. Поставьте «Карандашом» (на 2 пикселя) две точки и образуйте какую-либо конфигурацию функциями («Редактирование» — «Определить узор») (Edit > Define Pattern). Видимость фонового слоя предварительно нужно отключить, нажав на иконку «глаз» (около фонового слоя).

Создаем новый слой (Shift + Ctrl + N) и помещаем его под слой с подсветкой. Теперь область, где вы хотите разместить узор, выделяете и жмете «ОК» в окне «Выполнить заливку» (Fill) (Shift + F5).

Вот как выглядит шапка уже с текстурой:

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

Шаг 5. Накладываем логотип

Мягкой кистью нарисуйте пятно (цвет #19535a), напишите текст. К слою с логотипом примените стиль слоя «Тень» (Drop Shadow).

Шаг 6. Добавляем навигацию

Напишите текст для применения в навигации. Кнопка рисуется инструментом «Прямоугольная область выделения» (Rectangular Marquee Tool). Для заливки выделения цвет выберите на свое усмотрение. Параметр заливки установите близким к нулю. Для слоя, в котором сформирована кнопка, употребите стиль «Наложение градиента» (Gradient Overlay).

Шаг 7. Формируем слайдер под контент

Сформируйте новое выделение размером 580 х 295 пикселей. Для заливки подойдет любой серый оттенок.

Выставьте изображение с предварительно сформированным слоем.

Дальше нужно наложить эффект. Новый слой (Shift + Ctrl + N) (часто повторяющееся действие при создании макета сайта), потом выбираете «Кисть» (Brush Tool) (диаметром 400 пикселей). Затем через палитру «Кисть» (F5) проставьте значения, как в скриншоте:

Теперь нарисуйте пятно черным цветом (#000000). Края растушуйте фильтром «Размытие по Гауссу» (Gaussian Blur).

Нижнюю часть тени удалите (Delete) (для этого ее сначала надо выделить). Слайдер нужно поместить под слой с тенью.

Сожмите слой с тенью за средний маркер (Ctrl + T), а после снова его отцентруйте. Для этого сначала выделите одновременно оба слоя, а затем кликните «Выравнивание центров по горизонтали» (Align Horizontal Centers) в панели свойств.

Теперь остается скопировать слой с тенью (Ctrl + J) и поставить его в нижнюю часть слайдера.

Кнопки для слайдера создают инструментом «Прямоугольная область выделения» (Rectangular Marqee Tool). Заливку сделайте черной (#000000).

Показатель непрозрачности слоя с кнопками установите равным 50 %.

На кнопки слайдера поместите стрелки. Внизу слайдера сделайте полоску с черной заливкой (цвет #000000). Уровень непрозрачности слоя с полосой — 50 %. На этой полосе напишите, что вам нужно.

Шаг 8. Пишем текст приветствия

Просто напишите приветственный текст.

 Шаг 9. Завершаем детали шапки сайта

Используя инструмент «Кисть» (Brush Tool), добавьте еще тень (не слишком явную).

Промежуток между тенью и заголовком — 1 пиксель. Поместите еще один слой (Shift + Ctrl + N) с градиентом под слоем с шапкой.

Шаг 10. Делаем кнопки для слайдера

Необходимо создать кнопки для смены слайдов.

Наложите на какую-нибудь из кнопок стиль «Внутренняя тень» (Inner Shadow), а потом копируйте объект и вставляйте, куда посчитаете нужным (комбинация Ctrl + J).

Шаг 12. Вставляем разделитель для контента

На данном этапе создания макета сайта воспользуйтесь инструментом «Карандаш» (Pencil Tool). Проведите им линию (цвет светло-серый, (#aaaaaa), ширина — 1 пиксель).

Примените к слою с линией маску и наложите градиент (чтобы по краям сгладить переходы).

Шаг 13. Создаем область под контент

Это будут три колонки с одинаковыми отступами по 25 пикселей между ними.

Помните про направляющие (по бокам). Внесите в колонки список услуг, можно разнообразить внешний вид с помощью иконок.

Кнопка «Read More» делается инструментом «Прямоугольник со скругленными углами» (Rounded Rectangle Tool) (выбрать режим слой-фигуры).

Остается к слою, в котором расположена кнопка, применить стили «Наложение градиента» (Gradient Overlay) и «Обводка» (Stroke).

Слой с кнопкой повторяйте нужное количество раз (Ctrl + J).

В нижней части каждой колонки, предназначенной для контента, сформируйте прямоугольники серого цвета (размером по 3 пикселя) и примените к ним стиль «Обводка» (Stroke).

Теперь в эти прямоугольники вставьте изображения:

Вышеописанным способом сделайте тень и вставьте ее под слой с фото. Не забудьте добавить описание проекта. В одной из колонок разместите иконку Twitter (и напишите сообщение об этом).

Добавьте кнопку More Tweets и примените к ней стили слоя.

Напишите где нужно текст.

Шаг 14. Делаем футер (подвал)

Чтобы создать футер в макете сайта, необходимо внизу страницы сделать выделение и залить его серым.

К этому слою примените стиль «Наложение цвета» (Color Overlay).

Останется добавить навигацию и текст.

В итоге вы создали примерно вот такой макет сайта:

Сервисы для создания макета сайта

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

• Mockingbird. Достаточно простой конструктор, с помощью которого можно создать и собрать воедино блоки будущего сайта (либо приложения), провести предпросмотр.

• Pencil. Расширение, специально сделанное для Mozilla Firefox.

• Mockflow. Хороший инструмент для рисования прототипов. Интегрируется с целым рядом Wireframe-прототипов: Twitter Bootstrap, Facebook App, Mobile Web, Drupal, Joomla!, WordPress и проч.

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

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

• Hot Gloo. Сервис для создания макета сайта онлайн. Есть trial-версия для бесплатного использования приложения. Программа позволяет вставлять, удалять, менять местами, объединять, масштабировать блоки будущей страницы, задавать им имена. Все комментарии и пожелания по процессу разработки вы можете передавать заказчикам или коллегам.

  Читайте также!

  «Макет сайта: будущий фундамент успешного продвижения» Подробнее

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

• Cacoo. Неплохая онлайн-рисовалка для построения всевозможных диаграмм (и сетевых наподобие карты сайта).

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

• Lovely Charts. Специальное приложение, заточенное под создание разнообразных профессиональных диаграмм. А именно: карт сайтов, каркасов, блок-схем, карт процессов, организационных структур и т. д.

• Mockup Builder. Еще один инструмент для создания макетов сайтов и передачи заказчикам предварительных схем.

• LucidChart. Бесплатный онлайн-сервис, с помощью которого можно рисовать всевозможные диаграммы (идей, сетевые, UML, блок-схемы, каркасы, проекты интерфейса пользователя и много других).

Как сделать макет сайта в «Фигме»

Посмотреть, как создать макет сайта в Figma, можно здесь:

Советы по выбору фрилансера для разработки макета сайта

1. Анализ рынка.

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

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

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

   Вот что вам следует выяснить:

   • Сориентироваться по поводу предполагаемой стоимости проекта.

   • Сформулировать список требований к исполнителю (или группе исполнителей).

   • Понять, кого вы хотите нанять — супераса, специалиста со средними навыками либо вовсе начинающего. Это повлияет на стратегию вашего будущего сотрудничества.

2. Техническое задание (ТЗ).

   Техническим заданием называют список требований, которые специалист должен выполнить по заказу. Если речь идет о создании макета сайта, то в техническое задание необходимо включить:

   • Требования касательно дизайнерского оформления.

   • Требования касательно интеграции с мобильными устройствами.

   • Перечень требований по верстке.

   • Перечень функциональных возможностей сайта.

   • Прочие требования.

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

   Нужно давать точные указания. К примеру: «В шапке разместить слайдер, в нем три баннера, под баннерами 10 акционных товаров (для каждого прописать цену)». Это объективные требования, и заказчику нетрудно проверить, действительно ли дизайнер отразил все пожелания в макете.

   Фрилансер будет создавать макет сайта в соответствии с ТЗ. И вы обязаны принять работу, если все требования соблюдены.

   Читайте также!

   «SEO-оптимизация интернет-сайта, или Как покорить ТОП» Подробнее

   Если хотите в результате получить сайт, о котором вы мечтали, составляйте техническое задание максимально подробно. Чтобы исполнитель точнее отобразил нужный вам стиль, приложите к ТЗ образцы сайтов, дизайн которых вам нравится (и напишите, почему именно).

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

3. Какому именно фрилансеру поручить создание макета сайта.

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

   Всех фрилансеров можно условно разделить на три группы:

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

   • Специалисты среднего уровня. Это люди с опытом работы 2-3 года. Они хорошо справятся с выполнением типовых, простых или средней сложности задач. К примеру, если нужен сайт с использованием популярной CMS с минимальным набором функциональных возможностей.

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

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

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

4. Где искать и как выбирать фрилансера.

   

   Искать исполнителя для создания макета сайта можно по-разному:

   • По сарафанному радио (поспрашивать у друзей).

   • На специальных биржах для фрилансеров (русскоязычных ресурсов подобного плана насчитывается уже больше ста). Тут больше тусуются новички или специалисты среднего уровня.

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

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

   • Можно выложить свое задание на каком-либо специализированном сервисе типа kadrof.ru/work. Объявление со своим проектом можно добавить сюда бесплатно, и его увидит не одна сотня специалистов.

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

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

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

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

   • Зайдите в блоги, которые ведут специалисты, посмотрите, что они там пишут. Хорошие профессионалы говорят о своей деятельности увлеченно, интересно, с большим энтузиазмом. Большой плюс — наличие у человека профильного канала на YouTube.

5. Ведение переговоров.

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

   Посмотрите, как люди вам отвечают. Хороший признак — проявление интереса к заданию, уточняющие вопросы. А если вам ответили коротко типа «1500 рублей, три дня» — значит, фрилансер загружен работой или ваш проект не показался ему привлекательным.

   Далее, если проект у вас небольшой, то после такой переписки уже можно определиться с исполнителем. Но если сотрудничество предполагается довольно длительное, то лучше дополнительно пообщаться с кандидатами через скайп (примерно минут по 15–20). Это поможет вам лучше понять, насколько каждый из подобранных людей профессионален и адекватен.

6. Вопрос предоплаты.

   Обычно фрилансеры берут предоплату, чтобы подстраховаться и не оказаться в ситуации, когда макет сайта создан, а заказчик передумал и исчез из поля зрения. Если проект небольшой, то предоплата может составлять 30–50 % от его стоимости, а если объемный, то 10 %.

   Читайте также!

   «Внешняя оптимизация сайта: этапы, сервисы, помощь» Подробнее

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

7. Налаживание рабочего взаимодействия.

   Если проект небольшой, то просто дайте задание, оговорите сроки и ждите.

   Если работы много, то ее следует выполнять поэтапно (с согласованием сроков и объемов по каждому этапу). Нормальный ритм — каждые 2-3 дня выходить на связь с исполнителем, чтобы контролировать процесс, видеть, что уже сделано, и давать оценку результатам. Сразу пишите, если видите, что работа выполнена не так, как вы ожидали, или не в соответствии с ТЗ. Иначе потом переделка займет больше времени и сил.

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

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

   

8. Несколько рекомендаций по работе с фрилансерами.

   • Не исчезайте, отвечайте на письма максимум в течение суток. Иначе фрилансер приостановит работу над вашим проектом и приступит к другому. А вам потом придется дольше ждать результатов.

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

   • Будьте приятны в общении: фрилансеры обращают на это внимание и ценят. Вам ответят взаимностью, не откажут, если нужно сделать работу срочно, предложат более низкие расценки и т. п.

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

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

Распространенные ошибки в создании макета сайта

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

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

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

• Следите, чтобы все элементы страницы не выползали за сетку. Даже выступ на пару пикселей приведет к тому, что объект при верстке будет попросту обрезан.

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

• Укомплектуйте файлы с данными. В одном архиве соберите шрифты, в другом — картинки. Если используете шрифты с Google Fonts, то просто дайте ссылки на них.

Скачайте полезный документ по теме:

Чек-лист: Как добиваться своих целей в переговорах с клиентами

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

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

Автор статьи

Дмитрий Свистунов

Руководитель SEO-отдела и разработки

Статья опубликована: 29.03.2021

Последние статьи этого автора:

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

Забрать гарантированный подарок

Полезные
материалы
для руководителей

Скачать 3,2 MB