Сам себе веб-дизайнер: 15 модных терминов и их значений. Web дизайн основные понятия


Сам себе веб-дизайнер: 15 модных терминов и их значений

Вам наверняка известно, что для того, чтобы создать сайт на Wix не нужен богатый опыт в работе с дизайном. Но разве вам не было бы интересно побывать в шкуре настоящего дизайнера? Если вы хотите говорить на одном языке с веб-дизайнерами, понимать смысл написанного в дизайнерских блогах или впечатлить друзей на вечеринке своими познаниями, вот 15 терминов из мира веб-дизайна, которые помогут вам сойти за своего.

Читаем и запоминаем:

1. Векторы: векторная графика – это визуальные элементы, состоящие из геометрических форм в противоположность пиксельным точкам. Преимущество векторной графики над растровыми изображениями, состоящими из пикселей, заключается в том, что ее проще использовать в работе с изображениями больших размеров. Технически векторы состоят из растянутых линий, проведенных от точки до точки. Хотя на ум в первую очередь приходят квадраты и треугольники, в действительности из векторной графики можно создавать огромное множество изображений. Чаще всего ее используют при создании логотипов, иконок и в дизайне инфографики.

2. Растровые изображения: в отличие от векторов, растровые изображения состоят из пикселей – маленьких цветных точек, печально известными благодаря компьютерным играм 80-х. Растровые изображения всегда зависят от разрешения экрана. При сильном увеличении растрового изображения можно будет увидеть точки, из которых оно состоит. К слову, каждая сделанная вами фотография является растровым изображением.

3. CMYK: расшифровывается как название цветов «голубой, пурпурный, желтый и черный» и является самой распространенной цветовой схемой, используемой для печати. Из этих четырех цветов состоят чернила для принтеров. Их различные комбинации создают цветовой диапазон, который вы можете увидеть на печати.

4. RGB: цветовая модель «красный, зеленый, синий». Если CMYK используется для печати, то RGB – это самая распространенная модель в цифровой графике. В отличие от принтеров, компьютерные мониторы используют красный, зеленый и синий цвета в своей палитре. Именно поэтому RGB является основной моделью, используемой веб-дизайнерами.

5. Адаптивный дизайн: «К чему может адаптироваться дизайн?» – спросите вы. К виду используемого устройства, ответим мы. С увеличением использования мобильных устройств адаптивный дизайн – дизайн, который позволяет сайтам идеально вписываться в экраны любых устройств, – стал ключевым моментом в создании сайтов. Если вы задумались об адаптации вашего сайта под мобильные устройства (а об этом стоит задуматься), то передовое решение Wix для создания мобильной версии сайта вам обязательно пригодится. И да, это абсолютно бесплатно.

6. Плоский дизайн: философия дизайна, в основе которой лежит простота и функциональность. Говоря буквально, у элементов, созданных по принципу «плоского дизайна», нет объема. В нем отсутствуют техники, направленные на придание глубины и объемности: нет градиентов, теней, текстур и бликов, которые придают объекту реалистичный вид. Вместо придания объема, плоский дизайн обращается к основам графики – ярким цветам, простым формам, кнопкам и иконкам.

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

8. Метро-интерфейс, также известный как «дизайнерский язык Microsoft», был разработан Microsoft и сегодня используется во многих продуктах компании. Вдохновением для его создания послужили дорожные знаки, и его задача – быть таким же простым и ясным. Главное здесь – думать о дизайне как о рабочем пространстве, а не как о произведении искусства.

9. Плитка: этот структурный стиль стал популярен благодаря успеху сети Pinterest. В его основе лежит структура, состоящая из колонн, и параллельная, но не симметричная подача материала в виде «плиток». В результате получаются разноразмерные сегменты, которые при этом сохраняют аккуратный, организованный вид. При помощи редактора Wix вы можете легко применить эту красивую структуру на вашем сайте. Просто нажмите Добавить > Галерея > Masonry.

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

