Как-то меня попросили провести малый семинар в лицее, где я когда-то учился, сообразно созданию веб-сайта. В процессе написания речи я подумал, сколько она может вылиться в вещество, что, вероятно, будет полезен многим начинающим в области веб-дизайна, вёрстки веб-страниц и пр. Я не претендую для истину в первой инстанции и всё изложенное носит чисто личностный лицезрение для работу с дизайном и кодом. Статья даёт поверхностный взгляд на понятия и имущество, которые, на мой воззрение, могут начинать неплохим стартом чтобы того, который пьяный идти дальше.
Условно дело создания сайта (web-проекта) дозволительно разделить для 3 этапа:
Планирование
Дизайн
Разработка
Планирование
Известный остановка дозволительно разделить для изрядно подэтапов:
Произведение идеи
Разработка структуры проекта
Проработка макета проекта
Существо идеи
Для данном этапе нам должен определиться с тематикой проекта (сайта, сервиса). Далее, в соответствии с выбранной темой, необходимо собрать соответствующие материалы: текстовые, графические.
Разработка структуры проекта
Когда мы определились с темой проекта, подобрали надобный материя, следующим этапом довольно разработка структуры проекта. Строй проекта подразумевает почти собой разделы сайта, в соответствии с которыми довольно формироваться навигационное меню и строиться дизайн проекта. Для данном этапе дозволительно разбирать
Почему веб-студия дороже фрилансера
вещество сообразно темам и разделам.
Проработка макета проекта
Впоследствии того, только мы определились со структурой проекта дозволено составить макет проекта (схематично).
Для отрисовки наброска можно извлекать бумагу и ручку, Photoshop, всякий другой редактор графики (прежде зачастую использовали Adobe Fireworks). Важно отметить, сколько данный этап – это не отрисовка готового дизайн-макета, а всего только схематичный набросок, выполненный для понимания того, наравне на сайте будут помещаться основные информационные блоки, графика и прочие элементы дизайна.
Основные элементы страницы
Часто основными элементами страницы являются: содержащий блок (wrapper, container), логотип, навигация, контент, футер (нижний колонтитул), свободное пространство (сообразно сути свободное место — это не элемент дизайна, однако мнение, помня о котором присутствие составлении макета страницы, наш проект не будет казаться точно нагромождение блоков).
Содержащий блок (контейнер)
Занятие контейнера для странице может исполнять прямо элемент main part либо же div. Ширина содержащего блока может существовать резиновой (watery), а может замечаться фиксированной (settled).
Логотип
Текстовая тож графическая составляющая проекта и выделяющая его между других. Логотип чаще всего располагается в верхнем левом углу страницы иначе же посередине (в зависимости от идеи, макета).
Навигация
Основная навигационная панель содержит ссылки для основные разделы сайта. Навигационная панель нередко располагается в верхней части страницы (в независимости от того вертикально сиречь горизонтально располагаются элементы навигации).
Контент
Контент – это основная составляющая веб-страницы. Он занимает главенствующую занятие в дизайне страницы, следовательно занимает большее промежуток, подкреплён, кроме текста, графикой.
Нижний колонтитул (footer)
Определенный элемент располагается внизу страницы и обычно содержит информацию о правообладателе, контактные и юридические причина, ссылки для основные разделы сайта (зачастую дублирует основную навигацию), ссылки на социальные узы, форму обратной связи и пр.
Фиксированный макет подразумевает около собой, что в независимости через разрешения экрана пользователя ваш сайт ввек довольно занимать одинаковую ширину.
Резиновый макет
«Резиновый» макет подразумевает, сколько страница сайта будет метить занять всё доступное ей пространство для экране пользователя, подстраиваясь перед разрешение.
В данном контексте стоит уяснить такие понятия, чистый отзывчивый веб-дизайн (Open Net Invent aka. RWD) и адаптивный веб-дизайн (Adaptive Trap Desing aka. AWD). Первое представление укладывается в концепцию «резинового» и означает, который около изменении размера экрана ваш сайт подстраивается почти него, второе понятие подразумевает, что около разработке вы определяете основные разрешения (размеры экрана), около которые довольно подстраиваться (адаптироваться) ваш контент. В обоих случаях следует упражнять не соло, а порядочно макетов, которые будут приличествовать разным разрешениям экрана. Часто создаётся 3 макета почти разрешения iPhone (Android Phone), iPad (Android Bolus) и Desktop.