Как создать сайт для копирайтера

Меня зовут Ира, я копирайтер-фрилансер. Месяц назад я решила сделать себе сайт-визитку: простой, понятный и с портфолио.

Рассказываю, как это было и что получилось.

Шаг 1. Сбор данных.

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

Шаг 2. Анализ и черновой макет.

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

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

В итоге выбрала формат одностраничной визитки.

Черновой макет делала в бесплатной версии Тильды: экспериментировала с хедерами, подвалом, сеткой. Опыта веб-верстки у меня нет, поэтому на этот этап я потратила 4 дня.

Шаг 3. Выбор акцентов и черновая верстка.

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

Если текст сопровождает картинку, гифку или видео — это ок. Если сайт состоит только из текста — это провал.

Поэтому я упростила все, что можно и добавила иллюстрации:

1. Выбрала один шрифт Roboto и использовала два начертания — Regular и Bold. Так текст проще и быстрее читается.

2. Блок с контактами и соц.сетями перенесла из подвала в начало: рабочая почта, ссылки на facebook и telegram теперь на виду. Залила серым.

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

4. В хедере оставила имя и профессию. В прехедере — чем занимаюсь и опыт. Выбрала фото.

Расставила акценты:

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

2. Иллюстрации сделала черно-белыми: теперь акцент на словах и подсвеченных заголовках.

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

Этот этап занял 6 вечеров.

Шаг 4. Верстка

Сайт делала в Adobe Muse. Это было долго, некоторые моменты переделывала по 10 раз. Через пару дней сделала мобильную версию.

Результат вот такой:

Полная версия на http://griaznyh.ru/

Вывод

Я работала над сайтом 2 недели: экспериментировала, меняла верстку, адаптировала тексты под веб.

Если подводить итоги, то

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

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

Буду рада обратной связи.

Картинка на обложке Aaron Kemnitzer