Web дизайнер что должен знать – что должен знать каждый веб-дизайнер

Содержание

«Что должен знать веб-дизайнер?» – Яндекс.Знатоки

0) GRID! – это первое и незыблемое правило слаженной работы дизайнера и верстальщика. Если в макете присутствует сетка 50% вопросов решается.
1) Основы HTML CSS. Чтобы дизайнер понимал поведение элементов на странице.
2) Проблемы рендеринга браузеров и проблему идентичности пикселя. Опять же образно.
3) Понимание mobile-first и desktop-first это решит проблемы с версткой отрисованных макетов в плане позиций элементов.
4) Принцип работы анимации js/canvas, чтобы понимать что хрен верстак сделает 7 красных перпендикулярных линий превращающихся в котенка.

Бывает дизайнер-Суперзвезда, который отдаёт 15 страниц макета и страницу, на которой прорисованы все базовые элементы: заголовки, списки, цитаты, таблички, формы с полями ввода, чекбоксами и кнопочками.

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

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

И ты знаешь, что если в исходнике растровый слой, его надо нарезать картинкой, а если векторный — верстать, используя CSS. И каждый растровый элемент сайта или склеен в один слой, или является смарт-объектом. И нет в макете скрытых слоёв, которые не пригодились дизайнеру, а все растровые фоны даны с запасом на резину. И все шейпы попадают в пиксели. И тени на элементах в нормальном режиме наложения, а не каком-нибудь «Multiply». И вообще в слоях порядок.

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

Взято отсюда

yandex.ru

Что должен уметь и знать начинающий веб-дизайнер фрилансер

Иллюстрация взята с сайта knockknock.ru

В этой статье я разберу не только то, что должен веб-дизайнер, но и также то, чего НЕ должен.

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

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

Каждый веб-дизайнер должен уметь «гуглить» 🙂
Это значит что если вы что-то ищите в поисковике, то вам нужно посмотреть не первые 5-10 сайтов, а если потребуется — то все 100-200, потому что рунет сейчас стал копипастной помойкой и найти стоящее очень тяжело. Либо если у вас нет времени — покупайте книги, курсы, обучение.

Что должен уметь и знать веб-дизайнер фрилансер:

Вам нужно в совершенстве владеть программой фотошоп.
Вы должны уметь:
— Собирать и структурировать информацию
— Уметь выделять главное и второстепенное
— Создавать прототип сайта
— Уметь не «изобретать велосипед», а моделировать уже успешное
— Подбирать подходящую цветовую гамму под цели сайта и для целевой аудитории
— Уметь работать со шрифтами
— Уметь работать с сетками
— У меть пользоваться фотобанками и обрабатывать графику
— Уметь сделать сайт удобным и привычным для целевой аудитории
Уметь рисовать разные типы сайтов (лендинги, сайты-визитки, интернет-магазины, промо-сайты, порталы)
Уметь рисовать в стилях flat, material, минимализм, техдизайн
Уметь делать адаптивный дизайн сайта

Этого вполне достаточно чтобы вы стали веб-дизайнером хорошим веб-дизайнером и зарабатывали 30-45 000 руб в месяц. через 6-12 месяцев после старта.

Если вы зайдете на сайты с работой, где публикуются вакансии для веб-дизайнеров и посмотрите что там требуют от вас — вы просто ужаснетесь. От вас будут требовать владеть сразу 2-6 профессиями, владеть 3-10 программами и иметь кучу обязанностей.

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

Что НЕ должен знать и уметь веб-дизайнер:

Верстку (html, css и т.д) — тот кто этим занимается называется верстальщик, а не веб-дизайнер.
Программирование (php, mysql, javascript и т.д.) — этим занимается веб-программист.
Seo и раскрутка сайта — этим занимается se0-специалист
Наполнять сайт. Этим занимается контент-менеджер
Продвигать сайт в соц.сетях и работать с пабликами. Этим занимаются SMM и SMO специалисты.
Владеть всеми графическими программами на свете. Это нафиг не нужно веб-дизайнеру. 99% всего можно сделать в фотошопе. Веб-дизайнер, не иллюстратор, не работник полиграфии — ему не нужно знать coreldrow, illustrator или indesign и прочие программы
программы 3D-моделирования. Этим занимаются 3d-проектировщики, архитекторы, но не веб-дизайнеры
Маркетинг и конверсия. Этим должны заниматься маркетологи и тестеры.
Брендинг. Често — не знаю кто этим должен заниматься 🙂
Владение всеми CMS (Worppress, joompa, DLE и т.п) — этим обычно занимаются веб-мастера
копирайтинг. Статьи писать должен копирайтер, а не веб-дизайнер.
Рисовать от руки. Веб-дизайнер — это не художник.
Рисовать на планшете. Этим занимается графический дизайнер.