11. Длинная прокрутка: может это и звучит как название средневековой пытки, в действительности длинная прокрутка – это один из самых последних трендов в мире веб-дизайна. Термин в общем-то говорит сам за себя и означает структуру, где длинные страницы требуют постоянной прокрутки вниз. У такого типа дизайна есть много преимуществ, узнать о которых вы можете здесь.

12. Cайт-визитка (или одностраничный сайт): большинство пользователей интернета уже привыкли к тому, что сайт состоит из нескольких страниц, между которыми можно легко перемещаться при помощи навигационного меню. Одностраничный сайт имеет буквально одну страницу. Существует много причин, по которым владелец сайта может предпочесть одностраничный дизайн многостраничному. Однако разработка одностраничного дизайна требует немало планирования и продумывания, чтобы добиться эффективного распределения контента. К счастью, в Wix можно найти много одностраничных шаблонов, где все было продуманно заранее.

13. Негативное пространство, или «белые пятна»: термин, обозначающий свободное пространство, образуемое между элементами на странице, внутри или вокруг них. «Белые пятна» НЕ используются как отдельный элемент, а лишь служат обрамлением в структуре сайта. Они хороши не только с эстетической точки зрения, но и помогают в улучшении удобства пользования сайтом.

14. Текстуры: текстуры, чаще всего используемые в виде фона, представляют собой повторяющиеся рисунки, помогающие создать определенную атмосферу на сайте. Например, фон из красного кирпича на сайте пиццерии. Текстуры могут быть едва заметными или броскими, в зависимости от тематики и стиля вашего сайта.

15. Макет: макеты – это полноразмерные модели, демонстрирующие, как в итоге будет выглядеть дизайн сайта. Для дизайнеров макеты практически идентичны готовым сайтам с той только разницей, что они не функционируют. Используя Wix, вы избавите себя от необходимости готовить макет дизайна перед началом работы над самим сайтом, но вы все равно можете сделать это при желании, воспользовавшись черновым сайтом в вашем аккаунте. Как только вы достигнете желаемого результата, вы сможете скопировать черновик и добавить необходимый функционал.

ru.wix.com

Основные понятия веб-дизайна

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

 

ЛИРИЧЕСКОЕ ОТСТУПЛЕНИЕ. "ФОРУМ"

   -  Сделайте мне, пожалуйста, форум! - убедительно просил нас новоиспечённый владелец небольшого бизнес-сайта очень узкоспециализированной тематики.    На все наши вопросы о том, зачем ему форум на таком сайте, что там будут обсуждать, а, главное, кто займётся администрацией и поддержкой, мы получали лишь короткий ответ: "Сделайте!" Желание клиента - закон. Недоумённо пожимая плечами, мы почти приступили к выполнению поставленной задачи, как, вдруг...    -  Простите, а не могли бы Вы точно пояснить и описать, что Вы имеете ввиду под словом ФОРУМ? - спросил кто-то из нас.    -  Конечно, - ответил клиент, - это "место", где человек может оставить свой комментарий о сайте и прочесть комментарии других посетителей.    -  И всё? - подозрительно прищурились мы.    -  Да! - честно ответил Заказчик.    -  Так, вы же говорите о Гостевой книге! - начало "доходить" до нас.    -  Я в этом не разбираюсь, - лаконично заметил клиент, - сделайте, как считаете нужным, но назовите Форум...    -  Хорошо... - облегчённо вздохнули мы...  

СЛОВА, БЕЗ КОТОРЫХ, НУ, НИКАК НЕ ОБОЙТИСЬ!

   Мы очень надеемся, что после доброй улыбки, которая возникла у Вас после прочтения предыдущего диалога Вы соберётесь с мыслями и быстро разберётесь с основными понятиями, без которых нам будет сложновато прийти к удовлетворяющему обе стороны результату. Запаситесь терпением, мы объясняем очень доступно и понятно. Людям, знакомым с терминологией и чувствующих себя уверенно за компьютером и в интернете, дальше читать не следует.

ОПЕРАЦИОННАЯ СИСТЕМА (ОС): Windows, Linux, Mac OSX, Chrome OS и т.д. называются операционными системами. Они включают в себя все программы, которые вы устанавливаете, все инструменты, с которыми работаете и являются необходимой "прослойкой" между железом компьютера и вашими руками.

