Техническое задание для веб-дизайнера. Какие знания требуются от веб-дизайнера? Сложностями подобного дизайна являются

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

Разумеется, это требует выдержки и усидчивости. Знаю человека, который начинал практиковаться в дизайне на этом сайте и через три месяца нашёл постоянного клиента из США с контрактом.

Лучше начать с простых сериалов, так как «Шерлока» или «Теорию большого взрыва» смотреть будет тяжело. Сам я сильно продвинулся в английском, пока смотрел Lost во время тренировок. Там очень простой английский, а сюжет незамысловат настолько, что и без перевода понятно, что происходит.

Онлайн-курсы

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

Но у курсов есть беда: они всё очень постепенно и медленно разжёвывают. Успеваешь заснуть, так и не дойдя до сути.

Бонус : несколько выступлений Антона по теме дизайна и прототипирования.

Задание на ассоциацию обычно задают на предмете дизайн.

Эти задания для развития фантазии и ассоциативного мышления.

Упражнение№1

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

Карусель

Архитектура

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

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

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

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

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

Упражнение№2

Упражнения по дизайну на ассоциацию:

Одно из любимейших упражнений детей любых возрастов (от3 до бесконечности) по дизайну:

Я его называю - «Каки маляки».

На формате А4 у Вас должно получиться шесть рисунков выполненных простым карандашом. Рисуете один: каки -маляки рисуем, как дети маленькие рисуют. Дальше начинаем смотреть на этот рисунок и искать на что это может быть похоже, можно найти несколько линий или одну, на что-то похожую, на птицу, животное, ракушки, морских животных, медузы, мультяшных персонажей, на что угодно. Решили например, похоже на птицу: берём эту птицу и подрисовываем ей то, что не хватает: клюв, крыло, глаз, дорисовываем недостающие детали. Очень часто «находят» стилизованные мультяшные головы: старушка, дедушка, мужчина, женщина, мальчик, девочка. Обычно- это смешные рожицы, как из мультиков. Рисунок можно крутить в разные стороны, можно даже вниз головой смотреть и подрисовывать, то есть рисунки могут быть расположены в самые разные стороны. Рисунки начинаем делать по одному. Нужные детали можно подводить карандашом. В одном рисунке даже может быть и несколько рисунков. Вот я набросала в векторе расположение рисунков на формате А4. И рядом готовый рисунок, так как оно должно быть выполнено - карандашом.

Kern Type, the kerning game

Что проверяет: задатки шрифтовика

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

Real or Photoshop

Что проверяет: умение отличать обработанные фотографии

К 25-летнему юбилею Photoshop компания Adobe предложила посмотреть на 25 фотографий и определить, обработали их в программе или нет. Таким образом создатели теста продемонстрировали, насколько Photoshop повлиял на наше восприятие мира, отношение к творчеству и к достоверности.

How Well Do You Know Your Logos

Что проверяет: знание логотипов

Интерактивный тест журнала Time - не только на намётанный глаз, но и на умение рисовать. Игроку нужно максимально похоже воспроизвести 10 известных логотипов, среди которых есть Apple, McDonalds, Chanel и Toyota.

KOLOR

Что проверяет: чувство цвета

Если у вас нет проблем со зрением, то вы наверняка отличите зелёный цвет от красного. Но сможете ли вы найти правильный зелёный цвет среди 10 практически идентичных оттенков зелёного? Как выяснил создатель теста KOLOR Хорхе Морено, это куда сложнее, чем кажется на первый взгляд.

Pixactly

Что проверяет: чувство пространства

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

The Bezier Game

Что проверяет: владение «Фотошопом»

Игра The Bezier Game проверяет ваше владение инструментом «Перо» (The Pen Tool) в Photoshop и предлагает выделить заданную фигуру, имея в запасе ограниченное количество точек. Простота обманчива: от уровня к уровню фигуры становятся сильно сложнее. Редкий пример теста, который приносит почти немедленную пользу (и который можно, к примеру, рекомендовать в качестве рабочего задания).

Shoot The Serif

