Как стать крутым дизайнером за 365 дней / Habr
Предлагаю вашему вниманию перевод статьи «How To Become An Awesome Designer In 365 Days» автора Marko Stupić.Одно из древних высказываний, которое меня мотивирует — “Практика ведет к совершенству”. Пословицы бывают банальны, но в определенных ситуациях попадают в точку. Я трудоголик по натуре, в чем, разумеется, есть и положительные, и отрицательные стороны. Одна из положительных сторон — я не могу дать себе передышку и ничего не делать целый день. С другой стороны, работа без отдыха и четких целей снижает мотивацию, и, несомненно, утомляет. Вот почему я решил довериться старой доброй пословице и попытаться стать лучше.
Стать отличным дизайнером — серьезный вызов. Стать известным и признанным — еще сложнее. В сфере диджитал-дизайна так много узких специальностей со множеством категорий дизайнеров, которые, каждый в своей области, делают себе имя. Некоторые из них — отличные веб-дизайнеры, другие — отличные UI-дизайнеры, если концентрируются на анимации, и так далее. Как найти себя среди огромного числа успешных людей, и, что волнует больше, как преуспеть в столь конкурентной среде?
Ответ на этот вопрос: работать, работать и еще раз работать. Конечно, талант помогает. Но именно настойчивость и труд отделяют хорошего дизайнера от отличного.
Чем я хочу поделиться, это моя история о том, как я начал свой путь, о личностном и профессиональном росте.
Эта иллюстрация — мой первый шаг в Dribbble.
Практикуйтесь
Очевидное преимущество работы в творческом и именитом диджитал-агентстве — ваше окружение заставляет вас совершенствоваться на каждом шагу. Ваши коллеги — эксперты в своей области, и меньше всего вы бы хотели отставать. Конкурентная среда действует как исключительно позитивный стимул.
Я хотел принадлежать к числу этих потрясающих людей. Я знал, что мне нужно было развивать свой творческий потенциал и продвигать себя как дизайнера.
Первое, что пришло в голову — тренировки. Когда я хожу в спортзал, я часто вижу спортсменов, которые тренируются ежедневно, развивая ловкость, силу и координацию. То же самое с музыкантами. Они повторяют свои композиции до тех пор, пока не начинают исполнять их по памяти. Практикуясь в различных занятиях, мы обучаемся новым вещам, новым движениям. Наш мозг создает новые синоптические связи, и мы начинаем видеть проблему в новом свете, другими словами — мы развиваем нашу креативность.
Практика не ведет к совершенству. Только совершенная практика ведет к совершенству. Винс Ломбарди
Придумайте испытание
Иметь мотивацию к действию — столь же критично, если вы хотите расти и развиваться. Мне нужно такое испытание, чтобы пришлось превзойти себя. Мне также нужно отчетливо представлять конечную цель. Когда вы разрабатываете приложение, вы отлично знаете, чего ждете от конечного продукта. Множество тонких моментов придется утрясти и причесать в ходе проекта, но ваша цель должна быть ясна. В моем случае это означает, что мне нужно придумать дизайн-проект, который потребует превзойти себя.
Первая опубликованная иллюстрация.
Так появился проект icon-a-day.com.
Первоначальная идея состояла в том, чтобы создавать несложную иконку каждый день в течение года, используя Adobe Illustrator как основной инструмент. Концепция проста: окружность, в которую я вписываю иконку. Темы иллюстраций абсолютно разные. Должен признаться, что в начале я не был уверен, что это к чему-то приведет. Но основной целью было улучшить навыки в диджитал-графике. Я хотел делать непохожие иллюстрации, чтобы освоить несколько стилей. Я познавал свои возможности (и продолжаю их познавать).
С тех пор, как начался проект, он практически живёт собственной жизнью. Создание иконок стало моим вторым я, почти как чистить зубы каждое утро.
Хотя первоначальной идеей были простые иконки, со временем они переросли в полномасштабные иллюстрации.
Эскиз.
Законченная иллюстрация.
Познавайте свои возможности
Естественно, работа над таким проектом в личное время влечёт за собой определённое количество проблем. Самая большая проблема для меня — найти время. Работая с 9 до 5, вы осознаете, что время на самом деле не бесконечно. Ваш день может быть перегружен личными или рабочими обязанностями. Очень трудно в одиночку вкладывать в проект все, что у вас есть.
Один из подводных камней долгосрочного проекта — потеря мотивации и неизбежная потеря качества. Ключевая задача в том, чтобы всегда оставаться сконцентрированным на основной цели и публиковать иконку в конце дня не смотря ни на что.
Оставаться стойким на всем протяжении проекта — само по себе испытание. Я начал с простых иконок, но, развиваясь, я изучил новые техники применения теней, фильтров, эффектов и т.п.
Эти примеры показывают прогресс, который я сделал от начала до настоящего момента:
День 3.
День 25.
День 111.
День 168.
День 214.
День 286.
Берите обязательства
Вы должны оставаться обязательным в вашей работе. Находить мотивацию к действию изо дня в день бывает трудно. Я понял, что самореклама помогает справиться с этой задачей. Публикация ваших работ в соцсетях вроде Tumblr, Twitter, Behance или Dribbble даёт вам широкую аудиторию. Признание со стороны накладывает на вас обязательства по продолжению проекта.
Я начал вести свой блог на Tumblr, где ежедневно публиковал иконки. Я смог легко наблюдать свой прогресс в течение этих 365 дней, к тому же это хороший способ показать работу другим людям. Помимо Tumblr, иллюстрации, которые, как я считаю, мне удались, попадают на Dribbble — это сообщество больше ориентировано на дизайнеров. Когда вы публикуете свою работу в сети, у вас появляется определённая аудитория подписчиков, и, как правило, растет ваша популярность как дизайнера.
Если бы я пропустил один день, я бы нашел оговорку, чтобы пропустить ещё один и так далее. Будьте верны вашему делу, и оно окупится.
Заручитесь поддержкой друзей
Если вы начинаете долгосрочный проект, есть риск, что друзья отнесутся к нему скептически. Не попадайте в эту ловушку. Друзья играют большую роль в вашем развитии. Вам нужно окружить себя людьми, которые будут поощрять вашу работу. Людьми, которые будут видеть смысл в вашем проекте и дадут вам совет, когда вы столкнетесь с творческим кризисом, и поверьте мне, будут дни, когда этот кризис случится.
Хотя мой проект и требует времени, я не потерял друзей из-за него. Совсем наоборот, я завёл несколько новых в течение проекта, особенно в дизайнерской среде.
Осознайте результат
Может показаться, что вы не получите от вашего проекта больше, чем личностный рост. Вы удивитесь, какой результат можете получить, начав что-то делать. Кроме раскрытия творческого потенциала, который мог спать все это время, есть много других вещей, которые могут произойти на пути к вашей личной цели.
Что касается меня, я стал сильнее в иллюстрации, я научился анимировать мои иконки (это был небольшой сторонний проект, с которым мне помогли коллеги), я встретил много новых творческих людей и открыл двери в сообщество дизайнеров. Проект обрёл коммерческую сторону: людям нравились иллюстрации, и они хотели получить право на использование или нанять меня, чтобы делать иллюстрации на заказ. Я также начал продавать мои иконки на Society6, где вы можете встретить их на различных предметах обихода, таких как кружки, часы, покрывала.
Все последствия этой работы привели к повышению уверенности в себе. Конечный результат проекта перекрывает мелкие отрицательные моменты, которые могут случиться на пути.
Конец долгого пути
Если бы кто-то сказал мне год назад, что я буду создавать по одной иллюстрации в день, я бы, скорее всего, не поверил. Я не осознавал, какого прогресса могу достичь в столь короткие сроки.
Коллеги с работы спрашивают меня: что ты будешь делать, когда закончишь свою 365-ю иконку?
Честно? Я не знаю. Вероятно, я найду себе другую цель, новое испытание, которое сделает меня лучше, уже в новой сфере диджитал-дизайна.
Что я могу сказать наверняка, так это то, что проект icon-a-day стал моим большим достижением, и я рекомендую каждому начать собственный проект. Жизнь — это процесс непрерывного обучения, и подобные цели помогают нам расширить собственные границы. Это даёт нам рост, как профессиональный, так и личностный.
Путь веб-дизайнера: от убожества до божества
2013-11-25
Внимание, вопрос: возьмут ли Машу в штат веб-студии?
В России есть проблема: настоящих веб-дизайнеров мало. У проблемы как минимум две причины:
Первая — на веб-дизайнеров фактически не учат. Номинально специальность «графический дизайн» есть во многих вузах страны, но из неё выходят художники-оформители, иллюстраторы, полиграфисты, декораторы… Кто угодно, только не веб-дизайнеры. Эта всё из-за второй причины.
Вторая причина — особенности перевода. Если вписать слово design в translate.google.com, то оно превратится в «разработку» и «проектирование». В России же человек, называющий себя дизайнером, воспринимается общественностью именно как «украшатель» и «оформитель». Стереотип настолько устойчив, что форматирует мозг в том числе и тех, кто стремится стать веб-дизайнером, и уж тем более тех, кто преподает дизайн в ВУЗе.
Результат — расплывчатое представление кандидатов на место веб-дизайнера о том, что им вообще нужно будет делать.
Но отрасли нужны люди. Поэтому сферической студии в вакууме остается либо выманить/подкупить/выкрасть веб-дизайнера из соседней сферической студии, либо взять на борт безусого новичка и вырастить из него дремучего спеца. И второе делается повсеместно, у нас в том числе. Мы готовы учить. Веб-дизайн — это такая отрасль, которую формируют люди, выучившиеся всему в основном за счет собственного упорства. Тем они и ценны.
Академическое образование — очень неплохой бонус, если знать, что от него брать.
Система Российского образования основана на самообразовании. В большинстве своём на факультетах графического дизайна хорошо дают «классическую школу»: живопись, например, но обходят стороной уроки по прикладному ПО. С другой стороны, специализированное ПО — это лишь инструмент, главное обучить базису, основам композиции и т.д. Литературы, конечно, на эту тему тоже предостаточно, но тут важна обратная связь, критика, наставления сенсея.
Итак, что нужно развить в себе, чтобы претендовать на роль веб-дизайнера в хорошей студии?
— 0 —
Осознать место веб-дизайнера в «пищевой цепочке». Нужно понимать, что веб-дизайнер стоит на перекрестке интересов бизнеса, пользователей и разработчиков. Поэтому жизненно важное качество для дизайнера: умение понять весь процесс. Вы должны точно знать задачи проекта, мыслить, как предприниматель, а также иметь хорошее представление о технических возможностях веба и постоянно смотреть на свое детище глазами обычного пользователя.
Подсказка для новичка: постоянно взаимодействуйте с коллегами — попросите руководителя проекта пояснить бизнес-составляющую, спросите верстальщика, сможет ли он реализовать вашу супер-идею. Это лучше, чем многократно переделывать проект.
— 1 —
Самый популярный пункт в резюме каждого новичка — это «способность к самообучению». Именно это качество наиболее важно для веб-дизайнера на старте. Саморазвитие стоит начинать с развития вкуса. Но если вы подумали, что вкус сформируется у вас после прочтения десятка книг и просмотра сотни сайтов, то вы глубоко заблуждаетесь. Созерцание жизненно необходимо комбинировать с практикой. Поэтому вкус будет выковываться и закаляться по мере того, как вы будете производить никчёмные дизайны. Тоннами. И поначалу они будут казаться вам если не шедевральными, то сносными, уж точно.
Подсказка для новичка: не бойтесь сделать плохо и не бойтесь показать результат дизайнеру-наставнику. Он не станет пинать вас ногами за неправильный интерлиньяж. В конце концов, он тоже когда-то был таким же, как вы. Даже хуже — его возможности для обучения были явно скуднее.
— 2 —
Набивайте руку. Берите сайт, дизайн которого считаете крутым — и копируйте. Не в коммерческих целях, конечно же. После того, как вы пару часов провозитесь с градиентами, обводками и тенями, вы сможете на своей шкуре почувствовать, из чего состоит «простенькое» верхнее меню сайта Apple. И хотя бы сможете повторить технику.
Подсказка для новичка: можете скачать какой-нибудь UI-kit в формате PSD и послойно посмотреть, из чего он состоит. Развернуть окно стилей и понять, какой инструментарий используют веб-дизайнеры. Крайне полезно для начинающих.
— 3 —
Говорят, что хороший дизайн есть там, где пользователь его не замечает. Поэтому частое заблуждение многих новичков: «здесь нет ничего сложного, я смогу не хуже». Определенно, сможете. Только для этого нужно создать не один макет. С опытом придет понимание законов стиля — что можно сочетать, а что не стоит; как привнести равновесие в композицию; как правильно сочетать шрифты и т.д.
Подсказка для новичка: смотрите на чужие сайты как дизайнер и критик, мысленно разбирайте их на составляющие, анализируйте, подмечайте отдельные графические приемы и обращайте внимание на композицию в целом. Это самые ценные знания, потому что их можно напрямую применять в своих работах.
— 4 —
Развейте в своей голове миф о том, что дизайнер — это свободный художник. Мы создаем коммерческий продукт, а это значит, что дизайнер всегда будет ограничен — сроками, референсами, конкретными бизнес-задачами, разрешением мониторов, возможностями веб-технологий и т.д. По большому счету, если бы не было ограничений, не было бы и дизайна. Дизайн — это решение задачи, способ изящно обойти ограничения и добиться работающего результата.
Подсказка для новичка: Сложнее всего даются задачи, где ограничений нет совсем, чуть легче — те, где есть очень жесткие рамки. Пример: вам нужно сделать комплект иконок для двух разных сайтов. В первом случае вам говорят: «Сайта пока нет совсем, мы пока не можем рассказать о своем бизнесе, иконки нужны универсальные, делайте!». Мозг хорошего дизайнера при такой постановке задачи коллапсирует. Во втором случае вам ставят задачу: «Нужно 5 иконок, размерами не больше 20×20 пикселей, флэт, вот фирменные гайдлайны, от которых нельзя отступать».
— 5 —
Успевайте за развитием веба. Чтение книг — вещь хорошая, но они всегда описывают уже известные кейсы. Лучший способ получения информации о том, что есть «современный дизайн» — это просмотр тематических сайтов с подборками (лучше европейских).
Подсказка для новичка: работа веб-дизайнера всегда — это больше, чем просто сделать визуальную часть сайта, «картинку». Дизайнер должен продумать интерактивную часть, чему сейчас уделяется пристальное внимание. Поэтому снова на важное место в самообучении становится осведомленность о технологиях веба. В идеале веб-дизайнер должен уметь если не верстать, то мысленно представлять, какими средствами будет воплощаться его задумка.
— 6 —
Практикуйтесь в создании руками чего-то «вне веба». Вам чертовски пригодится навыки рисования от руки, знание законов светотени, а в зависимости от проекта вам может понадобиться, например, умение создавать «мультяшные» иллюстрации, работать с фотографией или 3D. Создание интерфейса — довольно узкое направление, но комплексная разработка сайта почти всегда подразумевает создание и графической начинки. Чем больше навыков будет развито лично у вас, тем более ценным вы будете для студии.
Дизайн — это работа
А у вас еще и сверхзадача — работая, научиться всему. Успевайте.
Как мы делаем веб-дизайнеров
Уже несколько лет мы занимаемся «выращиванием своих специалистов, поэтому кое-какой свод правил тоже разработали. Он нам видится таким:
-
У дизайнера-стажёра должен быть наставник. Если нет закрепленного, то стажер может свободно спросить совета у арт-директора.
-
Каждый дизайнер может тратить часть рабочего дня на поиски вдохновения, просмотр тематических сайтов, выполнение туториалов. Самообучение поощряется, вне зависимости от того, стажер вы или нет.
-
Задачи выдаются по нарастающей, мы испытываем стажёра на прочность. Если нагрузки выдерживает и старается — получает бонус в карму.
-
Выдаются разноплановые задачи: от прототипирования структуры сайта в черно-белом макете до отрисовки иконок. Так нащупываются таланты дизайнера.
-
Должны быть созданы условия для роста: мы, например, раз в месяц проводим «Дни свободного дизайна» — соревнования на заданную тематику; есть еженедельные мастер-классы по графике и библиотека с кучей вкусных книжек.
Всем дизайнерам добра! Из Сибири с любовью.
Благодарим за материал Владимира Завертайлова и блог SCRUM-студии Сибирикс.
Читайте также:
18 вещей, которые нужно знать растущим специалистам
Хакеры: этичные и не очень
Рекрутинг в IT: разрушаем легенды и суеверия
как правильно выбрать курсы и программы обучения
От автора: как и любой другой индустрии, Интернету нужны мастера, которые будут над ним работать. Одной специальности здесь мало. Кто-то должен придумать концепт, кто-то оформить идею в рабочий макет, а кто-то — взять и построить приложение. Чтобы выполнить весь комплекс работ, люди должны владеть навыками и иметь соответствующий способ мышления: креативный художник или изобретательный программист. Если вы тоже не раз задавались вопросом «web дизайн и web разработка: что из этого моё?», значит, информация из статьи вам поможет определить дальнейший вектор развития.
Граница между дизайном и разработкой
Спойлер в самом начале статьи: сегодня грань может быть весьма зыбкой. Завтра программист станет дизайнером больше, чем сегодня. Технологии развиваются, а требования к профессионалам растут. Компетенция современного разработчика тесно переплетается с навыками дизайнера. Но для того чтобы уже сегодня читатель смог выбрать курсы, на которые он запишется завтра, проведем конкретную грань.
Дизайн — это тоже разработка?
Новичков удалось удивить названием, не так ли? Этого и добивались. Ведь в установлении разницы между этими понятиями многие пытаются поставить знак ≠. Что ж, такой подход облегчает восприятие, но не передает реальную суть. Самое печальное, что подобные высказывания звучат в программах подготовки специалистов. Но сегодня сможем показать верный путь.
Веб-дизайн — это один из этапов веб-разработки, или отрасль, если уже говорить о обучении. Дело в том, что создание (разработка) веб-приложения или сайта состоит из проектирования внешнего вида, верстки фронта и программирования. Так что, дизайнеры, не позволяйте сравнивать себя с разработчиками, ведь вы коллеги, с точки зрения логики.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееПрофессионалы этой отрасли должны обладать определенным уровнем знаний для создания самой структуры страницы (хедер, секции, футер, меню, навигация), понимания, как лучше подать информацию пользователю, и, наконец, красивого оформления созданного проекта. Это требует понимания технических основ процесса. Ведь рисовать то, что будет работать медленно, или то, что сложно для реализации — неверный шаг. Потому курсы по веб-дизайну пользуются невероятной популярностью: самостоятельно понять тонкости работы, не имея практического опыта, сложно.
Как правило, веб-дизайнерами становятся технически подкованные люди, которые имеют хорошо развитое художественное воображение. Совсем не обязательно быть живописцем. Но некоторыми врожденными качествами нужно обладать. В этом ключевая разница, если говорить о программистах: дизайнером проще родиться, чем стать. Среди обязательных характеристик будущего веб-художника:
усидчивость и терпеливость. Быть веб-дизайнером — это пробовать несколько вариантов, дорабатывать, знакомиться с новыми программами и инструментами;
умение разбить работу на этапы. Перед тем как начать обучение, определите, умете ли вы системно подходить к выполнению задачи. Тайм-менеджмент и организация труда — это то, что делает талантливого человека профессионалом;
нестандартное мышление. Нет, речь идет не о причудливости, которую приписывают артистам. Компетентный дизайнер умеет создавать уникальные продукты. Умение работы с шаблонами, их сопоставление и реализация оригинального дизайна — хороший навык. Но даже для этого нужно уметь мыслить, как дизайнер;
постоянная жажда обучения. Хороший слесарь в свободное время читает журналы о технике. Так и дизайнер должен постоянно следить за новинками и тенденциями. Сайты, которые были созданы в 2007, тоже были трендовыми. Сегодня курс развития изменился. Нарисуйте приложение старого образца, и вас посчитают некомпетентным.
Выбирать направление обучения «веб-дизайн» — означает использовать свои творческие возможности по максимуму. Будьте готовы к тому, что тот макет, который вы считаете идеальным, не будет принят заказчиком или разработчиком следующего звена. И никому не будет разницы, сколько времени вы потратили на создание, какими принципами руководствовались. «Не нравится» и «не подходит» — это понятия, которые не знают объективности.
Программист-разработчик
Теперь немного больше поговорим о подмене понятий, которую нам придется принять. Веб-разработка — это создание приложения от начала до конца. Она включает все этапы от идеи, до управления контентом с помощью CMS. Согласно определению, даже копирайтер является разработчиком веба. Но если мы пойдем таким путем, то не рассмотрим вопрос, который стоял с самого начала: веб-разработка или веб-дизайн? Да, это неверное толкование. Да, все что будет сказано далее, основано на заблуждении. Но это настолько принято обществом, что уже почти считается правдой. Так что, выхода у нас нет 
.
Под веб-разработчиком понимают специалиста, который проводит верстку приложения с макета, разрабатывает интерактивные элементы страниц, пишет программы для серверной стороны и поддерживает проект в течении его работы. Вышеперечисленные этапы могут выполняться как фуллстаком, так и узкими специалистами, но об этом позже.
Обучение веб-разработчика может оказаться еще более тернистым, чем подготовка дизайнера. В дизайне все просто: не хочешь рисовать — значит, ничего не получится. Человек сразу чувствует неладное, если создание макетов — слишком «неродной» труд. С веб-разработкой иначе. Чтобы стать программистом или верстальщиком, вам нужен лишь достаточный уровень интеллекта, усидчивость и, самое главное, умение долго идти к своей цели, даже если очень трудно.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееВся веб-разработка — это решение проблем системы оригинальными и эффективными способами. Несмотря на то, что существует множество готовых решений, вы постоянно будете сталкиваться с новыми неурядицами. Несложно выучить язык программирования, несложно понять, как система работает. Но на формирование стиля мышления, который способен в короткий срок преодолеть трудности разработки, уйдут годы. В этом и заключается компетентность супер-разработчика.
Навыки специалиста
И так, вы решили освоить одну из профессий: веб-разработка или веб-дизайн. Что же выбрать? Ответ на этот вопрос лежит не только в том, что вы считаете наиболее подходящим лично для себя. Намного более адекватно можно оценить направление развития, если взять и начать учиться в двух направлениях. Как выбрать правильные курсы обучения, вы узнаете ниже.
Начни с простого: первые шаги веб-разработчика
Если вы еще не знаете, насколько это разносторонняя сфера, значит все только впереди. Наверняка, трудно было бы даже создать специальность в университете, название которой «веб-разработка». Дело в том, что время, когда один разработчик мог решать большинство проблем приложения, уже давно прошло. Разделение труда на различные отрасли теперь является эталонным для эффективного создания программы под веб.
Как вы могли слышать ранее, разработчики делятся на специалистов серверной и клиентской сторон. Лучший способ понять грани компетенции каждого из них — это начать обучение. Да, различных технологий много. Но можно придумать курс ознакомительного обучения, с которым вы поймете, какой из сторон хотели бы служить.
Представим, что вы уже знаете спарку HTML/CSS. Если еще нет, то потратьте на технологии два дня, и они у вас в кармане. Нет разницы, даже если вы хотите стать дизайнером. Такой навык не помешает, ведь даст понимание того, как будут расположены элементы макета в будущем.
Теперь переходим к хардкору. Пока не знаем, что вы будете учить далее, но уже приступайте к изучению JavaScript. Да, это преимущественно инструмент фронтендщика. Но, изучив JS, вы познакомитесь с типизацией данных, эталонным синтаксисом и хоть немного осознаете сложность процесса. Если этот этап пройден успешно, и вы пишете неплохие программы на этом языке, значит вы видите, как работают клиентские скрипты. Интересно работать на фронтенде? Продолжайте обучение.
В случае стремления к чему-то другому изучите один из языков для бэкенда. Это может быть веб-язык PHP или любой из языков программирования общего назначения. Советуем выбрать Java, Python или C/C#/C++. Дело не в том, что они лучше, чем PHP (быстрые и мощные), а в том, что с такими знаниями легче реализовать себя в альтернативных сферах. Ну, а если судьба заставит работать с PHP, то со знанием «взрослого» PL, обучение на «препроцессоре» не займет больше недели.
Если даже бэкенд не привлек ваше внимание, значит, веб-разработка просто не для вас. Хотите программировать? Есть масса отраслей, где вы можете применить приобретенные знания, но сегодня не об этом.
Что постигнуть дизайнеру?
Photoshop, Illustrator, GIMP или любой другой графический редактор. Разница лишь в том, что именно вы хотите рисовать и какой из интерфейсов выучите быстрее всего. В любом случае, начать лучше с Photoshop. Он наиболее универсален из всех представленных на рынке.
Но одного только умения пользоваться редактором мало. Впереди обучение, в котором вы узнаете о совместимости цветовых схем, разработке согласно принципам юзабилити, адаптивности, кроссплатформенности и прочих необходимых сегодня элементов дизайна. Но, чтобы понять, хотите ли вы стать профессионалом сферы, пройдите курсы создания простых макетов сайта. Как только вы смастерите собственный макет, то поймете, лежит ли душа к такому виду деятельности.
А если одновременно?
Стремление к фуллстаку — это стремление к свободе. Человек хочет быть независимым от других специалистов, самостоятельно принимать решения о судьбе проекта. Но идти к полноценной компетентности в сфере веб-разработки на начале пути — неразумно. На рынке труда нужны спецы, которые безупречны хотя бы в чем-то одном. Тем не менее, осваивать технологии поэтапно, системно, одна за одной — путь к настоящему успеху.
Сегодня не удивишь фронтендщиком, который и макет поправит, и в бэк-энд без страха заглянет. Но такой уровень знаний требует длительного обучения и практики.
Шанс для оффлайна
Впервые курсы могут стать приемлемым вариантом. Но уж точно не для веб-разработки. Зато для дизайна — самое оно. Работа в группе стимулирует творческий мыслительный процесс, позволяет быстрее применить знания на практике и, в целом, оптимизирует обучение. Если вы хотите стать дизайнером, освоили основные инструменты и желаете почувствовать разницу между заурядным и уникальным дизайном, тогда школа — отличный выбор.
Хорошие веб-художники получаются с студентов ВУЗов, которые обучались по программе «графический дизайн». Здесь можно получить знания об основных принципах построения иллюстрации во всех сферах. Кстати, веб-дизайн считается разновидностью графического дизайна.
Вот и все! Выбирайте то, что по душе, и развивайтесь в выбранном направлении!
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
Освойте востребованные навыки дизайн и верстки
Комплексный процесс дизайна и верстки на примере лендинга!
СмотретьОт нуля к единице. Как я прошел путь от фрилансера до главного дизайнера за год
Первое время мне нравился ритм жизни фрилансера. Но после очередного проекта, о котором я забыл, как только получил деньги, мне захотелось что-то в моей работе поменять. Я выписал свои навыки, стремления и выбрал для себя новый путь. Мне захотелось не просто получать деньги, но и сделать что-то значимое. Именно в тот момент я решил на время отказываться от будущих заказов и подготовил пошаговый план достижения цели — стать главным дизайнером продукта.
Начало
Не имея приличного портфолио, мне удавалось несколько раз в месяц получать новый заказ. Клиентов устраивал мой незначительный опыт, но для работы над серьезным продуктом его не хватало. На листе бумаге я набросал следующий план достижения цели:
1. Реализовать три хорошие дизайн-задачи.
Не все работы, сделанные на фрилансе, я мог разместить в портфолио. Некоторые из них были сделаны в спешке, другие мне перестали нравиться после правок заказчика. Эти три работы должны были стать для меня отдушиной от всей рутины.
2. Подготовить портфолио
Я решил использовать сторонние ресурсы (Behance, Dribbble) и не тратить силы на создание своего сайта. Это помогло мне сэкономить лишние деньги и время.
3. Найти работу
Давно следовало обновить профили на hh.ru и linkedin.com. На самом деле, обновил я их сразу, но законченными профили стали только после размещения работ.
Развитие
Я прекрасно понимал, что единственный способ улучшить дизайн-навыки — практика. Поскольку срок достижения цели я ограничил двумя месяцами, я начал искать способы ускорить развитие. И такой способ нашелся.
На конференции UX-среда я познакомился с основателем сервиса Tilda Publishing. Сервис мне понравился. Изучая сайт, я наткнулся на его дизайн-курс и, прочитав несколько ознакомительных уроков, приобрел его. Именно этот курс помог мне ускорить развитие в несколько раз. Он стоил для юного дизайнера прилично (8000₽), но я прекрасно понимал, что в дальнейшем он окупится в несколько раз.
Я приобрел курс и подготовил план ежедневного развития:
— минимум 5 часов практики дизайна в день;
— минимум одна тема из курса в день (+ конспект).
Толковая теория + практика дали результат очень быстро.
Поиск работы
Выполнив первые два пункта, я начал получать предложения о работе чуть ли не каждый день. Не одно из них меня сильно не заинтересовало. Большинство компаний желало найти простого исполнителя, тогда как мне хотелось влиять на продукт. Поэтому я обратился к списку контактов на Фейсбуке и вспомнил бывшего коллегу, который развивает перспективную компанию.
Я зашел на сайт компании и понял, что с момента моего ухода дизайн совсем не продвинулся, хотя прошло прилично времени. «Вот он шанс» — подумал я и предложил в качестве тестового задания обновить дизайн сайта.
Познавательная история #1
Сайт действительно устарел, и мою идею выдвинули на обсуждение, но через несколько дней я все равно получил отказ со ссылкой на нехватку ресурсов. Я удивился, но работу над сайтом не остановил и в конце недели показал свои результаты. Качество работы заставило директора пересмотреть свое решение и мне предложили работу UX-дизайнера.
Работа
Я занимался проектированием интерфейсов. Дизайн визуальной части решено было передать сторонней студии, что задело мое самолюбие. К тому же, это было долго и дорого. Директор был в хороших отношениях с сотрудниками той студии, поэтому мои аргументы были отвергнуты, и я согласился выполнить свою часть работы. Но дизайнерское эго дало о себе знать, и я кое что изменил.
Познавательная история #2
Я, как обещал, продумал, спроектировал интерфейс и отдал его директору. Но помимо этого, я довел визуальную часть до такого уровня, что отдавать материалы на аутсорс стало не просто невыгодно, а бессмысленно. Моя работа сказала сама за себя, и вопрос с сторонней студией отпал. Помимо восстановления самолюбия, я вырос в глазах коллег и через месяц занял место главного дизайнера продукта.
Что мне помогло добиться желаемого
Цель и план
Как вы помните, я привык думать на бумаге. Я считаю, что записать цель и план очень важно. Раньше я использовал для масштабных целей блокнот, но с появлением сервиса достижения целей SmartProgress эта необходимость пропала.
Мероприятия
Не доклады, а именно атмосфера конференций способствует развитию. Ты попадаешь в общество профессионалов и начинаешь прислушиваться к разговором. Понемногу тебя начнут замечать и спрашивать мнение.
Конференции — это полезные контакты. На них я познакомился с руководителем дизайн-команды Mail.Ru Group Юрием Ветровым, основателем стартапа Statsbot Артемом Кейдуновым, главным дизайнером в Badoo (ранее ВКонтакте) Павлом Шумаковым и многими другими.
Конференции — это возможность оставаться «в теме». Именно на конференции я впервые узнал об инструменте для дизайна Sketch, когда о нём мало кто слышал, и уже около двух лет я работаю только в нем.
Книги
Я прочел множество книг, но подумав, какие книги помогли мне стать главным дизайнером, я выделил следующие:
“Как писать хорошо” — Уильям Зинсер
Большинство людей недооценивает навык письма, хотя сейчас мы общаемся в большей степени письменно. Мы пишем письма работодателям, коллегам и каждое письмо формирует представления о нас, как о личности и профессионале.
“Кради как художник” — Клеон Остин
Я наткнулся на эту книгу в книжном на Тверской. Она была на английском, но, стоя у полки, я проглотил её почти полностью. Остин Клеон кратко и очень убедительно преподносит 10 заповедей творческого человека.
“Бизнес с нуля” — Эрик Рис
Эрик Рис на примере собственной компании рассказывает как тестировать идеи, вносить изменения в продукт и, что самое главное, зарабатывать на нем. Эта книга избавила меня от перфекционизма при создании первых версий продукта.
“Номер 1. Как стать лучшим в том что ты делаешь” — Игорь Манн
Я всегда рекомендую эту книгу, так как именно с нее начался мой путь активного саморазвития. Игорь Манн, в свойственной ему манере, преподносит понятную схему личного развития, применимую практически в любой отрасли.
“Разработка ценностных предложений” — Александр Остервальдер
Отличная книга, которая формирует в голове понимание, как работает бизнес. Этот навык важен каждому, кто хочет влиять на развитие компании. В основе книги лежит бизнес-модель Александра Остервальдера, заполнив которую можно многое узнать о своей компании и найти проблемные места.
Заключение
За свою недолгую карьеру я убедился, что найти приличную работу не сложно. Еще во время обучения в институте мне удалось поработать веб-разработчиком, писателем в мужском журнале и дизайнером. От начала знакомства c новой темой до получения первой прибыли у меня уходило не более полугода.
Я пробовал различные деятельности и в итоге понял, какая именно мне приносит удовольствие. На это ушло несколько лет. Может со временем я еще раз сменю вид своей деятельности. Этого я не знаю, но из личного опыта знаю, что это возможно.
Я уверен, что в нашем сообществе есть сотни, а то и тысячи подобных историй. Поделитесь своим опытом достижения целей в комментариях. Это будет полезно всем.
Спасибо за внимание!
P.S. Если у вас нет аккаунта на хабре, вы можете высказать свое мнение к данной статье в нашем блоге — SmartTalks
Руководство по веб-дизайну для разработчиков / RUVDS.com corporate blog / Habr
Автор статьи, перевод которой мы публикуем сегодня, говорит, что создал свой первый веб-сайт когда ему было 14 лет, в виде школьного проекта. Тогда перед ним стояла простая задача: разработать сайт, содержащий некий текст, изображения и таблицу. Обычно к школьным проектам он относился так: сначала о них забывал, а когда подходил срок сдачи, делал их в самый последний момент. Однако в тот раз всё было совсем не так. Особенно его интересовало то, как будет выглядеть его первый сайт. Тогда, для того, чтобы сделать всё так, как надо, он приложил все усилия. Автор материала говорит, что, ещё с тех давних времён, он стремился к тому, чтобы то, что он делает, выглядело бы как можно более привлекательно. Это стремление живо в нём до сих пор. Здесь он хочет поделиться советами по дизайну веб-страниц.Дизайн
Это можно признавать, можно не признавать, но люди судят о чём бы то ни было по его внешнему виду. Если то, что вы делаете, смотрится хорошо, то шансы вашего проекта завоевать доверие окружающих растут, естественно, если словом «хорошо» можно описать не только его внешний вид, но и функциональность.
Я многие годы создавал разные собственные проекты и за это время всё больше и больше внимания обращал на развитие своих дизайнерских способностей, а не только на совершенствование своих умений в области программирования. Код — это важно, но если вы хотите создать собственный прибыльный проект, то вам придётся решать массу задач, одной из которых является дизайн. Разработчику-одиночке, для того, чтобы чего-то достичь, приходится всесторонне себя развивать.
Отличный дизайн — это не нечто такое, что способно собрать кучу лайков на Dribbble. Это то, что сначала даже не замечают. Это — баланс между предельной простотой и чем-то таким, от чего захватывает дух. Дизайн может быть как конкурентным преимуществом проекта, так и одной из причин его провала.
Дело не в таланте
Когда я был помоложе, я много играл в Майнкрафт. Я смотрел на то, прекрасное, что создают другие, но когда пытался построить что-то своё, всё получалось похожим на коробку. Ни красоты, ни стиля. Да и как можно вообще сделать что-то красивое в Майнкрафте?
Потом я нашёл одного видеоблогера на YouTube и построил копию того, что строил он. Через несколько недель я сформировал собственный стиль и мог создавать уже что-то своё. Внезапно мои конструкции перестали выглядеть как непонятно что. Да что там говорить, я даже выиграл один конкурс.
Собственно говоря, я рассказал эту историю к тому, что дизайн — это навык, и, как и в случае с любыми другими навыкам, дизайн можно освоить.
Выбор инструментов
В программировании можно взять обычный Блокнот и написать с его помощью приложение, которое ничем не уступит тому, которое создано с помощью мощной IDE, хотя программирование в Блокноте может оказаться не самым приятным занятием, и, вероятно, процесс разработки займёт куда больше времени, чем при использовании правильных инструментов. Если говорить о веб-дизайне, то роль Блокнота тут может играть MS Paint, и я надеюсь, что, как и в примере с Блокнотом и программированием, очень немногие будут пользоваться им для решения дизайнерских задач.
Популярные инструменты веб-дизайна
Вот несколько популярных инструментов для веб-дизайна:
- Sketch — инструмент, предназначенный исключительно для MacOS. Если провести параллель с миром веб-программирования, то это будет что-то вроде React для дизайна. Возникает такое ощущение, что упоминание о Sketch присутствует в каждой вакансии дизайнера. Стоит эта штука 99 $ в год.
- Adobe XD — бесплатное кросс-платформенное средство, которое, продолжая аналогию с программированием, похоже на Vue. Вокруг Adobe XD сформировалось не такое большое сообщество, как вокруг Sketch, но освоить этот инструмент очень просто.
- Adobe Photoshop — это нечто вроде швейцарского ножа в мире дизайна, о котором знают все, и который можно сравнить с jQuery. Пользоваться Adobe Photoshop можно за 9,99 $ в месяц.
Нет практически никакой разницы в том, пользуетесь ли вы для написания кода Sublime или VS Code. То же самое можно сказать и о том, выбираете ли вы React или Vue для разработки интерфейсов. Это — дело вкуса. То же самое можно сказать и об инструментах дизайнера. У каждого из них есть собственные преимущества и недостатки.
Я пользуюсь Adobe XD. Основная причина такого выбора — кросс-платформенность, в результате я, как было бы, если бы я выбрал Sketch, не являюсь заложником экосистемы Apple. Кроме того, Adobe XD пользуется поддержкой Adobe, поэтому можно надеяться на то, что этот проект будет существовать ещё очень долго. А новичкам особенно приятно будет то, что с мая 2018 года Adobe XD можно пользоваться бесплатно, хотя и с некоторыми ограничениями (правда, они вам, в любом случае, вряд ли помешают).
О правильном настрое
Главная проблема, которую мне пришлось решить, входя в мир веб-дизайна, заключалась в выработке правильного настроя. Раньше дизайном я занимался в процессе разработки сайта. Я полагал, что всё просто должно располагаться в определённом порядке. Элементы размещаются слева направо и сверху вниз. Правда, такой вот подход — это верный способ стать ужасным дизайнером.
Инструменты дизайна принуждают вас работать так, как будто каждый элемент имеет абсолютное позиционирование. После чётких конструкций, которые можно видеть в программном коде, конструкции, которыми оперирует дизайнер, могут показаться неорганизованными и беспорядочными. Но это нужно принять. Это даёт свободу, возможность быстро всё менять и много экспериментировать. И это, пожалуй, самое важное, так как дизайн — это непрерывный процесс. В дизайне совершенно ожидаемо то, что прежде чем получить отличный результат, вам придётся часто и помногу всё переделывать.
Изучение инструментов
При написании кода веб-страниц используют HTML-элементы, такие, как
div, span, поля для ввода данных, позволяя браузеру превращать их во что-то такое, что можно увидеть на экране. Работая с инструментами для дизайна, вы получаете возможность избавиться от посредничества и использовать визуальные элементы, такие, как геометрические фигуры или фрагменты текста, напрямую.Я выбрал четыре наиболее часто используемых инструмента дизайнера, это не так уж и много, поэтому вы сможете не тратить слишком много времени на освоение этих инструментов. Время лучше потратить, собственно, на дизайн. То есть, быстро разобравшись с основами, вы сможете тут же приступить к практике. Поговорим об этих инструментах на примере Adobe XD.
▍Инструмент Rectangle — прямоугольники
Прямоугольник — это наиболее часто используемая в дизайне геометрическая фигура. Занимаясь дизайном, вы обнаружите, что постоянно работаете с ними. Воспринимайте прямоугольник так, будто это HTML-элемент
div. Прямоугольники находят применение в проектировании самых разных элементов страниц — от полей для ввода текста, до контейнеров.Прямоугольник
▍Инструмент Text — однострочные надписи
На первый взгляд кажется, что работа с текстами — это очень просто. Однако тут есть одна особенность, которая заключается в том, что у инструмента для работы с текстами есть два режима работы. Один из них предназначен для создания однострочных надписей, второй — для создания многострочных блоков теста. К счастью, несмотря на эту особенность, инструмент для работы с текстами несложно освоить и использовать.
В первом режиме, который предназначен для работы с однострочными надписями, размер текстового контейнера подстраивается под размер содержащегося в нём текста. Это напоминает тег span, за исключением того, что текст в таком контейнере не будет автоматически переноситься на новую строку, если только вы явным образом не используете перевод строки. Сильная сторона этого режима работы заключается в том, что размер контейнера автоматически подстраивается под параметры содержащегося в нём текста.
Для создания однострочного фрагмента текста нужно выбрать в панели инструментов Adobe XD инструмент Text, щёлкнуть там, где должен располагаться текст, и ввести его. Стоит принять за правило то, что этот режим нужно использовать для однострочных надписей, ширина которых может быть подобрана автоматически. Это — однострочные заголовки и подписи объектов.
Инструмент Text — однострочные надписи
▍Инструмент Text — большие фрагменты текста
Второй режим инструмента для работы с текстом используется для формирования текстовых контейнеров заданного размера, которые ведут себя наподобие тега
p с заданной шириной, или так, как тег p, находящийся в ячейке сетки. Сильная сторона этого состояния заключается в том, что в нём можно управлять размерами текстового блока. Для создания фрагмента текста нужно выбрать инструмент Text и выделить ту область, которую должен занимать фрагмент. Собственно говоря, этот режим нужно использовать для многострочных фрагментов текста.Инструмент Text — многострочные фрагменты текста
▍Инструмент Select — выделение объектов
С помощью инструмента Select осуществляют перемещение объектов, изменение их размеров, копирование. На рисунке ниже можно видеть вспомогательные элементы этого инструмента, а именно — розовые линии, помогающие определить расстояние между объектами, и синие, с помощью которых объекты удобно выравнивать.
Инструмент Select
▍Инструмент Line — линии
Иногда линии оказываются очень кстати, например, для разделения элементов страницы. Поэтому мы и говорим здесь об инструменте Line. С технической точки зрения для того же самого можно использовать инструмент Rectangle, но что поделаешь, HTML-элемент
div можно применять для реализации чего угодно.Инструмент Line
Дизайн: рекомендации и приёмы работы
▍Макет
В веб-разработке макет обычно представлен шапкой страницы, меню, содержимым страницы и подвалом. Всё это — части макета, но макет, сам по себе — это нечто большее, чем сумма этих частей. Макет — это то, как элементы располагаются на странице.
Например, когда я проектировал информационную страницу для Sidemail, я равномерно расположил элементы внутри контейнера. На следующем рисунке, в его нижней части, показан именно этот вариант дизайна, который я считаю удачным, а в верхней части находится неудачный вариант. В результате то, что получилось, воспринималось, в сравнении с другим вариантом, как нечто более цельное, выглядел этот вариант аккуратнее, чем тот, что я счёл неудачным.
Примеры неудачного и удачного макета
▍Цвета
Выбирая цвета для своего следующего проекта, помните о таком понятии, как психология цвета. Для поиска хороших цветовых комбинаций, основанных на основном цвете, можете воспользоваться проектом Paletton.
Для создания визуальной иерархии страницы используйте оттенки основного цвета и цвета текста. При применении цветного фона поэкспериментируйте с оттенками цвета, используемого для текста.
Примеры работы с цветами и текстом
▍Типографика
Шрифты, которыми выполнены различные надписи, сильно влияют на восприятие страниц, поэтому внимательно относитесь к их выбору. Обычно коммерческие шрифты смотрятся лучше чем те, которые можно найти на Google Fonts, но, если вы только начинаете путь веб-дизайнера, не стоит тратиться на покупку шрифтов. Даже среди того, что есть на Google Fonts, можно обнаружить отличные варианты.
Для того чтобы визуально разделить фрагменты текста, я часто использую приём, который заключается в том, что тексты надписей оформляются заглавными буквами с увеличенным расстоянием между символами. Тексты в верхнем регистре симметричны, выглядят они привлекательно, однако, читать их сложнее, поэтому не стоит чрезмерно ими увлекаться.
Примеры использования текстов в верхнем регистре
Дизайн домашней страницы (или лендинга)
Я всегда пытаюсь избегать соблазна создать модный дизайн, а потом втиснуть в него то, что я хочу сообщить посредством страницы. Вместо этого я выделяю достоинства проекта (а не его функциональные особенности), создаю из них историю и рассказываю эту историю с помощью визуально привлекательной страницы.
После того, как я понимаю то, какую историю я хочу рассказать посредством страницы, обычно я начинаю искать вдохновение. Отличным источником вдохновения для меня является проект land-book.com, который представляет собой обширный каталог отличных образцов дизайнов лендинг-страниц, за которые можно голосовать. Ещё один проект, на котором можно поискать вдохновение, это interfaces.pro. Он позволяет отбирать страницы определённых типов, например, это могут быть страницы с информацией о ценах, страницы 404, или страницы с информацией о сайтах. Я просто всё это смотрю до тех пор, пока мне не удаётся найти достаточно понравившихся мне сайтов, внешний вид страниц которых соответствует моим представлениям о стиле проекта, которым я занимаюсь.
Лендинг-страница
После того, как у меня формируется общее представление о том, что мне нужно, наступает время для решения непростой задачи по сбору всего воедино. К несчастью, тут нет лёгких путей. Для того чтобы создать что-то хорошее, нужно много экспериментировать, делая это до тех пор, пока то, что получится, вам понравится.
Возможно, вы задаётесь вопросом о том, нормально ли это, если дизайн, который вас полностью устраивал неделю назад, внезапно начал казаться вам не таким уж и хорошим, а, возможно, и вовсе неприемлемым. Это — совершенно нормально, и, на самом деле, если вы испытываете подобные ощущения, то это даже хорошо. Происходит это из-за того, что вы растёте, учитесь и становитесь лучше в сфере дизайна. В результате то, что вчера казалось непростой задачей, сегодня уже выглядит не таким уж и сложным. Помните об этом и вы не будете чувствовать себя как белка в колесе.
▍Выводы и рекомендации
- Тщательный подбор шрифтов — это одна из тех мелочей, которые отличают хороший дизайн от плохого.
- Изображения — это важно. Постарайтесь, чтобы на ваших страницах использовались бы, хотя бы в небольших количествах, подходящие иллюстрации или фотографии.
- Выстраивайте визуальную иерархию элементов, используя оттенки цветов. Недостаточно использовать лишь пару цветов, один из которых является основным, а второй представляет собой цвет текста.
- Не используйте слишком широкие контейнеры. Обычно достаточно ширины в 1100 пикселей.
- Пустое пространство между элементами — это важный элемент дизайна.
- История, которую рассказывает веб-страница, должна строиться на достоинствах проекта, а не на его функциональных особенностях.
- Если вы чувствуете, что ваши идеи истощились — ищите вдохновение в других проектах.
Дизайн веб-приложения (или панели управления)
Как и в случае с проектированием лендинга, при создании веб-приложения не нужно сходу хвататься за расстановку элементов по странице. Рассматриваемая ситуация отличается от предыдущей тем, что здесь вы не рассказываете посетителю историю. В этот раз вы создаёте инструмент, и главная ваша цель — сделать этот инструмент удобным. Возьмите лист бумаги и карандаш и нарисуйте план работы вашего приложения. Подумайте о том, что от чего зависит, о том, как облегчить работу с этим приложением.
Если надо — сделайте несколько набросков или макетов. Исследуйте дизайн проектов-конкурентов, подумайте о том, чего им недостаёт. Возможно, вы решите сделать у себя то, чего у них нет, а это, может быть, станет конкурентным преимуществом вашего проекта. Учитывайте и то, что иногда, прежде чем рисовать макеты и прикидывать варианты дизайна, нужно дать себе время на размышления.
Лучший совет, не привязанный к конкретным особенностям различных проектов, который я могу тут дать, заключается в выборе подходящего макета страницы. Обычно в веб-приложениях используются два подхода к макетам страниц. Выбор того или иного зависит от целей приложения. Речь идёт о контейнерах фиксированной ширины, и о гибких контейнерах, заполняющих весь экран.
Веб-приложение
▍Контейнеры фиксированной ширины
Я предпочитаю использовать контейнеры фиксированной ширины, так как пользователю легче сконцентрировать внимание на ограниченной области благодаря тому, что для просмотра того, что расположено в этой области, не требуется ненужных движений глаз. Приложения, в которых применяются фиксированные контейнеры, кроме того, обычно выглядят аккуратнее, а новым пользователям таких приложений легче в них ориентироваться. Надо отметить, что такие приложения, из-за ограниченной ширины контейнеров, сложнее проектировать.
Вот несколько примеров веб-приложений, в которых используются фиксированные контейнеры: Twitter, Buffer, DigitalOcean, Netlify, GitHub.
▍Гибкие контейнеры
Гибкие контейнеры отлично подходят для таких веб-проектов, как чаты, приложения для работы с таблицами или с большими объёмами информации, представленной в других форматах. Обычно при проектировании таких приложений важно, чтобы на экране можно было разместить как можно больше данных. Минусом гибких контейнеров является тот факт, что большой объём данных, выведенный на экран, может запутать пользователя.
Среди примеров приложений, использующих гибкие контейнеры, можно отметить Slack, Intercom, Hotjar, Google Sheets, Trello, Spotify.
▍Выводы и рекомендации
- Выбор подходящих контейнеров для содержимого приложения важен по двум причинам. Во-первых, от этого будет зависеть макет страницы. Во-вторых, для того, чтобы перейти к контейнерам других типов, потребуется провести серьёзную работу. Каждый проект уникален и требует уникальных решений, поэтому не бойтесь экспериментировать.
- Стремитесь к простоте.
- Используйте шрифты, надписи, выполненные которыми, легко читаемы.
- Выводя большие объёмы данных, используйте визуальную иерархию.
- Анализируйте решения конкурентов, и, находя недостатки, не допускайте их появления в своём проекте, или, на основе такого анализа, оснащайте свой проект возможностями, которые станут его конкурентными преимуществами.
Итоги
Разработчику, который привык работать с кодом, а не с визуальными образами, может быть непросто переключиться на волну дизайна. Но дизайн — это то, чему вполне можно научиться. Помните о том, что дизайн может быть конкурентным преимуществом вашего проекта, поэтому уделяйте ему внимание и создавайте привлекательные сайты, с которыми удобно и приятно работать.
Уважаемые читатели! Как по-вашему, может ли программист-одиночка достичь хороших результатов в сфере дизайна?
Руководство по веб-дизайну для НЕдизайнеров / Habr
В 14 лет я сделал первый сайт. Это было заданием для школьного проекта. Задача была легкой: создать очень простой сайт, который включал в себя текст, изображения и таблицу. Обычно я забывал о всех заданиях и делал их в последнюю минуту. Но в тот раз я сошёл с ума.Я всегда уделял приоритетное внимание тому, как сайт будет выглядеть. Согласны вы или нет, но первое впечатление всегда складывается по внешнему виду. Люди доверяют больше тому, что им нравится.
За годы создания подобных проектов я больше уделял внимание развитию дизайнерских навыков, а не совершенствованию навыков программирования. Работая над большими и сложными проектами, вы будете делать много разных заданий. Одно из них — дизайн.
Превосходный дизайн — это что-то между «это настолько просто, что твоя бабушка может сделать так же» и «ничего себе, это чертовски круто». Дизайн может быть вашим конкурентным преимуществом или гвоздем в гробу.
И речь не о таланте
Когда я был младше, много играл в Minecraft. Я видел все эти здания, нарисованные людьми. Но когда я пытался сделать что-то подобное, это выглядело как коробка. Уродливо и не стильно.
Я нашел видео на YouTube и повторил действия рассказчика.Через некоторое время я разработал свой собственный стиль и мог самостоятельно строить. Я даже выиграл конкурс.
Дизайн — это навык, который можно развивать.
Выбирайте правильные инструменты для работы
В программировании вы можете использовать Notepad и писать приложение так же хорошо, как если бы оно было написано в полноценной среде разработки, хотя это усложнило бы вашу жизнь. В мире веб-дизайна MS Paint выполняет роль Notepad, и так же, как и Notepad, мало кто этим пользуется.
Самые популярные инструменты для веб-дизайна:
Sketch инструмент для MacOS. Подписка стоит 99 $/год. Некоторые считают его таким же сложным, как React.
Adobe XD бесплатный, кросс-платформенный инструмент, который выполняет роль Vue. Прост в использовании.
Adobe Photoshop швейцарский нож для любой задачи дизайна. Его можно сравнить с jQuery. Цена 9,99 $/мес.
Нет никакой разницы, используете ли вы Sublime или VS Code для написания кода. Или же вы используете React или Vue для интерфейса. Это вопрос личных предпочтений. Каждый из инструментов имеет свои плюсы и минусы.
Я использую Adobe XD. В первую очередь, потому что это кросс-платформенная программа, поэтому я не заложник экосистемы Apple. Для новичков удобно то, что с мая 2018 года Adobe XD можно свободно использовать только с несколькими ограничениями.
Изменение мышления
Я столкнулся с большой проблемой, когда начал заниматься веб-дизайном. Мне нужно было изменить мышление. Я привык придумывать дизайн, когда код был полностью готов. Дело в том, что такой подход делает вас худшим дизайнером.
Если вы хотите работать в веб-дизайне, придется быть гибкими. Это даст вам свободу быстро менять вещи и легко экспериментировать. И это важно, потому что дизайн — это непрерывный процесс. Вы многое измените, прежде чем получите отличный результат.
Изучение инструментов
При программировании вы используете HTML-элементы, такие как div, span и input, и позволяете браузеру визуализировать их. Благодаря инструментам проектирования вы можете пропустить посредника и напрямую использовать визуальные элементы, такие как фигуры и текст.
Я выбрал 4 наиболее используемых инструмента, чтобы вы могли потратить меньше времени на поиск информации и больше времени на разработку. Начните практиковаться как можно скорее. Ниже я расскажу, как они работают и как их использовать.
Инструмент Rectangle
Rectangle (прямоугольники) — самая универсальная форма. Вы будете использовать их все время. Подумайте об этом как о div.
Your browser does not support HTML5 video.
Инструмент label
Как понятно из названия, этот инструмент позволяет создавать текст. Это не так просто, потому что текстовый инструмент имеет два состояния: один для текста с одной строкой, а другой для нескольких абзацев. К счастью, легко научиться правильно использовать их.
Первое состояние представляет собой текстовый контейнер с одной строкой, который корректирует свой размер на основе текста. Он похож на <span>, за исключением того, что не будет завершен, если не сделать разрыв строки. Преимущество этого состояния в том, что он автоматически корректирует размер текстового поля на основе высоты строки и размера шрифта. Используйте его для всего, что не нуждается в определенной ширине и является одной строкой. Например, однострочные заголовки и метки.
Your browser does not support HTML5 video.
Инструмент paragraph
Второе состояние представляет собой текстовый контейнер с определенным размером, который ведет себя как <p> с определенной шириной или <p> внутри столбца сетки. Преимущество этого состояния в том, что вы можете контролировать размер текстового поля. Используйте это состояние для абзацев и заголовков в несколько строк.
Инструмент Select
Перемещение, изменение размера, дублирование. Для всего этого есть Select. Эти розовые линии показывают вам расстояние от окружающих элементов. Синие линии помогут правильно подобрать элементы.
Your browser does not support HTML5 video.
Инструмент Line
Иногда линия удобна, чтобы разные части дизайна были отделены друг от друга. Вот почему инструмент Line здесь. Вы могли бы использовать инструмент Rectangle вместо этого, но это не так удобно.
Your browser does not support HTML5 video.
Дизайнерские советы и техники
Layout
В веб-разработке Layout чаще всего описывается как заголовок, меню, контент и нижний колонтитул. Это часть его, но Layout — это что-то большее. Это расположение элементов относительно друг друга в рамках страницы.
Когда я делал проект для Sidemail, я распределял элементы внутри документа равномерно. Так он выглядел лучше.
Цвета
Чтобы помочь вам найти идеальный цвет для следующего проекта, учитывайте психологию цветов ( больше информации по этой теме найдете на colorpsychology.org).
Еще один полезный инструмент — Paletton. С его помощью без труда подберете идеальную цветовую комбинацию.
Используйте оттенки основных цветов и цветов текста, чтобы создать визуальную иерархию. Попробуйте более темные или более светлые оттенки для текста при использовании цветного фона. В общем, экспериментируйте.
Типография
Типичный шрифт в значительной степени влияет на брендинг вашего проекта, поэтому выбирайте с умом. Премиум-шрифты выглядят лучше, чем шрифты Google, но если вы новичок, не покупайте их. Даже в Google Fonts можно найти стоящие вещи.
Есть трюк, который я очень часто использую для визуального разбиения текста. Я делаю метки в верхнем регистре с большим расстоянием между буквами. Текст в верхнем регистре является симметричным и выглядит хорошо с визуальной точки зрения. Не злоупотребляйте им, его читать достаточно трудно.
Дизайн домашней страницы или landing page
Я стараюсь избегать соблазна использовать много модных элементов. Скорее, я придумываю преимущества и преподношу их в виде текста.
Если вы в поисках вдохновения, обязательно загляните на land-book.com. Это каталог замечательных страниц, которые понравятся целевой аудитории. Еще одна замечательная страница с вдохновением — interface.pro. Здесь вы можете ранжировать по категориям, например, по цене, 404 или “о нас”.
То, что вам казалось классным вчера, завтра покажется ужасным. Вы будете не раз менять дизайн. Это совершенно нормально и на самом деле хорошо. Потому что вы учитесь, растете и становитесь лучше. Вчерашняя задача не так сложна сегодня.
Выводы:
- Уникальный шрифт выглядит и запоминается лучше обычного;
- Графика очень важна, используйте хотя бы несколько изображений;
- Используйте несколько оттенков цветов;
- Говорите о преимуществах, а не функционале;
- Оглянитесь вокруг, если потеряли вдохновение.
- Помните, дизайн может быть вашим конкурентным преимуществом — используйте его и сделайте что-нибудь потрясающее.
Перевод статьи A developer’s guide to web design for non-designers