Проект "Как стать Web - дизайнером?"

Слайд 1

Выполнили : ученики 8 класса Белан Алексей, Кирюхин Игорь, Конопелько Давид, Саитов Махмад , Черепанов Дмитрий Руководитель : Кудинова Л.Г., учитель математики и информатики 2021 год Проект «Как стать WEB – дизайнером ? »

Слайд 2

Аннотация проекта В наше время количество Интернет - пользователей стремительно растет, а стоимость доступа в Интернет постоянно уменьшается. Не секрет, что уже сейчас абсолютному большинству жителей Москвы, Санкт-Петербурга и других крупных городов проще найти информацию в сети, нежели вызванивать телефонные справочные или штудировать газеты объявлений. Не за горами время, когда подобное отношение к получению информации будет преобладать во всех регионах России. В этих условиях, естественно, появляется множество сайтов и их число с каждым днем все больше и больше растет. Web -дизайнер. Кто это? Профессия Web -дизайнера. Давайте разберёмся!

Слайд 3

Слово «дизайн» в русском языке появилось относительно недавно. Пришло оно из итальянского языка и в переводе имеет множество значений. “ Disegno ” — это замысел, план, намерение, цель, чертеж, эскиз, набросок, рисунок, узор, модель, шаблон, лежащая в основе схема, композиция. В связи с бурным развитием современных технологий, понятие дизайна приобрело новый, более широкий смысл и теперь обозначает не только какой-то отдельный предмет, а является целым направлением, применимым ко всем областям современной деятельности человека. Дизайнер должен обладать знаниями во многих предметных областях и умело применять их на практике, проецируя в творческом процессе создание образа. С уверенностью можно сказать, что дизайн — это современное искусство художественного конструирования, разработка образцов рационального построения предметной среды. История профессии

Слайд 4

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

Слайд 5

Главная задача web-дизайнера — оформить интернет-проект так, чтобы как можно больше пользователей им заинтересовалось. Профессия Web — дизайнера включает в себя два аспекта: умение пользоваться специальными компьютерными программами и дизайнерскую деятельность . Успешный начинающий дизайнер в будущем может претендовать на должности: web -программист, баннер- мейкер , менеджер проекта.

Слайд 6

Специфическая задача web-дизайнера заключается в том, чтобы уметь разработать стилевое оформление проекта с учетом специфики Интернета. То есть, кроме того, чтобы оформление проекта было просто стильным, оно должно соответствовать стандартным требованиям, предъявляемым cетью : графические элементы (логотипы, баннеры, рисунки и т.д.) должны быть оптимизированы, при выборе цвета и шрифта необходимо учитывать тот факт, что пользователь увидит графическое воплощение проекта на мониторе, а не на бумаге. Web -дизайнер отвечает за то, как выглядит и воспринимается Интернет-сайт. Он придумывает логотипы, баннеры и другие элементы графики, продумывает навигацию по сайту, определяет, где следует разместить текст. Дизайнеру необходимо не только создавать интересный сайт, но и учитывать время его загрузки. Создание интерактивных web-сайтов — высший пилотаж web-дизайна. Кроме сайтов, веб-дизайнеры разрабатывают баннеры, интернет-открытки, электронные презентации.

Слайд 7

Основные функции web- дизайнера : - оформление сайтов; -создание идеи и разработка макета сервера; -создание стиля исполнения макета сервера; -обеспечение наилучшего восприятия web -документов на экране монитора с учетом времени загрузки документов, пропускной способности канала передачи данных, размера графических файлов документа, качества цветовой палитры; -определение правил компоновки web -страниц, выбор формата, фона, количества и качества элементов оформления; -создание стилевых образцов web -документов; -работа с узлом Internet , Интернет; -написание программной части и кода страницы; -управление гипертекстовыми документами; проведение информационной политики фирмы в World Wide Web (WWW); -установка и работа со средствами подготовки и проверки web -страниц; -создание интерактивных web -приложений; -обновление , модернизация web -документа; -создание и работа с приложениями для статической обработки.

Слайд 8

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

Слайд 9

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

Слайд 10

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

Слайд 11

Основная функция Интернет-сайта заключается в том, чтобы с его помощью донести некую информацию до определенного круга лиц, заинтересованных в этой информации. То есть сайт - это своего рода средство массовой информации, аудитория которого заметно отличается от аудитории других СМИ. Отличается хотя бы потому, что все остальные СМИ (и газеты, и теле- и радиоканалы и др.) распространяются (вещают) на определенной территории в определенное время, а Интернет-сайт доступен круглосуточно из любой точки планеты, где есть доступ в Интернет.

