Создание дизайна веб-страниц: что нужно учитывать

Karina | 29.05.2014

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

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

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

кнопки без изображений;
реалистичные шрифты;
изображения;
размер экрана;
возможность сделать все в CSS.

Кнопки без изображений

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

Реалистичные шрифты

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

Изображения

Скажите «Нет!» нарезке картинок. Любой сайт нуждается лишь в одном изображении – это логотип. Может быть, понадобится добавить встроенные изображения или/и дублирующийся узор. Все, что ранее требовало фрагментирования и компоновки, теперь можно спокойно создать в CSS.

Размер экрана

Поскольку видов экранов сейчас очень много, и все они имеют разные размеры – от 320×480 до 2560×1440, продумайте, как ваш дизайн будет выглядеть на каждом из них. Отличный дизайн – это не просто красивые картинки, работа над созданием сайта требует задуматься над следующим:

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

Учитывайте то, что ваш сайт могут открывать на экранах с разрешением 1024×720, вплоть до 2560×1440, а также то, что пользователь может держать устройство вертикально и горизонтально. Важно: избегайте появления горизонтальной полосы прокрутки.

Можно ли все сделать в CSS?

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