Что проверяет: внимательность к шрифтам

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

Давайте предположим, что у вас появилась насущная потребность в создании собственного представительства в интернете. Причины для этого могут быть различны, к примеру, вы просто хотите сделать страничку о себе, целью которой будет поиск новых знакомств, поиск друзей по интересам.
Или же, назрела необходимость расширить круг потребителей вашего товара или услуги. И не важно, кто вы, крупная организация, небольшая фирма или частный предприниматель, пренебрегать возможностью привлечь клиентов в сферу своей деятельности не стоит. Да мало ли причин, которые переведут задачу создания сайта в разряд первоочередных.
Другое дело, как эту задачу решать. Существуют два возможных варианта решения этой задачи. Первый - если есть опыт работы в сфере информационных технологий и свободное время, вполне можно самостоятельно освоить основы сайтостроения и даже глубоко их изучить. Для человека, который знаком хоть с одним языком программирования, задача создания простого сайта-визитки с несколькими статичными страницами, не должна составить труда. Не составит для него труда и создание своего информационного ресурса с помощью популярных новостийных движков, к примеру, Wordpress или Joomla .
Второй - если у вас нет абсолютно никакого опыта работы с вычислительной техникой на уровне, хотя бы продвинутого пользователя, если для настройки, скажем, офисных программ, вы приглашаете специалиста, тогда путь к решению вашей задачи только один - найти грамотного веб-дизайнера. Впрочем, вполне возможен вариант, что вы сами прекрасно можете сделать любой сайт, но вам просто не хватает на это времени.
Поиск грамотного веб-дизайнера тоже может оказаться не простой задачей. Тут можно полагаться, как на реализованные им проекты, на отзывы незаинтересованных людей, для которых он выполнял подобные работы, и, безусловно, на свой опыт и то, что вам этот опыт подскажет при первой встрече.
Если, как только вы сообщили веб-дизайтеру тему вашего сайта, к примеру, вы заказываете сайт, где можно будет посетителям купить радионяню (удаленное средство наблюдения за детьми). И только сказали пару слов, что конкретно вы от веб-дизайтера хотите, то есть, прайслист разместить, контактную информацию. А дизайнер говорит, что ему все понятно, что все будет в лучшем виде, не задав при этом ни единого вопроса, - гоните такого дизайнера в шею. И деньги себе сэкономите и время. А вот если тут же начнутся уточняющие, наводящие, и на первый взгляд, совершенно тривиальные вопросы, например, планируется ли обратная связь, нужна ли форма регистрации, будут ли предусмотрены скидки для постоянных или оптовых клиентов, в конце концов, каким цветом вы видите фон, хватайте такого дизайнера в охапку и держите обеими руками. Он четко знает значение этих вопросов и понимает, что от ваших ответов на них будет зависеть результат работы и ее цена.
Поэтому, до беседы с дизайнером вам необходимо иметь четкое представление о том, что вы хотите получить в результате. То есть, фактически, необходимо составить техническое задание на разработку сайта.
Желательно изложить все свои пожелания на бумаге. Это позволит вам, во-первых - четче сформулировать то, что вы хотите получить; во-вторых - позволит избежать конфликтных ситуаций типа - «а вы мне такого не говорили».
Какие же вопросы необходимо включить в техническое задание на разработку сайта.
1. Описать структуру информационного наполнения сайта. То есть четко указать, какого вида информация у вас будет, разбить ее на рубрики. Например, общая информация о вашей фирме, услуги, примеры работ, прайслист, контактная информация. Не лишним будет включить рубрики на перспективу, например, вопрос-ответ, для того, чтобы выбрать максимально подходящий инструмент для разработки сайта и возможности последующего расширения его функционала.
2. По возможности, набросать эскиз внешнего вида. То есть, как должна выглядеть шапка сайта, где размещать меню, будут ли позиции для рекламных блоков, позиции поиска. Если, как говорится, бог не дал таланта рисовать, хотя бы в описательной форме, на основе того, что видели, например, шапка наподобие этого сайта, рекламные блоки, как на сайте таком то. Во всяком случае, веб-дизайнер будет знать, что вам нравиться, а что нет.
3. Выбрать шаблон сайта. То есть, указать, сколько колонок должен содержать сайт, где они должны быть. Здесь тоже уместно будет указать несколько сайтов, компоновка информации на которых вам подходит. Сразу обязательно оговорить, какого типа будет шаблон сайта - резиновый или постоянной ширины. Здесь нужно помнить, что красивые сайты довольно просто получаются на шаблонах постоянной ширины, однако не следует забывать и том, что такой шаблон довольно убого смотрится на широкоформатных мониторах, где использует треть полезной площади экрана по ширине.
4. Составить и хотя бы схематически нарисовать структуру меню. Здесь нужно помнить, что меню должно быть логично построенным и давать легкий доступ к структурированной информации. Вы специалист в своей области, а если поручите эту работу полностью дизайнеру, то, скажем, информация о выборе удаленных средств наблюдения за детьми (радионяни, видеоняни) вполне может попасть в рубрику о видах детской мебели. Поставьте себя на роль посетителя сайта, которому нужно найти конкретное изделие и мысленно пройдите путь по его поиску. Если для этого придется сделать более 3-4-х переходов по меню, - нужно что то менять.
5. Также, необходимо подготовить варианты цветового решения, хотя бы тоже на уровне примеров. Возможно, у вас уже есть логотип и фирменный стиль, тогда, по возможности, сайт желательно создавать именно в этих тонах, чтобы повысить его узнаваемость. Единственное, о чем не стоит забывать, не следует превращать ваш сайт в палитру художника. Время сайтов «всех цветов радуги» давно прошло и кроме раздражения такое оформление ничего не вызывает.
Следование этим рекомендациям определит необходимое будущее наполнение сайта, четко поставить задачу веб-дизайнеру, сократить время и нервы на согласование каждой мелочи и, в итоге, позволит получить качественный продукт, способный составить конкуренцию аналогичным ресурсам, и помочь вам в достижении цели, ради которой сайт был вами задуман.

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

