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

15+ советов по дизайну для разработчиков, когда вашего дизайнера нет рядом

1
Want create site? Find Free WordPress Themes and plugins.

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

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

Мудро выбирайте настройки

Если вы спешите, найдите тему WordPress с предварительно разработанным макетом и демонстрационными страницами. Используйте визуальные строители какElementor или Beaver Builder,чтобы быстро упорядочить и оформить макет и добавить уже существующие элементы. Таким образом, вы можете создать и запустить работающий сайт за считанные часы. Да, это может выглядеть немного общим, если вы не будете осторожны, но это работает. Попробуйте добавить собственный дизайн и анимацию, чтобы сделать его своим.

Выберите минималистичный дизайн

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

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

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

Не используйте Photoshop или Illustrator, если вы знаете, что у вас это плохо получается

Я активно использую Photoshop более 10 лет и до сих пор едва получил «С» в тесте Upwork Photoshop. Вообразите мое удивление, когда я узнал, что я активно использую только 30% функциональных возможностей Photoshop. То же самое касается ИИ. Я хочу сказать – если вы хорошо разбираетесь в коде и CSS – используйте CSS. Это сэкономит вам много времени.

Используйте приложения и инструменты, которые вам удобны. Это поможет вам проектировать быстрее и эффективнее. Некоторые люди считают Canva действительно простым и интуитивно понятным решением.

Учите Sass 

Sass and Less являются языками расширения CSS. Они добавляют дополнительные удобные функции и функциональность в CSS, такие как переменные, функции, вложение, арифметические операции и миксины. Проверьте их официальные сайты для получения подробной информации и документации.

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

Адаптируйте чужой код под свои нужды

Есть много удивительных людей, которые делятся своим кодом бесплатно. Если вы находитесь во временном затруднении, изменение существующего дизайна может стать ответом на ваши молитвы. Мое место для размещения – это Design Patterns on Codepen. Вы найдете предварительно закодированные кнопки, аккордеоны, слайдеры, макеты и многое другое.

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

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

Остерегайтесь всей силы SVG:

  • Изображения SVG можно создавать и редактировать в любом текстовом редакторе.
  • Изображения SVG можно искать, индексировать, создавать сценарии и сжимать
  • SVG изображения масштабируемы
  • Изображения SVG могут быть напечатаны с высоким качеством в любом разрешении
  • SVG изображения можно масштабировать
  • SVG-графика НЕ ​​теряет никакого качества, если она масштабируется или изменяется
  • SVG – это открытый стандарт
  • SVG-файлы – чистый XML

Используйте библиотеки Javascript и фреймворки

Я искренне надеюсь, что вы не один из тех разработчиков WordPress, все еще использующих исключительно PHP. JavaScript является языком программирования этой эпохи и по причине.

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

Хотите знать, как правильно добавлять библиотеки в WordPress? К счастью, у нас есть кое-что для вас – учебник о том, как поставить JavaScript в очередь в WordPress.

Вот список сторонних библиотек JS, которые уже включены в WordPress. Вы можете использовать их сразу, не ставя в очередь.

  • Backbone.js
  • CodeMirror
  • жнец
  • JQuery
  • jQuery.imageareaselect
  • jQuery.Jcrop
  • jQueryUI
  • swfupload (устарело)
  • ThickBox
  • TinyMCE

Выберите 2 цвета

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

Выберите 2 шрифта

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

Оплатите логотип

Извините, что сломал его, но разработка логотипа – это не то, что вы должны попробовать сделать самостоятельно. Логотип является наиболее важным визуальным элементом любой компании. Это визуальная идентификация вашей компании, и вы бы хотели, чтобы это было сделано правильно. Воздержитесь от использования общих логотипов создателей и платите дизайнеру. Нанять фрилансера, если нужно. Если проблема в деньгах, попробуйте найти студента-дизайнера, который полон свежих идей, но, вероятно, будет брать значительно меньше.

Выберите стоковые фотографии и видео хорошего качества