БРАУЗЕР: Программа, которая позволяет Вам работать в интернете. То окошко, в котором открываются странички, и в котором Вы вводите адреса нужных сайтов. На данный момент самыми популярными и наиболее используемыми являются Internet Explorer, Google Chrome, Mozilla Firefox, Opera и Apple Safari.

ВЕРСИЯ ПРОГРАММЫ: Все программы, включая сами Операционные Системы имеют свои версии. Необходимо следить за тем, чтобы и Браузеры и все их компоненты и сама ОС были своевременно обновлены. Как бы мы все не хотели, чтобы всё одинаково открывалось у всех и всегда независимо ни от чего, всё равно существуют ограничения. По мере развития компьютерной техники и в интернете, в том числе, приходят новые стандарты на замену старым. Поэтому некоторые современные и важные функции могут не поддерживаться старыми версиями программ или систем.

ПЛАГИН: Надстройка к какой-то программе, наделяющая её дополнительными функциями. Устанавливается отдельно и только при наличии "основной" программы, то есть сам по себе не работает и не существует.

САЙТ, СТРАНИЧКА: Всем нам знакомый сайт внутренне представляет собой всего-навсего текстовый код, который "объясняет" Вашему браузеру в каком порядке расставить "сваленные в кучу" картинки, тексты и другие элементы, чтобы пользователь видел в окне заранее задуманную идею, а так же, чтобы у всех, в любых браузерах и системах конечный результат выглядел одинаково.

КОПИРАЙТ: Права, которыми обладает владелец сайта. Распространяются на всё содержимое сайта, включая картинки, тексты и любые другие материалы. При отсутствии дополнительной информации вся ответственность лежит на владельце доменного имени! То есть, если у вас возникают какие-то проблемы с законом из-за содержания Вашего ресурса, а имя ресурса принадлежит и оформлено на Вас, Вы уже не сможете сказать: "А делала мне сайт такая-то фирма, я в этом не разбираюсь!". Следите за содержанием самостоятельно! Ответственность будет лежать только на Вас, так как разработчик получает деньги за работу, а не за достоверность и правильность материалов.

БАННЕР: Определённый элемент, расположенный на сайте, при нажатии на который, в Вашем браузере открывается другая страничка. Чаще всего используется для рекламы одних сайтов на просторах других.

КОНТЕНТ: Внутреннее содержание интернет-страниц, материалы, текст, видео, картинки, музыка. В общем, всё, что имеется. 

ФЛЭШ (FLASH): Плагин для просмотра страниц и материалов, содержащих контент, созданный с помощью технологии Flash (с англ. вспышка). Чаще всего это видео, красивые анимированные баннеры, анимационные мультики, красивые анимационные элементы сайтов и маленькие игры, которые работают прямо внутри браузера. Без установки данного плагина они не отображаются и запирают, либо ограничивают изначально задуманную функциональность сайта.

ДОМЕН: Имя сайта.

ЗОНА ДОМЕНА: последнее слово после точки в названии сайта. Может обозначать, как принадлежность к определённой стране (de, ru, by), так и просто некую международную аббривиатуру (info, com, net).

ХОСТИНГ: Место на сервере куда Ваш сайт закачивается и где хранится, чтобы быть доступным 24 часа в сутки, независимо от выключения какого-либо компьютера.

ТРАФФИК: Сумма количества мегабайт в определённый момент времени, которая уходит на то, чтобы люди просматривали материалы Вашего сайта (даже текст занимает, пускай очень небольшое, но пространство на диске сервера). В современных предложениях часто не учитывается, так как является неограниченным. Но на него всегда стоит обратить внимание при покупке хостинга. Так как размещённая на Вашем сайте песня в формате mp3, размером 3 мегабайта, очень быстро превратится в 3 гигабайта, после тысячи прослушавших её посетителей.

ФРЭЙМ: Выделенная область на одном сайте, в которой отображается часть другого сайта. Это может быть реализовано абсолютно незаметно для посетителя. А,  даже, наоборот, использоваться для того, чтобы гость мог пользоваться функциями одной странички, фактически, оставаясь на другой.

