Вообще, данный вопрос более глобален и вопросы профориентации выходят далеко за рамки веб-разработки. Сегодня я поделюсь с вами, дорогие друзья, своими мыслями и опытом в этом вопросе.
Зачастую вопрос выбора карьеры молодые люди и девушки решают совместно со своими родителями, но чаще всего за них все уже давно решено и, как ни странно, в этом нет ничего плохого, ведь выпускники школы не всегда четко и ясно представляют себе свой дальнейший путь в этой жизни и така поддержка родителей весьма своевременна и полезна. Другая-же ситуация, это когда вы уже определились со своей карьерой еще в школе, но родители настаивают на своем решении, принятом за вас против вашей воли. Вот это уже плохо, но речь сегодня не об этом. Сегодня речь пойдет о тех ребятах, кто вместо своих родителей, сам загоняет себя в отрасль, мягко говоря, не подходящуу, в стремлении к более высоким зарплатам/перспективам/другим плюшкам, субьективно важных конкретному человеку.
Выглядит ужасно? Но это реалии нашего мира и таких примеров развития событий очень много. В погоне за более высокими зарплатами мы плюем с высокой колокольни на естественность, а затем получаем от природы пиздюлей.
Настоящего успеха можно добиться либо кропотливым трудом на грани мазохизма и безумия, либо спокойно и естественно, если вы нашли вашу область, вашу работу, которой заниматься легко и приятно.
Web-дизайн и web-разработка: как подойти к выбору будущей профессии
Дата публикации: 2018-10-19
От автора: как и любой другой индустрии, Интернету нужны мастера, которые будут над ним работать. Одной специальности здесь мало. Кто-то должен придумать концепт, кто-то оформить идею в рабочий макет, а кто-то — взять и построить приложение. Чтобы выполнить весь комплекс работ, люди должны владеть навыками и иметь соответствующий способ мышления: креативный художник или изобретательный программист. Если вы тоже не раз задавались вопросом «web дизайн и web разработка: что из этого моё?», значит, информация из статьи вам поможет определить дальнейший вектор развития.
Граница между дизайном и разработкой
Спойлер в самом начале статьи: сегодня грань может быть весьма зыбкой. Завтра программист станет дизайнером больше, чем сегодня. Технологии развиваются, а требования к профессионалам растут. Компетенция современного разработчика тесно переплетается с навыками дизайнера. Но для того чтобы уже сегодня читатель смог выбрать курсы, на которые он запишется завтра, проведем конкретную грань.
Дизайн — это тоже разработка?
Новичков удалось удивить названием, не так ли? Этого и добивались. Ведь в установлении разницы между этими понятиями многие пытаются поставить знак ≠. Что ж, такой подход облегчает восприятие, но не передает реальную суть. Самое печальное, что подобные высказывания звучат в программах подготовки специалистов. Но сегодня сможем показать верный путь.
Веб-дизайн — это один из этапов веб-разработки, или отрасль, если уже говорить о обучении. Дело в том, что создание (разработка) веб-приложения или сайта состоит из проектирования внешнего вида, верстки фронта и программирования. Так что, дизайнеры, не позволяйте сравнивать себя с разработчиками, ведь вы коллеги, с точки зрения логики.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Профессионалы этой отрасли должны обладать определенным уровнем знаний для создания самой структуры страницы (хедер, секции, футер, меню, навигация), понимания, как лучше подать информацию пользователю, и, наконец, красивого оформления созданного проекта. Это требует понимания технических основ процесса. Ведь рисовать то, что будет работать медленно, или то, что сложно для реализации — неверный шаг. Потому курсы по веб-дизайну пользуются невероятной популярностью: самостоятельно понять тонкости работы, не имея практического опыта, сложно.
Как правило, веб-дизайнерами становятся технически подкованные люди, которые имеют хорошо развитое художественное воображение. Совсем не обязательно быть живописцем. Но некоторыми врожденными качествами нужно обладать. В этом ключевая разница, если говорить о программистах: дизайнером проще родиться, чем стать. Среди обязательных характеристик будущего веб-художника:
усидчивость и терпеливость. Быть веб-дизайнером — это пробовать несколько вариантов, дорабатывать, знакомиться с новыми программами и инструментами;
умение разбить работу на этапы. Перед тем как начать обучение, определите, умете ли вы системно подходить к выполнению задачи. Тайм-менеджмент и организация труда — это то, что делает талантливого человека профессионалом;
нестандартное мышление. Нет, речь идет не о причудливости, которую приписывают артистам. Компетентный дизайнер умеет создавать уникальные продукты. Умение работы с шаблонами, их сопоставление и реализация оригинального дизайна — хороший навык. Но даже для этого нужно уметь мыслить, как дизайнер;
постоянная жажда обучения. Хороший слесарь в свободное время читает журналы о технике. Так и дизайнер должен постоянно следить за новинками и тенденциями. Сайты, которые были созданы в 2007, тоже были трендовыми. Сегодня курс развития изменился. Нарисуйте приложение старого образца, и вас посчитают некомпетентным.
Выбирать направление обучения «веб-дизайн» — означает использовать свои творческие возможности по максимуму. Будьте готовы к тому, что тот макет, который вы считаете идеальным, не будет принят заказчиком или разработчиком следующего звена. И никому не будет разницы, сколько времени вы потратили на создание, какими принципами руководствовались. «Не нравится» и «не подходит» — это понятия, которые не знают объективности.
Программист-разработчик
Под веб-разработчиком понимают специалиста, который проводит верстку приложения с макета, разрабатывает интерактивные элементы страниц, пишет программы для серверной стороны и поддерживает проект в течении его работы. Вышеперечисленные этапы могут выполняться как фуллстаком, так и узкими специалистами, но об этом позже.
Обучение веб-разработчика может оказаться еще более тернистым, чем подготовка дизайнера. В дизайне все просто: не хочешь рисовать — значит, ничего не получится. Человек сразу чувствует неладное, если создание макетов — слишком «неродной» труд. С веб-разработкой иначе. Чтобы стать программистом или верстальщиком, вам нужен лишь достаточный уровень интеллекта, усидчивость и, самое главное, умение долго идти к своей цели, даже если очень трудно.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Вся веб-разработка — это решение проблем системы оригинальными и эффективными способами. Несмотря на то, что существует множество готовых решений, вы постоянно будете сталкиваться с новыми неурядицами. Несложно выучить язык программирования, несложно понять, как система работает. Но на формирование стиля мышления, который способен в короткий срок преодолеть трудности разработки, уйдут годы. В этом и заключается компетентность супер-разработчика.
Навыки специалиста
И так, вы решили освоить одну из профессий: веб-разработка или веб-дизайн. Что же выбрать? Ответ на этот вопрос лежит не только в том, что вы считаете наиболее подходящим лично для себя. Намного более адекватно можно оценить направление развития, если взять и начать учиться в двух направлениях. Как выбрать правильные курсы обучения, вы узнаете ниже.
Начни с простого: первые шаги веб-разработчика
Если вы еще не знаете, насколько это разносторонняя сфера, значит все только впереди. Наверняка, трудно было бы даже создать специальность в университете, название которой «веб-разработка». Дело в том, что время, когда один разработчик мог решать большинство проблем приложения, уже давно прошло. Разделение труда на различные отрасли теперь является эталонным для эффективного создания программы под веб.
Как вы могли слышать ранее, разработчики делятся на специалистов серверной и клиентской сторон. Лучший способ понять грани компетенции каждого из них — это начать обучение. Да, различных технологий много. Но можно придумать курс ознакомительного обучения, с которым вы поймете, какой из сторон хотели бы служить.
Представим, что вы уже знаете спарку HTML/CSS. Если еще нет, то потратьте на технологии два дня, и они у вас в кармане. Нет разницы, даже если вы хотите стать дизайнером. Такой навык не помешает, ведь даст понимание того, как будут расположены элементы макета в будущем.
Теперь переходим к хардкору. Пока не знаем, что вы будете учить далее, но уже приступайте к изучению JavaScript. Да, это преимущественно инструмент фронтендщика. Но, изучив JS, вы познакомитесь с типизацией данных, эталонным синтаксисом и хоть немного осознаете сложность процесса. Если этот этап пройден успешно, и вы пишете неплохие программы на этом языке, значит вы видите, как работают клиентские скрипты. Интересно работать на фронтенде? Продолжайте обучение.
В случае стремления к чему-то другому изучите один из языков для бэкенда. Это может быть веб-язык PHP или любой из языков программирования общего назначения. Советуем выбрать Java, Python или C/C#/C++. Дело не в том, что они лучше, чем PHP (быстрые и мощные), а в том, что с такими знаниями легче реализовать себя в альтернативных сферах. Ну, а если судьба заставит работать с PHP, то со знанием «взрослого» PL, обучение на «препроцессоре» не займет больше недели.
Если даже бэкенд не привлек ваше внимание, значит, веб-разработка просто не для вас. Хотите программировать? Есть масса отраслей, где вы можете применить приобретенные знания, но сегодня не об этом.
Что постигнуть дизайнеру?
Photoshop, Illustrator, GIMP или любой другой графический редактор. Разница лишь в том, что именно вы хотите рисовать и какой из интерфейсов выучите быстрее всего. В любом случае, начать лучше с Photoshop. Он наиболее универсален из всех представленных на рынке.
Но одного только умения пользоваться редактором мало. Впереди обучение, в котором вы узнаете о совместимости цветовых схем, разработке согласно принципам юзабилити, адаптивности, кроссплатформенности и прочих необходимых сегодня элементов дизайна. Но, чтобы понять, хотите ли вы стать профессионалом сферы, пройдите курсы создания простых макетов сайта. Как только вы смастерите собственный макет, то поймете, лежит ли душа к такому виду деятельности.
А если одновременно?
Стремление к фуллстаку — это стремление к свободе. Человек хочет быть независимым от других специалистов, самостоятельно принимать решения о судьбе проекта. Но идти к полноценной компетентности в сфере веб-разработки на начале пути — неразумно. На рынке труда нужны спецы, которые безупречны хотя бы в чем-то одном. Тем не менее, осваивать технологии поэтапно, системно, одна за одной — путь к настоящему успеху.
Сегодня не удивишь фронтендщиком, который и макет поправит, и в бэк-энд без страха заглянет. Но такой уровень знаний требует длительного обучения и практики.
Шанс для оффлайна
Впервые курсы могут стать приемлемым вариантом. Но уж точно не для веб-разработки. Зато для дизайна — самое оно. Работа в группе стимулирует творческий мыслительный процесс, позволяет быстрее применить знания на практике и, в целом, оптимизирует обучение. Если вы хотите стать дизайнером, освоили основные инструменты и желаете почувствовать разницу между заурядным и уникальным дизайном, тогда школа — отличный выбор.
Хорошие веб-художники получаются с студентов ВУЗов, которые обучались по программе «графический дизайн». Здесь можно получить знания об основных принципах построения иллюстрации во всех сферах. Кстати, веб-дизайн считается разновидностью графического дизайна.
Вот и все! Выбирайте то, что по душе, и развивайтесь в выбранном направлении!
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Освойте востребованные навыки дизайн и верстки
Комплексный процесс дизайна и верстки на примере лендинга!
Веб-дизайнер vs Веб-разработчик
Отличия
Формально описание профессий звучит идентично — и те, и другие занимаются созданием внешней оболочки сайта. Более того, в некотором разрезе оба специалиста выполняют одну и ту же работу: создают «скелет» сайта, подбирают цветовую гамму, обрабатывают изображения и добавляют эффекты. То есть в словах принципиальных отличий нет, но есть разница в подходе.
Веб-дизайнер — человек, стремящийся завлечь клиента и посетителя сайта визуализацией. Он точно знает, на какое место вы посмотрите в первую очередь, какие цвета вас раздражают, а также какого рода анимация вас заставит совершить заветный клик. Хотите так же? Тогда приглашаем вас на интенсив по обучению веб-дизайну.
Front-end разработчик тоже может быть посвящен в эту науку, но им движет не желание понравиться, а скорее страх сделать что-то неправильно. Он стремится создать не уникальный продукт, а правильный, согласно рекомендациям и трендам, конечный успех возложив в большей степени на контент и случай.
Творчество и математика
Очевидно, что front-end разработчик хоть формально и является творческой личностью, но подход проповедует исключительно математический. В основе всего лежит голая теория, килобайты мануалов о том. как правильно компоновать сайт, куда прикручивать скрипты, как повысить производительность, не потеряв в привлекательности. Каждый шаг должен иметь обоснование, статистика превалирует над индивидуальностью, а качество определяется не привлекательностью, а отсутствием ошибок.
Веб-дизайнер мыслит иными категориями, основа его работы — примеры особо удачных сайтов, подход к оформлению, максимально выбивающийся из общей массы, но при этом с этой массой не диссонирующий. Статистика для него играет роль только в том случае, когда заканчивается простор для творчества. Во всех остальных случаях полёт мысли первичен.
Сравнение веб-разработчика и веб-дизайнера можно свести к банальному разговору о доминировании различных полушарий, но чуть понятнее в плане будущего выбора будут градации. Упрощенно, дизайнер практически всегда избегает категорических оценок, в то время, как разработчик априори воспринимает свою работу бинарно, то есть или true, или false. Никаких вам более-менее.
Инструменты
Но подход к работе это одно, даже его можно поменять, а вот набор используемых инструментов — это как раз то, что описывает заявленную в заголовке разницу не только в философских рассуждениях, но и в конкретных строках резюме. Веб-дизайнер оперирует в основном графическими редакторами (Adobe Photoshop, Illustrator, Creative Cloud, Corel PaintShop Pro, GIMP, Inkscape, Fotor), маленькими вспомогательными программами для выбора цветов (0to255, Colour lovers), шрифтов (Font Flipper, Photoshop Font Detector, Prototypo), работы с картинками (Coverr, IconStore, UI Faces, Placeit, Subtle Patterns). И конечно должен быть набор шаблонов, потому что, так повелось, веб-дизайнеры не очень любят заниматься непосредственно сложной вёрсткой.
Веб-разработчик, конечно, тоже использует многие из указанных программ, но всё же основными инструментами считает те, что помогают непосредственно со «скелетом». Прежде всего это редакторы кода (Sublime Text, Visual Studio Code, Komodo Edit, Aptana), инспекторы (встроенные в Safari и Chrome), отладчики (Firebug, Fiddler) и тестировщики.
Резюме и оплата
Несмотря на то, что зачастую работодатели ищут сотрудников, способных тянуть сразу обе данные профессии, соискателям лучше не распыляться и строить резюме согласно своей основной специализации. Если для веб-дизайнера важно включить создать некое портфолио для оценки графических навыков, где будут как отдельные изображения, так и исходники сайтов, то для разработчика необходим профиль где-нибудь на Github-е, где бы потенциальный работодатель не только оценил «выход», но и мог внимательно изучить код.
Что касается зарплат, то здесь в подтверждение стартовому допущению разработчики имеют небольшое преимущество. Так в Москве средняя зарплата веб-дизайнера составляет 64 тысячи рублей, а разработчика — 76 тысяч рублей, а, например в Краснодарском крае эта пропорция составляет 39/44.
Общее
Но всё-таки есть у веб-разработчика и веб-дизайнера одна общая немаловажная деталь: большинство заказчиков и слышать не хочет про это деление.
В прошлом тексте мы бегло рассмотрели отличия front-end, back-end и full-stack разработки, решая, какие языки могут понадобиться и насколько долгим может оказаться путь. В этот раз мы взглянем на вопрос чуть уже, выявив отличия между веб-дизайнером и полноценным front-end разработчиком (для упрощения, в дальнейшем мы будем называть его просто веб-разработчик).
Отличия
Формально описание профессий звучит идентично — и те, и другие занимаются созданием внешней оболочки сайта. Более того, в некотором разрезе оба специалиста выполняют одну и ту же работу: создают «скелет» сайта, подбирают цветовую гамму, обрабатывают изображения и добавляют эффекты. То есть в словах принципиальных отличий нет, но есть разница в подходе.
Веб-дизайнер — человек, стремящийся завлечь клиента и посетителя сайта визуализацией. Он точно знает, на какое место вы посмотрите в первую очередь, какие цвета вас раздражают, а также какого рода анимация вас заставит совершить заветный клик. Хотите так же? Тогда приглашаем вас на интенсив по обучению веб-дизайну.
Front-end разработчик тоже может быть посвящен в эту науку, но им движет не желание понравиться, а скорее страх сделать что-то неправильно. Он стремится создать не уникальный продукт, а правильный, согласно рекомендациям и трендам, конечный успех возложив в большей степени на контент и случай.
Творчество и математика
Очевидно, что front-end разработчик хоть формально и является творческой личностью, но подход проповедует исключительно математический. В основе всего лежит голая теория, килобайты мануалов о том. как правильно компоновать сайт, куда прикручивать скрипты, как повысить производительность, не потеряв в привлекательности. Каждый шаг должен иметь обоснование, статистика превалирует над индивидуальностью, а качество определяется не привлекательностью, а отсутствием ошибок.
Веб-дизайнер мыслит иными категориями, основа его работы — примеры особо удачных сайтов, подход к оформлению, максимально выбивающийся из общей массы, но при этом с этой массой не диссонирующий. Статистика для него играет роль только в том случае, когда заканчивается простор для творчества. Во всех остальных случаях полёт мысли первичен.
Сравнение веб-разработчика и веб-дизайнера можно свести к банальному разговору о доминировании различных полушарий, но чуть понятнее в плане будущего выбора будут градации. Упрощенно, дизайнер практически всегда избегает категорических оценок, в то время, как разработчик априори воспринимает свою работу бинарно, то есть или true, или false. Никаких вам более-менее.
Инструменты
Но подход к работе это одно, даже его можно поменять, а вот набор используемых инструментов — это как раз то, что описывает заявленную в заголовке разницу не только в философских рассуждениях, но и в конкретных строках резюме. Веб-дизайнер оперирует в основном графическими редакторами (Adobe Photoshop, Illustrator, Creative Cloud, Corel PaintShop Pro, GIMP, Inkscape, Fotor), маленькими вспомогательными программами для выбора цветов (0to255, Colour lovers), шрифтов (Font Flipper, Photoshop Font Detector, Prototypo), работы с картинками (Coverr, IconStore, UI Faces, Placeit, Subtle Patterns). И конечно должен быть набор шаблонов, потому что, так повелось, веб-дизайнеры не очень любят заниматься непосредственно сложной вёрсткой.
Веб-разработчик, конечно, тоже использует многие из указанных программ, но всё же основными инструментами считает те, что помогают непосредственно со «скелетом». Прежде всего это редакторы кода (Sublime Text, Visual Studio Code, Komodo Edit, Aptana), инспекторы (встроенные в Safari и Chrome), отладчики (Firebug, Fiddler) и тестировщики.
Резюме и оплата
Несмотря на то, что зачастую работодатели ищут сотрудников, способных тянуть сразу обе данные профессии, соискателям лучше не распыляться и строить резюме согласно своей основной специализации. Если для веб-дизайнера важно включить создать некое портфолио для оценки графических навыков, где будут как отдельные изображения, так и исходники сайтов, то для разработчика необходим профиль где-нибудь на Github-е, где бы потенциальный работодатель не только оценил «выход», но и мог внимательно изучить код.
Что касается зарплат, то здесь в подтверждение стартовому допущению разработчики имеют небольшое преимущество. Так в Москве средняя зарплата веб-дизайнера составляет 64 тысячи рублей, а разработчика — 76 тысяч рублей, а, например в Краснодарском крае эта пропорция составляет 39/44.
Общее
Но всё-таки есть у веб-разработчика и веб-дизайнера одна общая немаловажная деталь: большинство заказчиков и слышать не хочет про это деление.
Веб-дизайн и кодинг: как это связано и должен ли веб-дизайнер уметь программировать
Превращение веб-макета в полноценный функциональный сайт – довольно долгий, кропотливый процесс. Важнейшая роль в нем отведена коду, с помощью которого готовый дизайн переводится в рабочий проект. Но должен ли веб-дизайнер знать, как воплощаются в жизнь его творческие наработки? Это довольно спорный вопрос в IT-индустрии. Одни специалисты считают, что вовсе необязательно, другие – что просто необходимо. Какое из этих утверждений верно и как связаны веб-дизайн и кодинг, попробуем разобраться.
Жизненный цикл разработки веб-интерфейсов: от дизайна до верстки
Каждый, кто работает в сфере дизайна, понимает, что на создании веб-макета разработка сайта не заканчивается. Процесс состоит из множества этапов, на которых разные специалисты отвечают за конкретные задачи и в какой-то степени взаимодействуют между собой. В результате этого взаимодействия делаются такие веб-страницы, какими их видит рядовой пользователь: с определенной структурой, текстом, изображениями и другими графическими объектами. Чтобы более детально представлять общую картину и разобраться в том, что такое кодирование, вкратце пройдемся по этапам от дизайна до верстки.
Создание графического дизайн-макета
Все начинается с того, что дизайнер получает техническое задание, в котором расписаны требования к оформлению будущего сайта. На основании полученного запроса он определяет оптимальный стиль, продумывает цветовую схему и расположение блоков, рисует графические элементы. После завершения макет утверждается заказчиком и передается верстальщику.
Наступает этап frontend-разработки – той части программирования, где используются такие технологии, как HTML, CSS, JavaScript. И это то понятие, которое тесно переплетается с веб-дизайном. На данном этапе пишется код, необходимый для функционирования сайта, дизайн приводится в соответствие к макету.
HTML-кодирование
Первый шаг – написание основного HTML-кода. На базе HTML делается любой сайт. Впоследствии браузер считывает код и переводит его в то, что мы видим на экране.
При написании кода верстальщик выделяет общую логическую структуру, составляет план компонентов и создает страницы с помощью соответствующих обозначений. Все элементы преобразуются в html и выстраиваются в иерархической последовательности, определяющей порядок их загрузки и отображения.
Посредством специального мета-тега в разметке указывается тип кодировки текста. Чтобы понять, что это и зачем нужно, сделаем небольшое отступление. Кодировки – определенный набор символов, благодаря которому текстовая информация преобразовывается в биты данных и передается в сеть интернет. Он представляет собой некую таблицу, устанавливающую соответствия между буквами алфавита, цифрами, специальными знаками и машинными кодами.
Каждому символу в ней присваивается уникальный цифровой код. Для корректного отображения текстовой информации на веб-странице сервер и браузер должны использовать одну и ту же кодировку. С этой целью со стороны сервера устанавливается система, заранее отправляющая сообщение браузеру о кодировке посылаемой страницы. Иначе место текста могут занять непонятные иероглифы.
Основной параметр, отличающий разные виды кодировок – количество битов, передающих одно значение. К примеру, посредством одного бита можно закодировать два символа, двух – четыре, трех – восемь. Каждый добавленный бит удваивает количество доступных для кодирования символов. Существуют 8, 16 и 32-битовые кодировки. На данный момент самой распространенной системой кодирования является UTF-8.
Каскадные таблицы стилей CSS
HTML-код отвечает за основное содержание и семантику, формирует структуру, «скелет» веб-страницы. А вот визуальные компоненты, то есть большинство дизайн-информации, хранятся отдельно от содержания в CSS. Это еще один язык программирования, который используется разработчиками для стилизации элементов HTML, определения внешнего вида страницы.
Используя CSS, специалист создает стиль: описывает фон, шрифт, цвета, отступы. Стили прописываются прямо в разметке посредством тега style или же в отдельном файле, который интегрируется поверх HTML с помощью тега link с атрибутом rel=»stylesheet». Это позволяет избежать многократного описания внешнего вида отдельных элементов, сокращает код и экономит время.
Стоит отметить, что сайты, сделанные без CSS-части, выглядят совершенно голыми.
JavaScript
JavaScript – код, отвечающий за динамику, реализацию интерактивных элементов. Этот язык расширяет функционал сайта, буквально оживляя его. На нем основаны креативные анимированные меню, раскрывающиеся формы поиска, контактные формы с автоподбором слов, счетчики посещений, разнообразные эффекты. Для JavaScript доступны обширные библиотеки функций, API, плагины, позволяющие решать большинство веб-задач. Разработчики пишут или находят нужные скрипты и вставляют их в разметку с помощью тега