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