Веб-каркас - это простое визуальное руководство, показывающее, как будет выглядеть веб-страница. Он предлагает структуру страницы без использования какой-либо графики или текста. Каркас веб-сайта отобразит всю структуру сайта - включая ссылки на страницы.
Веб-каркасы - отличный способ начать работу с дизайном. И хотя можно создавать сложные каркасы с огромным количеством деталей, ваше планирование может начинаться с салфетки и ручки. Ключом к созданию хороших каркасов является отсутствие всех визуальных элементов. Используйте поля и строки для представления изображений и текста.
Что нужно включить в каркас веб-страницы:
- коробки для первичных графических элементов
- размещение заголовков и подзаголовков
- простая структура компоновки
- призывы к действию
- текстовые блоки
Как создать простой веб-каркас
Создайте каркас веб-страниц, используя любой клочок бумаги, который вам удобен. Вот как я это делаю:
- Нарисуйте большой прямоугольник - это может представлять собой всю страницу или только видимую часть. Обычно я начинаю с видимой части, а затем расширяю ее, чтобы включить элементы, которые были бы ниже складки.
- Эскиз макета - это 2-столбцы, 3-столбцы?
- Добавить в поле для графического заголовка. Нарисуйте над столбцами, если вы хотите, чтобы он был одним заголовком над столбцами или просто добавлял его туда, где вы хотите.
- Напишите «Заголовок», где вам нужен заголовок H1.
- Напишите «Sub-Head», где вам нужны H2 и нижние заголовки. Это помогает, если вы сделаете их пропорциональными - h2 меньше h1, h3 меньше, чем h2 и т. Д.
- Добавить в боксы для других изображений
- Добавить в навигацию. Если вы планируете вкладки, просто нарисуйте ящики и напишите «навигация» сверху. Или поместите маркированные списки в столбцы, где вы хотите осуществить навигацию. Не записывайте контент. Просто напишите «навигация» или используйте строку для представления текста.
- Добавьте дополнительные элементы на страницу - определите, что у них есть с текстом, но не используйте фактический текст содержания. Например, если вы хотите, чтобы кнопка вызова к действию находилась в правом нижнем углу, поставьте там шкатулку и назовите ее «призыв к действию». Не пишите «Купить сейчас!» в этом поле.
После того, как вы написали свой простой каркас, и вам не понадобится больше 15 минут, чтобы нарисовать его, покажите его кому-то еще. Спросите их, нет ли чего-то недостающего и для других отзывов. Основываясь на том, что они говорят, вы можете написать другой каркас или сохранить тот, который у вас есть.
Почему бумажные каркасы лучше всего подходят для первых черновиков
Хотя можно создавать каркасы с помощью таких программ, как Visio, для ваших первых сеансов мозгового штурма, вы должны придерживаться бумаги. Бумага не кажется постоянной, и многие люди предполагают, что вы выбросили ее за 5 минут, и поэтому не стесняйтесь давать вам хорошую обратную связь. Но когда вы используете программу для создания фантазийных каркасов с идеальными квадратами и цветами, вы рискуете попасть в саму программу и потратить часы на совершенствование того, что никогда не будет жить.
Бумажные каркасы просты. И если вам это не нравится, вы просто сминаете бумагу, бросаете ее на переработку и захватываете новый лист.
