Хотите узнать, как стать веб дизайнером самостоятельно? А может, у вас уж есть несколько своих дизайнов, и вы хотели бы вывести свои умения на новый продвинутый уровень? Тогда вы движетесь в правильном направлении прямо сейчас, поскольку тема статьи именно «Веб дизайн с чего начать» и в ней мы подробно рассмотрим все нужные этапы подготовки веб дизайнера и поможем тебе стать веб дизайнером самостоятельно, приложив немного усердия и креативности.
Одна статья, конечно же, не сможет рассказать как стать веб дизайнером и поведать обо всех умениях, необходимых инструментах и технологиях, которые нужно освоить на пути к работе мечты. Если вы думаете, что путь будет простым и быстрым, то я должен вас расстроить. Работа веб дизайнером это постоянное самосовершенствование, развитие и гонка за новыми трендами и тенденциями. Но, несмотря на все профессиональнее трудности, именно обучение и получение новых знаний – один из самых приятных аспектов этой работы.
Сначала небольшое лирическое отступление для дизайнеров, которые случайно забрели почитать эту статью. «Я занимаюсь веб дизайном », наверно, вы не раз говорили кому-то эту фразу и испытывали холодный страх, когда вам отвечали что-то вроде: «Круто! А научи-ка меня, как это делается? Как стать веб дизайнером с нуля? » Многие просто предполагают, что они щелкнут мышкой, перетащат пару значков на экран, и дизайн готов. Но, к сожалению, это не так. Поэтому, в следующий раз, когда кто-то спросит вас, как создавать дизайн сайтов, просто покажите им эту статью.
Добро пожаловать, дамы и господа, в руководство для начинающих дизайнеров от MotoCMS. Возьмите свои мышки мышей и устройтесь поудобней за клавиатурой, пост обещает быть длинным. Кофе варить необязательно, но все же стоит.
Для кого эта статья о веб дизайне?
Эта статья предназначена для всех, кто задается вопросом «Как стать веб дизайнером самостоятельно?». Также она будет полезна для людей, которые хотят начать создавать веб-сайты, и имеют некоторый опыт в дизайне и . Все будет очень доступно и поэтапно. Статья рассчитана на то, что у вас нет никакого специального художественного или технического образования, вообще нет навыков кодирования и опыта работы в индустрии веб-дизайна.
Требования к начинающим веб дизайнерам
«Минимальные требования» для людей, которые думают как стать веб дизайнером и хотят создать свой первый сайт, довольно просты. Если вы знаете, что такое папки, графические текстовые файлы, можно начинать.
Однако, хоть начало работы и простое, создание действительно хорошего сайта – это настоящее искусство. Есть много навыков, которые вам нужно будет изучить. Вам нужно будет узнать о теории цвета, о графической иерархии элементов, шрифтах и общей организации сайта.
Также, вам пригодятся знания основных языков кодирования, а именно HTML и CSS , об этом мы тоже поговорим.
Затем вам, возможно, захочется изучить базовое программирование на JavaScript и выяснить, как использовать его для управления разными частями вашего сайта. А отчаянные ударники, которые захотят копнуть еще дальше – смогут нырнуть в системы управления контентом, поисковую оптимизацию и маркетинг .
Но не стоит бросаться сразу на все, навыки придут с опытом и необходимостью, я лишь постараюсь направить в правильное русло. И если вы дочитали аж до этой части статьи, то могу смело сказать «Добро пожаловать в прекрасный мир веб-дизайна, новичок. Будь готов неоднократно все испортить и не забывай веселиться!»
Как использовать этот руководство по веб дизайну для начинающих
Прочтите его! Этого будет вполне достаточно, чтобы начать. Сделайте свой первый, скорее всего, корявенький сайт. Вернитесь и прочитайте еще раз. Поправьте ошибки. Повторите.
Нет, вы, наверное, не хотите читать все сразу. Есть много других ресурсов, множество разных подходов, которые можно использовать. Ничего страшного, но я все же рекомендую немного вчитаться и попробовать пройти первые шаги.
Дизайн в браузере для начинающих
Возможно, знаете, что большинство дизайнеров сначала используют графические редакторы, а уже потом отдают свои проекты кодеру на верстку. Photoshop – это наиболее часто используемый инструмент, но дизайнеры также используют такие программы, как Sketch , GIMP , Inkscape и Illustrator .
Бесспорно, нужно попробовать несколько из них и использовать те инструменты, которые лучше всего подходят именно вам. Однако, если вы хотите создавать именно сайты, то старайтесь сразу же делать это в их естественной среде обитания – в браузере! В идеале – делайте это в нескольких браузерах – потому что люди не просматривают сайты в Photoshop и не видят их так, как вы через интерфейс графического редактора.
Рабочий процесс на основе браузера имеет ряд других преимуществ:
1) Вы точно видите, что получаете. Даже профессиональные мокапы не передают интерактивные или анимированные части сайтов. Создавая дизайн на основе браузера вы сможете точно видеть, как он работает.
Это особенно актуально, когда речь идет об адаптивном дизайне. (Для непосвященных: отзывчивый или адаптивный дизайн – это тот, который корректно отображается на разных экранах и устройствах, будь то мобильный телефон, планшет, или ПК).
2) Дизайн на основе браузера может сделать вас лучшим дизайнером. Когда вы сами знаете весь процесс, вы сможете понять что и как работает, и предостеречь себя от многих ошибок. Кошмар любого дизайнера (или верстальщика, которому это придется делать), работающего в, скажем, Photoshop, это дальнейшего его «натягивание» на живой сайт.
В любом случае, вот несколько ресурсов, которые могут быть полезными в работе с графическими редакторами.
Дизайн в браузере может во многом поменять ваш подход к работе и подстегнуть вас узнать что-то новое о HTML и CSS. В принципе, чем больше вы повозитесь c грязными с кодом, тем лучше вы поймете, как работают сайты. Это не сделает вас потрясающим дизайнером; но это отличное начало.
Навыки, которые вам понадобятся, чтоб стать веб дизайнером
Если вы хотите стать профессиональным веб дизайнером самостоятельно, вам понадобятся некоторые специальные навыки. В этом разделе мы ответим на вопрос “Как стать веб дизайнером самостоятельно?”, а также сосредоточимся на навыках, необходимых для фактического проектирования и создания сайта. Конечно, вам также понадобятся деловые и коммуникативные навыки, но это уже немного другая история. Итак, чтоб стать веб дизайнером самостоятельно вам необходимо знать следующее.
UX / UI дизайн
Дизайн, ориентированный на пользовательский опыт, или UX-дизайн – это то, как будет выглядеть и работать пользовательский интерфейс в целом. Это процесс, это философия, и это большая работа. Действительно хороший сайт можно создать только зная, какой путь на нем проходит посетитель, и как меняется его поведение в зависимости от изменения графических елементов.
Больше информации об этом можно найти в статье «Что такое UX/UI дизайн на самом деле? »
Эстетические навыки
Эстетика – это сложная штука. Похоже, что отличная цветовая схема для одних людей может выглядеть совершенно странно для других. Шрифты, которые для вас в этом месте смотрятся «как раз», могут совершенно не понравиться заказчику. Это кажется очень, очень субъективным, но все же в каждом из этих аспектов есть свои правила, о которых мы с вами сейчас и поговорим.
Сочетание шрифтов и типографика
Интернет – это текст. Это слова. И эти слова должны выглядеть потрясающе. Тем не менее, типографика – это нечто большее, чем просто выбор правильного шрифта. Это, в первую очередь, удобство использования. Необходимо правильно выбирать и комбинировать размеры, типы и стили шрифтов в дизайне для создания графической иерархии в дизайне.
Чтоб провести вас «от А до Я», предлагаю просмотреть книгу Эмиля Рудера «Типографика » . Чтение может быть довольно долгим, потому для желающих сразу же приступить к практике – короткое видео по теме, а так же (это если вдруг вы уже нашли хороший пример текста, и хотели бы идентифицировать его шрифт).
После того, как вы изучили правила типографики, вы можете попробовать некоторые шрифты для своего проекта. На самом деле в сети много хороших бесплатных шрифтов, так что осмотритесь.
Многие люди, включая меня, выбирают свои шрифты из . Шрифты Google можно «встраивать» в сайт , и это довольно удобно. Более того, можно пользоваться готовыми комбинациями шрифтов:
Другие подобные примеры можно найти в Интернете.
Если вы хотите создать свои собственные пары шрифтов Google, попробуйте «Комбинатор веб-шрифтов ». Это инструмент, который позволяет вам быстро просматривать комбинации шрифтов в режиме реального времени, меняя шрифт, размер, цвет, ширину строки.
Если Google шрифтов мало, то можно заглянуть на WebDesignerDepot, Fonts-online, и другие сайты.
Теория цвета и цветовые схемы
Теория цвета имеет мало общего с техническими названиями цветов. Если ваш клиент просит фуксии, но на самом деле хочет горячего розового цвета, выбор только за вами.Теория цвета изучает, в первую очередь, связь между комбинациями цветов и эмоциями человека, который ее воспринимает. Это настоящая наука.
Чтоб понять основы теории цвета, есть несколько отличных публикаций:
Из обязательных инструментов – Adobe Color CC
Помните, что теория цвета тесно связана с типографикой. Например, если цвет текста слишком близок к цвету выбранного фона, то его будет трудно читать и посетители, скорее всего, просто пройдут мимо этой части сайта, или же вовсе покинут его.
Композиция и общая организация
Как стать веб дизайнером без знаний основ композиции? Да никак! Для меня эта часть является едва ли не самой важной. Ведь можно подобрать прекрасные шрифты, отличную цветовую схему, а потом банально напороть с правильным расположением блоков, иерархией и пропорциями и получить «отвратительнейшее блюдо из отличных продуктов».
Есть несколько полезных публикаций по этой теме, после которых доходит с первого (или почти с первого) раза.
- Использование «Золотого сечения» и «Правила трех» в веб-дизайне
Веб дизайн тренды
В трендах в веб дизайне можно говорить бесконечно. Какую роль они играют? Все заказчики, скорее всего, перед тем как прийти к вам уже посмотрели несколько примеров крутых модных сайтов, и возможно даже прочитали парочку статей с веб дизайн трендами. Знать моду и популярные элементы дизайна просто необходимо чтоб понимать, что они просят, и чтоб было что им предложить.
Поскольку тенденции в веб дизайне постоянно меняются, нет смысла приводить на пример какие-то конкретные публикации. Тут я могу просто посоветовать вам следить за сайтами для веб дизайнеров, вот несколько хороших примеров:
- abduzeedo.com
- behance.net
- noupe.com
- webdesignerwall.com
- flickr.com
- awwwards.com
Как стать веб дизайнером: HTML и CSS
HTML это «Язык гипертекстовой разметки». Каждый сайт, на который вы когда-либо смотрели, сделан на основе HTML. HTML – это тот язык, воспринимая который ваш браузер понимает, что на сайте есть текст, изображение, ссылка, видео или другие элементы. Ваш браузер затем переводит код в то, что вы видите на экране.
Другой язык, который простыми словами делает сайт красивым, называется CSS , это значит «Каскадные таблицы стилей». CSS сообщает браузеру, какой шрифт задан в тексте, и какие цвета используются. CSS, проще говоря, определяет внешний вид вашего сайта (кнопки, стили, цвета, анимация).
Изучить эти языки самостоятельно, или, по крайней мере, получить базовое понимание того, как они работают, довольно просто. Это самые простые компьютерные языки. Тем не менее, они также довольно обширны и могут использоваться в разных вариациях для создания потрясающих дизайнов.
Для желающих приступить прямо сейчас, мы подобрали два хороших учебника с подробными уроками.
Как только вы знаете основы, есть действительно потрясающее количество сайтов, где вы можете узнать больше о том как стать веб дизайнером и самостоятельно выучить языки программирования.
Выливка на живую
Готовы разместить свой сайт в Интернете? Есть доменное имя (например: mywebsite.com) и хостинг (пространство на компьютере, постоянно подключенном к Интернету или онлайн хостинг, приобретенный у сторонних провайдеров)? Загрузите файлы на хостинг, откиньтесь в кресле, расслабьтесь и …
Что делать после запуска сайта
Поправьте ошибки и допилите то, о чем забыли
“Ах, да, вот это вот… я точно хотел это поправить.” – С кем не бывает. Почти неизбежно после запуска любого сайта всплывают ошибки. И чем больше сайт, тем больше вероятность, что вы пропустили ошибку или что-то забыли. Для вашего удобства, вот довольно подробный контрольный список-чеклист:
Соберите отзывы
Вы не сможете улучшить мастерство, если не знаете, где совершили ошибки. Время и опыт могут научить вас этому, но другие могут научить вас быстрее.
Когда вы пытаетесь стать веб дизайнером с нуля и учитесь самостоятельно, я рекомендую вам присоединиться к сообществам, чтобы общаться с другими дизайнерами, которые могут помочь вам и дать профессиональные рекомендации.
Как стать веб дизайнером – итоги
Статья вышла довольно длинной, но вместить все это в меньшем количестве слов было бы затруднительно, поэтому всех, кто дочитал до конца, хочу поздравить и искренне поблагодарить за терпение. Если вы хотите узнать больше о веб дизайн обучении, или о конкретных инструментах и стратегиях работы – напишите это в комментариях, и мы обязательно создадим больше полезных материалов по теме. Всем удачи!
А если вы уже готовы опробовать свои навыки на живом проекте, и Вам нужен хороший хостинг – в качестве бонуса, вы можете купить хостинг на год от нашего партнера Inmotion всего за 1$.
В разделе статьи о дизайне вы найдете публикации преимущественно теоретического характера, которые так или иначе касаются темы дизайна. Например, это может быть некий экскурс в историю веб дизайна или заметка обзорного характера, где рассматриваются определенные направления и стили web дизайна. В принципе, эти статьи о дизайне могут использоваться как для общего развития, так и совершенствования своих навыков — некоторые заметки содержат практически советы и рекомендации. Кстати, такие статьи для дизайнеров будут полезны не только начинающим, но и опытным профессионалам.
Веб дизайн — это ведь такое направление, где время не стоит на месте, идет постоянное развитие, появляются новые тенденции, меняются стили, тренды, нужно за этим не только следить, но и грамотно уметь применять на практике. Раздел статьи по веб-дизайну позволит вам быть в курсе происходящего и расширить свой кругозор.
Недавно мы постили ряд полезных советов по созданию эффективных форм регистрации на сайте, а сегодня хотим поговорить про блок авторизации/логина. В последнее время в сети появляется достаточно много раздражающих и слишком «заумных» его реализаций. Хорошо, когда дизайнеры пытаются сделать необычные и красивые формы логина (см. нашу подборку), вписывая их в общую концепцию веб-проекта, однако совсем другое дело — когда они перебарщивают с функциональностью. Иногда доходит до того,…
Разработчики часто упускают из виду, что footer для сайта (перевод с англ. футер/подвал) является одним из базовых его элементов. Он может дать более полную информацию о компании, а также выполняет разные полезные функции: облегчает навигацию, помогает сориентироваться посетителям веб-проекта и пригодится в некоторых коммерческих целях. Ранее в блоге мы рассматривали разработку шапки сайта а сегодня поговорим о подвале. Тут нужно грамотно подойти к выбору управляющих компонентов, которые…
В Дизайн Мании уже было несколько публикаций с похожей тематикой: в заметке про сервисы подбора цветов для сайтов кроме ресурсов вдохновения рассмотрели парочку полезных веб-инструментов; также был пост с обзором генераторов палитр и т.п. Однако без понимания логики как сделать цветовую палитру все они могут оказаться малоэффективными. Сегодня постараемся заполнить данный пробел и прояснить некоторые теоретические моменты, хорошо описанные в этой заметке. Те из вас, кто уже пользовались новомодными онлайн-генераторами, в курсе…
Типографика – это стиль, расположение и внешний вид печатных букв/текстов на странице. В настоящее время она уже стала неотъемлемым элементом веб-дизайна. Множество интересных статей по теме найдете в соответствующем разделе нашего блога, который пополнился сегодня еще одной публикацией. Рассмотрим актуальные для данного направления тенденции дизайна, что появились и закрепились в 2018 году. Материал будет отличным дополнением записи о веб-типографике. Пост является переводом этой заметки. Цель любого сайта – привлечь…
В интернете процедура регистрации встречается нам также часто как и форма авторизации на сайтах. Вам приходится регится выполнять: во всевозможных веб-сервисах, помогающих искать нужную информацию, бесплатных раздачах материалов, интернет-магазинах, соц.сетях и т.п. В такие моменты чувство радости от интересной находки мгновенно улетучивается из-за необходимости заполнять бесконечные поля ввода (к тому же иногда совершенно лишние). Как правило, все это бывает неудобно, занимает много времени и выглядит чересчур навязчиво. Плюс…
Если хотите создать сайт, то главное правило, которому нужно следовать, — не перестараться. В этом веб-дизайнерам уже не первый год помогает так называемый минималистичный дизайн. Он сейчас, кстати, находится на пике своей популярности. Сегодня мы попробуем разобраться что это за стиль и какие его основные преимущества. Что такое минималистичный дизайн? В целом данное понятие можно определить как максимально лаконичный стиль, характеризующийся простотой и точностью. Основные…
Сразу после публикации поста с лучшими примерами сайтов мебели на глаза нам попалась интересная англоязычная заметка похожей тематики. Она содержит подборку советов и нюансов по созданию мебельных сайтов с наглядными иллюстрациями типовых решений, а также описанием ошибок, которые вы точно не захотите повторять. С проектами данной категории всегда было интересно работать, поскольку они тесно связаны с интерьером или архитектурой, а сама продукция, как правило, обладает изысканным вкусом. Опираясь на…
Прошлогодний пост о трендах логотипов 2017 был неплохо воспринят читателями, поэтому мы решили продолжить эту «традицию» и рассмотреть основные тенденции в дизайне логотипов 2018. Не смотря на то, что в сфере веб-дизайна изменения происходят с молниеносной скоростью, некоторые пункты из той статьи остались прежними и «перекочевали» в год текущий. Возможно, тренды дизайна сайтов являются более быстротечными по сравнению с нишей разработки лого, либо с момента публикации предыдущей заметки прошло…
Как известно, не существует второго шанса произвести первое впечатление. В сфере цифрового дизайна эта истина подкрепляется высокой конкуренцией и широким разнообразием имеющихся решений. Причем, вполне очевидно, что при создании первого впечатления некоторые части веб-страницы являются более важными нежели остальные, например, header для сайта (шапка сайта). Сегодня рассмотрим все нюансы, которые касаются данного термина: Что это и какие элементы включает. Почему хедер важен для вас? Проектирование и варианты…
Alistapart.com; alistapart.com link=http://alistapart.com; Издание о дизайне и разработке. Рекомендует: Иван Васильев. Awwwards;www.awwwards.com link=http://www.awwwards.com; Подборка лучших работ агентств и веб-студий со всего мира. Рекомендуют: Максим Кыштымов и Георгий Ростомов. Behance; www.behance.net link=https://www.behance.net; Каталог портфолио дизайнеров. Рекомендуют: Максим Кыштымов и Георгий Ростомов. COLOURlovers; www.colourlovers.com link=http://www.colourlovers.com; Готовые палитры и примеры сочетания цветов. Рекомендует: Георгий Ростомов. CreativeLive; www.creativelive.com/design link=https://www.creativelive.com/design/ux-web-design?via=topic-list_6; Обучающая платформа с курсами для дизайнеров. Рекомендует: Роман Квартальнов. CSS Winner; www.csswinner.com link=http://www.csswinner.com; Подборка лучших сайтов. Рекомендует: Максим Кыштымов. Deadsign; deadsign.ru link=http://deadsign.ru; Перевод статей о дизайне и диджитал с английского. Рекомендует: Максим Кыштымов. Design Shack; designshack.net link=https://designshack.net; Издание о веб-дизайне: статьи, вдохновление, галереи. Рекомендует: Виктор Антонов. Developer.apple.com/design; developer.apple.com/design link=https://developer.apple.com/design; Гайдлайны Apple для дизайнеров. Рекомендует: Иван Васильев. Digest MBLTdev; digest.mbltdev.ru link=http://digest.mbltdev.ru; Дайджет статей для разработчиков. Рекомендует: Виктор Антонов. Dribbble; dribbble.com link=https://dribbble.com; Сообщество и портфолио хороших дизайнеров. Рекомендуют: Максим Кыштымов и Роман Квартальнов. Getpocket команды CreativePeople; getpocket.com/@korumart link=https://getpocket.com/@korumart; Команда CreativePeople сохраняет интересные материалы и делится ими. Рекомендует: Александр Ковальский. Graphiclovedesign.tumblr.com; graphiclovedesign.tumblr.com link=http://graphiclovedesign.tumblr.com; Лучшие образцы графического дизайна. Рекомендует: Ник Запорожский. Great Apps Timeline; greatappstimeline.xyz link=http://greatappstimeline.xyz; Ретроспектива дизайна самых популярных приложений. Рекомендует: Роман Квартальнов. Growth Supply; growth.supply/free/design-code link=http://growth.supply/free/design-code; Подборка бесплатных ресурсов для дизайнера. Рекомендует: Георгий Ростомов. Jvetrau.com; http://www.jvetrau.com link=http://www.jvetrau.com; Дайджет об интефейсах Юры Ветрова. Рекомендует: Иван Васильев. Infogra.ru; infogra.ru link=http://infogra.ru; Подборки кейсов, полезных инструментов и фильмов для дизайнеров. Рекомендует: Максим Кыштымов. Invision; blog.invisionapp.com link=http://blog.invisionapp.com; О том, как добиваться эффективности в проектах, когда требуется коллаборация разных специалистов. Рекомендует: Александр Ковальский. Land-book; land-book.com link=https://land-book.com; Подборка лучших лэндингов. Рекомендует: Максим Кыштымов. Marvel; blog.marvelapp.com link=http://blog.marvelapp.com; Статьи о дизайне. Рекомендует: Виктор Антонов. Material.io; material.io link=https://material.io; Ресурс Google для дизайнеров: теория, источники и инструменты для создания диджитал-продуктов. Рекомендует: Иван Васильев. Mediascunk; mediaskunk.ru link=http://mediaskunk.ru/; Блог Михаила Калашникова о медиа и технологиях. Рекомендует: Мердан Агаев. Muzli; muz.li link=https://muz.li; Блог о дизайне. Рекомендует Александр Ковальский. Nathan Curtis; medium.com/@nathanacurtis link=https://medium.com/@nathanacurtis; Блог Натана Кёртиса, основателя UX компании EightShapes. Рекомендует: Александр Ковальский. Osasto.tumblr.com; osasto.tumblr.com link=http://osasto.tumblr.com; Лучшие образцы графического дизайна. Рекомендует: Ник Запорожский. Product Hunt; www.producthunt.com link=https://www.producthunt.com; Витрина новых IT продуктов. Рекомендует: Виктор Антонов. Re:Vision; revision.ru link=http://revision.ru; Портфолио дизайнеров. Много хороших работ от дизайнеров из стран СНГ. Рекомендует: Максим Кыштымов. SiteInspire; www.siteinspire.com link=https://www.siteinspire.com; Каталог лучших образцов веб-дизайна. Рекомендуют: Максим Кыштымов и Мердан Агаев. Sketchapp.me; sketchapp.me link=http://sketchapp.me; Статьи о том, как эффективно использовать Sketch. Рекомендует: Станислав Осипенко..education link=http://сайт; Библиотека знаний о веб-дизайне и интернет-маркетинге. Рекомендует: Никита Обухов. Vc.ru; vc.ru/interface link=https://vc.ru/interface; Издание о о стартапах, растущих бизнесах, новых моделях заработка, неординарных героях со всего мира и технологиях роста. Рекомендуют: Ольга Павлова и Александр Ковальский. Underconsideration; underconsideration.com link=http://underconsideration.com; Блог о дизайне. Рекомендует: Ник Запорожский. Waitbutwhy.com; waitbutwhy.com link=http://waitbutwhy.com; Популярные иллюстрированные лонгриды практически обо всем на свете. Рекомендует: Иван Васильев. Zeldman.com; www.zeldman.com link=http://www.zeldman.com; Новости веб-дизайна. Рекомендует: Иван Васильев. Блог о дизайне и интерфейсах; blog.shaihalov.ru link=http://blog.shaihalov.ru; Блог Максима Шайхалова, проектировщика интерфейсов. Рекомендует: Ольга Павлова. Дизайн-кабак; designpub.ru link=https://designpub.ru; Коллективный блог дизайнеров. Рекомендуют: Ольга Павлова, Максим Смирнов, Дарья Прокуда и Александр Ковальский. Журнал Type.today; Type.today/journal link=https://type.today/ru/journal; Журнал проекта Ильи Рудермана и Юрия Остроменцкого. Рекомендуют: Мердан Агаев и Ник Запорожский. Журнал «Шрифт»; typejournal.ru link=http://typejournal.ru; Онлайн-издание о шрифте и типографике. Рекомендуют: Станислав Осипенко и Георгий Ростомов. Ководство Артемия Лебедева; artlebedev.ru/kovodstvo link=http://artlebedev.ru/kovodstvo; Заметки о дизайне, истории важных изобретений, интерфейсах, семиотике и т. д. Рекомендует: Станислав Осипенко. Рейтинг Рунета; www.ratingruneta.ru link=http://www.ratingruneta.ru; Конкурс сайтов российского интернета. Рекомендует: Максим Кыштымов. Сайт Людвига Быстроновского; ludwigbistronovsky.ru link=http://ludwigbistronovsky.ru; Сайт дизайнера и арт-директора: ссылки на публикации и анонсы выступлений. Рекомендует: Станислав Осипенко. Советы. Дизайн-бюро Артема Горбунова; artgorbunov.ru/bb/soviet link=http://artgorbunov.ru/bb/soviet; Советы о дизайне, верстке, редактировании текста и переговорах с клиентами. Рекомендует: Станислав Осипенко. Хабрхабр; habrahabr.ru/flows/design link=https://habrahabr.ru/flows/design; Крупнейшее российское IT-сообщество. Рекомендует: Ольга Павлова.
Многие молодые люди желают связать будущую профессию с разработкой сайтов. Естественно, не все хотят быть программистами, часть из них их вполне устраивает веб-дизайн.
Обучение этой профессии с нуля – дело не легкое, ведь кроме навыков работы в необходимо быть креативным человеком, хотя бы немного разораться в коде (знать CSS и ), уметь общаться с заказчиком на одном языке и т. д.
Прежде, чем начинать ознакомление с азами профессии, возникает ряд вопросов, и ответы на них приходится искать самому. Сделать это непросто ввиду отсутствия опыта, материалы с интернета не всегда становятся полезными, а порой и наоборот, лишь добавляют новые вопросы, да и опытный товарищ есть не во всех.
Давайте разберёмся, с чего начинать обучение веб-дизайну, какие знания для творчества понадобятся, где и в каком порядке их добывать, сколько времени уделять практическим занятиям, как обзавестись первым опытом и заказом…и с массой сопутствующих вопросов.
Cодержание:
Этап первый – выясните, почему вы хотите этим заниматься
С одной стороны, это простой вопрос, ведь большинство хочет заниматься веб-дизайном ввиду хорошей оплаты труда.
Сайтостроение – очень прибыльное дело, а опытного, и главное, толкового разработчика днём с огнём не всегда сыскать.
Хотя бывает много случаев, когда человек хочет заняться именно , а без знаний создания графического движка сайта программировать его непросто.
И третий распространённый случай, почему люди начинают интересоваться веб-дизайном, – тяга к изобразительному искусству.
И данная область может послужить отличным средством для реализации своих талантов на практике с извлечением из этого финансовой выгоды.
Важно! Для какой бы цели не знакомились с веб-дизайном, помните, что как обучение, так и работа должна быть интересной, выполняться с желанием и приносить удовольствие, но не превратиться в рутину.
Ввиду того, что графический художник – молодая профессия , её точного определения пока не существует, и многие специалисты трактуют понятие по-своему.
Если раньше этот человек должен был сделать странички красивыми и приятными глазу, то нынче необходимо и навыками кодера обладать, и в маркетинге разбираться, и понятие в SEO-продвижении иметь.
Без уникальных решений, оригинальных идей и индивидуального творческого подхода задача не решается.
Дизайнер сайтов – это технический художник, работающий над внешним видом и оптимизацией загрузки сайта и веб-приложений.
В задачи этих людей входят:
- работа над логической структурой страницы – дабы любому начинающему пользователю всё было понятно, он с первого раза смог отыскать то, что ищет, все важные ссылки должны быть на виду;
- разработка наиболее рационального способа подачи контента – способность заинтересовать посетителя, заставить его подольше задержаться на ресурсе, полистать страницы сайта;
- графическое оформление – где какие элементы будут размещаться, какими будут кнопки и надписи после клика, как осуществляется взаимодействие с клиентом, как и что будет изменяться в процессе работы посетителя, изменения масштаба и т. п.
Вот мы вкратце и выяснили, почему люди хотят заниматься графической частью сайтов.
Для будущих программистов достаточно ознакомиться с азами визуального оформления веб-ресурсов, хотя бы поверхностно освоить графические редакторы, верстку по шаблону.
Уж жаждущим многие годы жизни посвятить созданию интерфейса интернет страниц и получить соответствующую профессию поначалу придётся потрудиться, им и посвящена данная статья.
Этап второй – выберите направление веб-дизайна в котором вы хотите себя попробовать
Интернет-технологии стремительно развиваются, а вместе с ними повышаются и требования к разработчикам. Сначала красивая эстетичная и яркая страница были задачей художника.
Нынче различают целых семь направлений в их оформлении, и это только основных.
Жесткий
Старый как само сайтостроение вид оформления страниц , не требующий прикладывания усилий, отлично подойдёт для новичков.
Суть заключается в том, что все элементы ресурса размещаются в виртуальных ячейках таблицы с фиксированными размерами, которые задаются дизайнером.
Такая страничка будет абсолютно одинаково выглядеть на всех устройствах, независимо от платформы и размера экрана.
И это не значит, что подобный ресурс отсталый, ведь опытный разработчик с применением жесткого дизайна может создать прекрасно оформленный сайт, а корректировка чего-то в таком случае занимает считанные минуты.
Гибкий
Также табличный дизайн , но ширина ячеек виртуальной таблицы не строго задана, а зависит от размеров экрана (соотношения сторон, разрешения). Объекты будут стараться заполнить всё пространство ячейки, изменяя её размер. Главная особенность подобного решения – повышение удобства визуального восприятия данных за счёт динамически изменяющихся параметров отображения. На подобных страницах нет пустых, свободных от контента, мест.
Сложностями подобного дизайна являются:
- отсутствие гарантии, что на старых «квадратных» и огромных широкоформатных дисплеях ресурс будет отображаться правильно , без растягивания или сжимания содержимого;
- далеко не все браузеры нормально справляются с обработкой так называемых гибких ячеек, да и интернет-обозреватели, созданные на различных движках, делают это каждый по-своему;
- на подгонку и доведение проекта до идеала уходит много времени .
Комбинированный
Соединение двух предыдущих методов : если размеры монитора (соотношение его сторон) сильно отличаются от параметров дисплея, что использовался при создании сайта, применяется гибкий дизайн, в ином случае используются и те, и иные ячейки, в зависимости от наличия свободного пространства в них.
Текстовый
Применяется при оформлении одностраничных ресурсов и сайтов , которые представляют небольшие предприятия и компании в глобальной цифровой сети. Особенностью подобного оформления является практическое отсутствие графических элементов, что положительно сказывается на скорости загрузки страницы. Сделать проект привлекательным поможет игра шрифтами, цветами текста и удачным расположением текста.
Полиграфический
Наиболее востребован при разработке корпоративных и маркетинговых ресурсов , где на первом месте стоит эмоциональное наполнение. Дизайнер должен подходить к работе с наибольшей креативностью и творчески выбирать пиксельные изображения для оформления страницы.
Недостатком полиграфического дизайна является понижение скорости загрузки сайта из-за наличия, как правило, обильного количества растровых рисунков, да ещё и в высоком разрешении.
Интерфейсный
Обращаются к нему в основном опытные мастера. Их задача – угодить всем запросам пользователя, как правило методом минимизации программного кода, оптимизации графических элементов и создания удобной навигационной системы с расположением меню в верхней части страницы. Такие ресурсы быстро грузятся, с ними легко работать как с компьютера, так и с мобильных устройств
.Динамический
Наиболее трудоёмкие, сложные варианты оформления веб-страниц. Данный тип дизайна заключается в размещении на странице динамического контента (анимация, скрипты, двигающиеся и изменяющиеся элементы, широкоформатные видео).
Для реализации замыслов придётся изрядно попотеть, а, чтобы посетитель был доволен и всё работало, как задумано, нужны не только мастерство владения графическими редакторами, но и навыки оптимизации, кто же захочет подолгу ожидать появления какой-либо красочной трехмерной кнопки. Зато отлично проработанный ресурс всегда привлекает своей красотой, оригинальностью и художественными решениями, в независимости от наполнения.
Этап третий – выясните, какие программы для веб-дизайна сейчас в тренде
Прежде, чем скачивать книги по тому или иному графическому редактору, нужно ясно себе представлять те элементы, что используются при графическом оформлении сайтов: фигуры, цвета, формы, игра света и тени, линии – это базовые элементы, из которых и создаётся вся композиция.
Как ни крути, знания каскадных таблиц и гипертекстовой разметки нужны едва ли не в первую очередь.
Понадобятся дизайнеру и знания в области компьютерной анимации, популярных , SEO, а может и трехмерного моделирования.
Внимание! Кроме сложности в освоении, приложение придётся ещё и покупать для полноценной эксплуатации, хотя в целях обучения можно и схитрить, обойдя защиту программы.
Последний обрастает функционалом, который востребован в десятках сфер, и преумножению возможностей относительно веб-дизайна ребята с внимания уделяют мало.
Другое дело Sketch – заточена для рисования графических интерфейсов с нуля, не имеет ни единого лишнего элемента, более проста в освоении и легко обгоняет Photoshop по основным показателям.
Обязательно выберите наиболее удобный , поддерживающий синтаксис и подсветку: , Sublime , Axure RP .
Этап четвертый – изучите полезные книги для начинающих веб-дизайнеров
Интернет тем и хорош, что позволяет бесплатно обзавестись книгами, которые ещё десяток лет назад пришлось бы приобретать или искать в единомышленников.
С популяризацией профессии веб-дизайнера и количество книг по теме увеличилось. Без наставника и учителя книга – лучший способ получать знания.
Обучение веб-дизайну с нуля следует начинать с той литературы, где даются основные понятия, теория и небольшие практические задания:
1 Итан Маркотт «Отзывчивый веб-дизайн» – практическое руководство для веб-дизайнеров, после освоения которого новичок избежит сотен типичных для начинающих ошибок, узнает о целесообразности создания мобильной версии сайта. Написано в ней и как верстать страницы, которые будут одинаково отображаться на всех устройствах.
2 Якоб Нильсен «Веб-дизайн» – в книге масса руководств по созданию эффективных интерфейсов, правильному расположению элементов навигации и заполнению ресурса контентом.
3 Ю. Сырых «Современный веб-дизайн» – справочник, описывающий тонкости работы над интерфейсом, начиная с этапа подбора контента в зависимости от тематики ресурса, и заканчивая тестированием и отладкой готового макета. В ней масса информации не только по рисованию интерфейса, но и по его оптимизации и наполнению.
От автора: Пока существует веб, всегда время от времени появлялись определенные дизайнерские тенденции. Некоторые из них остались, а остальные постепенно исчезли. Вспомните эпоху Geocities, дизайнов Web 2.0, и настоящее время с популярным сейчас «плоским дизайном».
Теперь, в 2013г., веб-индустрия, как обычно, быстро меняется. Каждый месяц, если не каждую неделю, возникают новые техники или методы работы.
Тенденцию можно описать так:
общее направление, в котором что-либо разрабатывается или меняется .
Это абсолютно верно для веб-дизайна, так как зачастую определенное дизайнерское движение зарождается, получает поддержку, а затем многие сайты либо заимствуют его, либо держатся от него подальше. Как бы там ни было, тенденции помогают нам наблюдать за общим направлением, в котором может двигаться дизайнерский мир в ближайшие месяцы или годы.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Преимущества
Есть несколько преимуществ тенденций в индустрии веб-дизайна. Во-первых, они помогают нам точнее предсказать, в каком направлении станет двигаться индустрия в будущем. Тренды появляются не просто так, и важны для понимания принципов развития индустрии дизайна на месяцы вперед. Тенденции помогают профессионально развиваться, так как часто к обновлению сайтов побуждают в тех компаниях, где «слышали звон» и хотят, чтобы их вебсайт ему соответствовал.
Однако некоторые направления касаются не обязательно области дизайна. Например, стратегия content-first изначально считалась тенденцией (наряду с адаптивным дизайном, хотите – верьте, хотите – нет!), так как была популярным способом внесения содержимого в дизайн. Подобные тенденции очень приветствуются, потому что улучшают процессы построения и создания дизайна для Сети.
Недостатки
Но с трендами не все обстоит так хорошо. Хотя в некотором смысле они помогают идти в ногу с прогрессом, это также означает, что вебсайты очень быстро начинают смотреться или ощущаться устаревшими, даже если им всего год или два отроду. Таким образом, создание дизайна вебсайта согласно модной тенденции может оказаться рисковым делом.
Кроме того, тренды – они все такие: модные и популярные. У многих возникают проблемы с определенными стилями дизайна или тенденции, такими как находящимся сейчас на гребне волны «плоским» дизайном, так как это значит, что вебсайты смотрятся очень похоже или обладают одинаковыми стилями. Некоторые считают, что тенденции не побуждают к творчеству, а просто заставляют следовать за толпой вместо того, чтобы проявить изобретательность и попытаться самим создать что-то уникальное.
Примеры современных тенденций
Можно счесть современными «трендами» множество примеров, а в кавычки я это слово ставлю потому, что некоторые из них уже не являются тенденциями.
Плоский дизайн
Сам я предпочитаю называть его «чистым дизайном», но здесь и далее мы, как все остальные, станем называть его «плоским». Плоский дизайн – тот, что создается без дополнительной имитации глубины, такой как текстуры, (видимые) градиенты или 3d-перспективы, а вместо этого употребляется более «плоская» эстетика – очень чистая и четкая.
Этим подходом пользуются такие большие компании, как Microsoft (в Metro, Windows 8, Skype и т.д.), Apple (в iOS7) и Google (в дизайне всей своей продукции).
Как я считаю, на самом деле плоский дизайн – это понимание того, чем является Сеть, а не насильственное применение к ней почти реалистичных, несетевых идей.
В Cage в качестве фонового заголовка применяется размытая фотография, на которой вверху находятся скриншоты продукции.
На сайте Hipstamatic размытые фоны компенсируются красивыми цветами и блестящим интерфейсом одного из приложений.
Веб-разметка текста
Сначала, как считают многие, это кажется просто трендом. Однако при постоянном развитии и обновлении браузеров, я сомневаюсь, что увижу когда-либо это свойство уходящим. На самом деле это сторона вебдизайна. Теперь, после появления CSS3 и @font-face , можно выразить в Сети свои дизайнерские и брендовые идеи посредством типографской разметки текста так, как до того было немыслимо. Тогда как прежде мы могли пользоваться только «безопасными» шрифтами websafe, такими как Georgia, Arial и так далее, то теперь у нас появилась возможность применять их столько, сколько нужно – пока они совместимы с веб-шрифтами.
Наряду с @font-face, появились такие вебсайты и сервисы, которые предлагают более легкий способ интегрирования этих великолепных шрифтов в наши вебсайты. Вот некоторые из них:
H&FJ cloud.typography
Браузеры постоянно развиваются, и предлагаемые нам, как дизайнерам, возможности веб-шрифтов огромны. Ожидается, что сейчас вебсайты становятся креативнее, и веб-шрифты – лишь одна из возможностей этого добиться.
Ampersand (конференция по вопросу типографской разметки!) великолепно применяет веб-шрифты на всем сайте для представления информации о выступающих и прочем.
Адаптивный дизайн
И еще одна штучка считается направлением (или, по меньшей мере, модным словечком в 2012/2013гг. и, следовательно, трендом для людей, не занятых в веб-индустрии) – это адаптивный дизайн. Хотя он существует уже несколько лет, но все еще находится сравнительно в младенческом возрасте.
Однако я не считаю его вообще тенденцией. Уже установлено множеством исследований и статистических данных и доказывается нами каждый день, что использование Сети на устройстве, не являющемся ноутбуком или настольным компьютером, происходит все чаще и чаще. Адаптивный вебдизайн пришел, чтобы остаться: по меньшей мере пока все эти устройства будут использоваться.
Что будущее нам готовит?
Хотя, как большинство людей, я лично считаю, что тренды должны подвигать нас работать по-разному и не следовать за толпой, все же у тенденций должно быть свое место под солнцем, и они достаточно важны. Тенденции дают нам возможность понять, что вообще думает общество и остальной мир об индустрии дизайна и то, как они видят сделанное нами.
Тенденции помогают определить то, что популярно и хорошо работает, так как существует множество аспектов (иногда просто маленьких фактиков), способных помочь нам в будущих проектах. А если вам не нравятся тенденции, можно их проигнорировать и добиться собственного уникального дизайна.
