Инструменты по разработке каркасов все больше и больше становятся неотъемлемой частью разработки дизайна, так как дизайнерам важно понимать, каким образом следует разрабатывать тот или иной концепт. Ввиду этого Лэйза Ришельт (Leisa Reichelt) даже организовала мастерскую, в которой обучают разработке прототипов на HTML и CSS. В нашей сегодняшней статье Анна Дебенхам (Anna Debenham) представит вам то, о чем было сказано на семинаре «Code Fitness».

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

Зачем нужен каркас кода?

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

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

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

Что насчет платформ?

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

Предположения

Есть несколько предположений и «напутствий» относительно ваших каркасов:

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

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

Приступаем

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

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

No related posts.