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

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

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

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

Это одни из лучших инструментов и ресурсов для веб-дизайнера «сделай сам», которые я приобрел на этом пути. Если вы так же склонны, это для вас!

Конструкторы сайтов и настраиваемые темы

Лично я не большой поклонник конструкторов веб-сайтов — я люблю WordPress, и мне нравится иметь гораздо больший контроль, чем предлагают большинство конструкторов веб-сайтов. Если вам нравится идея перетаскивания, чтобы получить именно тот сайт, который вы хотите, без мучений, взгляните на тему Divi для WordPress. Вы также можете найти огромное количество настраиваемых тем для WordPress.

Как создать дочернюю тему WordPress

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

У каждого дизайнера есть своя любимая тема, а у этого (не)дизайнера, работающего своими руками, любимая тема — GeneratePress. Он может делать почти все, что я себе представляю, надстройки на 100% стоят того и доступны по цене, видеоуроки отвечают на 98% моих вопросов, а разработчик (Том) очень активен и отзывчив на форумах поддержки. Я использовал эту тему в течение 2 лет и очень доволен ею.

Забота о внешности

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

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

Это может показаться непостижимым на данном этапе вашей карьеры дизайнера-самоучки — а может и нет — но придет день, когда вы захотите внести некоторые изменения в CSS, чтобы настроить внешний вид некоторых конкретных элементов. Когда придет время, вы можете погрузиться в учебные пособия, поискать поддержку в своей теме или обратиться к генератору CSS, чтобы создать нужный код. Вы также можете проверить Webflow, редактор перетаскивания, который позволяет вам создавать то, что вы хотите видеть на странице, а затем генерирует код CSS для вас. Однако это платная услуга, которая, как правило, противоречит принципам «сделай сам».

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

Всеми любимый: шрифты

Шрифты — золотое детище веб-дизайна; кажется, что все любят шрифты. Но если вы не знаете, что делаете, шрифты могут вас отпугнуть. Покупка шрифта, его установка, даже модификация… ага. Если вы просто хотите, чтобы ваш сайт выглядел хорошо, вы можете установить Google Fonts и использовать довольно надежную базу данных удобных для Интернета шрифтов. Также легко найти комбинации шрифтов Google, которые хорошо смотрятся вместе с простым поиском в Интернете.

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

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

Инструменты рабочего процесса

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

13 браузерных инструментов, которые должен иметь в своем наборе каждый дизайнер

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

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

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

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

Если ваши палитры цветов вам не подходят, вы можете использовать что-то вроде Pictaculous. Загрузите изображение, которое вам нравится, и оно выдаст цветовую тему, взятую из изображения. Это очень круто!

Это не все

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

Бесплатная электронная книга: 25 обязательных инструментов для веб-дизайнеров

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