ЦЭЭМЭС (CMS): Система внутреннего управления сайтом. С начала 2000-ых реализована для того, чтобы люди, независимо от одного компьютера или каких-либо специальных программ, могли управлять внутренним содержимым своей странички. Например, выставлять новости, публиковать статьи и фотографии, либо же отключать и включать весь сайт из любого браузера при наличии доступа в интернет. Наиболее распространёнными являются Joomla, Drupal, Wordpress, phpBB3, Bitrix, Dolphin, Sozial Engine.

АККАУНТ: Учредительная запись пользователя и все её настройки и функции. Ваше личное "местечко" внутри большого сайта, как например, Одноклассники.ру. Для наличия требует обязательную регистрацию.

 

РАЗДЕЛЫ САЙТА

ГЛАВНАЯ СТРАНИЦА: Страничка, которая открывается сразу, после того, как пользователь вводит адрес сайта в строке состояния.

БЛОГ: Страничка, на которой владелец может оставлять различные новости и статьи, доступная для редактирования только ему, а так же для комментариев всем желающим. Главное отличие от обыкновенных новостей и статей именно в возможности обсудить непосредственно каждый материал сразу же после его прочтения на той же самой странице. Может быть доступна, как только для зарегестрированных пользователей, так и для любых других.

ГОСТЕВАЯ КНИГА: Возможность для любого пользователя оставить свой комментарий на выделенной для этого страничке без регистрации. Комментарии не разделяются по темам и идут друг за другом по мере появления.

ФОРУМ: Сложная система общения и обменивания информацией, имеющая несколько уровней доступа и настройки пользователей. Каждый пользователь имеет свой собственный аккаунт, имеются администраторы, модераторы и суперадминистраторы. Все темы чётко разделены на разделы, у каждого из них может быть свой администратор. Часто, один только Форум может представлять из себя сайт полностью и должен быть установлен на мощный сервер, выдерживающий нагрузку одновременного доступа многих пользователей.

Данная статья будет дополняться и совершенствоваться по мере возникновения новых вопросов со стороны наших уважаемых клиентов. Мы желаем Вам взаимопонимания!

 

interseite.de

1 Принципы web-дизайна

Веб-дизайн (web page design) – это процесс проектирования, планирования, моделирования и реализации доставки электронного содержимого через сеть Веб с использованием технологий (на основе языков разметки), подходящих для интерпретации и визуализации веб-браузером или другим графическим веб-интерфейсом пользователя.

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

Основными аспектами веб-дизайна (в первую очередь для коммерческих веб-сайтов) являются следующие:

  • Содержимое. Информационное наполнение должно быть релевантным тематике сайта и ориентированным на целевую аудиторию сайта.

  • Удобство в использовании (usability). Сайт должен иметь дружественный пользовательский интерфейс с простой и надежной навигацией.

  • Внешний вид. Графика и текст должны быть выполнены в одном стиле и согласованы на всех страницах сайта. Стиль оформления должен демонстрировать профессионализм, привлекательность и релевантность.

  • Видимость. Сайт должен легко находиться с помощью большинства поисковых систем и рекламных площадок.

По-сути, веб-сайт - это информационная система, которая содержит две основные компоненты:

  • Компоненту представления (front-end). Видимое содержимое (разметка страниц, графика, аудио и текст).

  • Компоненту реализации (back-end). Связана с организацией и эффективной реализацией исходных кодов. Включает в себя неотображаемые сценарии, серверные компоненты, являющиеся основой для компоненты представления.

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

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

Разработка веб-сайта включает в себя следующие этапы:

  • Дизайн главной и типовых страниц сайта. (выполняетя обычно в графическом редакторе).

  • HTML-кодирование, в результате которого создаётся код, который можно просматривать с помощью браузера.

  • Программирование сайта. Может осуществляться как "с чистого листа", так и с помощью специального высокоуровнего пакета - системы управления сайтом (CMS).

  • Размещение сайта в Веб, наполнение контентом и публикация.

  • Оптимизация веб-сайта с целью повышения его видимости в Веб.

  • Сдача сайта заказчику.