Это не весь список того что от вас могут требовать в резюме. Если вы нашли что-то, что от вас требуют и этого нет в верхнем списке — то смело относите новое требование к тому что вы НЕ должны 😉

Если с вам и требуют все это, то пусть и платят за каждую профессию отдельно — в сумме хорошо наберется 🙂

webdesign2.ru

13 основных правил веб-дизайна – что должен знать заказчик сайта

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

Сразу оговоримся: сегодня расскажем об основных правилах, этакой библии каждого веб-дизайнера. Есть и более тонкие нюансы – о них речь пойдет в следующих статьях. Кстати, если вам попался специалист, который утверждает, что не признает никаких правил и любит креативить – сто раз подумайте, а еще лучше – посмотрите его портфолио и оцените работы лично. Представьте, что вам попался каменщик, который отвергает строительные нормы и кладет кирпичи как попало – доверите вы ему свой дом? Вот то-то же. Итак, 13 главных правил хорошего веб-дизайна перед вами.

Основные правила веб-дизайна

Правило 1. Хорошая скорость загрузки страницы

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

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

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

Правило 2. Юзабилити, или удобство использования сайта

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

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

Если всего этого нет – сайт неудобен, посетитель с большой вероятностью покинет его и будет искать другой, в котором позаботились о юзабилити. Никто не будет сидеть и разбираться, где же на сайте находится раздел “Распродажи”

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

Правило 3. Читаемые шрифты

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

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

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

Правило 4. Умеренная цветовая палитра

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

Правило 5. Современный фон

Еще один привет из девяностых: сложносочиненный фон, или подложка, для сайта. До сих пор используется в среде начинающих веб-дизайнеров, на бюджетных сайтах доменов второго и третьего уровня, очень активно – в “Живом журнале”. Наивно думать, что если вы продаете украшения – фоном должны идти золотые россыпи, если продукты – груды еды. Все это слишком очевидно и банально. Нет, картинки в тему всегда актуальны, но для фона лучше выбрать что-то необычное, неизбитое. Чистые тона и градиенты, трехмерные изображения, виртуальная реальность – вот что модно сейчас.

Правило 6. Единый стиль

Шрифты – строгие, цвета – веселенькие, а картинки надерганы из разных стоков по принципу “пусть будет, да побольше”? Одна форма заказа горизонтальная, другая – вертикальная, и в каждой разные шрифты? Стоп, так не пойдет: продающий дизайн предполагает единство стиля

. Как сказал классик, “в одну телегу впрячь не можно коня и трепетную лань!”

Правило 7. Золотое сечение

Это альфа и омега любого дизайна – правило золотого сечения дает идеальные пропорции, дизайн выглядит гармонично и естественно. Золотое сечение выглядит визуально вот так:

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

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

Правило 8. Правило третей

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

Следовательно, рядом с этими точками нужно размещать самую важную информацию – чтобы наверняка увидели. Это может быть кнопка с call to action – призывом к действию, или форма заказа. Считается, что самая “активная” точка – левый верхний угол. Присмотритесь: именно там на сайтах по традиции располагается логотип. Совпадение? Не думаю!

Правило 9. Знание эффекта “баннерной слепоты”

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

Согласно исследованию Якоба Нильсена, мы просматриваем информацию примерно вот так, как на этой картинке. Красно-желтые пятна – то, что привлекает внимание посетителей. Зеленым выделены рекламные блоки – как видите, на них совсем не обращают внимания.

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

размещать рекламу чем выше – тем лучше. Огромный баннер на главной с информацией о скидках точно не пройдет незамеченным;
играть на контрасте: выделять рекламу ярким цветом, делать контрастные кнопки призыва к действию. Главное – чтобы глаз зацепился;
придумывать креативные (но не желтые!) заголовки, привлекающие внимание;