Слайд 12

Кто создает Web-страницы? Бизнесмены, студенты, домохозяйки и т.д. Прежде чем начинать, посмотрите, что делают другие. Для этого можно провести поиск по ключевым словам personal , web и огромное количество самых разнообразных систем управления сайтами. Отсутствие ограничений публикуемых материалов по размеру часто приводит к тому, что на сайты выкладывают необоснованно длинные неинтересные тексты, которые совершенно невозможно читать, невероятных размеров фотографии и видеоролики, которые бывает крайне трудно скачать.

Слайд 13

WEB дизайн сайт экран Разрешение экрана и разметка страниц Один из самых задаваемых вопросов на курсах по « Вебу » - «Под какое разрешение нам стоит делать свои дизайны?» Полный ответ будет немного мудреным, но основные советы очевидны: · Оптимизируйте под 1024х768 - это самый распространённый размер экрана. Несомненно, ориентироваться нужно на разрешение экранов вашей целевой аудитории, и в будущем размер будет меняться. Размер уже может быть другим, если, скажем, Вы создаёте Интернет для компании, которая выдает своим сотрудникам большие мониторы. · Не надо создавать сайты только под определённый размер экрана, так как размеры экранов пользователей различаются. Самих различий очень много, так как пользователи не всегда «максимизируют» свои браузеры (особенно если у них большие экраны).

Слайд 14

Прокрутка и изначальный обзор зависят от размера экрана: чем больше экран, тем больше информации он показывает и тем меньше нужно делать прокруток. Здесь Вы и должны заниматься оптимизацией для 1024х768: показать самый важный материал, не прибегая к прокрутке (вместе с этим необходимо убедиться, что критическая информация останется видимой при разрешении 800х600).

Слайд 15

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

Слайд 16

Руководство по дизайну Простота На странице должно быть как можно меньше элементов, ничего лишнего. Из двух возможных решений всегда лучше то, которое проще. В результате «очистки» страниц взгляд посетителя фокусируется на контенте . Упрощается навигация. Легче привлечь внимание пользователя к чему-то важному. В дизайне сайтов Веб 2.0 можно использовать термин «рисование информацией» или «информационные пикселы » ( data ink ). Вообще, сам Тафт когда-то говорил, что эффективность информационного дизайна выражается в соотношении «информационных» пикселов на экране к общему числу пикселов .

Слайд 17

Руководство по дизайну · Центрированная разметка По сравнению с дизайнерской модой прошлых лет, сейчас гораздо больше сайтов располагаются по центру в браузере, а не растянуты на весь экран или смещены влево. Поскольку дизайн Веб 2.0 проще и экономичнее, то на таких сайтах всегда есть много хорошего, чистого белого пространства. · Меньше колонок Несколько лет назад дизайн в три колонки был нормой, а частенько встречались даже четыре. Сегодня две колонки никого не удивляют, а три - общепринятый максимум. · Отдельная верхняя секция Вверху страницы располагается горизонтальная секция, которая отделяется от всего остального контента . Конечно, в этой идее нет ничего нового, и она использовалась давно, но сейчас она стала по-настоящему общепризнанной.

Слайд 18

Руководство по дизайну · Цветные блоки Якоб Нильсен в одном из журналов опубликовал статью, в которой рассказывал о наиболее распространенных ошибках web-дизайна 2005-ого года. Вот некоторые из них: 1. Проблема с читаемостью Ошибка в выборе шрифта вышла на первое место с подавляющим преимуществом. Она получила в два раза больше голосов, чем ошибка №2. Примерно две трети голосовавших жаловались на слишком мелкий шрифт или на фиксированный размер шрифта; примерно одна треть - на малый контраст между цветом шрифта и фоном.

Слайд 19

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

Слайд 20

Плохой поиск Все остальные ошибки в списке достаточно просто исправить, и лишь исправление поиска требует большой работы и значительных затрат на качественное поисковое ПО. Тем не менее, затраты окупаются, так как поиск является фундаментальным компонентом работы веб-пользователя с сайтом, и с каждым годом этот компонент становится все важнее и важнее. Несовместимость браузеров Сегодня достаточно много людей пользуется браузером Firefox (и другими не такими распространенными продуктами, как Opera и Safari ), что требование поддержки разных браузеров вновь в повестке дня: не отпугивайте своих клиентов только потому, что они предпочитают работать на другой платформе.

