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