Ваш клиент не предоставил вам фотографии для сайта? Или, может быть, они сделали, но они были не в фокусе, неровной и просто ужасно, не так ли?

Мы все были там. Самое простое решение – использование качественных стоковых изображений. Есть множество бесплатных и премиальных фондовых библиотек на выбор.

Мой личный фаворит Unsplash для бесплатных стоковых фотографий и Freepik для всех видов ресурсов.

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

Не стесняйтесь искать безупречные акции. Если вы найдете идеальное изображение или видео премиум-класса – заплатите за него.  Это будет того стоить.

Оптимизируйте изображения

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

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

Выстройте четкий CTA

Призыв к действию (CTA) – это ваш способ взаимодействия с пользователем. В некотором смысле, если пользователи нажимают на CTA, они выполняют цель веб-сайта.

Вот почему вы должны убедиться, что кнопки CTA хорошо видны, разборчивы и читаемы. Будьте последовательны со стилем ваших кнопок.

Где поставить CTA? У маркетологов есть целый  научный метод . Это явно зависит от содержания вашего сайта, мой единственный совет, чтобы он выделялся.

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

Анимации классные, когда все сделано правильно

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

Иконки – маленькие игроки с большими ролями

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

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

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

Для дополнительных очков стиля, подумайте о анимации иконок SVG. Лучший способ сделать это – использовать  Snap , библиотеку javascript, созданную для анимации графики SVG. Если по какой-либо причине вы вообще не хотите кодировать, вы можете использовать  приложение SVGator . Это платное приложение с месячной бесплатной пробной версией, и его стоит проверить.

Обращайте внимание на детали:

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

Это не все черное и белое

Избегайте чистого черного цвета # 000 или чистого белого цвета #FFF. Они слишком резкие для глаз. Используйте чуть более мягкие варианты, такие как #EFEFEF для белых и # 181818 вместо черного.

Границы олдскульные

Попробуйте использовать свойство CSS box-shadow вместо границы элемента. Это сделает ваш дизайн более гладким и тонким.

Сплошные границы 1px или 2px могут выглядеть круто и ретро в некоторых проектах. Однако, никогда не используйте пунктирные или пунктирные границы, пожалуйста.

Украсьте свой <час>

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

Конструктор страниц Elementor также имеет отличную функцию для стилизации разделителей.

Квадраты скучные. Не будь квадратным.

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

Разработайте свое меню для гамбургеров

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

Используйте градиенты

Вместо того, чтобы использовать один цветной фон, почему бы не попробовать градиенты? Вы можете легко создавать свои собственные градиенты с помощью редактора градиентов colorzilla  и просто скопировать код CSS на свой сайт WordPress.

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

Градиенты также можно использовать в качестве наложения для фоновой фотографии, значков, кнопок и других элементов дизайна. Это очень аккуратный трюк для создания последовательности. Если вы хотите наложить градиент на фоновое изображение, используйте свойство &: before (SASS), чтобы добавить свой градиент и просто понизьте его непрозрачность до 60 – 70%. Вот как это выглядит:

Подведем итоги

Всегда лучше нанять профессионального дизайнера, но в случае необходимости нам приходится управлять!

Если вы спешите, выбирайте настройки мудро. Установите быструю минималистичную тему и импортируйте для нее демо-контент. Разработайте детали, чтобы ваш дизайн выглядел более профессиональным и менее общим. Используйте свои сильные стороны (код) как можно больше. Всегда выбирайте проверенные цветовые комбинации и высококачественные изображения и стоковые видеозаписи. Не забудьте использовать пакеты иконок того же автора и в том же общем стиле, что и на вашем сайте. Оплатить логотип. Самое главное, не забывайте быть последовательным и тонким с вашим дизайном.

Удачного проектирования кода!

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

Did you find apk for android? You can find new Free Android Games and apps.
Вы можете написать отзыв

Оставить отзыв

VebPro - Интернет-магазин цифровых товаров
Вход / Регистрация временно отключены
Сравнить товары
  • Всего (0)
Сравнить
0