Первый в мире сайт info.cern.chпоявился в 1990 году, далее сайты развивались, и появилась необходимость оформления сайтов, с целью приятного визуального восприятия его пользователем.
В данной работе мы постараемся изучить основные понятия компьютерной графики, дизайна web-страниц а также основы построения композиции и подбора цвета. Распишем достоинства и недостатки как растровой, так и векторной графики, так же узнаем с каким программным обеспечением лучше всего работать для создания графического оформления, рассмотрим цветовые модели, укажем плюсы и минусы каждой модели. Опишем форматы графических изображений, которые используются в web-дизайне.
web дизайн компьютерный графика
Веб-дизайн (от англ. webdesign) -- это визуальное оформление веб-страниц. Он играет такую же роль для сайта, как полиграфический дизайн и вёрстка для бумажного издания. Часто «веб-дизайном» называют веб-разработку, то есть дело создания сайта вообще: проектирование структуры, навигации и иногда даже движков сайта.
С первого взгляда может показаться, что ответить на этот вопрос совсем несложно. Первое, что приходит в голову - это графическое оформление. Однако сегодня в это понятие вкладывается гораздо большее по широте охвата значение. Возможно, это не совсем верно, но на сегодняшний день, говоря «веб-дизайн», подразумевают не только профессиональное графическое оформление сайта.
В этом понятии собрано несколько вполне самостоятельных направлений, которые и складываются в итоге в то, что мы называем «веб-дизайн». Это и графический интерфейс сайта, который мы видим сразу после того, как страница загрузилась в браузере, и проектирование системы навигации, и контент-проект сайта, то есть - его информационное наполнение, которое также должно учитываться при создании нового сайта. Дружелюбность и понятность интерфейса, который мы видим на экране и многое другое.
Фактически, собственно графика, внешний вид и оформление сайта не являются главным моментом и отправной точкой в проектировании Интернет-страницы.
Веб-дизайн сегодня превратился в самостоятельное явление просто потому, что для занятия дизайном в Интернет недостаточно одного знания программ, предназначенных для работы с графикой и художественных способностей. Конечно, собственно программированием, особенно решением сложных задач, занимаются профессиональные программисты. Но и работа дизайнера невозможна без чёткого представления технологий Интернет. Дизайнер должен чётко представлять, какими путями можно решить поставленную задачу или воплотить в действующую модель свои идеи, что влечёт за собой необходимость разбираться и в языках программирования, и в некоторых тонкостях серверных технологий. Он должен представлять себе, каким образом осуществляется передача данных в сети, как и в каком виде его разработки достигнут своего конечного пользователя - посетителя разрабатываемого сайта.
В конечном итоге, простая с первого взгляда задача «рисования» обрастает огромным количеством дополнительных требований, в основном - технического характера, имеющими с художественной стороной мало общего. В итоге можно сказать, что веб-дизайн - это именно и есть создание сайта. Сочетание художественных способностей и широких знаний современных компьютерных технологий позволяют создавать сайты, которые запоминаются и заставляют посетителя возвращаться на них вновь.
Целью большинства веб- дизайнеров является создание привлекательных, легкодоступных и функциональных сайтов, которые могут воздействовать на посетителя с целью выполнения какого-то действия. Подобный веб-проект требует хорошего графического дизайна сайта, простой и интуитивно понятной навигации по сайту, логически выверенную структуру сайта и надежное копирование. Хороший веб-дизайн сайта должен представлять собой, сочетание здравого смысла и хорошего планирования. Сайт должен быть привлекательным и простым в использовании, и самое главное предоставлять пользователю информацию или услуги, которые его интересуют.
Человек, который просмотрел много сайтов в интернете с различного вида версткой, структурой и оформлением, после поверхностного изучения принципов работы в графических редакторах, как правило, вначале приходит к ошибочному мнению, что веб дизайн — это не что иное, как отображение на страницах сайтов личного вкуса. Кажется, что создать дизайн — дело несложное, и достаточно лишь освоить несколько графических редакторов для получения не пыльной и творческой профессии, приносящей хороший доход. К сожалению, этому заблуждению подвержены многие новички. Эта профессия не является легкой и перспективной заменой любой другой профессии. В этом деле не так все просто.
В самом понятии слова «дизайн » заключено определение, что создавать дизайн, это значит заниматься, прежде всего, художественным конструированием. Не смотря на большую долю творчества, эта занятие подвластно определенным строгим законам и правилам, по сути, это проектирование.
Дизайн — серьезная сфера деятельности, имеющая несколько областей: графический дизайн, рекламный дизайн, промышленный и т.д. Веб дизайн считается одним из видов дизайна графического. Поэтому, если поставлена цель научится качественно оформлять страницы, то обязательно нужно вначале изучить графический дизайн.
Если вы серьезно хотите стать профи в веб дизайне, то предварительно обязательно изучить законы и основы графического дизайна. Настоящих профи, теоретически и практически освоивших графику до мельчайших деталей среди веб дизайнеров встретить сложно. Реально, многие дизайнеры, которые работают в студиях, выполняют сравнительно низкобюджетные работы, поэтому действительно сложных графических элементов в таких работах нет.
Сейчас в интернете уже доступно на фотостоках и фотобанках просто громадное количество заготовленных изображений и мелких элементов, а вся работа подобных дизайнеров заключается в грамотной компоновке этих составляющих, подгонке готовых изображений и лого через редакторы. Это связано с тем, что в русскоязычном сегменте интернета сейчас почти нет заказчиков с бюджетами, например в 1000$ на один только дизайн, поэтому требования чаще всего относительно невысоки. Как пример, использовал дизайнер заготовки из интернета, подогнал под просьбы заказчика, получил оплату, например 100$, и все это без претензий на большую творческую работу. Однако, если ставится цель действительно выполнять более серьезные работы и за гораздо большие деньги, то для этого нужно пройти серьезную учебу , а свои работы продавать куда-то за границу, например заказчикам из Европы или США.
В российских художественных ВУЗах графический дизайн изучают на протяжении всего обучения — 5-6 лет. При устройстве в ВУЗ уточните про наличие в курсе обучения предмета веб дизайн. Однако главное понимать, что специфический ВУЗ — это не единственный метод обучения дизайну. Конечно, диплом престижного ВУЗа может иметь значение при приеме на работу, но большее значение может иметь собственное портфолио работ. Поэтому кроме обучения стоит уделить внимание созданию своего портфолио.
Кроме обучения в ВУЗах существуют специальные курсы , однако без определенных базовых знаний, толку от них может не быть.
Самообразование — еще один способ научится веб дизайну. Но без грамотного руководителя это крайне сложно. Это длительный путь экспериментов и ошибок на собственных работах и сайтах. Пойдя эти методом обучения нужно смотреть, как делают профи, пытаться рисовать сайты для своих знакомых, участвовать в разных конкурсах. Такой путь крайне сложен, так как чисто статистически небольшое число людей имеет необходимую усидчивость, выдержку, наблюдательность и обучаемость для подобного самообразования.
Обучившись многим навыкам, стоит попробовать устроится дизайнером , даже на небольшую ставку, ради практического опыта.
Это направление имеет много способов применения: разработка шрифтов, создание наружной или полиграфической рекламы, книжный дизайн, фирстиль и т.п. Графический дизайн — востребованная область, и разные работы для разных целей создаются по тем же законам и принципам. Приступив к изучению графического дизайна, вы постигнете знания колористики, типографики, пространства, формообразования и т.п. На изучение всего нужен не один год.
Кроме теории обязательно доскональное изучение основных графических редакторов и графических устройств.
Для создания разных частей дизайна нужны разные инструменты. Например, при создании архитектуры сайта, создания структуры, можно использовать и простой бумажный листок с карандашом, а для создания дизайна может хватить и фотошопа, что явно недостаточно для более сложных элементов.
Главные отличия заключаются в технических моментах. Например, полиграфист при создании наружной рекламы не разрабатывает выставочный стенд, так как не знает особенностей данного направления. А веб-дизайнер не создаст высокого качества полиграфическую продукцию, так как не знаком с основами печатных процессов. Но основа у этих областей общая.
Главной задачей веб-дизайнера является проектирование пользовательского интерфейса с максимальным удобством для пользователя при просмотре сайта. Кроме того, создается рекламный продукт под определенную задачу.
Для создания удобного рекламного продукта должно быть тонкое понимание принципов и механизмов работы в интернете, уверенное владение компьютером. К примеру, существуют разные разрешения монитора, после дизайнера работу над сайтом ведут оптимизаторы, верстальщики и программисты. Веб дизайнер в своей работе обязан все это учитывать, а значит планировать, учитывая дальнейшую работу над сайтом и иметь общее представление о верстке, оптимизации и программировании.
Именно поэтому профессия веб-дизайнера не так проста, как кажется на первый взгляд.
Всем известно, что графическое оформление интернет-ресурса, играет огромную роль в достижении успеха и популярности. Каждодневный рост сайтов одной тематики напрямую связан с борьбой между ними за целевую аудиторию. Главной задачей при разработке сайта, это грамотное и интересное оформление дизайна. Именно понятный, увлекательный дизайн позволит выделиться среди других и привлечь внимание посетителей сайта.
Так, что же такое Web-дизайн? Web-дизайн - это область дизайна, связанная с web-разработкой, графическим оформлением структуры сайта и проектированием пользовательских веб-интерфейсов. Другими словами, web-дизайн представляет собой логическую структуру web-страниц, с удобной и яркой подачей информацией, а также художественным оформлением интернет-ресурса. Функция, что несет в себе сайт, это донести нужную информацию до различной аудитории. А правильный дизайн сайта, заменяет нам своего рода средства массовой информации, преимущества которого известны многим. Ведь именно интернет-ресурс не загнал в рамки времени и доступа, как в этом ограничены телепередачи или газеты, которым отведено определенное время или размер колонки. И напротив web-сайт доступен из любой точки планеты, в любое нужное время, где есть доступ в Интернет.
При создании сайта, мы должны обозначить задачи, которые могут вставь перед разработчиком:
Не менее важная задача по сравнению с уникальностью, является привлечение внимания как можно большего количества посетителей страницы. Дизайн сайта должен притягивать взгляд, акцентировать важные детали сайта, показать удобный интерфейс и привлечь художественными элементами.
4. Донесение необходимой информации. Дизайн страницы, не является просто красивой обложкой, наполненной яркими иллюстрациями и графическими элементами. Также стоит помнить, что донесение необходимой информации для пользователя сайта, является не менее важной задачей в сравнении свыше сказанными.
Выложенный на сайт контент, необходимо правильно скомпоновать и оформить, добавляя графики и изображения дополняющие информацию. Заходя на сайт, пользователь должен найти все интересующие его ответы на поставленные вопросы. Оригинальный дизайн и соответствие всем правилам оформления сайта, всегда подчеркнет важность содержимого.
Детальное рассмотрение процесса создания сайта, поможет нам точно знать, чем необходимо заняться на различным этапах разработки:
1. Техническое задание (ТЗ);
Осознавая поставленную цель, для которой создается Web-страница, зная объем сайта, его функциональность, задаются основные параметры визуального представления и структуры сайта. Данный этап заканчивается утверждением технического задания заказчиком.
2. Структурирование информации;
Этот этап несет в себе формы и организации содержимого сайта. Включает широкий ряд вопросов, от логической структуры Web-сайта, до выбора наиболее удобных форм подачи информации.
3. Графическое оформление;
В графическом редакторе формируются визуальные пространства сайта с помощью графических элементов в качестве украшения или навигации. Дизайн страницы представляет собой большой графический файл.
4. Верстка;
На данной стадии графическая картинка нарезается на отдельные элементы и с использованием формата HTML (Hyper Text Markup Language - язык разметки гипертекста).Язык трансформируется в код, который можно просматривать с помощью браузера.
5. Вебмастеринг.
На последнем этапе осуществляются действия, способствующие распространению и эффективной доставки сайта по сети. Здесь нам необходимо размещение на хостинге для дальнейшего пользования сайтом во всемирной паутине.
При создании сайта мы также не должны придерживаться еще одному руководству по дизайну страниц:
Каждый сайт который мы посещаем изо дня в день имеет свои особенности, характеристики и классификацию. Представленные перед нами сайты имеют бесконечный поток всевозможных категорий. На сегодняшний день можно выделить несколько актуальных типов интернет-ресурсов.
Работа над графическим Web-дизайном, представляет собой сложный вид деятельности. Ведь, только представьте, что перед разработчиком Web-сайта, стоит задача, упаковать огромный объем информации, в лаконичный, удобный для восприятия, единый интернет-ресурс.
HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. Дронов Владимир
Введение в современный Web-дизайн. Web 2.0. Создание Web-страниц
Всемирная паутина, WWW, Web-дизайн, Web-сайт, Web-страница - все знают, что это такое. Но что такое современная Всемирная паутина, современный Web- дизайн и современная Web-страница? Именно с ответов на все эти вопросы начнется данная книга. Далее мы немного по- говорим о принципах функционирования Интернета, Web-страницах и Web-сайтах, создадим нашу первую Web-страницу, начнем изучать язык HTML 5 и подберем программы, которые будем использовать в работе. Так сказать, с места в карьер…
Современный Web-дизайн. Концепция Web 2.0
Раньше доступ в Интернет можно было получить только с компьютеров. Потом в Интернет стали выходить с мобильных телефонов. Сейчас к Сети подключились мультимедийные плееры, устройства чтения электронных книг и телевизоры. А завтра - кто знает; может быть, мы будем выходить на Web-сайты с утюга или пылесоса…
"Я буду везде", - заявляет Интернет. - "Я стану вездесущим. Все готовьтесь к моему приходу!"
Что требуется от современного Web-сайта
Будем готовиться… Но что нам, как будущим Web-дизайнерам, для этого следует сделать? Соблюсти три несложных правила.
1. Строго соблюдать все интернет-стандарты.
2. Тщательно продумать наполнение Web-страниц.
3. Позаботиться о доступности Web-страниц.
Рассмотрим их подробнее.
Интернет грозится прийти на самые разные устройства, которые могут быть основаны на разных аппаратных и программных платформах, зачастую сильно отличающихся друг от друга. Так, персональные компьютеры построены на аппаратной платформе Intel и программной платформе Microsoft Windows (по крайней мере, большинство). Мобильный телефон автора основан на аппаратно-программной платформе Samsung. А на чем будет работать интернет-пылесос, сейчас не может сказать никто.
Одно объединяет все это аппаратно-программное многообразие - соответствие интернет-стандартам. Иначе устройства в лучшем случае будут отображать Web- страницы неправильно, в худшем - вообще не будут работать.
Из этого следует первое правило из перечисленных ранее - Web-дизайнеры при создании Web-страниц обязаны строго придерживаться современных интернет-стандартов, чтобы их творения одинаково (ну, или почти одинаково) отображались на всех устройствах.
Первое правило также требует отказа от устаревших и закрытых, фирменных интернет-технологий. С устаревшими технологиями все понятно: старье - не помощник новому. Закрытые же технологии неудобны тем, что зачастую контролируются единственной фирмой, которая единолично "заказывает музыку" и далеко не всегда прислушивается к мнению интернет-сообщества. К таким технологиям относятся, в частности, Adobe Flash и Microsoft ActiveX.
Открытыми интернет-стандартами, в том числе и Web-стандартами, занимается организация World Wide Web Consortium (Консорциум Всемирной паутины), или сокращенно W3C. Она разрабатывает стандарты, согласует их с требованиями участников рынка и публикует на своем Web-сайте http://www.w3.org . Все опубликованные там стандарты обязательны к применению.
Интернет когда-то начинался как сеть ученых, которым было нужно обмениваться результатами исследований. А что представляли собой эти результаты? В основ- ном, текст, возможно, с иллюстрациями. Ученые - публика в этом смысле невзыскательная, им вполне хватало скромных возможностей тогдашнего WWW.
Теперь же абсолютное большинство пользователей Интернета - обычные обыватели. Им мало простого текста с парой картинок, им подавай хорошо оформленный текст, музыку и видео. Они требовательнее первых обитателей Сети.
Отсюда вытекает второе правило - Web-дизайнеры должны заботиться о полноте и удобстве наполнения Web-страниц.
Структура Web-страниц должна быть хорошо продумана, чтобы посетитель сразу смог найти на них все, что ему нужно.
К важным материалам желательно привлечь внимание посетителя, а маловажные скрыть. В этом могут помочь динамические элементы: раскрывающиеся при щелчке мышью абзацы, гиперссылки, выделяющиеся при наведении курсора мыши, и пр.
Если Web-сайт посвящен музыке или видео, все это должно быть доступно для воспроизведения прямо на его Web-страницах, без загрузки.
Одним словом - все для удобства посетителя! (Пожалуй, это правило следовало бы поставить в начале списка…)
Интернет грозится прийти на самые разные устройства с различными характеристиками: быстродействием процессора, объемом памяти, разрешением экрана, скоростью доступа к Сети. Но все они должны обеспечивать единообразный вывод Web-страниц. Как этого достигнуть?
Вот и третье правило - Web-дизайнеры должны заботиться о доступности страниц.
Web-страницы следует делать как можно более компактными. Чем компактнее файл, тем быстрее он загружается по сети - это аксиома.
Web-страницы не должны быть чересчур сложными. Чем сложнее Web- страница, тем больше времени и системных ресурсов требует ее обработка и вы- вод.
Web-страницы не должны требовать для отображения никакого дополнительно- го программного обеспечения. В идеале для их вывода достаточно только Web- обозревателя.
Но как эти правила реализуются на практике? Давайте откроем какой-нибудь со- временный Web-сайт, например, принадлежащий организации W3C (рис. 1.1). Как мы помним, его можно найти по интернет-адресу http://www.w3.org .
Рис. 1.1. Главная Web-страница Web-сайта организации W3C
Рис. 1.1. Главная Web-страница Web-сайта организации W3C
Что же мы здесь видим?
Web-сайт создан с учетом всех современных интернет-стандартов. Он отображается во всех Web-обозревателях практически одинаково.
Web-сайт не использует ни устаревших, ни закрытых интернет-технологий.
Структура Web-страниц исключительно ясна - мы можем без проблем найти все, что нужно. Слева находится набор гиперссылок, ведущих на другие Web- страницы Web-сайта, посередине - список новостей и гиперссылки на избранные статьи, справа - гиперссылки на дополнительные материалы.
Web-страница прекрасно читается. Тонкий шрифт без засечек, спокойная серо- голубая цветовая гамма, тонкие рамочки со скругленными углами, минимум графики - ничто не бросается в глаза.
Есть даже видеоролик!
Web-страница быстро загружается и мгновенно выводится на экран.
Web-страница ничего не требует для своего вывода, кроме Web-обозревателя. Налицо и соблюдение стандартов, и наполнение, и доступность. Три из трех!
Именно такие Web-страницы мы и будем учиться создавать в данной книге.
Из книги Adobe InDesign CS3 автора Завгородний ВладимирСоздание шаблонов страниц Прежде всего, нам потребуется выбрать (указать) формат страницы, создать новый документ и хотя бы предварительно оформить мастер-страницы.Предположим, что наша книга будет формата 60 ? 90/16. Как мы знаем из первой части книги, без консультации в
Из книги Microsoft Windows SharePoint Services 3.0. Русская версия. Главы 9-16 автора Лондер ОльгаСоздание библиотеки вики-страниц Хотя на базе служб SharePoint можно создавать узлы, используя в качестве основы шаблон вики-узла, применение вики-технологии не ограничивается такими узлами. Вики-узлы можно использовать на любом узле группы, создав библиотеку вики-страниц.
Из книги Искусство оформления сайта. Практическое пособие автора Бердышев Сергей НиколаевичГлава 2. Веб-дизайн как технология
Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. автора Дронов ВладимирГЛАВА 1 Введение в современный Web-дизайн. Web 2.0. Создание Web-страниц Всемирная паутина, WWW, Web-дизайн, Web-сайт, Web-страница - все знают, что это такое. Но что такое современная Всемирная паутина, современный Web- дизайн и современная Web-страница? Именно с ответов на все эти вопросы
Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов автора Дронов Владимир Из книги XSLT автора Хольцнер Стивен Из книги Веб-Самоделкин. Как самому создать сайт быстро и профессионально автора Гладкий Алексей АнатольевичГЛАВА 16. Создание интерактивных Web-страниц В предыдущей главе мы изучили библиотеку Ext Core. От обилия объектов, свойств, методов и событий голова идет кругом… Как же применить все это богатство на практике?Этому будет целиком посвящена данная глава. Мы научимся создавать
Из книги Знакомьтесь, информационные технологии автора Воловник Аркадий АвральевичСовременный Web-дизайн. Концепция Web 2.0 Раньше доступ в Интернет можно было получить только с компьютеров. Потом в Интернет стали выходить с мобильных телефонов. Сейчас к Сети подключились мультимедийные плееры, устройства чтения электронных книг и телевизоры. А завтра -
Из книги Access 2002: Самоучитель автора Дубнов Павел ЮрьевичГЛАВА 10. Контейнерный Web-дизайн В предыдущей главе мы рассматривали атрибуты стиля CSS, задающие параметры абзацев и отображения. Их было совсем немного, и глава получилась небольшой.Теперь мы займемся Web-дизайном. Согласитесь - наши Web-странички, несмотря на созданное
Из книги Цифровой журнал «Компьютерра» № 195 автора Журнал «Компьютерра»ГЛАВА 16. Создание интерактивных Web-страниц В предыдущей главе мы изучили библиотеку Ext Core. От обилия объектов, свойств, методов и событий голова идет кругом… Как же применить все это богатство на практике?Этому будет целиком посвящена данная глава. Мы научимся
Из книги автораСоздание последовательностей страниц:
Создание номеров страниц:
Создание, открытие и сохранение веб-страниц С помощью программы вы можете создавать новые веб-страницы, а также редактировать созданные ранее.Чтобы создать новую веб-страницу, нужно выполнить команду главного меню Файл?
Из книги автораГлава 1 Современный мир. Эра информационных технологий Одним из парадоксов развития человечества является то, что на протяжении всего своего развития человек использовал, накапливал, передавал информацию, не понимая и даже не задумываясь о ней.Реальная цивилизация
Из книги автораГлава 6 Создание страниц доступа к данным Страница доступа к данным – файл особого типа, предназначенный для просмотра и работы через Internet или intranet с данными, хранящимися в базах данных Microsoft Access или Microsoft SQL Server. Страница доступа к данным загружается в базу данных Access 2002
М.: СОЛОН-ПРЕСС, 2008. - 192 с. (Серия "Библиотека студента")
Пособие может использоваться для стационарного и дистанционного обучения при изучении следующих дисциплин: Программирование на языке высокого уровня, Человеко-машинное взаимодействие, Объектно-ориентированное программирование.
Основное внимание в пособии уделено языку программирования HTML, технологии CSS, языку программирования JavaScript, графическому редактору Adobe Photoshop, технологии мультимедиа.
К учебному пособию прилагается электронный учебник
на компакт-диске, который содержит теоретический материал, примеры реализации
различных задач (учебный сайт) и практическую часть (задания, контрольные
вопросы и методические указания на выполнение лабораторных работ). Кроме того,
на диске находится тестирующая программа, с помощью которой преподаватель может
быстро и объективно оценить степень усвоения материала.
Любопытной особенностью электронного учебника является то, что каждый раздел
сопровождается спокойной инструментальной музыкой, создающей хорошее настроение.
Данное учебное пособие предназначено для студентов
специальности 220400 (230105) - Программное обеспечение вычислительной техники и
автоматизированных систем. Наличие электронного учебника позволяет педагогам
просто решить проблему тиражирования методических указаний.
Книга незаменима для всех начинающих изучать Web-дизайн.
Формат: djvu
Размер: 5 ,7 Мб
Скачать: yandex.disk
СОДЕРЖАНИЕ
