Сделай сам: как создать блог без дизайнерского образования

0
50

Эрик Шерман (Erik Sherman), пишущий о бизнесе и технологиях для The New York Times в своем блоге на Contently рассказывает о том, как можно создать привлекательный блог, не привлекая дизайнеров. Следует лишь придерживаться этих 5 правил.

1. Ознакомьтесь с основными  элементами дизайна

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

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

2. Начните с плана

Все дизайнеры всегда начинают с плана (техзадания). Сделайте список всего того, что вы хотите увидеть в своем блоге. Будут ли у вас отдельные секции для оригинального контента? Будет ли блогролл (интересные ссылки)? Будет ли трансляция вашего твиттер-аккаунта? Далее, берите карандаш с чистым листом и рисуйте, как ваш блог должен отображаться в окне браузера.

Web site idea                                                                                                             Leonid Mamchenkov 

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

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

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

3. Найдите вдохновение

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

Новый репортер.org - пример верстки по рубрикам

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

У Boing Boing более визуальная подача

Не надо просто копировать сайт. Успех приходит к тем, кто находит свой собственный и уникальный дизайн и манеру подачи. Всегда помните поговорку: «Хорошие художники копируют, а великие художники крадут».

4. Учите код

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

На сайте W3 Schools можно поэксперементировать с кодом

Вы должны начать с изучения HTML – основного языка создания веб-страниц. В сети существуют бесконечное количество инструкций и туториалов (руководство к действию) как этот. Далее, вам следует изучить СSS —  Cascading Style Sheets — каскадные таблицы стилей.  От CSS зависит то, как визуально (цвета, выравнивание) будут отображаться разные части вашего блога.

У разных блог-платформ своя специфика. У WordPress есть codex – онлайн-руководство. В разделе уроков есть туториалы для разработчиков. Существуют еще и очень удобные руководства по модификации уже готовых шаблонов WordPress.

Аналогичный ресурс Google по модификации шаблонов Blogger находится по этой ссылке.

5.  Время реализации

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

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

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

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

Перевод и адаптация Новый репортер. org
Оригинал статьи на: thefreelancestrategist.com

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь