7 ошибок при написании CSS кода

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

    Комментарии в CSS

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

    Чересчур сложные селекторы

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

    Дублирование CSS инструкций

    А не поставить ли мне для верности еще пару раз margin: 0; в разных обращениях к селектору? Нет, нет и еще раз нет. Не стоит лишний раз нагружать код. Контрольный выстрел здесь совершенно неуместен, особенно если вы понимаете, в какой последовательности исполняется код.

    Ох, уж эти классы

    Тоже любите открыть код другого разработчика и увидеть там классы с названиями «а», «zf», «text1»? Как видите, сразу понятно, кому вы задаете стили. Нет, не понятно? Тогда не делайте так. Безусловно, и HTML, и CSS стерпят такое, но нечитабельный код выдаст в вас неопытного веб-разработчика. Давайте классам и идентификаторам понятные и осмысленные имена.

    Много классов

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

    Работа на чистом CSS

    Это не совсем ошибка, однако в настоящее время активного использования препроцессоров написание кода на чистом CSS не совсем оправданно. Что приятнее: написать 10 строчек кода или 100 с одинаковым результатом? Думаю, ответ очевиден. Использование таких препроцессоров как SASS и LESS существенно ускоряют разработку. А время – очень дорогой ресурс.

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

    Bootstrap – полезный инструмент разработчика

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

    Что же такое bootstrap?

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

    Сейчас практически у каждого в кармане есть смартфон. А цифры по популярности использования настольных ПК и мобильных устройств разнятся незначительно. Поэтому создание адаптивной кроссплатформенной версии сайта или приложения является приоритетной задачей любого разработчика. Неудивительно, что CSS-фреймворки, пользуются все большей популярностью. Сейчас в мире наиболее активно используются 2 библиотеки – Bootstrap и Foundation. Вторая в основном используется в западных странах. О ней мы поговорим позже. Официальный сайт getbootstrap.com

    Bootstrap – представляет собой CSS фреймворк с открытым исходным кодом для легкого и быстрого создания отзывчивых компонентов веб-сайтов и веб-приложений. В основе лежит двенадцатиколоночная система сеток. Она снискала огромную популярность сразу после появления в 2012 году.

    У истоков разработки фреймворка стоит знаменитая компания Twitter, которая начала развивать проект для внутренних нужд. А 19 августа 2011 года именно под тем названием, которое нам известно сейчас, и появился первый Bootstrap. Сейчас последней является версия с номером 4, которая появилась на свет 18 января 2018 года.

    Что же особенного в Bootstrap?

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

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

    Сетка

    Bootstrap grid
    Сетка

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

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

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

    Создаем неоморфизм с помощью приложения

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

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

    Неоморфизм точка ио

    Проект, который так и называется Neumorphism.io был создан совсем недавно одним энтузиастом. Теперь этот онлайн ресурс пользуется популярностью. С его помощью можно создать различные эффекты неоморфизма, а затем с легкостью скопировать себе полученный код. Очень удобно.

    Неоморфизм
    Пример работы сервиса neumorphism.io

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

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

    Неоморфизм
    Пример работы сервиса neumorphism.io

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

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

    10 ошибок начинающего веб-дизайнера

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

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

    Использование веб-дизайнером большого количества визуальных эффектов

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

    Применение веб-дизайнером неконтрастных элементов

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

    Неровные элементы

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

    Большое количество границ

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

    Неоправданная любовь веб-дизайнера к теням

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

    Несоблюдение веб-дизайнером иерархии элементов

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

    Не переусердствуйте с вотермарками

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

    Нечитаемые шрифты

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

    Плохо подобранные цвета

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

    Тесное расположение элементов

    Все чаще многие веб-дизайнеры отходят от практики использования большого количества элементов на странице. Понятно, что когда вы создаете веб-сайт, хочется наполнить его как можно большим количеством информации, но здесь должен действовать принцип презентации – самое основное и наглядное. Оставьте побольше места под свободное пространство, не «слепляйте» элементы.

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

    Делаем прототип мебельного магазина в Adobe XD

    Сегодня мы решили показать один из наиболее популярных и любимых многими веб-разработчиками инструмент, который называется Adobe XD (ссылочка на домашнюю страницу). Программа совершенно бесплатная и удивительно мощная. Она специально создавалась для дизайнеров и разработчиков, поскольку ее функционал предполагает отрисовку не только прототипов, но и веб-дизайна. При этом конечный результат получается действительно живым.

    Программа позволяет создать веб-дизайн с реальной анимацией. Если вы до сих пор делаете дизайн в Adobe Photoshop, то эта серия видео точно заставит вас изменить свое мнение насчет выбора инструментов.

    Сегодня мы отрисуем прототип стартовой страницы будущего мебельного магазина. В дальнейшем команда нашей веб студии Hashweb покажем, как в Adobe XD создать полноценный веб-дизайн.

    В прошлой статье мы говорили о семантическом ядре

    Что такое семантическое ядро и как его собрать?

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

    Что такое семантическое ядро

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

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

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

    Как собрать семантическое ядро

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

    Из бесплатных и наиболее популярных на сегодняшний день, по сути, остался только Yandex Wordstat. Он позволяет проанализировать поисковые запросы в разрезе нескольких характеристик (таких, как время или регион). Это безусловно очень удобно. При подборе ключевых слов стоит учитывать специфику вашего проекта, географию работы, целевую аудиторию.

    семантическое ядро и yandex wordstat
    Yandex Wordstat

    Инструменты сбора семантического ядра

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

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

    Во второй таблице содержатся похожие по смыслу ключевые фразы, но не содержащие наших ключевых слов. При выборе любого из предлагаемых системой запросов стартовым становится он, и результаты отображаются относительно него. Для удобного сохранения результатов в Excel можно воспользоваться простыми плагинами для браузеров. Для Chrome это Yandex Wordstat Assistant или Yandex Wordstat Helper. При сборе большого семантического ядра добавлять фразы руками очень утомительно.

    wordstat-assistant
    Yandex Wordstat Assistant в браузере Chrome

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

    О том, как же конкретно составить свое семантическое ядро, мы поговорим в будущей статье, поскольку эта тема не столько сложная, сколько объемная. При анализе важно будет запастись терпением. Эта работа может отнять большое количество времени. Особенно, если сфера вашей деятельности широка. Однако эту работу выполнить просто необходимо, если вы задумываетесь о будущем сайта. Зная свое семантическое ядро, вы сможете составить оптимальную структуру будущего сайта, подобрать визуальные материалы.

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

    Какие элементы портят веб-дизайн?

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

    web design bad practice1
    Макет веб-дизайна для демонстрации

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

    Большое использование теней в вашем веб-дизайне

    web design bad practice2
    Неоправданное использование теней

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

    Использование границ в веб-дизайне

    web design bad practice3
    Использование границ в веб-дизайне

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

    Веб-дизайн с неподходящими шрифтами

    web design bad practice4
    Выбор неподходящих шрифтов

    Часто видели на сайтах текст, к которому приходится приглядываться, стараясь разобрать хоть что-то? Оказывается, автору просто понравился шрифт, а пользователи теперь мучаются, пытаясь разобрать это. Да, несомненно в веб-дизайне существует прием, когда автор использует необычный шрифт для акцента на элементе. Но в этом случае общая картина выглядит гармонично. Использование же плохого шрифта только из-за того, что она вам понравился — неоправданное решение. Если пользователю будет неудобно пользоваться вашим ресурсом, то он попросту покинет его. Будьте внимательны при выборе шрифтов для веб-дизайна

    Веб-дизайн с плохо проработанным контрастом

    web design bad practice5
    Плохой контраст

    О, это действительно ужасно. Многим приходилось видеть, как автор в погоне за уникальностью задаёт тексту и другим различным элементам слабоконтрастные оттенки. Если дело касается незначительных изображений, то это ещё терпимо. Пользователь попросту пролистает картинку и все. Но если речь заходит о тексте, то здесь могут начаться проблемы. Вы станете читать текст, к которому приходится приглядываться? Конечно, нет. Тут, скорее вопрос, заметите ли вы его вообще. Помните, что одна из важнейших составляющих веб-дизайна — его удобство.

    Веб-дизайн с плохой визуальной иерархией

    web design bad practice7
    Веб-дизайн с плохой визуальной иерархией

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

    Плохой выбор цветов для веб-дизайна

    web design bad practice6
    Ужасный выбор цветов

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

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

    Какой дизайн логотипа популярен в 2020 году?

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

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

    Анимированный дизайн логотипа

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

    animated-logo
    Пример анимированного логотипа (источник этого и дальнейших изображений: https://www.behance.net/)

    Минималистичный дизайн логотипа

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

    minimal-logo
    Пример минималистичного логотипа

    Логотипы с градиентной цветовой схемой

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

    gradient-logo
    Пример градиентного логотипа

    Черно-белые логотипы

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

    black-white-logo
    Пример черно-белого логотипа

    Уникальный шрифт в дизайне логотипа

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

    custom-type-logo
    Пример логотипа с уникальным шрифтом

    Буквенный креатив

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

    creative-letter-logo
    Пример логотипа с буквенным креативом

    Дизайн логотипа с геометрическими фигурами

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

    geometric-logo
    Пример логотипа с геометрическими фигурами

    Простые линии в дизайне логотипа

    Использование незамысловатых «линейных» логотипов в последнее время многим приходится по вкусу. Здесь сочетаются изящество и простота, а итог зависит лишь от креативности дизайнера.

    line-logo
    Пример логотипа из простых линий

    Винтажные логотипы

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

    vintage-logo
    Пример винтажного логотипа

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

    В нашей прошлой статье мы рассказывали о новом тренде в веб-дизайне — неоморфизме

    Неоморфизм – новый тренд в веб-дизайне

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

    Пример неоморфизма (источник: dribbble.com)

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

    Все началось не так давно, когда один из пользователей Dribbble под ником alexplyuto разместил на своей странице пример подобного дизайна. Успех был феноменальным, а сама идея по-настоящему заразила многих веб-дизайнеров. К настоящему моменту идея неоморфизма настолько распространилась, что ее сегодня называют главным трендом и современным подходом.

    Неоморфизм
    Дизайн, созданный пользователем alexplyuto на dribbble.com

    В чем особенности неоморфизма?

    Неоморфизм
    Пример неоморфизма (источник: dribbble.com)

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

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

    Неоморфизм
    Сравнение материальных и неоморфных карточек (источник: google.com)

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

    Давайте попробуем сделать что-нибудь несложное для примера

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    	<link rel="stylesheet" href="style.css">
    	<title>Форма с неоморфизмом</title>
    </head>
    <body>
    	<ul>
    		<li>
    			<label>
    				<input type="checkbox">
    				<div class="icon-box">
    					<i class="fa fa-random" aria-hidden="true"></i>
    				</div>
    			</label>
    		</li>
    		<li>
    			<label>
    				<input type="checkbox">
    				<div class="icon-box">
    					<i class="fa fa-backward" aria-hidden="true"></i>
    				</div>
    			</label>
    		</li>
    		<li>
    			<label>
    				<input type="checkbox">
    				<div class="icon-box icon-box-play">
    					<i class="fa fa-pause" aria-hidden="true"></i>
    				</div>
    			</label>
    		</li>
    		<li>
    			<label>
    				<input type="checkbox">
    				<div class="icon-box">
    					<i class="fa fa-forward" aria-hidden="true"></i>
    				</div>
    			</label>
    		</li>
    		<li>
    			<label>
    				<input type="checkbox">
    				<div class="icon-box">
    					<i class="fa fa-retweet" aria-hidden="true"></i>
    				</div>
    			</label>
    		</li>
    	</ul>
    </body>
    </html>
    *{
    	margin: 0;
    	padding: 0;
    	box-sizing: border-box;
    }
    body{
    	display: -webkit-flex;
    	display: -moz-flex;
    	display: -ms-flex;
    	display: -o-flex;
    	display: flex;
    	justify-content: center;
    	-ms-align-items: center;
    	align-items: center;
    	min-height: 100vh;
    	background: #ececec;
    }
    ul{
    	position: relative;
    	display: -webkit-flex;
    	display: -moz-flex;
    	display: -ms-flex;
    	display: -o-flex;
    	display: flex;
    	justify-content: center;
    	-ms-align-items: center;
    	align-items: center;
    	-webkit-flex-wrap: wrap;
    	-moz-flex-wrap: wrap;
    	-ms-flex-wrap: wrap;
    	-o-flex-wrap: wrap;
    	flex-wrap: wrap;
    	border-radius: 10px;
    	padding: 10px;
    	width: 500px;
    	background: #ececec;
    	box-shadow: -2px -2px 5px rgba(255,255,255,1),
    				3px 3px 5px rgba(0,0,0,.1);
    }
    ul li{
    	position: relative;
    	list-style: none;
    	text-align: center;
    	margin: 10px;
    }
    ul li label{
    	position: relative;
    }
    ul li label input[type="checkbox"]{
    	position: absolute;
    	opacity: 0;
    	cursor: pointer;
    }
    ul li label .icon-box{
    	width: 60px;
    	height: 60px;
    	background: #ececec;
    	display: -webkit-flex;
    	display: -moz-flex;
    	display: -ms-flex;
    	display: -o-flex;
    	display: flex;
    	justify-content: center;
    	-ms-align-items: center;
    	align-items: center;
    	border-radius: 50%;
    	box-shadow: -2px -2px 5px rgba(255,255,255,1),
    				3px 3px 5px rgba(0,0,0,.1);
    }
    ul li label .icon-box-play{
    	width: 75px;
    	height: 75px;
    }
    ul li label .icon-box .fa{
    	font-size: 25px;
    	color: #6a9bd8;
    }
    ul li label .icon-box .fa-pause{
    	font-size: 30px;
    }
    ul li label input[type="checkbox"]:checked ~ .icon-box{
    	box-shadow: inset -2px -2px 5px rgba(255,255,255,1),
    				inset 3px 3px 5px rgba(0,0,0,.1);
    }
    ul li label input[type="checkbox"]:checked ~ .icon-box .fa{
    	transform: scale(.95);
    }

    В итоге мы получим следующее

    Пример неоморфизма
    Пример неоморфизма

    Проблемы неоморфизма

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

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

    Неоморфизм
    Пример неоморфизма (источник: dribbble.com)

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

    Что такое аудит сайта?

    Аудит сайта. Давайте попробуем разобраться, что же это такое, зачем и когда его надо проводить, а, главное, что это даст. Ни для кого не секрет, что многие люди для создания или модернизации своего веб-сайта обращаются к самым различным специалистам. Это может быть крупная веб студия, отдельный фрилансер или вообще «знакомый программист». Но как оценить качество выполненной работы?

    Зачем проводить аудит сайта?

    audit2
    Источник изображения: pexels.com

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

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

    В аудит сайта входят:

    • Технический анализ – проверка валидности кода, общая проверка работоспособности, тестирование скорости загрузки как на ПК, так и на мобильных платформах (читайте нашу статью про Google PageSpeed) и другие;
    • Поисковый анализ – проверка правильности составления семантического ядра, оценка поисковой оптимизации, проверка индексации поисковыми системами и другое;
    • Маркетинговый анализ – оценка качества контента, конкурентный анализ, проверка качества трафика и другое;
    • Анализ удобства для пользователей – так называемое юзабилити, в которое входят проверка логичности и структуры сайта, правильности форм, общего удобства использования на различных платформах и многое другое.

    Когда необходимо проводить аудит сайта?

    audit3
    Источник изображения: pexels.com

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

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

    Что это дает?

    audit4
    Источник изображения: pexels.com

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

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