Разработка веб-сайтов

Веб-дизайн имеет прямую ссылку на визуальный аспект веб-сайта. Эффективный веб-дизайн необходим для эффективного обмена идеями.

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

Ключевые моменты

План проектирования должен включать следующее:

  • Подробности об информационной архитектуре.

  • Планируемая структура сайта.

  • Карта страниц сайта

Каркас

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

В каркас включены следующие элементы:

  • Ящики первичных графических элементов

  • Размещение заголовков и подзаголовков

  • Простая структура макета

  • Призывы к действию

  • Текстовые блоки

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

Инструменты веб-дизайна

Вот список инструментов, которые можно использовать для создания эффективного веб-дизайна:

Coda 2
OmniGraffle
Pen and Paper
Vim
Coda 2 - это мощный инструмент для веб-разработки и проектирования, с улучшенным пользовательским интерфейсом, редактированием текста, управлением файлами, клипами, сайтами, дизайном и улучшенной поддержкой Mysql. OmmniGraffle в основном используется для создания каркасов. Обратной стороной этого инструмента является то, что он не поддерживает интерактивное прототипирование и доступен только для Mac. Ручку и бумагу можно использовать, чтобы нарисовать внешний вид того, как будет выглядеть веб-сайт. Vim - отличный инструмент для веб-дизайна. Он поддерживает полностью настраиваемое автоматическое создание кода, несколько буферов для хранения вырезанного / скопированного кода и запись действий для автоматического повторения.
SN Описание инструмента
1. Photoshop CC
Это отличный инструмент для веб-дизайна от Adobe. Последняя версия Photoshop CC 2014 поддерживает множество новых функций, таких как смарт-объекты, композиции слоев, смарт-руководства, интеграция Typekit, поиск шрифтов и улучшения рабочего процесса.
2. Illustrator CC
Illustrator CC также является инструментом веб-дизайна, который включает в себя такие мощные функции, как библиотеки AutoCad, белый наложенный отпечаток, замену прокси для заливки и обводки для текста, автоматическое создание углов, несложенные изображения и инструменты сенсорного ввода и т. Д.
3.
4.
5. Sublime Text
Sublime Text - это редактор исходного кода с интерфейсом программирования приложений Python. Его функциональность можно расширить с помощью плагинов.
6.
7.
8. Imageoptim
Он в основном используется для оптимизации изображений на веб-сайте, чтобы загружать их быстрее, находя лучшие параметры сжатия и удаляя ненужные комментарии.
9. Sketch 3
Sketch 3 - это инструмент веб-дизайна, разработанный специально для разработки интерфейсов, веб-сайтов, иконок и т. Д.
10. Heroku
Это также отличный инструмент для веб-разработки, который поддерживает Ruby, Node.js, Python, java и PHP.
11. Axure
Он поддерживает инструменты для создания прототипов, документации и каркасов для создания интерактивного дизайна веб-сайтов.
12. Hype 2
Hype 2 предлагает: самый простой способ анимации и добавления интерактивности, твердость, мощь HTML5, мобильность и функции WYSIWYG.
13. Image Alpha
Этот инструмент помогает уменьшить размер 24-битных файлов PNG. Он делает это, применяя сжатие с потерями и конвертируя его в формат PNG8 + альфа, который более эффективен.
14. Hammer
Этот инструмент подходит для непрограммистов и хорош только для небольших проектов.
15. JPEGmini Lite
Это инструмент для оптимизации изображений, который поддерживает фотографии в любом разрешении до 28 мегапикселей.
16. BugHerd
Этот инструмент помогает увидеть, как продвигаются проекты и над чем все работают. Это также помогает выявить проблемы в разработке.

Анатомия веб-страницы

Веб-сайт включает в себя следующие компоненты:

Содержащий блок

Containerможет быть в виде тега тела страницы, полностью содержащего тега div. Без контейнера не было бы места для размещения содержимого веб-страницы.

Логотип

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

Навигация

На сайте navigation systemдолжно быть легко найти и использовать. Часто вопрос помещается прямо вверху страницы.

Содержание

Содержание веб-сайта должно соответствовать цели веб-сайта.

Нижний колонтитул

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

Пробел

Его также называют negative space и относится к любой области страницы, которая не покрыта шрифтом или иллюстрациями.

Ошибки веб-дизайна

Следует всегда помнить о следующих типичных ошибках:

  • Веб-сайт не работает ни в одном другом браузере, отличном от Internet Explorer.

  • Использование передовых технологий без уважительной причины

  • Звук или видео, которые запускаются автоматически

  • Скрытая или замаскированная навигация

  • 100% флэш-содержимое.