Как нарисовать сайт: Пошаговая инструкция, как создать макет сайта самостоятельно. Онлайн или в Photoshop

Содержание

Зачем нужен макет сайта и как его сделать

Макет сайта — это предварительный набросок, который определяет внешний вид сайта и его функционал. Как перед постройкой дома рисуют чертеж, так и перед разработкой сайта сначала нужно визуализировать его в специальной программе.

Эта статья будет полезна для веб-дизайнеров, разработчиков, веб-мастеров и владельцев сайтов — для всех, кто создает дизайны или пользуется ими в своей работе.

Правила создания хорошего макета сайта

Я создала для вас небольшой макет сайта как пример, чтобы показать, каких принципов нужно придерживаться при разработке. Эти принципы помогут успешно продвигать сайт в будущем: от дизайна во многом зависит, долго ли пользователь пробудет на страницах, вернется ли, посоветует ли друзьям. К тому же грамотно разработанный макет делает более удобной дальнейшую работу команды, создающей сайт.

UI/UX дизайн

Аббревиатуры UI/UX расшифровываются как «Пользовательский интерфейс» и «Пользовательский опыт».

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

Архитектуру сайта часто предоставляют формировать дизайнеру, особенно если у него есть опыт UI/UX. Его главная задача — выстроить структуру страниц и правильно связать их, чтобы пользователю было легко перемещаться по сайту. Этому способствуют:

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

Здесь важно ориентироваться на привычные людям сигналы — место размещения элементов, форму, цвета, фразы.

Например, в форме регистрации кнопка бледно-серого цвета означает, что она неактивна. Это сигнал пользователю: нужно заполнить ещё какое-то поле или отметить чекбокс. Когда всё сделано правильно, кнопка становится зелёной — на неё можно нажимать.

Макет сайта — это не только красота, но и архитектура, от которой зависит комфорт пользователя и его впечатление о компании.

Композиция

Здесь тоже не нужно «изобретать велосипеды». Существует классическая верстка, к которой уже привык посетитель. Если ее придерживаться, то пользователь легко найдет все разделы сайта.

Традиционно сайты имеют такую композицию (сверху вниз):

Шапка с меню (header) может выглядеть по-разному — с баннером или без, со слайдером, с видео, с формой обратной связи, с кнопками, с телефонами и иконками соцсетей. Ее главная функция — навигация.

Основной информационный раздел (body). Здесь содержится информация о компании и ее продуктах, портфолио, сведения о лучших предложениях и акциях. А в разделе контактов можно увидеть адрес и телефоны компании.

Футер (подвал сайта, footer) еще раз дублирует базовую информацию — контакты, карту сайта, иконки соцсетей. Здесь часто размещают знак копирайта и предупреждение о защите авторских прав.

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

Асимметричная верстка тоже подчиняется законам симметрии, как бы это странно не звучало. К примеру, все фото могут быть разные по ширине, но высота и отступы — одинаковые.

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

Не нужно ориентироваться на глазомер — даже у асов он не идеальный. Пользуйтесь сеткой и направляющими. Они позволяют выстраивать композицию по основным осям и видеть выравнивание элементов.

У повторяющихся элементов должны быть определенные размеры. Например, если фото квадратное, то нужно выставить одинаковые стороны в пикселях, как на фото — 416х416.

Красивые рисунки и композиции всегда обладают стройной математической структурой. Это касается и макетирования.

Последовательность дизайна

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

Например, на Behance все карточки имеют одинаковый размер, данные расположены по одной схеме: сначала название проекта, потом автор, справа — количество лайков и просмотров.

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

Визуал (стиль элементов и изображений) должен соответствовать тематике сайта. Цвета, формы и картинки несут информацию так же, как и текст. Например, скруглённые углы транслируют мягкость, а сочетание красного и чёрного используют для демонстрации силы и маскулинности.

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

Давайте рассмотрим этот сайт. Здесь есть и репортажные снимки не лучшего качества, и классические открытки на праздники, и осовремененный визуал в модных лиловых оттенках. «Паспортное фото» используют для поздравления с днем рождения, хотя была бы уместнее неофициальная фотография из соцсети. У снимков нет отступа от текста, они все разные по размеру, нет хотя бы какой-то последовательности в их подборе.

Адаптивный макет

Сейчас все сайты делаются с адаптацией под разные экраны. Адаптивную верстку называют также резиновой — сайт растягивается и сжимается по ширине экрана, стараясь подстроиться под устройство посетителя.

56% пользователей заходит на сайты со смартфонов, поэтому важно продумать мобильную версию. Более того — популярен дизайн сайта Mobile First, когда упор в верстке делается на мобильные телефоны, а десктопная версия отодвигается на второй план.

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

К примеру, у заголовка в десктопной версии высота букв 72px, заголовок расположен по центру и занимает две строчки. На мобильной версии такой размер будет просто гигантским. Заголовок попытается уместиться в экране в несколько рядов, но часть все равно останется за областью видимости или залезет на следующий блок. Поэтому можно задать размер 24px для мобильных устройств.

Таким образом можно менять ширину и высоту, прозрачность и цвет, скрывать элементы.

Дизайнер должен понимать, как ведет себя адаптивная верстка: например, как перестраиваются блоки с горизонтальной в вертикальную позицию.

Чтобы посмотреть, как ведет себя адаптивная верстка, можно протестировать любой сайт с первой страницы выдачи Google. Нужно нажать вверху браузера значок «Свернуть в окно» (рядом с крестиком «Закрыть») и начать уменьшать ширину фрейма с помощью мышки. Очень хорошо видно, как на разной ширине перестраиваются элементы.

Давайте посмотрим на сайт Unisender.

Вверху — десктопная версия, у нее полноформатное меню, элементы в нижней части выстроены в горизонтальную линию. Слева внизу — версия для планшета. У нее меню уже реализовано в виде бургера, а элементы выстроились один под другим. В мобильной версии происходит то же самое, только все элементы становятся ещё меньше, уменьшен шрифт.

