Несколько способов мгновенно улучшить вид вашего фронтенд-проекта

1
780
views

Перевод статьи «How to instantly make your front end projects look better».

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

Довольно жутко, правда?

Вот и со мной так было, когда я начинал изучать фронтенд-разработку. Я долго обдумывал функционал сайта, но когда собирал все вместе, результат выглядел ужасно.

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

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

Каковы бы ни были причины, в веб-разработке определенно присутствует некий гало-эффект.

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

Начальная точка

Ниже приведен пример простой HTML-страницы без всяких стилей.

See the Pen Negative Space by Peter (@pg2020) on CodePen.

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

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

Добавьте негативное пространство

Первый совет прост для понимания, но применять его нужно с осторожностью. «Негативное пространство» это пустое пространство между элементами на странице. Если создать его в нужном объеме, оно улучшит вид вашей страницы.

Негативное пространство:

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

Взгляните на CSS-код в примере ниже. С его помощью мы добавляем в наш базовый пример негативное пространство. И вот результат:

See the Pen Font Pairing by Peter (@pg2020) on CodePen.

Обратите внимание:

  • Padding создает пространство внутри элемента.
  • Margin создает пространство между элементами.
  • Высота строки делает текст не таким сбитым.

Но слишком много пустого пространства тоже не хорошо выглядит. Достигнуть нужного баланса не всегда просто.

Создавайте пары шрифтов

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

Дефолтные системные шрифты безопасны и практичны. Они гарантированно будут работать.

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

  • Легкие игривые шрифты говорят о том, что эта страница интересна и доступна.
  • Простые, практичные шрифты создают более деловой вид.
  • Традиционные шрифты делают вид страницы более классическим.

В общем, вы поняли. Но как применить это на практике? Ключевой момент — использование пар шрифтов.

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

Но не следует создавать пары из старых шрифтов.

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

Обратите внимание на сайт fontpair.co. Там можно просмотреть разные варианты пар шрифтов, чтобы увидеть, как они выглядят вместе.

Допустим, вы нашли пару по своему вкусу. Самый быстрый способ использовать эти шрифты в своем проекте — обратиться к Google Fonts.

  • Поищите желаемые шрифты.
  • Добавьте их в свой проект.
  • Включите ссылку в элемент <head> вашего HTML.
  • Сделайте ссылку на шрифты в таблицах стилей.

Ниже приведен пример использования шрифтов на уже известной нам странице.

Внешний вид также можно улучшать, меняя размер шрифтов и выравнивание текста.

See the Pen Colour Scheme by Peter (@pg2020) on CodePen.

Теперь страница выглядит заметно лучше, правда? А ведь сделали только два простых шага.

Подберите подходящую цветовую схему

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

Например:

  • Яркие, насыщенные цвета создают ощущение энергетического подъема.
  • Легкие, приглушенные оттенки вызывают ощущение цельности.
  • Темные, контрастные цвета производят более драматическое впечатление.
  • Цвета бренда создают неповторимую индивидуальность.

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

  • Аналоговые цвета помогают создать впечатление цельности и гармонии.
  • Комплиментарные цвета создают приятный глазу контраст.
  • Триадные цвета обеспечивают одновременно контраст и гармонию.

(Посмотреть примеры можно, например, здесь. — Прим. ред.).

В общем, подбирать цвета следует обдуманно. К счастью, есть много способов это сделать. Например, можно просто загуглить «генератор цветовых схем». Один из моих любимых генераторов — colormind.io. Там и цветовая схема создается, и можно предварительно просмотреть эту схему в шаблоне.

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

See the Pen Structure by Peter (@pg2020) on CodePen.

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

Структурируйте страницу

Не важно, насколько хорошо выглядит ваша страница сейчас: ее вид можно улучшить, если все немного встряхнуть.

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

Четко разграничивая элементы, можно создать логическую структуру и (или) иерархию. Это облегчает восприятие страницы пользователем.

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

Посмотрите, как преобразился наш пример благодаря небольшому структурированию. Контент разделен на элементы <header>, <footer> и <div class=»content»>.

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

See the Pen Images by Peter (@pg2020) on CodePen.

Если хотите узнать больше, изучите следующие темы:

Переписывать придется совсем немного, а эффект будет заметным.

Добавьте изображения и значки

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

В коде, приведенном ниже, к основному контенту добавлена простая картинка. Как видите, она включена в элемент <div class=»content»>, а ее ширина установлена на 100%. Это помогает поддерживать целостность структуры страницы.

Помните, что изображения должны вписываться в общую цветовую гамму.

Для добавления картинок и значков не нужно быть экспертом в CSS или мастером Photoshop. Вам нужен лишь быстрый доступ к высококачественным фотографиям. Например, можно поискать подходящие бесплатные изображения на Unsplash.

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

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

See the Pen Animated by Peter (@pg2020) on CodePen.

Вы можете быстро добавить нужные значки, выбрав их на следующих ресурсах:

Добавьте анимации

Это последний совет. Он относится к разряду «хорошо бы, хотя и не обязательно».

Как знают все, кому довелось пользоваться PowerPoint в 2000-х, анимациями следует пользоваться осторожно.

Слишком много анимированных элементов могут путать и раздражать пользователя.

Но если использовать их с умом, страница может стать более интерактивной и визуально привлекательной.

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

В нашем примере при наведении мыши на изображение ее непрозрачность снижается до 50%.

Еще один вариант — воспользоваться Animate.css. Там есть большое количество готовых анимаций.

В коде, приведенном ниже, добавлены небольшие анимации для кнопок (срабатывают при клике).

See the Pen Animated by Peter (@pg2020) on CodePen.

Помните: в том, что касается анимаций, «лучше меньше, да лучше»!

Итоговый результат

Всю эволюцию страницы можно просмотреть в этом репозитории на GitHub.

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

Вот краткий список шагов:

  1. Добавление негативного пространства.
  2. Выбор парных шрифтов.
  3. Подбор подходящей цветовой схемы.
  4. Структурирование.
  5. Добавление значков и изображений.
  6. Добавление анимаций (опционально).

1 КОММЕНТАРИЙ

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

Please enter your comment!
Please enter your name here