Для дизайна веб-сайта и разработки веб-приложений для него имеет широкий спектр инструментальных средств. Компания Майкрософт имеет уже давнюю традицию создания WYSIWYG-инструментов такого рода. Среди таких инструментов можно назвать, в частности Microsoft Visual Studio. NET и Microsoft Expression Web.

Дизайн сайта (веб-дизайн) это не просто его художественное оформление. Создание качественного дизайна должно учитывать несколько обязательных аспектов. Вот основные из них:

1. Веб-дизайн должен ориентироваться на целевую аудиторию. Если достаточно большая часть аудитории, к примеру, те люди которые подключаются к интернет по телефонной линии, в оформлении не должно быть больших, или как говорят специалисты, "тяжелых" картинок. Если среди аудитория состоит из специалистов-компьютерщиков, позаботьтесь о том, чтобы созданный сайт был виден абсолютно под всеми браузерами. А если аудитория из тех, кто наверняка оставлял настройку машины "по умолчанию" можно не стесняться сделать какой-нибудь нужный, с функциональной точки зрения, элемент, который не будет работать в Netscape или Galion и т.п. - это почувствует на себе менее 1% посетителей. Для сайта развлекательной тематики движущиеся элементы, мерцание и яркость красок будут, возможно, в самый раз, а на деловом или информационном ресурсе такой веб-дизайн будет совершенно не уместен - раздражать и отвлекать внимание.

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

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

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

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

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

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

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

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

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

Четко сфокусированная ориентация всех элементов дизайна корпоративного сайта на потребителя, на требуемую Вам целевую аудиторию – один из основных факторов успеха.

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

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

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

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

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

Элементы дизайна

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

Элементами дизайна являются:

  • Точка

  • Линия

  • Форма, фигура

  • Движение

  • Цвет

  • Узор

  • Текстура

  • Пространство

  • Текст, шрифт

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

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

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

studfiles.net

Оформление страниц, уникальный дизайн сайта, процесс отрисовки дизайна

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

Веб-дизайн - понятие субъективное или объективное?

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

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

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

Как же происходит оформление страниц сайта?

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

Макет - главный результат труда веб-дизайнера

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

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

Подготовка нарезанного макета к верстке

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

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

Качественный дизайн-макет - счастливый заказчик, довольные посетители

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

Узнать подробнее о предлагаемых нами услугах по изменению дизайна Вы также сможете в нашем разделе о редизайне. Там же есть и видео о создании макета сайта.

⇐ Создание интернет-магазинов под ключ Яндекс.Острова для Вашего сайта ⇒

a-site.by

Основные принципы веб-дизайна и их характеристики | DesigNonstop

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

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

  

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

  

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

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

  

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

  

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

  

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

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

  

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

  

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

  

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

  

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

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

 

 

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

  

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

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

  

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

  

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

Удобство восприятияВосприятие своего рода тропинка, которой пользователь придерживается при визуальном ознакомлении с элементами дизайна. Оно главным образом зависит от того, на чем дизайнер сделал акцент и в какой мере он обеспечил контрастирование элементов между собой. Фактически удобство восприятия всецело будет зависеть от того, как дизайнер скомпоновал все элементы страницы.

  

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

  

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

  

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

  

По материалам книги Патрика Макнейла «Веб-дизайн. Идеи. Секреты. Советы«.

www.designonstop.com

1.1 Понятие веб-дизайна. Дизайн-проект web-сайта факультета архитектуры и дизайна

Похожие главы из других работ:

Internet Explorer - создание Web-страниц

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

Выбор визуальных редакторов HTML-кода очень велик, однако самые распространенные - Microsoft FrontPage 98/2000/XP и Macromedia DreamWeaver 6.0 MMX. Второй из них более профессиональный и сложный. Microsoft FrontPage своим интерфейсом похож на Word...

WEB-сайт: структура и способы создания

3.1 Разработка дизайна

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

Визуальный HTML-редактор DreamWeaver. Разработка Web-дизайна

