Как создать сайт для копирайтера
Меня зовут Ира, я копирайтер-фрилансер. Месяц назад я решила сделать себе сайт-визитку: простой, понятный и с портфолио.
Рассказываю, как это было и что получилось.
Шаг 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
