Перейти к содержанию

5 советов, которые сделают из вас хорошего веб-дизайнера


g.d.
 Поделиться

Рекомендуемые сообщения

Рекомендации, соблюдая которые можно преуспеть в веб-дизайне, даже если вы далеки от этой сферы

1580400450_88744.jpg

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

 

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

 

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

 

Совет 1. Используйте контрастные цвета

1580398257_1.jpg

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

 

Совет 2. Вместо черного цвета выбирайте «почти черный»

1580398341_2.png

Трюк, о котором знают далеко не все. Если у вас есть выбор, вместо чистого черного попробуйте использовать цвет с кодом #333333 (HEX) или (51,51,51 RGB) для вашего текста. Угольный черный цвет более резкий для наших глаз, поэтому они могут быстро уставать, что затруднит фокусировку на буквах.

 

Совет 3. В первую очередь размещайте важную информацию

1580398381_3.png

  C сайта: 

 

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

Рассмотрим удачную визуальную организацию контента на реальных примерах.

1580398737_5-665.jpg

 

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

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

 

Рассмотрим еще два примера

 

Spotify (ниже слева). Это приложение для прослушивания музыки, можно сказать, альтернатива Apple Music и Яндекс.Музыке. Основная цель приложения ясна – именно поэтому, выбрав трек в приложении, мы сразу видим обложку альбома и название песни. Несмотря на то что управление треком – функция второстепенная, Spotify придает ей большое значение, тут же размещая большие кнопки воспроизведения и паузы.

Facebook (внизу справа). Визуальная организация содержимого очень похожа на Instagram. В этой социальной сети контент вашего друга размещается в вашей новостной ленте по центру. Так что изменения в жизни друзей вы вряд ли пропустите.

1580398868_5-668.jpg

 

Совет 4. Не пренебрегайте выравниванием

1580399002_5.png

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

Чтобы лучше понять, что мы имеем в виду, рассмотрим следующие примеры с сайта Medium.com.

1580399065_5-667.jpg

 

На скрине слева содержимое веб-страницы размещено без выравнивания. А справа дизайнер выровнял основные блоки контента по левому краю. Думаем, разница очевидна.

На нижней картинке слева содержимое сайта размещено без выравнивания, а справа – с выравниванием по левому краю.

1580399179_5-66995.jpg

 

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

 

Совет 5. Соблюдайте интервалы

1580399250_554478.jpg

Хороший размер текста по сравнению с плохим размером текста:

 

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

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

1580399261_554479.jpg

Хороший интервал или неправильный размер интервала

 

Совет 6. Используйте настройки представления содержимого в результатах поиска

1580399313_10.png

Так пользователи поиска взаимодействуют с контентом в выдаче (тепловизор кликов)

 

Если для вас важно, в каком варианте представляется контент по поисковому запросу внутри сайта или приложения, сделайте контент в виде ранжированного списка.

Если порядок не столь важен, достаточно выставить такие настройки, при которых контент по поисковому запросу будет показываться в виде сетки (как на сайтах Pinterest или Aliexpress).

 

Совет 7. Сперва разработайте дизайн в черно-белом варианте

1580399448_11.png

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

 

Совет 8. Сделайте дизайн удобным

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

1580399431_12.jpg

 Изображение: Адаптивная навигация Люка Вроблевского: оптимизация для сенсорных устройств

 

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

 

Совет 9. Используйте цветовые палитры

1580399612_13.png

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

 

Совет 10. Пользуйтесь советами Apple и Google OS
1580399669_66366888.png1580399622_563365.png1580399643_8888552299.png1580399684_8888888889955.png1580399628_88888899.png

 Различные скриншоты из Google Material Design и Apple Human Interface Guidelines

 

Apple и Google создали замечательные справочники для тех, кто разрабатывает программное обеспечение на платформах Android или iOS.

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

 

Компания «Apple» создала , в котором , что вам нужно знать о том, как создавать приложения для устройств на базе iOS.

 

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

Источник статьи: 

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

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

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

 Поделиться

×
×
  • Создать...