Обратите внимание, что набор элементов во всех версиях один и тот же — логотип, название компании, меню, картинка в баннере, заголовок, кнопка «Попробовать бесплатно», пункты преимуществ.

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

Шрифты

В тексте главное не красота, а читабельность. Поэтому избегайте витиеватых сложных шрифтов. И если в заголовках ещё можно экспериментировать, в основном тексте лучше брать только проверенные и простые шрифты.

Важно также заботиться о том, как текст будет читаться в браузере. Редкий шрифт может просто не распознаться, и пользователь получит набор непонятных знаков.

Лучше выбирать самые ходовые шрифты. Обратите внимание на базовые Google Fonts — они встроены не только во все браузеры, но и в современные графические редакторы. Например, так выглядят шрифты, которыми чаще всего пользуюсь я.

Также можно смело брать стандартные шрифты семейства Windows — Calibri, Cambria, Candara, Georgia, Tahoma и другие. С Times New Roman и Arial лучше быть осторожнее — они действительно считываются везде, но слишком уж приелись пользователям.

Цветовые решения

Когда веб-дизайнер получает заказ от уже существующего бренда, ему должны дать палитру корпоративных цветов с кодами (например, #8ED4FC, #FFECEC). Если у заказчика нет корпоративного дизайна, вопрос базовых цветов сайта нужно обсуждать.

Расцветка должна быть достаточно гармоничной, чтобы не раздражать глаза. Это не значит, что нельзя использовать яркие цвета — важнее их соотношения. Если выбрать салатовый фон и сделать текст черным, то его просто будет больно читать. Но если сделать салатовыми кнопки или стрелки, а основной фон будет белым — получится веселая и яркая картинка.

К примеру, на этом сайте использовано слишком много цветов, не гармонирующих между собой. В меню бросается в глаза синий текст на оранжевом фоне, а шрифт Arial совсем не подходит для детской тематики.

Чтобы пользователю было комфортно читать контент, нужно просчитывать контраст текста по отношению к фону. Его можно определить с помощью анализатора. Лучший коэффициент контраста — 7:1. Минимально допустимый показатель — 4.5:1.

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

Забота о верстальщике

Макет сайта передается верстальщику, который будет его реализовывать в коде. И тут крайне важно, чтобы он понял задумки дизайнера.

Верстка должна быть ориентирована на стандартные размеры экранов. Особенно важно задавать правильную ширину. Например, стандартная ширина экрана компьютера 1366 px, ноутбука — 1024 px, для небольших планшетов — 769 px, для смартфонов — 360 px. Количество версий макета обсуждается при составлении ТЗ.

Нужно понятно подписывать каждый элемент, группировать их по областям на сайте. Например, область баннера и все расположенные в ней элементы нужно объединить в группе «Banner» — тогда верстальщик поймет, где находятся эти слои в структуре.

В идеале веб-дизайнер должен знать разметку и подписывать разделы с сответствующими терминами: header, body, footer, button, menu.

Существуют негласные правила, по которым называть элементы лучше на английском языке и не по контенту, а по функционалу.

Например, вместо «Banner» мы назвали область согласно изображению — «Girl». Заказчик в последний момент решил поставить вместо изображения девушки фото салона, а потом вообще поменять на постер с рекламой. Пришлось бы каждый раз заново называть раздел в макете. А если дизайнер забудет сменить название, верстальщик потеряется в догадках, что это за девушка и где ее искать. А «Banner» — он и есть «Banner».

Особенно важно правильно структурировать слои в крупных сайтах, где сотни элементов.

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

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

Давайте рассмотрим подробнее нашего «франкенштейна».

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

В макете не использованы направляющие, элементы выстроены на глаз, у них разные размеры и отступы.

У слоёв отсутствуют адекватные подписи, поэтому верстальщику придётся кликать по каждому элементу, чтобы найти его в структуре.

Инструменты для макетирования

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

Figma

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

В Figma есть небольшой набор инструментов, которых вполне достаточно для прототипирования, но мало возможностей для обработки фото. Поэтому им часто пользуются в связке с Adobe Photoshop, в котором редактируют и вырезают из фона изображения.

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

Цена. Бесплатно для индивидуального пользователя с возможностью создавать неограниченное количество проектов. $12-15 для небольшой команды, $45 для крупных компаний. Платные тарифы в основном отличаются возможностью совместно работать над проектами, создавать общие библиотеки и централизованно управлять командой.

Главные достоинства. Качественная бесплатная программа, на которой можно реализовать любой макет — от дизайна сайта до плаката или визитки. Очень простой лаконичный инструмент, которого вполне достаточно для работы.

Где искать. На официальном сайте www.figma.com.

Где работать. Главный плюс Figma в том, что все проекты сохраняются в облаке, поэтому редактором можно пользоваться с любой ОС и из любого места на планете, где есть интернет — лишь бы был браузер. Программу не нужно устанавливать — достаточно завести аккаунт. Десктопная версия под Windows у редактора есть, но она тоже подвязана к облаку и скорее работает вместо браузера. У Figma недавно появилось мобильное приложение, но оно в процессе разработки и позволяет только просматривать файлы и делиться ими. Редактор не адаптирован под мобильную версию и работать с ним через мобильные браузеры не получится.

Бесплатный тестовый период. Вечность.

Adobe Photoshop/Adobe Illustrator

Adobe Photoshop и его брат Adobe Illustrator — самые древние программы, в которых работают веб-дизайнеры. Первый используется для растровой графики, второй — для векторной. Несмотря на то, что их догоняют молодые более простые специализированные программы, многие дизайнеры продолжают создавать макеты в Photoshop. Подтверждение тому — изобилие готовых бесплатных шаблонов в .psd, которые можно найти в сети.

Поскольку сейчас все дружно переходят на облачные технологии, Adobe тоже решил не отставать и создал Creative Cloud. Подписка на него позволяет пользоваться не одной программой, а целыми наборами продуктов компании. Но можно выбрать тариф и для одного из редакторов.

Один из минусов — продукты Adobe дорогие.

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

Цена: Сейчас пакет со всеми приложениями стоит $30 в месяц при покупке годового плана, а Photoshop и Illustrator по отдельности — по $21 каждый.

Где искать: В Creative Cloud.

Где работать: В редакторах Adobe можно работать из браузера — все библиотеки и проекты хранятся в облаке. Можно скачать десктопную версию, доступны мобильные приложения, есть версии для iPad.

Бесплатный тестовый период: 7 дней.

Adobe XD

Adobe XD — это легкая лаконичная программа с минимальным интерфейсом. В ней содержатся инструменты только для макетирования и верстки.

В программе визуализируется реакция интерактивных элементов на клики пользователя. Можно нажать кнопку «Play» и посмотреть «мультфильм» — как разворачиваются вкладки, куда попадает юзер по клику, как подсвечиваются кнопки. Это очень помогает верстальщику понять задумку дизайнера, не задавая много вопросов.

Управление очень похоже на Photoshop, что удобно для перехода на Adobe XD.

Цена. $10 отдельно, можно получить в полном пакете программ Adobe за $30.

Главные достоинства. Специальная программа для макетирования интерфейсов, в которой все заточено под удобство веб-дизайнера. Рассчитана на тех, кому не нужен весь инструментарий Photoshop — зачем платить больше, если можно приобрести более дешёвый редактор со всем необходимым.

Где искать. На официальном сайте Adobe, в разделе Adobe XD. Также входит в полную подписку Creative Cloud.

Где работать: Так же как и с другими продуктами Adobe — в облаке, на ПК, с планшета, телефона, iPad.

Бесплатный тестовый период: 7 дней.

Sketch

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

Но у него есть один жирный минус — программа работает только под macOS и её невозможно установить на другие операционные системы. Сглаживает проблему то, что файлы с расширением . sketch можно открывать в других редакторах, таких как Figma или Adobe XD.

Цена. Для одного редактора — $9 в месяц или $99 в год. Также есть тариф Business для больших команд от 25 редакторов. Рассчитывается индивидуально.

Главные достоинства. У Sketch очень простая и понятная панель инструментов, широкий выбор плагинов, он легкий по весу и нетребовательный к ресурсам ОС. Его пользователи отмечают, что преимущества кроются в мелочах — вроде бы он очень похож на другие редакторы, но в общем работать приятнее.

Где искать. На официальном сайте www.sketch.com.

Где работать. Только на mac OS. Документы можно открывать в браузерах, но только для просмотра.

Бесплатный тестовый период. 30 дней.

Для начинающего веб-дизайнера самым оптимальным вариантом станет Figma из-за своей бесплатности. Но можно попробовать и другие программы, благо у всех есть бесплатные тестовые периоды.

Что дальше

Готовый прототип получит верстальщик и создаст разметку, специалисты по Frontend и Backend снабдят его необходимым функционалом. После этого разработка станет настоящим сайтом — останется лишь загрузить его на хостинг и зарегистрировать домен.

СВЕЖИЕ СТАТЬИ

Другие материалы из этой рубрики

Не пропускайте новые статьи

Подписывайтесь на соцсети

Делимся новостями и свежими статьями, рассказываем о новинках сервиса

«Честно» — авторская рассылка от редакции Unisender

Искренние письма о работе и жизни. Свежие статьи из блога. Эксклюзивные кейсы и интервью с экспертами диджитала.

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

Как создать Дизайн веб-Сайта с помощью Midjourney (65 примеров) — Нейросети на vc.

8523 просмотров

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

15 невероятных стилей подсказок, которые можно попробовать в Midjourney V4 (более 100 примеров)

Остальное в Telegram канале https://t.me/neuroarthero

Особенно нейросеть хороша когда наступил творческий затык, выгорание или просто временный тупняк. Заказчику это чаще всего не объяснить…

Я продемонстрирую несколько интересных конструкций запросов (промтов) для создания «экранов сайтов» А также разберемся как можно настроить и оптимизировать их для достижения желаемого вами результата. Я лично всё отобрал, протестировал и теперь делюсь этим с вами.

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

Итак, есть пара удачных конструкций для экранов сайтов, которые я подобрал, протестировал и поделюсь с вами.

1ая конструкция:
+ professional website
+ for (пишем тему проекта)
+ ui, ux, ui/ux, website, landing page (уточняющие подсказки)
+ colors + style (опционально, в зависимости от задачи)
+ —ar 16:9 (формат экрана, по умолчанию выдаёт квадрат 1:1)

screen professional website for online education, ui, ux, ui/ux, website, landing page, vector illustration —ar 16:9

Экран сайта на тему крипто валюты в синих тонах.

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

screen professional website for crypto coin, ui, ux, ui/ux, website, landing page, ligt blue and blue colors, —ar 16:9

Экран сайта для агентства недвижимости в светлых лёгких тонах.

screen professional website for Real Estate, ui, ux, ui/ux, website, landing page, light colors, —ar 16:9

Сайт в красно-синих тонах для фитнес тренера

professional website for fitness trainer, ui, ux, ui/ux, website, landing page, blue and red colors

Путешествия в Турцию

professional website for a tour to Turkey, ui, ux, ui/ux, website, landing page, figma, high-quality graphics, illustration, —ar 16:9

На примере выше я не указывал цветовую гамму, доверился алгоритму. Результат превосходный. Сочетание золота и графитного здесь как раз к месту! 👍

Prompt: sketch design of a modern website landing page for a skateboard company, gold & yellow colors, navigation menus, — stylize 1000

Дизайн мобильного приложения

mobile app design for a skateboard company, ux, ui, purple and blue and gold and yellow colors, navigation menus, video player, beautiful design

Отрицательные подсказки

Используйте “—no” в своих подсказках если хотите исключить какой либо элемент.

Все, что введено после —no [текст] не будет отображаться на вашем изображении. Это называется отрицательной подсказкой.

Примеры:

Обратите внимание на подпись к изображению

Promt: web design for a flight discount service

Promt: web design for a flight discount service —no shading realism photo details

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

Только дизайн

Если вы не хотите показывать свои проекты в окне устройства или браузера и хотите только сам дизайн, вы также можете четко указать об этом:

Promt: web design for a flight discount service —no shading realism photo details

Promt: web design for a flight discount service —no shading realism photo details device computer window

Дополнительные подсказки

Dark colors (темные цвета)
Light colors (светлые цвета)
Bright colors (яркие цвета)
Black-white (черно-белое)
Colorful (цветное)

Конкретные цвета, например:

Pink (Розовый)
Blue (Синий)
Violet (Фиолетовый)
Red (Красный)
Green (Зелёный)
и т. п.

В том числе работают и необычные цвета или даже материалы:

Peach (Персиковый)
Indigo (Индиго)
Jade (Джейд)
Salmon (Лолосевый)
Wooden (Деревянный)
Metalic (Металический)
Golden (Золотой)
и т. п.

Можно несколько цветов писать в запросе. Можно писать gradient (градиент)

Стили иллюстраций для сайта:

Vector illustration
Flat illustration
Outline illustration
Lineart illustration
Watercolor illustration
Isometric illustration
Cartoon
3d
Abstract art
Photo realistic

Стили можно смешивать!

Дополнительные подсказки, для добавления деталей:

Dashboard
Infographic
Ecommerce
Online-store
Minimalism
Interface
Social network

Ну и конечно мы можете добавлять прочие слова, описывающие сайт.

Указывать какие-то предметы, например:

Books Cat Flowers Girl with the phone и т. д.

Заключительная мысль

Midjourney — отличный инструмент для получения вдохновения в различных сферах дизайна и творчества.

Я верю, что однажды в будущем искусственный интеллект поможет в полном цикле создания веб-сайтов со сложными деталями и функционалом.

Подписывайтесь на Telegram канал https://t.me/neuroarthero
Там много изображений с Промтами

от А до Я · Эскиз

Промышленность

12 апр 2022

Узнайте, как создавать удобные веб-сайты, которые действительно конвертируют

Понимание

Ищете рекомендации по дизайну веб-сайтов? Вы пришли в нужное место!

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

Начните с основ
Навигация
Цвет
Текст
Призывы к действию
Дизайн-системы
Оптимизация

Начните с основ

Давайте начнем с краткого обзора простых рекомендаций, которые могут значительно улучшить дизайн вашего веб-сайта, если вы примените их с самого начала.

По возможности начинайте с каркаса. Даже если это всего лишь карандашный набросок, отдайте предпочтение воплощению своих идей на бумаге или на экране. Если у вас есть ресурсы, мы рекомендуем посвятить некоторое время UX структуре страницы. Это сэкономит вам массу времени при работе с пользовательским интерфейсом позже. Верь нам!
Всегда работайте с реальной копией. Lorem ipsum может быть удобен для многих вещей, но всегда лучше концептуализировать дизайн веб-сайта с реальным содержимым, которое будет жить внутри него. Если у вас нет готового контента, попробуйте написать образец и использовать его для создания своей страницы.
Использовать сетку. В макете сетки используется система столбцов, которая помогает структурировать дизайн и упорядочивать элементы. Разработчикам также намного проще реализовать его, чем другие, менее организованные проекты. Сеточная система Bootstrap — отличный пример этого.
С самого начала создавайте для разных разрешений и размеров экрана. Хотя иметь в виду несколько разрешений не обязательно, это облегчит жизнь вашим разработчикам, а также улучшит взаимодействие с пользователем. Здесь, в Sketch, мы проектируем для 360 Вт, 768 Вт, 1024 Вт, 1440 Вт и 1920 Вт в качестве минимального требования.
Работа с числами, кратными 4 или 8. Использование чисел, кратных 4 или 8, для ваших проектов — будь то интервалы, размеры, типографика и т. д. — становится отраслевым стандартом. Это также хорошее эмпирическое правило, которому нужно следовать, потому что оно помогает обеспечить согласованность и упрощает процесс проектирования. И, как вы уже догадались, ваши разработчики тоже полюбят вас за это. 9 L , чтобы запустить руководство по компоновке и посмотреть, как мы используем систему сетки.
Навигация
Хорошая навигация — один из важнейших аспектов дизайна веб-сайта. Подумайте об этом — если ваши посетители не могут найти то, что ищут, или не понимают, что они могут делать на вашем сайте, как эти посещения будут конвертироваться?
Но не волнуйтесь. Разработка навигационного путешествия — это не ракетостроение. Вот несколько простых, но безошибочных советов и рекомендаций, которые помогут вывести дизайн навигации вашего сайта на новый уровень.
- Чем меньше, тем лучше. Если меню и подменю слишком много, люди могут запутаться и покинуть ваш сайт. Сосредоточьтесь на своих приоритетах!
- Выбирайте меню с умом. Различные типы меню предназначены для разных аудиторий и продуктов, поэтому тщательно продумайте те цели и потребности, о которых мы говорили ранее. Во-первых, не покупайте другой только потому, что он крутой или новый.
- Используйте верхние строки меню. Хотя творчески подходить к дизайну — это здорово, не забывайте об ожиданиях посетителей. К настоящему времени большинство из нас привыкли к верхним строкам меню и ожидают найти здесь важную информацию. Точно так же мы ожидаем, что нижние колонтитулы будут содержать контактные формы или информацию о компании.
- Упростите поиск важных параметров. При разработке иерархии меню учитывайте как свои приоритеты, так и приоритеты пользователя.
- Добавьте подменю там, где это имеет смысл. Подменю — отличный способ разместить другие важные страницы или источники, которые в противном случае загромождали бы ваше меню. Это также делает внутреннюю логику вашей страницы более понятной.
Если вы переключите iPad в верхнем меню Apple, вы получите это красивое раскрывающееся меню с доступом ко всем их различным моделям и аксессуарам.
Цвет
Вы должны использовать цвет в дизайне сайта как маркер на бумаге. Это может помочь посетителям ориентироваться, указывая им направление наиболее важной информации. Но, если вы переусердствуете, это может легко сокрушить людей. Вот несколько простых приемов эффективного использования цвета в веб-дизайне.
- Используйте цвет для обозначения функции. Цвет часто используется, чтобы указать, что что-то кликабельно, например кнопка или ссылка. Вы даже можете использовать другой цвет, чтобы указать, нажимали ли люди на кнопку или ссылку раньше. Поскольку ваш пользователь уже ожидает такой язык дизайна, лучше придерживаться его.
- Используйте фирменные цвета для акцентов. Когда дело доходит до выбора цветов, рекомендуется использовать нейтральные цвета для основного текста и фона. Затем используйте фирменные цвета для кнопок, ссылок и изображений, чтобы улучшить визуальную идентичность вашего бренда и повысить узнаваемость бренда с самого начала.
- Проверить читабельность и доступность. Выбранная вами цветовая палитра может оказать большое влияние на глаз пользователя — в лучшую или в худшую сторону. Вы можете проверить свои цветовые палитры на соответствие правилам WCAG, чтобы убедиться, что в вашем дизайне используется наилучший цветовой контраст для удобочитаемости.
- Найдите вдохновение. В видеоиграх часто используется цвет. Например, вы можете изучить использование ими знаков, которые дизайнеры используют, чтобы указать, для чего можно использовать элемент или объект.
Домашняя страница Stripe не только красочная — цвета постоянно меняются! Кроме того, попробуйте ввести код Konami и посмотрите, что произойдет 👀
Текст
Важно предлагать своим посетителям необходимую им информацию, но основной текст должен быть интересным и простым для восприятия, если вы хотите, чтобы они прочитали все до конца. . Вот некоторые ключевые рекомендации по дизайну веб-сайтов при использовании текста.
- Пустое пространство. Используйте короткие абзацы и разбивайте разделы заголовками, изображениями и другими визуальными элементами. Воспринимайте эти перерывы в тексте как возможность перевести дух между идеями.
- Остерегайтесь лохмотьев и вдов. Это не люди и не потертая одежда, а текст, который плохо отображается. Тряпки возникают, когда выравнивание текста отключено, и он начинает формировать странные формы. Вдовы — это оставшиеся слова, которые висят в конце ваших абзацев. Это может показаться мелочью, но они действительно могут улучшить дизайн вашего сайта.
- Динамичный дуэт Respect: дизайн и контент. Присяжные всегда спорят о том, должен ли контент влиять на дизайн или наоборот. Что бы вы ни выбрали, убедитесь, что ни один из них не конкурирует с другим. Текст должен быть лаконичным, но информативным, а дизайн привлекательным, но простым.
- Установить параметры. Хотя вы, возможно, уже помните об отступах и полях, убедитесь, что горизонтальные строки текста никогда не превышают 70 символов. Его легко пропустить.
- Не забывайте об иерархии. Текстовая иерархия может создать или разрушить дизайн. Убедитесь, что вы поняли это правильно с самого начала. Не знаете, с чего начать? Для справки ознакомьтесь с рекомендациями Apple и Material Design от Google.
- SEO. Подумайте о SEO-оптимизированной структуре текста и страницы. Это означает добавление ключевых слов в заголовки и основной текст, а также продумывание альтернативного текста для изображений, когда вы делитесь ими со своей командой разработчиков.
В этом примере вы можете увидеть, как веб-дизайнеры Mailchimp позаботились о том, чтобы h2 «Автоматизируйте свой маркетинг» не был одной сверхдлинной строкой, а основной абзац ниже был компактным. Ни тряпья, ни вдов.
Призывы к действию
Самый важный элемент веб-дизайна, призыв к действию (CTA) — это ссылка или кнопка, которая побуждает посетителей вашего сайта что-то сделать. Это должно быть понятно, легко найти и соответствовать вашим целям для целевой страницы или веб-сайта.
- Учитывать все уровни CTA. У вас может быть более одного CTA в зависимости от целей страницы, но важно разделить их на основные, второстепенные и третичные — и сделать это очевидным в вашем дизайне. Убедитесь, что вы уделяете своей основной цели больше всего места и внимания.
- Короче. Эффективный текст CTA должен быть кратким, понятным и информативным для пользователя. Общие примеры включают «Узнать больше», «Купить сейчас» и «Подписаться бесплатно».
- Ключевое значение имеет размещение. Ранее мы упоминали о сгибе. Хотя именно здесь должен находиться ваш основной CTA, вы можете добавить вторичные и третичные CTA ниже сгиба (нижняя половина вашей страницы). Определение того, куда вы хотите, чтобы ваши призывы к действию, также может помочь вам разобраться, как лучше организовать текст в целом.
Дизайн веб-сайта Blush использует цвета, чтобы различать их CTA. В то же время он использует верхнюю панель навигации, чтобы создать дополнительное место в верхней части страницы для дополнительных CTA.
Дизайн-системы
Если в жизни и в дизайне веб-сайтов есть одна постоянная вещь, так это изменения. Системы дизайна могут быть отличным преимуществом, если вы создаете веб-сайт, рассчитанный на длительное время. С их помощью вы можете создать набор правил, которые могут использовать все, кто занимается дизайном для вашего бренда, чтобы убедиться, что они используют правильные цвета, изображения, макеты и многое другое.
- Создавать для будущего. Вам всегда нужно будет вносить изменения, поэтому убедитесь, что у вас есть система дизайна — и ее аналог для разработчиков — чтобы вы могли сразу же взяться за дело.
- Создавайте повторно используемые стили и активы. Вы можете создавать текстовые стили, правила интервалов, цветовые маркеры и повторно используемые элементы, такие как символы в Sketch, чтобы сделать ваш дизайн согласованным и более легким для настройки или обновления позже.
В этом примере вы можете увидеть, как Monday Studio может отслеживать все элементы дизайна своего веб-сайта, размещая свою библиотеку системы дизайна в Sketch.
Оптимизация
Ни один дизайн веб-сайта не будет полным без надлежащей оптимизации. Король среди лучших практик: убедиться, что ваш сайт удобен для Google, жизненно важно для успеха в Интернете.
- Будьте мобильными. Люди, скорее всего, найдут ваш сайт через мобильные устройства, даже если они будут работать с ним позже, со своих компьютеров. Поэтому лучше сохранить дизайн вашего веб-сайта в первозданном виде, чтобы мы никогда не испортили первое впечатление.
- Не забывайте изображения. Работа над дизайном не заканчивается, когда веб-сайт готов! Работайте в тесном контакте со своим разработчиком, чтобы убедиться, что ваши изображения оптимизированы, чтобы они выглядели четкими, не замедляя работу вашего сайта. Для проверки можно использовать такие инструменты, как ImageOptim.
- Построить прототип. Это поможет вам и всем остальным получить истинное представление о дизайне. Если вы работаете с клиентом, это также может принести вам бонусные баллы. И последнее, но не менее важное: прототипы также отлично подходят для пользовательского тестирования.
Имея прототип, вы можете протестировать функциональность дизайна вашего веб-сайта и получить отзывы от потенциальных пользователей.
Веселиться
Что? Да! Веселье – это самая важная часть. Если вам не нравится процесс разработки веб-сайта, следовать всем этим передовым методам будет непросто. Есть много движущихся частей, но вы должны принять это и наслаждаться наблюдением за тем, как ваше видение собирается воедино по частям.
Быстрый способ убедиться, что вы весело проводите время? Посвятите некоторое время разработке мелких деталей. У нас есть несколько на вашем веб-сайте и веб-приложении — вы знаете, что это такое? 👀 (Если вам нужна подсказка, она есть на нашей странице загрузок.)
Пока вы ждете завершения загрузки, попробуйте изменить настройки внешнего вида 💅
Вам также может понравиться
Введение в типографику — что это такое и как сделать это правильно
Слова имеют значение даже визуально
Почему исследование пользовательского опыта так важно и как это сделать
Узнайте, как инвестиции в исследования UX могут помочь вашему бизнесу расти, а также некоторые другие преимущества
Как сделать обложку альбома
5 советов по дизайну, которые помогут вам создать легендарную обложку для вашей музыки
Как создать макет веб-сайта (5 простых шагов)
Графические дизайнеры играют решающую роль в создании веб-сайтов. Прежде чем веб-сайт будет запрограммирован или закодирован, его сначала необходимо разработать.
На самом деле:
Одним из самых первых навыков, которым я обучаю своих студентов, является разработка макетов веб-сайтов.
Почему?
Без хорошего дизайна веб-сайт, скорее всего, не сможет привлечь аудиторию и общаться с ней. И сегодня веб-сайты являются одним из основных способов связи брендов и компаний с аудиторией.
В этом руководстве я покажу вам шаги, необходимые для создания успешного, хорошо продуманного макета или макета веб-сайта.
Вот шаги для создания успешного макета веб-сайта:
- Шаг 1: исследование и планирование
- Шаг 2. Набросайте макет
- Шаг 3: Создайте каркас Lo-Fi
- Шаг 4. Создание каркаса Hi-Fi
- Шаг 5. Протестируйте макет своего веб-сайта
Мы будем создавать домашнюю страницу, но это будет работать для любого типа страницы.
Теперь давайте перейдем к деталям.
МОЯ НОВАЯ КНИГА
Ускоренный графический дизайнер
Проверенный способ обучения графическому дизайну Раз и навсегда в дизайне.
Как разработать макет веб-сайта?
Для разработки макета веб-сайта вам необходимо создать статическое графическое изображение или макет домашней страницы, которая станет вашим веб-сайтом, чтобы установить ее базовую структуру, цветовую палитру и визуальные элементы до этап программирования.
Макет веб-сайта — это графическое представление, которое выглядит в точности как веб-страница, но полностью статично. Он отображает графику и информацию точно так же, как веб-страница, но это всего лишь изображение, загруженное в браузер.
Вы можете спросить:
Почему создание макета веб-сайта важно?
Создание макета веб-сайта важно для определения того, как веб-сайт будет выглядеть и чувствовать себя, до того, как будут предприняты какие-либо усилия по программированию или созданию веб-сайта. Поскольку вы планируете и разрабатываете стратегию дизайна, это позволяет вам создать визуально потрясающую страницу, а также оптимизировать и облегчить этап программирования.
Набросав каркас веб-сайта, вы начнете понимать структуру и макет своей веб-страницы. Фото Хэла Гейтвуда.
Если профессиональный макет создан правильно, его можно загрузить в браузер, такой как Chrome или Firefox, и он будет выглядеть в точности как веб-сайт, но без каких-либо интерактивных элементов.
Если вы будете создавать веб-сайт для клиента, макет позволит вам предложить и продать дизайн веб-сайта до того, как будет выполнено какое-либо дорогостоящее программирование.
Макет веб-сайта — это простой, недорогой и эффективный по времени способ максимизировать ваши усилия по проектированию и программированию.
Этап 1. Исследование и планирование
Прежде чем приступить к разработке макета веб-сайта, вам необходимо провести некоторое планирование и исследование.
Спросите себя:
Какие хорошо оформленные примеры страниц относятся к вашему рынку, продукту или нише?
Какие разделы они включают на свою главную страницу? Какой тип информации они демонстрируют?
Какие визуальные элементы они используют для сообщения своих целей и задач?
Поняв, какой дизайн выбирают ваши конкуренты или ключевые игроки в вашей отрасли, вы сможете спланировать стратегию дизайна, которая будет выглядеть профессионально и актуально, а ваш веб-сайт будет выделяться.
На этапе планирования и исследования вы должны стремиться выполнить следующее:
Понять основные цели и коммуникационные цели вашего сайта
Выберите актуальную, функциональную и красивую цветовую палитру, соответствующую вашему бренду и нише
Иметь общее представление о различных разделах страницы, которые вам понадобятся на главной странице
Начните перечислять основные графические элементы, необходимые для основных разделов, такие как изображения и значки
Начать разработку соответствующей копии разделов главной страницы
Шаг 2. Набросок каркаса
После первоначального исследования и планирования вы готовы приступить к этапу проектирования.
Однако мы еще не готовы выкладываться на полную! Мы начнем с минимальной версии и начнем работать оттуда.
Введите каркас.
Что такое каркас?
Каркас — это урезанная версия вашего веб-сайта или приложения, демонстрирующая весь основной контент и визуальные элементы, которые должны быть размещены на экране, без всех деталей, таких как контент, графика и визуальные элементы.
Каркас веб-сайта — это минималистская версия того, какой будет ваша окончательная веб-страница. Начав процесс проектирования от общего к частному, вы упростите процесс проектирования и сделаете его более быстрым и эффективным. Фото Зигмунда.
Каркас имеет много преимуществ. Каркас позволяет:
Визуально демонстрировать, как будет выглядеть страница, не тратя часы на проектирование и программирование
Дизайн с конкретной точки зрения, а не абстрактно
Быстрое перемещение элементов на странице для определения наилучшего макета
Тестируйте различные макеты, визуальные элементы и расположение страниц на лету
Лучший способ начать создание каркаса — сделать набросок от руки. Вы можете использовать чистую страницу, но бумага с сеткой даже лучше, так как она позволяет правильно расположить элементы и в правильных пропорциях.
Поскольку экраны веб-сайтов и приложений имеют прямоугольную форму, они в основном определяются четырехугольными формами.
Это означает, что каркас веб-сайта может быть создан в основном из прямоугольников и квадратов. Используя эти фигуры, вы сможете заблокировать все основные компоненты своей страницы, не вдаваясь в подробности.
Тщательно выбрав эти начальные четырехугольные компоненты, вы сможете начать визуализировать внешний вид вашего веб-сайта и строить его.
Plus:
Переход от общего к частному сделает задачу проектирования менее сложной и пугающей.
Шаг 3. Каркас Lo-Fi
Теперь, когда вы набросали несколько возможных сценариев для своего веб-сайта, теперь вы можете приступить к разработке более целенаправленного подхода.
Используя программное обеспечение для графического дизайна, теперь вы можете приступить к созданию того, что станет макетом вашего веб-сайта.
Я предпочитаю использовать векторную графику, так как она позволяет свободно перемещать элементы на странице.
Сначала создайте в браузере документ размером с веб-страницу. Я использую 14-дюймовый ноутбук, поэтому я считаю, что документ размером около 1200 пикселей шириной будет соответствовать окну браузера почти как реальная веб-страница при тестировании.
Длина документа будет определяться количеством разделов, которые должны быть включены в страницу, но обычно он выглядит как прямоугольник в портретной (вертикальной) ориентации.
Теперь используйте границы этого документа (вертикальный прямоугольник), чтобы начать размещение различных разделов и элементов.
Для заполнения страницы вы будете использовать квадратные и прямоугольные формы.
Каркас веб-сайта lo-fi использует прямоугольники и четырехугольные формы для моделирования фактического макета веб-страницы.
Обратите внимание, что прямоугольник начинает выглядеть как веб-страница, но без деталей. Это магия лоу-файного каркаса.
Шаг 4. Каркас Hi-Fi макет вашей веб-страницы или манекен.
На этом этапе вы в основном начнете заменять четырехугольные формы в своем макете lo-fi реальными изображениями, графическими элементами и текстом.
Здесь вы должны сделать все возможное с точки зрения графики: изображения, значки и другие графические элементы должны быть правильного размера и пропорции, уже обработаны и готовы к публикации.
Высококачественный макет веб-сайта включает в себя все детали реального веб-сайта.
У вас должна быть определенная цветовая палитра, и все визуальные подсказки, сигнализирующие о динамическом содержимом, должны быть указаны и на месте.
Например:
При наведении курсора на интерактивный элемент, такой как гиперссылка или кнопка, меняет ли этот элемент цвет или размер?
Если есть галерея изображений, есть ли значок стрелки, который сигнализирует пользователю, что нужно щелкнуть, чтобы увидеть больше?
Если вы хотите, чтобы кто-то следил за вами в социальных сетях, существуют ли значки социальных сетей, которые сочетаются с вашим брендом и цветовой палитрой?
Как видите, существует множество визуальных решений, которые необходимо принимать только на одной веб-странице.
Однако:
Вам нужно принять эти решения только один раз, так как они применяются ко всем остальным страницам веб-сайта.
Шаг 5. Протестируйте свой макет
После создания полного макета страницы вы готовы протестировать эту страницу в браузере.
На самом деле , вы должны постоянно тестировать свой макет по мере продвижения в своем дизайне, поскольку именно в реальной среде браузера вы действительно можете определить, имеют ли ваш текст и визуальные элементы правильный размер, положение , и пропорция.
Чтобы протестировать страницу, экспортируйте версию документа с изображением. Затем перетащите в браузер, например Chrome или Firefox.
В зависимости от размера вашего браузера и размера макета вашего веб-сайта в пикселях ваше изображение будет закрывать браузер и выглядеть так, как будто веб-страница была загружена.
При необходимости отрегулируйте масштаб в процентах в настройках просмотра страницы. Вы также можете вернуться к графическому программному обеспечению и соответственно увеличить или уменьшить ширину макета, чтобы он соответствовал экрану вашего компьютера.
Теперь вы создали макет веб-сайта, который может точно показать клиенту или программисту, как именно должен выглядеть ваш веб-сайт.
Объяснение макетов веб-сайтов
Прежде чем приступить к разработке веб-сайта в деталях, необходимо понять структуру его различных компонентов.
Место изображений, текста и значков должно быть позиционировано на странице до фактического этапа проектирования. В идеале это достигается на этапе каркаса.
Макет вашей страницы будет зависеть от объема контента, который вам нужно отобразить.
Макет новостного веб-сайта, такого как New York Times , очень сложен, поскольку вам нужно разместить множество элементов и текста на одной странице.
Макет веб-сайта New York Times очень сложен, поскольку он должен соответствовать многим компонентам, таким как текст и изображения.
Другие страницы, такие как домашняя страница блога, могут быть менее сложными и загроможденными.
Части веб-сайта
Чтобы создать макет или каркас веб-сайта, вам необходимо понимать различные компоненты веб-сайта.
Как правило, веб-страница включает следующие элементы:
Макет веб-сайта состоит из различных компонентов веб-сайта, таких как изображения, текст и кнопки.
Заголовок
Заголовок — это самый верхний элемент веб-сайта. Он отображает информацию о бренде, например, логотип веб-сайта. Он также может включать основную навигацию веб-сайта.
Основная навигация
Это основные ссылки на другие страницы вашего веб-сайта. Здесь вы можете найти ссылки на страницу «О нас», раздел блога вашего сайта или на страницу «Ресурсы».
Раздел «Герой»
Сразу после заголовка современные веб-сайты отображают так называемый раздел «Герой». В этом разделе отображается яркое крупноформатное изображение или графика, которые наилучшим образом задают тон и посыл веб-сайта.
Он также включает большой заголовок, в котором кратко излагаются цели и ценность веб-сайта, за которым следует кнопка или призыв к действию.
Карточки ценностных предложений
Иногда, сразу после раздела «Герои», мы хотим дополнительно рассказать о ценности бренда или услуги, предлагаемой веб-сайтом. Итак, мы используем три и более «карточки», которые более подробно объясняют, что бренд или услуга может сделать для решения проблем своей аудитории.
Цель этого раздела: еще больше убедить пользователя продолжить чтение или предпринять какие-либо действия на веб-сайте.
Боковая панель
Боковая панель — это элементы, которые обычно размещаются в правой части веб-страницы.
Эти элементы в основном отображаются в виде карточек и используются для отображения дополнительной информации, не входящей в основной контент.
Обычно мы используем боковые панели для показа рекламы или призывов к действию, таких как форма подписки на информационный бюллетень.
Призыв к действию
Призыв к действию — это подсказка, которую вы даете своей аудитории для выполнения желаемого действия.
У вас может быть призыв к действию для подписки на информационный бюллетень, загрузки электронной книги, покупки цифрового продукта или перехода по определенной ссылке.
Призывы к действию обычно отображаются в виде кнопки, которая буквально предлагает кому-то выполнить желаемый результат.
Нижний колонтитул
Нижний колонтитул — это самая нижняя часть веб-сайта. Здесь вы можете отображать ссылки на другие страницы вашего веб-сайта и, что наиболее важно, информацию, напечатанную мелким шрифтом, такую как ссылки на политику конфиденциальности, отказ от ответственности и информацию об авторских правах.
Вам нужно создать актуальный контент для макета веб-сайта?
Вам не нужно создавать контент или настоящие слова для макета веб-сайта. Вам нужен фактический фиктивный текст, который продемонстрирует, как слова и предложения будут располагаться на странице, а также покажет используемую типографику и их комбинации.
К счастью, вы можете положиться на Lorem Ipsum, латинский текст-заполнитель, который десятилетиями традиционно использовался в качестве фиктивного текста в издательском деле и в сфере графического дизайна.
Существует множество генераторов Lorem Ipsum, из которых вы можете извлечь фиктивный текст в соответствии с вашими требованиями.
Кроме того, программное обеспечение для графического дизайна, такое как Inkscape, имеет фиктивные текстовые расширения, которые позволят вам генерировать текст по запросу при разработке макета веб-сайта, макета или макета.
Заключение
Дизайн веб-сайта — это гораздо больше, чем программирование. Как вы уже знаете, профессиональный веб-сайт начинается с продуманной стратегии дизайна, которая строится от общего к частному. Это экономит время и ресурсы и позволяет упростить процесс проектирования и программирования.
Чтобы спроектировать макет веб-сайта, вам сначала нужно спланировать свой дизайн, изучив другие веб-сайты в вашей нише или пространстве.
Затем вы можете начать процесс проектирования, сделав от руки эскизы различных вариантов планировки.
Затем вы можете приступить к проектированию с помощью программного обеспечения для редактирования графики, такого как Illustrator или Inkscape. Но на данном этапе вы создаете только макет вашего макета с блоками и геометрическими фигурами.
Затем вы можете приступить к созданию Hi-Fi версии вашего макета, которая включает в себя цветовую палитру, которую вы будете использовать, изображения и графические элементы. Вы также можете включить фиктивный текст для отображения основных частей содержимого.
После того, как вы разработали каждую деталь, вы можете перетащить макет вашего веб-сайта в Chrome или Firefox, чтобы проверить, как ваша страница будет выглядеть в браузере. Вы можете проверить, как будут отображаться элементы, например, насколько велик или мал ваш текст.
Теперь можно перейти к этапу программирования.
Оставьте комментарий ниже и дайте мне знать о ваших проблемах с дизайном веб-сайта.