Слайд 21

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

Слайд 22

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

Слайд 23

Оптимизация под 1024х768 Когда говорим «оптимизация», то имеем в виду то, что ваша страница должна выглядеть и работать оптимально на самом распространенном разрешении. При этом она должна хорошо выглядеть и работать на других размерах, рекомендуют «плавающий» дизайн. Но он должен быть лучшим при разрешении 1024х768. Три самых главных критерия для оптимизации Интернет-страниц под определённый размер экрана: · Изначальный обзор: видна ли пользователям вся ключевая информация без прокрутки страницы? Это является компромиссом между количеством показанных предметов и насколько детально показан каждый предмет. · Удобочитаемость: насколько легко прочитать текст в разных колонках с определённой шириной? · Эстетика: насколько хорошо выглядит ваша страница, когда у всех элементов правильный размеры и правильное расположение?

Слайд 24

· Цветные блоки Кроме верхней секции, другие элементы страницы тоже могут быть явно выделены цветом. Это может быть зона навигации, зона основного контента или иные области. Проблема с яркими цветами в том, что они слишком отвлекают внимание от других элементов страницы. Так что в некоторых случаях лучше не отходить от обычного белого цвета. · Простая навигация Меню навигации, которое отображается на каждой странице сайта, должно быть большим, понятным и простым. Что касается гиперссылок, то они должны четко отличаться от всего остального контента на странице. · Увеличенный кегль На сайтах Веб 2.0 размер шрифта обычно больше, чем на сайтах прошлого поколения. Это правило вытекает из принципов простоты и функционального дизайна. На многих сайтах встречаются заголовки, логотипы и надписи экстремально большого размера. Эти надписи обычно реализованы в виде графического элемента.

Слайд 25

Главные ошибки WEB-дизайна Ссылки - это первейший элемент взаимодействия в Web-е. Нарушая привычную работу ссылки, Вы путаете пользователей, а это затрудняет им работу с вашим сайтом. · Четкий логотип Ясный, мощный и сильный бренд создается с помощью заметного и запоминающегося логотипа. · Кроме всех вышеперечисленных, упоминаются еще шесть дизайнерских приемов, которые встречаются не так часто: использование насыщенных цветов; гламурные поверхности ( rich surfaces ); градиенты; отражения; изящные пиктограммы и даже многоугольные звездочки.

Слайд 26

Контент , не написанный специально для Web-а Писать для web-а значит: · писать коротко · писать так, чтобы текст удобно было просматривать · писать точно в тему (а не заполнять пространство рекламным шумом) Текст для Web-а должен: · отвечать на вопросы пользователей · использовать для этого простой язык без специальных терминов (это также улучшает видимость вашего текст в поисковиках, так как пользователи ищут нужные им документы по своим словам, а не по вашим специфическим терминам)

Слайд 27

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

Слайд 28

Заключение Я считаю, что существует необходимость распространения профессии « веб-дизайнер » - это даст толчок для страны , она станет более развитой , возрастет и число развитой молодежи , появятся ВУЗы сфокусированные на веб-дизайн . На сегодняшний день наша жизнь тесно связана с Интернетом. Интернет индустрия развивается с большими темпами. Эта профессия так же востребована среди молодежи и тем, что со временем, когда и до нашей страны дойдет технический прогресс , профессия станет резко востребована , от чего у молодежи будет желание остаться народине . Профессия веб-дизайнера сложная , она требует упорства и терпения и я надеюсь она станет востребована и в нашей стране.

Слайд 29

Используемая литература: П. Макнейл . Веб-дизайн . Идеи, секреты, советы = The Web Designer's Idea Book, Vol. 2: More of the Best Themes, Trends and Styles in Website Design. Дж. Берд. Веб-дизайн . Руководстворазработчика = The Principles of Beautiful Web Design, 2nd Edition. Якоб Нильсен , Кара Перниче . Веб-дизайн : анализ удобства использования веб-сайтов по движению глаз = EyetrackingWebUsability . — М.: «Вильямс», 2010. . Якоб Нильсен . Веб-дизайн . — СПб.: Символ-Плюс, 2003. Якоб Нильсен , ХоаЛоранжер . Web- дизайн: удобство использования Web- сайтов = PrioritizingWebUsability . — М.: «Вильямс», 2007 Роббинс Д. Web- дизайн.