5 советов, которые сделают из вас хорошего веб-дизайнера
Рекомендации, соблюдая которые можно преуспеть в веб-дизайне, даже если вы далеки от этой сферы
21 век – век компьютерных технологий. Почти вся наша жизнь переместилась в интернет-пространство, и все, что нас окружает, – бесчисленное количество сайтов и приложений. Идет время, и их облик становится все лучше и лучше, наполняясь интересным содержанием и привлекательным визуалом. Но все это вы можете сделать сами, даже не имея глубоких познаний в сфере веб-дизайна! Если это кажется вам чем-то далеким от реальности, вспомните слова легендарного барабанщика и фронтмена американской рок-группы «Foo Fighters» Дейва Грола:
«Я никогда не брал уроки игры на барабанах. Я никогда не брал уроки игры на гитаре. Если вы действительно увлечены чем-то, настроены и сосредоточены, вы сможете добиться всего в этой жизни».
Принципы хорошего дизайна может выучить и применить на практике почти каждый. Поэтому мы подготовили для вас руководство с полезными советами по веб-дизайну, которые вы сможете применить в повседневной жизни (и произвести впечатление на ваших друзей).
Совет 1. Используйте контрастные цвета
Фон и цвет шрифта должны достаточно отличаться друг от друга, чтобы текст был разборчивым и от его чтения не уставали глаза. Самый распространенный удачный вариант – черный текст на белом фоне. Избегайте сочетания светло-серого, желтого и зеленого цветов. Запомните: если вам приходится щуриться, чтобы прочитать текст, значит, вы что-то сделали не так.
Совет 2. Вместо черного цвета выбирайте «почти черный»
Трюк, о котором знают далеко не все. Если у вас есть выбор, вместо чистого черного попробуйте использовать цвет с кодом #333333 (HEX) или (51,51,51 RGB) для вашего текста. Угольный черный цвет более резкий для наших глаз, поэтому они могут быстро уставать, что затруднит фокусировку на буквах.
Совет 3. В первую очередь размещайте важную информацию
Размещайте наиболее важную информацию в самом начале – так вы четко определите главное предназначение вашего сайта или приложения. Помните: контент, имеющий важное значение, должен быть виден без масштабирования, прокрутки или перехода по ссылке внутри сайта.
Рассмотрим удачную визуальную организацию контента на реальных примерах.
******* (слева). Когда впервые заходишь в приложение, сразу становится понятным, для чего оно, собственно, существует. В приложении сделан четкий акцент на фото и видео, размещаемых пользователями.
Pinterest (справа). За рубежом сайт пользуется большой популярностью. Если вам необходимо срочно найти воплощение какой-то идеи или просто вдохновиться красивыми картинками – добро пожаловать на Pinterest. Вверху на сайте расположена поисковая строка, а ниже представлена сетка из красивых фотографий – результатов вашего поиска. Ведь главная функция сайта и одноименного приложения – искать картинки и рассматривать их.
Рассмотрим еще два примера
Spotify (ниже слева). Это приложение для прослушивания музыки, можно сказать, альтернатива Apple Music и Яндекс.Музыке. Основная цель приложения ясна – именно поэтому, выбрав трек в приложении, мы сразу видим обложку альбома и название песни. Несмотря на то что управление треком – функция второстепенная, Spotify придает ей большое значение, тут же размещая большие кнопки воспроизведения и паузы.
******** (внизу справа). Визуальная организация содержимого очень похожа на *******. В этой социальной сети контент вашего друга размещается в вашей новостной ленте по центру. Так что изменения в жизни друзей вы вряд ли пропустите.
Совет 4. Не пренебрегайте выравниванием
Если вы смотрите на свой сайт или приложение и чувствуете, что что-то не то, первым делом убедитесь, что ваш контент находится в визуальной гармонии друг с другом: поля ровные, между фотографиями и текстом нет больших пробелов и т. п. Вы можете заметить разницу, взглянув на скрин одного и того же сайта, но с разным оформлением.
Чтобы лучше понять, что мы имеем в виду, рассмотрим следующие примеры с сайта Medium.com.
На скрине слева содержимое веб-страницы размещено без выравнивания. А справа дизайнер выровнял основные блоки контента по левому краю. Думаем, разница очевидна.
На нижней картинке слева содержимое сайта размещено без выравнивания, а справа – с выравниванием по левому краю.
Таким образом, всего лишь выравнивая контент, вы сможете сделать ваш веб-сайт или приложение в 10 раз лучше и приятнее для глаз.
Совет 5. Соблюдайте интервалы
Хороший размер текста по сравнению с плохим размером текста:
В конце концов мы создаем сайты и приложения не для муравьев. Комфортный по размеру шрифт в сочетании с небольшим межстрочным интервалом значительно облегчит чтение и усвоение текста.
На картинках ниже вы можете увидеть наглядные примеры текстов с оптимальным размером букв и недостаточно большим. Также мы предлагаем взглянуть вам на то, как смотрится текст с нормальным межстрочным интервалом и слишком маленьким.
Хороший интервал или неправильный размер интервала
Совет 6. Используйте настройки представления содержимого в результатах поиска
Так пользователи поиска взаимодействуют с контентом в выдаче (тепловизор кликов)
Если для вас важно, в каком варианте представляется контент по поисковому запросу внутри сайта или приложения, сделайте контент в виде ранжированного списка.
Если порядок не столь важен, достаточно выставить такие настройки, при которых контент по поисковому запросу будет показываться в виде сетки (как на сайтах Pinterest или Aliexpress).
Совет 7. Сперва разработайте дизайн в черно-белом варианте
Проектирование в режиме черно-белых цветов позволит сосредоточиться на решении и разработке основных функций вашего приложения. Цвет, как известно, вызывает сильные эмоциональные реакции и часто нарушает нашу способность сконцентрироваться на главных моментах разработки дизайна сайта или приложения.
Совет 8. Сделайте дизайн удобным
Возможно, вы никогда об этом не задумывались, но во время использования приложения или сайта могут напрягаться наши руки. Наверняка вы не раз отмечали про себя, заходя на какую-либо веб-страницу, что вам крайне неудобно дотянуться до содержимого в левом верхнем углу. И дело вовсе не в размере телефона, а в размещении контента. Чтобы ваш сайт или приложение были более эффективны и удобны, размещайте ключевые кнопки и кнопки навигации в нижней трети экрана.
Изображение: Адаптивная навигация Люка Вроблевского: оптимизация для сенсорных устройств
Чтобы лучше разобраться в этой проблеме, рассмотрите рисунок из статьи Люка Вроблевски «Адаптивный веб-дизайн». На нем автор изобразил области экрана телефона, которые легче всего достать и использовать (по крайней мере, для правшей). В идеале в приложениях должна быть функция переключения с правой доминантной руки на левую и наоборот.
Совет 9. Используйте цветовые палитры
Манипуляции с цветом – это нечто вроде темной магии. Вы можете постоянно экспериментировать, пробуя различные сочетания цветов друг с другом. Чтобы не тратить много времени на этот процесс и посмотреть, как те или иные цвета будут смотреться рядом, используйте специальные сайты. Например, на интернет-порталах Dribbble, Coolors и Color Claim вы найдете большое количество готовых уникальных цветовых комбинаций.
Совет 10. Пользуйтесь советами Apple и Google OS
Различные скриншоты из Google Material Design и Apple Human Interface Guidelines
Apple и Google создали замечательные справочники для тех, кто разрабатывает программное обеспечение на платформах Android или iOS.
Например, у Google есть веб-сайт «Material», на котором представлено множество рекомендаций, источников вдохновения, палитр цветов, значков и иных компонентов, которые помогут начать разработку вашего приложения в короткие сроки.
Помните: веб-дизайн требует постоянной практики. Чтобы набить руку, используя все эти дизайнерские штучки, понадобятся время, трудолюбие и терпение. Но будьте уверены: скоро вы обнаружите, что представленные выше советы действительно работают!