использовать фото человека, который смотрит в направлении рекламного баннера. Это работает!

Правило 10. Кнопка “вверх”

Казалось бы, такая мелочь, а как важно! Представьте, что у вас интернет-магазин с огромным каталогом товаров или крупный новостной портал – чтобы пролистать сайт вниз, нужно достаточно долго скроллить (крутить колесиком мыши) вниз. А как потом вернуться назад? Многие веб-дизайнеры забывают об этом, заставляя посетителей отматывать страницы вверх. А ведь достаточно всего прикрутить кнопку “Вверх” или графическое изображение ^ – и все сразу понятно. Так вы экономите время пользователя и делаете сайт более удобным.

Правило 11. Новая ссылка – та же вкладка

Любая внутренняя ссылка с вашего сайта (баннер на главной, ведущий на страницу распродаж, статья в блоге, которая отсылает посетителя в карточку товара, видео на “Ютубе”, иконка соцсетей, в которых представлен ваш ресурс – что угодно) должна открываться в том же окне. Много копий сломалось на эту тему: пользователям удобнее, когда ссылка открывается в новом окне, особенно когда ссылок много. Но в этом случае они могут не нажать кнопку “назад” и не вернуться на самую первую страницу, а то и забыть, о чем там вообще говорилось. А это значит, что они могут покинуть ваш сайт, не досмотрев важную информацию. Поэтому мы советуем внутренние ссылки открывать во внутренних же окнах, а внешние – в новых. Например, если ссылки ведут на дружественный сайт – пожалуйста, пусть открывается в новом. Если направляют на свой же паблик в соцсети – тоже без проблем.

Правило 12. Больше визуализации!

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

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

Правило 13. Адаптивная верстка

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

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

idbi.ru

Что нужно знать и уметь веб-дизайнеру в современном мире? — Toster.ru

Прочитал недавно статью на Хабре habrahabr.ru/post/192744 в которой в качестве примеров демонстрировались очень красивые и хорошо сделанные сайты. Я давно мечтаю научиться создавать или, по крайней мере, проектировать ДИЗАЙН сайтов в таких стилях. Самое главное, и в чём состоит моя мотивация – факт того, что у меня есть куча неплохих (как мне кажется) идей, и они постоянно появляются (ага, ещё бы зарисовывать их чтоб не забывать…).

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

Итак, вопрос в следующем:

Какие системы или их разделы (язык программирования, фреймворки, CMS и т.п.) необходимо знать досконально, а знаниями о чём можно владеть поверхностно, чтобы уметь (и, главное, чтобы это умение было сейчас востребовано!) строить дизайн таких сайтов как:
dangelicoguitars.com
https://snipcart.com/

www.eastworksleather.com
https://mylapka.com/

laviealafresh.com
www.dnabox.com
www.rodolphecelestin.com

www.blocklevel.nl
etchapps.com

www.vondutch.com/com
thegeekdesigner.com/print
www.kinderfotografie-evihermans.be

www.iutopi.com

areuswade.com/precomposed-touch-gestures
kultstudio.com

и так далее. В общем, всё по статье с хабра.

Самое для меня важное, и почему, я собственно, задаю здесь этот вопрос (а так бы мог и сам постепенно разобраться) – это не тратить в огромном количестве временные ресурсы на поглощение уже (или ещё) неактуальной для выполнения поставленной задачи информации. То есть, нет, наверное, смысла тратить сейчас время на html 2.0, если будущее и настоящее за html5. Нет смысла изучать flash, если анимация сейчас создаётся совершенно другими методами и средствами, по типу css3 и того же html5. Я прав?

Заранее спасибо за ответы. Было бы классно, если бы вы заодно указывали, где и как можно изучить те системы, о которых вы пишете.

toster.ru

Подготовка веб-дизайнера — взгляд работодателя / Habr

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

Современное представление термина «веб-дизайнер»?
Какими знаниями и умениями должен обладать веб-дизайнер?
Какие требования к его компетентностному уровню предъявляются?

