Адаптивный дизайн в проектировании интерфейсов | Статья в журнале «Молодой ученый»

Отправьте статью сегодня! Журнал выйдет 22 августа, печатный экземпляр отправим 9 сентября.

Опубликовать статью в журнале

Автор:

Рубрика: Архитектура, дизайн и строительство

Опубликовано в Молодой учёный №25 (315) июнь 2020 г.

Дата публикации: 21.06.2020

Статья просмотрена: 1 раз

Библиографическое описание:

Стрельникова, В. Э. Адаптивный дизайн в проектировании интерфейсов / В. Э. Стрельникова. — Текст : непосредственный // Молодой ученый. — 2020. — № 25 (315). — С. 68-70. — URL: https://moluch.ru/archive/315/71922/ (дата обращения: 08.08.2020).



В статье описывается разработка мобильных приложений и сайтов. Дается определение языкам, используемым при создании сайта, а также характеристика front-end и back-end разработкам. Подробно рассматривается адаптивный дизайн, выделяются его особенности, преимущества и недостатки. Приводится пример эффективного инструмента при создании адаптивного сайта — фреймворка Bootstrap.

Ключевые слова: Front-end разработка, Back-end разработка, адаптивный дизайн, фремфорк, Bootstrap.

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

Первый сайт был создан в 1989 г. Тимом Берносом Ли с помощью языка гипертекстовой разметки HTML. Он и на сегодняшний день является самым популярным. Хотя его версии постоянно видоизменялись и совершенствовались, главный принцип построения остается таким же, каким его преподнес Тим Бернес Ли. Главные инструменты при верстке — HTML и CSS, а также непосредственно языки программирования. Так, например, последние несколько лет самым используемым языком в веб-сфере является Java Script. HTML (HyperText Markup Language) — это стандартный язык, используемый для создания Web-страниц и поддерживаемый всеми приложениями обозревателей. [4] CSS (от английского слово Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. [3]

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

Front-end разработка — это работа, отвечающая за создание общедоступной части сайта, которая обрабатывается на стороне клиента (в браузере), именно с ней сталкивается пользователь, посещая сайт. К front-end разработке можно отнести создание дизайнером макета сайта, верстку пользовательских интерфейсов, шаблонов для системы управления сайтом (CMS), а также добавление к интерфейсу скриптов, отвечающих за визуализацию и web-анимацию. [2]

Back-end разработкой называют процесс наполнения функционала сайта и создания программной составляющей. [5]

Веб-дизайнеры связаны с front-end разработкой, так как именно она воспринимается визуально. Поэтому рассмотрим подробнее именно эту часть.

Front-end-разработчики обязаны достигнуть результата, при котором страница в точности повторяет макет дизайнера и одинаково отображается во всех браузерах. Для достижения этого разработчику необходимо обладать набором базовых навыков и современных инструментов. [1] Веб-дизайнер работает над внешним видом, макетом и, в некоторых случаях, содержимым веб-сайта. Внешний вид, например, относится к используемым цветам, шрифту и изображениям. Макет относится к тому, как информация структурирована и классифицирована. Хороший веб-дизайн прост в использовании, эстетически приятен и подходит для группы пользователей и бренда веб-сайта. Многие веб-страницы разработаны с упором на простоту, поэтому не появляется никакой посторонней информации и функций, которые могут отвлекать или вводить пользователей в заблуждение. Поскольку краеугольным камнем результатов веб-дизайнера является сайт, завоевывающий доверие целевой аудитории и всячески способствующий этому, устранение как можно большего количества потенциальных точек разочарования пользователей является критически важным фактором.

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

Поскольку прогресс не стоит на месте, нужно постоянно что-то менять для удобства и соответствия новым тенденциям и требованиям. Сегодня у всех смартфонов и ноутбуков разные размеры экранов. И это обязательно нужно учитывать при создании сайта. Мнение потребителя об интернет-магазине существенно испортится, если он обнаружит, что не может просматривать сайт с мобильного устройства. Может возникнуть другая проблема — в мобильном приложении сайт сильно теряет в качестве. Понимание пользователя на мобильном устройстве на 50 % меньше, а это означает, что элементы контента, навигации и визуального дизайна должны быть вдвойне интуитивно понятными, чем на рабочем столе.

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

В адаптивном дизайне используется разработка стандартов для шести наиболее распространенных экранов шириной 320, 480, 760, 960, 1200 и 1600 пикселей. Преимущество адаптивного дизайна заключается в том, что он позволяет дизайнеру создавать индивидуальные решения, чтобы графический интерфейс оптимально отображался на экранах разных размеров. Недостаток заключается в том, что адаптивный дизайн стоит дорого, так как требует от дизайнера создания до шести отдельных графических интерфейсов, что эквивалентно шести версиям одной веб-страницы. Другим недостатком является то, что адаптивный дизайн не может помочь пользователям, у которых нет стандартного размера экрана.

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

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

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

Один из самых популярных фреймворков можно назвать Bootstrap. Он опирается на проект LESS, который является усовершенствованием языка CSS. Компоненты Bootstrap представляют собой часто используемые готовые HTML- блоки с предопределенными стилями. Иногда они могут использовать Java Script. Верстальщик может использовать как готовый компонент, так и определить свой внешний вид для него.

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

Литература:

  1. Биктимиров, Р. Р. Современные инструменты front-end разработки. [Электронный ресурс]. — URL: https://www.elibrary.ru/item.asp?id=27278022
  2. Дорогина, А. С. Front-end разработка. [Электронный ресурс] / А. С. Дорогина, О. Н. Сафонова, Н. В. Тутова. — URL: https://www.elibrary.ru/item.asp?id=26416683
  3. Максутова, А. Статистический сайт на HTML, CSS и на Bootstrap [Электронный ресурс]. — URL: https://elibrary.ru/item.asp?id=32645391
  4. Рева, О. Н. Создание Web-станиц. Просто, как 2х2 / О. Н. Рева О. Н. — Москва: Изд-во Эксмо, 2005. — 208 с.
  5. Хеник, Б. HTML и CSS. Путь к совершенству/ Б. Хеник. — Санкт-Петербург: Питер, 2011. — 336 с.
Основные термины (генерируются автоматически): адаптивный дизайн, HTML, CSS, создание сайта, сайт, разработка, внешний вид, CMS, мобильное устройство, графический интерфейс.


Ключевые слова

адаптивный дизайн, Front-end разработка, Back-end разработка, фремфорк, Bootstrap

Похожие статьи

Адаптивный дизайн веб-сайта с использованием...

К области фронтэнд-разработки относятся создание дизайн-макета сайта, верстка сайтов и

Он обеспечивает HTML и шаблоны дизайна на основе CSS с компонентами интерфейса, такими как

Адаптивный сайт— это стандарт веб-разработки, один из показателей качества...

Применение интерактивного генетического алгоритма для поиска...

С каждым годом технологии программирования интернет-ресурсов выходят на новый уровень. Разработка Web-сайтов является одной из самых востребованных профессий в мире. Главным составляющим хорошего сайта является дизайн.

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

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

Анализ систем управления содержимым для создания...

При создании сайта на основе CMS нужно четко понимать, какого рода содержание будет представлено на сайте, на какую аудиторию рассчитан

HTML (HyperText Markup Language) — язык гипертекстовой разметки. Адаптивный дизайн веб-сайта с использованием...

Дизайн мобильного приложения | Статья в журнале...

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

Она идет рука об руку с графическим, и промышленным дизайном, определяя для себя

Разработка дизайна мобильного приложения является основной и даже главной частью...

Разработка мобильного мультиплатформенного приложения...

Ядро PhoneGap использует CSS3 и HTML5 для обработки интерфейса и JavaScript для

С точки зрения написания когда, разработка не отличалась от классической разработки

CSS (Cascading Style Sheets) — каскадные таблицы стилей, используются для описания внешнего...

Оценки возможностей использования различных подходов при...

Разработка графического макета сайта. Разработка системы управления и навигации.

Разработка структуры сайта. Оценим несколько возможных подходов для создания сайта

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

Встраивание CSS-стилей в HTML-документы | Статья в журнале...

HTML (от англ. HyperText Markup Language — гипертекстовый язык разметки)

Если CSS подключается как внешний к документу, то также необходимо использовать CSS-селекторы

В клиентском приложении с помощью интерфейса вводятся код HTML документа в текстовом...

Структура web-сервиса учета грузоперевозок транспортной...

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

На каждом веб — сайте WordPress требуется хотя бы одна тема, и каждая тема должна быть

CSS (Cascading Style Sheets) — каскадные таблицы стилей — формальный язык описания...

Похожие статьи

Адаптивный дизайн веб-сайта с использованием...

К области фронтэнд-разработки относятся создание дизайн-макета сайта, верстка сайтов и

Он обеспечивает HTML и шаблоны дизайна на основе CSS с компонентами интерфейса, такими как

Адаптивный сайт— это стандарт веб-разработки, один из показателей качества...

Применение интерактивного генетического алгоритма для поиска...

С каждым годом технологии программирования интернет-ресурсов выходят на новый уровень. Разработка Web-сайтов является одной из самых востребованных профессий в мире. Главным составляющим хорошего сайта является дизайн.

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

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

Анализ систем управления содержимым для создания...

При создании сайта на основе CMS нужно четко понимать, какого рода содержание будет представлено на сайте, на какую аудиторию рассчитан

HTML (HyperText Markup Language) — язык гипертекстовой разметки. Адаптивный дизайн веб-сайта с использованием...

Дизайн мобильного приложения | Статья в журнале...

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

Она идет рука об руку с графическим, и промышленным дизайном, определяя для себя

Разработка дизайна мобильного приложения является основной и даже главной частью...

Разработка мобильного мультиплатформенного приложения...

Ядро PhoneGap использует CSS3 и HTML5 для обработки интерфейса и JavaScript для

С точки зрения написания когда, разработка не отличалась от классической разработки

CSS (Cascading Style Sheets) — каскадные таблицы стилей, используются для описания внешнего...

Оценки возможностей использования различных подходов при...

Разработка графического макета сайта. Разработка системы управления и навигации.

Разработка структуры сайта. Оценим несколько возможных подходов для создания сайта

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

Встраивание CSS-стилей в HTML-документы | Статья в журнале...

HTML (от англ. HyperText Markup Language — гипертекстовый язык разметки)

Если CSS подключается как внешний к документу, то также необходимо использовать CSS-селекторы

В клиентском приложении с помощью интерфейса вводятся код HTML документа в текстовом...

Структура web-сервиса учета грузоперевозок транспортной...

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

На каждом веб — сайте WordPress требуется хотя бы одна тема, и каждая тема должна быть

CSS (Cascading Style Sheets) — каскадные таблицы стилей — формальный язык описания...

Задать вопрос