Предыдущий ролик Следующий ролик  

Видео урок: Создание «отзывчивого дизайна»

Основы веб-дизайна

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

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

Эта теория совсем недавно стала применяться для тех сайтов, в которые встроен так называемый "бесконечный скроллинг". Такие технологии в первую очередь должны заставлять нас обращать внимание на юзабилити. Даже если есть такая возможность, должны ли мы ею пользоваться? Согласно принципам качественного дизайна, контент должен быть и доступным, и наглядным. Поэтому если вы по полной используете доступную площадь экрана, не забывайте, что этим можете вывести пользователей из себя. Это приводит меня к мысли о том, что первостепенную важность имеет контент. Несмотря на то что эстетика дизайна, конечно, имеет определенное значение, важнее, чтобы пользователи могли обращаться к нужному им контенту и использовать его.

Работа со множеством контента в рамках разных размеров экрана является настоящим испытанием для дизайна, особенно в ситуациях, когда приходится иметь дело с большим объемом контента на небольшом экране, например, на экране мобильного устройства. В связи с этим очень важно иметь собственную контент-стратегию, а также уделять достаточно времени первоначальным этапам разработки сайтов. Кроме того, следует учитывать, что выбранный вами дизайн не на всех устройствах и не во всех браузерах смотрится одинаково. Во всех браузерах и устройствах используются разные движки отображения контента, что приводит к едва различимой, а иногда и очень хорошо заметной разнице отображения страниц. В некоторых случаях для того чтобы соответствующим образом отобразить страницу, можно прибегнуть к помощи fallback-страховок CSS или Javascript. Таких страховок следует избегать, за исключением, конечно, тех случаев, когда они абсолютно необходимы. Они приносят не слишком большую пользу, зато вносят в проект дополнительную сложность. Невозможно сделать так, чтобы сайт одинаково отображался на всех устройствах и во всех браузерах. А понимание этого - важная составляющая процесса разработки для электронных устройств. Кроме того, разработка для электронных устройств подразумевает, что особое внимание придется уделять цвету и контрастности.

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

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