Современное академическое образование зачастую отстает от реалий. В имеющейся специальной учебной литературе и в методах преподавания отсутствует точное определение целей подготовки специалистов в данной области. Не достаточно определен компетентностный уровень специалистов веб-дизайнеров.
Анкетирование проводилось с ноября по декабрь 2011 г. при помощи электронной почты и интерактивной онлайн-формы (на выбор респондента). В качестве респондентов были выбраны руководители веб-студий, либо лица, отвечающие за работу с кадрами в этих компаниях.
Выбор веб-студий по территориальному расположению: Москва, Санкт-Петербург, Екатеринбург, Челябинск, Краснодар, Хабаровск. Приглашено для участия — 272, приняли участие в анкетировании — 30.

Интересным побочным фактом проведенного анкетирования является активность участников. Из высланных 272 приглашений участие приняли только 11% компаний. Это свидетельствует о закрытости российского бизнеса – нежелание тесного сотрудничества производства с учебными заведениями. Из принявших участие 36,6(6)% ответили при помощи электронной почты, 63,3(3)% при помощи интерактивной формы на сайте. Последняя цифра говорит о перспективах проведения различных опросов и исследований при помощи интерактивных форм в онлайне. К тому же, интерактивная форма позволяет получить более точные статистические сведения, в отличие от электронного письма, где респондент может «воздержаться» от некоторых вопросов, требующих однозначный ответ.
В результате анкетирования были получены следующие данные:
1. Обязательное наличие портфолио:

Да – 96,6(6)%;
Нет – 3,3(3)%.

2. Необходимость умений владеть графическими редакторами распределилась следующим образом:

Adobe Photoshop – 96,6(6)%;
CorelDRAW – 50%;
Adobe Flash – 36,6(6)%;
Adobe Illustrator – 23,3(3)%;
Adobe Fireworks – 10%;
GIMP – 6,6(6)%;
Любой – 3,3(3)%.

3. Необходимость умений владеть программами трехмерного моделирования:

3D Studio MAX – 16,6(6)%;
Cinema 4D – 6,6(6)%;
Maya – 3,3(3)%.

4. За умения владеть WYSIWYG-редактором Adobe Dreamweaver высказалось 20% респондентов. За остальные предложенные редакторы верстки ни один из респондентов не проголосовал.
5. Уровень умений пользоваться языком гипертекстовой разметки HTML:

Поверхностное – 66,6(6)%;
Глубокое – 20%;
Не обязательно – 13,3(3)%.

6. Необходимость знаний и умений владеть другими интернет-технологиями распределились следующим образом:

CSS – 40%;
PHP – 13,3(3)%;
JavaScript – 13,3(3)%;
XML – 13,3 (3)%;
AJAX – 6,6(6)%.

7. Умения работы с CMS при создании сайта:

Не обязательно – 40%;
Пользоваться CMS (наполнять сайт) – 20%;
Создавать сайт «с нуля» – 13,3(3)%;
Не определились с ответом – 26,6(6)%.

8. Умения работать в каких CMS предпочтителен:

1C-Битрикс – 20%;
UMI.CMS – 13,3(3)%;
Joomla! – 13,3(3)%;
WordPress – 13,3(3)%;
Drupal – 3,3(3)%.

9. Умения создавать макет со слоями, сеткой, пользоваться промышленными стандартами:

Обязательно – 60%;
Не обязательно (обучается в процессе производства) – 36,6(6)%;
Не определились с ответом – 3,3(3)%.

10. Умение верстки шаблона для CMS по макету:

Нет – 63,3(3)%;
Да – 30%;
Не определились с ответом – 6,6(6)%.

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

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

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

Анализируя пункты 2-10 можно приди к выводу, что веб-дизайнер в первую очередь должен обладать навыками работы в графических редакторах. Лидером здесь является редактор растровой графики Adobe Photoshop. На втором месте находится редактор векторной графики CorelDRAW. Специализированный для Веб-графики редактор Adobe Fireworks пользуется очень малым интересом. Вероятная причина – большое количество кадров пришли в веб-дизайн из полиграфии, где эталоном является Adobe Photoshop.
В отличие от программ растровой и векторной графики, программы 3D-моделирования применяются реже, хотя компании начинают проявлять к 3D-графике интерес. Но, компетенция от веб-дизайнера в данном направлении не требуется, хотя и приветствуется. Руководители предпочитают для этой области задействовать отдельных специалистов.
В вопросы были включены в качестве вариантов ответов перечень программного обеспечения распространяемого свободно (Gimp, Inkscape, Blender, KompoZer). Как выяснилось, интерес со стороны веб-студий к данным программам отсутствует, хотя эти программы активно внедряются в учебный процесс учебными заведениями. На это могут влиять следующие факторы:

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

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