Технарь или художник?

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

По результатам обучения на web-дизайнера вы должны уметь:

самостоятельно создавать веб-страницы с необходимым графическим и текстовым наполнением;

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

проектировать сайты любой сложности и запускать их в сети;

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

налаживать взаимодействие страниц сайта между собой.

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

Какие знания требуются от веб-дизайнера?

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

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

Даже если вы не собираетесь сами верстать сайты, все равно вы должны иметь представление о CSS и HTML. Неплохо бы разобраться и в WordPress - платформе, на которой работают большинство сайтов.

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

Какие программы нужно освоить?

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

Лично я в этом вопросе придерживаюсь минимализма. Я считаю, что для обучения на дизайнера сайтов достаточно знать Adobe Photoshop и Adobe Illustrator, которые позволят обрабатывать и нарезать изображения, выполнять сборку макетов и множество других функций.

Для начала хватит и Photoshop. Этой программой, однако, надо владеть в совершенстве, поэтому придется потратить много времени на ее изучение.

Как видите, мнение работодателей немного отличается от моего - большинство из них считает, что хороший веб-дизайнер, в первую очередь, должен владеть программами Adobe Photoshop (96,6% опрошенных), CorelDRAW (50%), Adobe Flash (36,6%), Adobe Illustrator (23,3%).

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

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

Главное - практика!

Если вам интересно, как стать дизайнером сайтов самостоятельно, без посещения каких-либо обязательных курсов, то решение можно охарактеризовать одним словом: ПРАКТИКА! Вы можете прочитать хоть тысячу книг, но они не станут оружием в вашем арсенале. Как я уже упоминал выше, информация может стать знанием только через практику.

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

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

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

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

Подведем итоги

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

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

отменный художественный и эстетический вкус;

отличная память, образное и аналитическое мышление;

креативность;

способность к переключению внимания;

логическое мышление;

внимательность;

систематичность;

усидчивость;

тщательность;

аккуратность.

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

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

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

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