1. Теория Web-дизайна

...

Моделирование USB гаджета в программе 3Ds MAX 2009

2.2 Разработка дизайна

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

Проектирование и реализация HTML документа

Шаблон дизайна

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

Разработка web-сайта для организации по продаже недвижимости

2.4 Разработка дизайна

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

Разработка web-сайта для физиотерапевтического предприятия

2.4.1 Определение дизайна

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

Разработка web-сайта для физиотерапевтического предприятия

2.4.2 Разработка дизайна

Система Joomla предоставляется в комплекте с тремя стандартными шаблонами, а, подходящие для разработчика, не предоставляется трудности найти в сети Интернет, где шаблонов полное множество. В шаблон входят: - файл index.php...

Разработка web-сайта торгового предприятия (на примере ООО "Флагман")

2.4 Элементы дизайна

...

Разработка коммерческого сайта для ООО "000000-Тактик"

2.4.2 Шаблоны дизайна

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

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

3.2 Разработка дизайна

Макет сайта делается в графическом редакторе Adobe Photoshop CC 14 с применением десятипиксельной сетки и разбивается по слоям. В итоге, мы можем видеть такой макет титульной страницы: Рис...

Создание Web-сайта "All of the GPS-navigator"

2. Разработка дизайна

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

Создание Web-сайта компании, обслуживающей сектор рынка услуг: косметологический салон красоты

3.2 Разработка дизайна

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

Специализированные языки разметки документов (HTML)

2. Технология web-дизайна

...

Язык Scala

Истоки дизайна

На дизайн Scala оказали влияние многие языки и исследовательские работы. Следующее перечисление включает часть работ. Scala впитала значительное число концепций и синтаксических соглашений Java и C#...

prog.bobrodobro.ru

Лекция №1 Основы Интернет. Основные понятия Web-дизайна Виды сайтов и их особенности. Планирование сайта

1. Виды сайтов и их особенности.

2. Планирование сайта.

3. Содержание.

4. Целевая аудитория.

1. Введение

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

2. Цель, основные задачи и содержание дисциплины.

Курс «Web-дизайн» относится к дисциплинам самостоятельного выбора ВУЗа; базируется на знании курса «Основы программирования» и используется в курсах «Организация компьютерных сетей», «Программирование Интернет» и в рамках магистерской подготовки.

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

Интернет — это глобальная компьютерная сеть, объединяющая сотни миллионов компьютеров в общее информационное пространство. Интернет представляет свою инфраструктуру для прикладных сервисов различного назначения, самым популярным из которых является Всемирная Паутина – World Wide Web (www).

World Wide Web (www, web, рус.: веб, Всемирная Паутина) — распределенная информационная система, предоставляющая доступ к гипертекстовым документам по протоколу HTTP.

WWW — сетевая технология прикладного уровня стека TCP/IP, построенная на клиент-серверной архитектуре и использующая инфраструктуру Интернет для взаимодействия между сервером и клиентом (рис. 1).

INCLUDEPICTURE "http://www.intuit.ru/EDI/15_08_14_1/1408051090-15574/tutorial/646/objects/5/files/04_09.gif" \* MERGEFORMAT

Рисунок 1 – Архитектура сервиса WWW

Серверы www (веб-серверы) — это хранилища гипертекстовой (в общем случае) информации, управляемые специальным программным обеспечением.

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

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

В основе www — взаимодействие между веб-сервером и браузерами по протоколу HTTP (HyperText Transfer Protocol). Веб-сервер — это программа, запущенная на сетевом компьютере и ожидающая клиентские запросы по протоколу HTTP. Браузер может обратиться к веб-серверу по доменному имени или по ip-адресу, передавая в запросе идентификатор требуемого ресурса. Получив запрос от клиента, сервер находит соответствующий ресурс на локальном устройстве хранения и отправляет его как ответ. Браузер принимает ответ и обрабатывает его соответствующим образом, в зависимости от типа ресурса (отображает гипертекст, показывает изображения, сохраняет полученные файлы и т.п.).

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

Поделитесь с Вашими друзьями:

rekref.ru