habr.com

Как научиться веб-дизайну?!

Какой способ лучше при изучении веб-дизайна? Как решить, что важно и нужно знать в дизайне, какие аспекты можно опустить вообще?

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

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

1. Каким навыкам веб-дизайна вы должны научиться?

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

Маркетинг
Брендинг и позиционирование
Генерация трафика
Информационная архитектура
Графический дизайн
Производство
Доступность и удобство (юзабилити)
Копирайтинг

Маркетинг

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

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

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

Брендинг и позиционирование

Брендинг (и его сородич “позиционирование”) представляет собой процесс выбора того, что бы вы хотели, чтобы было сказано о вас (вашу продукцию, или ваших клиентах). Все зависит от того, о чем ваш веб-сайт.

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

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

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

Генерация трафика

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

Каким образом веб-сайт будет построен, его контент и стандарты производства, – все эти аспекты будут воздействовать на его способность привлечь трафик. Если ваш сайт не показывается на первой странице результатов поиска, то он не получит долю трафика, которую мог бы (первая страница получает 99% кликов).

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

Информационная архитектура

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

Графический дизайн

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

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

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

Производство (production)

Производство веб-страниц представляет собой процесс превращения графического дизайна в живой, рабочий веб-сайт. Оно включает в себя HTML (для контента и структуры) и CSS (для визуального стиля) компоненты. Они очень, очень важны! Кроме того, понимание того, как веб-страницы построенны, поможет вам открывать новые возможности (что всегда полезно).

Доступность и юзабилити

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

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

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

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

Копирайтинг

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

Язык должен быть понятен для всех. Навигация должна быть четкой и недвусмысленной.

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

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

Хороший веб-дизайнер должен быть отличным копирайтером и маркетологом …

Как и где можно всему этому научиться?

Номер один – это практика! Её вам ничто не заменит. Предположим, что вы собираетесь посвятить многие месяцы практике, какие источники дадут вам лучший дополнительный толчок?

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

Высоких конверсий!

16-03-2016

lpgenerator.ru

Что должен знать и уметь каждый уважающий себя дизайнер веб-сайтов

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

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

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

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

1. Векторная графика.

В отличие от растровой (пиксельной) графики, векторная состоит из геометрических форм, которые построены путем растягивания от точки до точки прямых линий — векторов.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Узнать подробнее

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

2. Растровая графика.

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

3. CMYK.

CMYK — аббревиатура, которая расшифровывается как Cyan, Magenta, Yellow, Key Сolor. Эта цветовая схема традиционно используется для печати. Чернила всех принтеров состоят именно из этих цветов, а при их комбинации мы получаем те оттенки, которые видим на распечатанном изображении.

4. RGB.

Как и CMYK, RGB представляет собой цветовую схему и, как вы, наверное, догадались, тоже является аббревиатурой, что расшифровывается как Red, Green, Blue. Но, если сферы влияния цветовой схемы CMYK ограничиваются одной лишь печатью, то схему RGB используют все современные компьютерные мониторы. Поэтому RGB — это главная цветовая схема в работе веб-дизайнеров.

5. Адаптивный дизайн.

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

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

6. Плоский дизайн.

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

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

7. Скевоморфизм.

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

Классическим примером служит старый интерфейс Apple, где иконки выглядели довольно реалистично. Такие объекты, как часы, календарь, калькулятор, компас и т. д., имели такой же вид, как и в реальности.

8. Метро-интерфейс.

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

9. Плитка.

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

10. Верхняя половина полосы.

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

11. Длинная прокрутка.

В последнее время «длинная прокрутка» все чаще используется web-дизайнерами при разработке дизайна сайтов. Принцип работы дизайна этого типа довольно прост: длинные страницы требуют постоянной прокрутки.

12. Cайт-визитка.

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

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

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

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