Web-дизайнер
Содержание:
- GeekUniversity
- Выберите интересное направление
- Следуйте вашему плану
- Составьте план обучения
- С чего начинается профессия веб-дизайнера
- 6 сайтов для дизайнеров о шрифтах и типографике
- Основные направления
- Пособие по созданию сайтов
- Если ещё не умеете, то учитесь рисовать
- Mobile First или не First?
- Часть шестая: Самообучение и саморазвитие
- Веб-дизайн с нуля: самостоятельно или на курсах?
- Другие интересные программы обучения онлайн
- «Графический дизайн: 1 ступень» от Arena Center
- «Специалист по графическому дизайну» от МГТУ им. Н. Э. Баумана
- «Graphic design» от Mobios
- «Графический дизайн и реклама» от Современной Школы Дизайна
- «Графический дизайн, бренд-дизайн и айдентика» от Moscow Digital Academy
- «Графический дизайн» от Avenue
- «Основы графического дизайна» от DSGNClub
- 11 сайтов о логотипах
- Кто такой веб-дизайнер и что он делает
- Кому стоит изучать веб-дизайн?
- Skillbox
- Верстка
- Как научиться веб-дизайну с нуля?
- Сетка
GeekUniversity
Обучение веб-дизайну на портале с гарантированным трудоустройством GeekBrains организовано на факультете с одноименным названием. Студентов в течение года подготавливают к последующей работе в кросс-функциональной команде, обучая дизайну разных направлений: веб, продуктовому, UX/UI. Помимо основных занятий, на которых учат анализировать целевую аудиторию, прототипировать и пользоваться графическими редакторами, есть узкоспециальные уроки — в частности, для пользователей с ограниченными возможностями и по преодолению боязни «чистого листа».
За каждым слушателем онлайн-курса закрепляется куратор, который помогает разбираться с материалом. Портфолио выпускников, получающих свидетельства об окончании курсов GeekBrains, позволяет претендовать на позиции Junior либо Intern Designer.
Образовательный портал регулярно предлагает бесплатные интенсивы, пройдя которые, можно освоить Photoshop и научиться создавать посадочные страницы.
Выберите интересное направление
Определитесь, что вам ближе. В современном дизайне много направлений, и они сильно отличаются друг от друга. Например, учёбы будущего дизайнера интерьера и веб-дизайнера будут непохожи: им нужны различные знания, навыки и профессиональные программы.
Какой бывает дизайн:
Промышленный дизайн. Разработка формы любых фабричных изделий, от посуды до ноутбуков и автомобилей. Чтобы этим заниматься, нужно отлично знать особенности продукта и свободно разбираться в эргономике. Когда дело касается удобства, надёжности и безопасности — мелочей нет.
- Дизайн пользовательских интерфейсов (UX-дизайн, от англ. User Experience). Это оформление систем, через которые пользователь взаимодействует с продуктом: например, меню программы, клавиатура телефона, программная панель у микроволновки и тому подобное. Задача UX-дизайнера — сделать так, чтобы пользоваться устройством или программой было просто и комфортно.
- Дизайнер мобильных приложений. Разработка внешнего вида приложений под iOS и Android и проектирование мобильных интерфейсов. Смежное направление с UX-дизайном. Мобильные телефоны и планшеты развиваются и могут всё больше, так что это очень перспективное направление.
- Веб-дизайн. Работа с сайтами. Они должны быть не только красивыми, но и удобными, иметь ясную структуру, а информация должна легко восприниматься. И есть ещё множество тонкостей, которые нужно учесть.
- Графический дизайн. Разработка логотипов и символики, дизайн упаковок, книжных обложек, обложек музыкальных дисков, уличных рекламных баннеров, рекламных блоков в бумажных и сетевых изданиях… и многое другое.
- Гейм-дизайн. Создание компьютерных игр — и не только продумывание их визуальной составляющей, но и разработка уровней, систем вознаграждения, игровых механик, обучения. Сложная и многогранная работа на стыке программирования, дизайна и даже менеджмента.
- Дизайн интерьера. Внутреннее оформление помещений: жилых, офисных, торговых, производственных… Как зонировать пространство? Можно ли поставить перегородку? А снести стену? Как поставить мебель так, чтобы было удобно и всё поместилось? Как продумать освещение? Какой стиль и цветовую гамму выбрать?.. Ответы на все эти вопросы должен найти дизайнер интерьера.
- Дизайн одежды, или фэшн-дизайн (Fashion Design). Должна одежда быть удобной? Или практичной? А может быть, красивой? Или всё это одновременно?.. Это темы фэшн-дизайна.
Ландшафтный дизайн. Искусство оформления открытого пространства. Это касается как огромных публичных пространств — парков, скверов, площадей, — так и частных владений. Сочетает в себе садоводство и ботанику, знание архитектурных стилей и направлений, а также эстетики и психологии.
Архитектурный дизайн, или дизайн архитектурной среды. Дизайн зданий и окружающего их пространства
Одно из немногих направлений, где действительно важно профильное высшее образование — архитектурное.
Следуйте вашему плану
Это самое сложное, но постарайтесь заниматься регулярно — в то время, которое вы запланировали.
Однако все мы ошибаемся, когда строим планы, поэтому будьте и гибки тоже. Вы не на переправе, и лошадей менять можно. Если стало понятно, что вам нужно больше времени, — добавьте его или перераспределите. Если какие-то книги или курсы оказались неудачными — замените их на другие. Но, сделав это, вновь придерживайтесь плана — уже нового.
Постарайтесь не делать долгие перерывы в занятиях: пока вы новичок, незакреплённые навыки быстро теряются. И тогда вы не только не развиваетесь, но даже идёте вспять.
Составьте план обучения
Теперь, когда вы собрали довольно много информации, важно не утонуть в ней. Составьте свой план обучения, иначе будете хаотично метаться от книги к сайту, от сайта к видео и соцсетям — и упустите что-то важное
Когда будете делать план, вам пригодятся программы курсов и университетов — посмотрите их в интернете. Вероятно, кое-что нужно будет изменить лично под вас. Чему-то вам придётся уделить больше внимания, а чему-то — меньше.
Планируйте не только что вслед за чем вы изучаете, но и когда вы это делаете. Наметьте себе сроки — будьте реалистичны! — и потом старайтесь их придерживаться.
Заложите время на отработку навыков: про дизайн нет смысла просто читать или смотреть видео, его нужно делать. Это же касается владения профессиональными программами.
С чего начинается профессия веб-дизайнера
С обучения. Причем платного.
Некоторые полагают, что навыков работы в фотошопе будет достаточно, и пытаются интуитивно разобраться в остальных программах. Кому-то это даже удается. Но дополнительное образование никогда не будет лишним, особенно в области IT. К тому же фотошоп далеко не единственная программа, которая необходима веб-дизайнеру для полноценной работы.
Начать осваивать специальность можно и самостоятельно, по книжкам для чайников. Но достичь высокого уровня таким образом вам, скорее всего, не удастся. Все равно придется пойти на курсы. Лучше постигать основы под руководством гуру, которые вовремя дадут нужный совет и поделятся профессиональными секретами.
На любых курсах вам дадут базовые навыки и много теории. Понятно, что на одной теории далеко не уедешь, но зато на практике меньше шишек набьете. К тому же у вас будет хороший старт. Если работодатели и ищут дизайнера без опыта, то охотнее возьмут того, кто закончил хотя бы какой-то курс.
Набросаем план освоения профессии.
6 сайтов для дизайнеров о шрифтах и типографике
- https://ilovetypography.com. Один из лучших ресурсов для тех, кто небезразличен к буквам. На этом сайте вы найдете массу полезных и просто интересных заметок о типографике и том, что с ней связано.
- https://fonts.google.com. Подборка бесплатных шрифтов от Google, которой чаще всего пользуются дизайнеры. Самое полезное — возможность посмотреть, с какими шрифтами чаще всего сочетается выбранный вами вариант.
- https://www.paratype.ru. Отличный сайт с хорошей подборкой шрифтов. Из приятного — можно без особого труда подобрать даже красивый русский шрифт, из печального — большинство шрифтов придется приобретать (но на сайте часто проводятся распродажи).
- https://fontshop.com. Магазин шрифтов, где можно подобрать удачное решение для своего проекта. Но особенно интересен сайт даже не количеством самих шрифтов, а примерами их применения, которые позволяют лучше оценить, насколько выбранный шрифт подходит для вашей задачи.
- https://www.dafont.com. Огромная подборка шрифтов для самых разных задач, а еще — удобный интерфейс и много новинок.
- https://typejournal.ru. Полезный интернет-журнал о типографике и шрифтах.
Основные направления
Графический дизайн — художественно-проектная деятельность, направленная на создание визуальной графической системы. Можно выделить 10 направлений:
- Веб-дизайн — проектирование веб-сайтов, интерфейсов и приложений, создание логической структуры и художественного оформления.
- Полиграфия обращена на разработку печатной продукции: листовки, буклеты, газеты, журналы, книги.
- Фирменный стиль создает имидж фирмы, единство товаров и услуг, призван выделять фирму среди конкурентов (логотипы, товарные знаки, сочетание цветов, лозунг).
- Шрифт используется везде как способ передачи информации. С его помощью можно создавать эффектную визуальную картинку.
- К дизайну рекламной продукции относится разработка всех видов печатной рекламы (визитки, листовки).
- Дизайн упаковки и этикетки является элементом брэндинга, представляет собой отдельное направление, включающее в себя разработку стиля упаковочных изделий (пакеты, коробки, емкости и т.д.).
- Рисунки и иллюстрации подразумевают художественное воплощение задумки в визуальной форме.
- Инфографика призвана облегчить процесс восприятия сложной информации в более простых и доступных формах (графиках, картинках, схемах).
- Дизайн пользовательских интерфейсов относится к веб-дизайну (программы, приложения).
- 3D дизайн включает объемное моделирование (промышленное, интерьерное и т.д.).
Пособие по созданию сайтов
Пособие программиста и автора множества обучающих проектов Максима Сукманюка на Udemy.com адаптировано для читателей, не являющимися профессионалами в области web-мастеринга. В учебном плане 5 разделов, в каждом — пошаговые иллюстрированные видео инструкции по переходу от теории к практике, комментарии по всем действиям, включая использование инструментов и кодов. Проштудировав пособие, уверяет Михаил Сукманюк, пользователь сможет самостоятельно создать и оформить сайт любого назначения. У образовательной программы хорошие отзывы и высокий рейтинг среди выпускников.
Если ещё не умеете, то учитесь рисовать
Есть дизайнеры, которые вполне справляются со своей работой и не умеют рисовать. Но с рисованием многое проще. В большинстве направлений дизайна не нужен академический или высокий уровень рисования. Зато пригодится навык уверенно делать наброски, нарисовать выразительный скетч — это поможет быстро и понятно донести свои идеи до коллег и заказчика.
По рисованию есть много видео и курсов, а ещё обратите внимание на книги. Например, вот эти:
- Дмитрий Горелышев. «Простое рисование»;
- Марк Кистлер. «Вы сможете рисовать через 30 дней. Простая пошаговая система, проверенная практикой».
Mobile First или не First?
Откуда начать — с веба или с мобилки? Дизайн сайта нередко сегодня начинается не с web-версии, а с мобильной. Люди всё больше и больше онлайн-времени проводят в мобильных устройствах, а не за широкими экранами. Из-за этого больше внимания стоит уделять мобильной версии, поскольку с большей вероятностью пользователи будут взаимодействовать именно с ней. Рекомендую начинать дизайн с мобильной версии, а потом уже адаптировать элементы под более широкие экраны — так вы избежите ситуации, когда красивый и изысканный блок на широком экране не понятно, как адаптировать под мобилу (которая важнее).
Но, опять же, подходите к этому вопросу осознанно: проанализируйте, где больше сидит ваша целевая аудитория? В каких условиях пользователь вероятнее будет решать свою задачу при помощи вашего сайта — сидя дома или на работе за ноутбуком или перебегая между станциями метро с телефоном и пакетами наперевес?
***
Часть шестая: Самообучение и саморазвитие
Веб-дизайн и веб-разработка в целом — это области, в которых, как ни в каких других важнейшее значение занимает самообразование. Ведь у нас нет школ, колледжей и институтов, которые обучали бы профессионалов в области веб-дизайна (на текущий 2016 год), а сама индустрия не стоит на месте и всегда нужно быть на волне.
Что касается UX — тут все тихо и спокойно. И так будет еще долго, ведь по сути, UX — это дисциплина, изучающая психологию, а здесь врядли что-то может поменяться в ближайшее время. Здесь самообучение заключается в развитии внутреннего мира, собственного опыта. Изучив базу, можно смело работать много лет, лишь изредка мониторя новости в этой области и читать хорошие детективы
Но особого внимание требует самообучение UI, здесь кипит жизнь, тренды в визуальном дизайне сменяют друг друга, дополняются и эволюционируют чуть ли каждый день! Я не сторонник слепого следования тенденциям и трендам, но, как показывает практика, рациональное зерно в трендах есть и за ними нужно следить
Что касается совершенствования своих навыков в UI, тут нельзя дать каких-то четких указаний, посоветовать книгу, после которой у вас будут получаться красивые интерфейсы. Но, тем не менее, я могу дать несколько советов, исходя из своего опыта, как происходит самообучение у меня.
- Постоянно изучайте работы на ThemeForest — это кладезь современного веб-дизайна. Пытайтесь применить какие-то привлекательные формы отображения контента в ваших работах, но не увлекайтесь и не забывайте о базе — UX, все должно быть в тему;
- Будьте постоянным посетителем awwwards.com и смотрите крутые работы, чтобы не расслабляться 😉
- Также, для развития чувства вкуса будет полезно периодически изучать хоршие работы на behance.net. Выделяйте время для того, чтобы практиковаться — повторяйте понравившиеся работы на практике в графическом редакторе, но ни в коем случае не публикуйте свои копии где бы то ни было. Это нужно только для практики и саморазвития;
- Критикуйте рекламу на улицах вашего города и думайте, как можно сделать лучше;
- Критикуйте UX на улицах и также, думайте, как многие вещи можно было бы сдлать удобнее. Благо, у нас на постсоветском пространстве есть место, где разгуляться на этот счет. Думайте о людях, думайте как люди.
Другие уроки по теме «Веб-дизайн»
- Создание Bootstrap-сетки в Figma
- С чего начать работу над дизайном и где брать вдохновение
- Create Website Design on iPad | Speed Art #5. Just for Fun
- Процесс создания дизайна сайта салона красоты. Мастер веб-дизайна #7
- Adobe XD на Windows. Мастер веб-дизайна #6. Создание дизайна сайта хостинг компании
- Мастер веб-дизайна #5: Создание дизайна сайта пиццерии
Веб-дизайн с нуля: самостоятельно или на курсах?
Пожалуй, этот вопрос возникает у каждого, кто задумывается про обучение веб-дизайну с нуля: можно ли научиться веб-дизайну самостоятельно или нужно обязательно идти на специализированные курсы? Давайте разбираться.
Однозначного ответа на этот вопрос нет — среди дизайнеров-самоучек и выпускников профессиональных курсов предостаточно как крутых специалистов, так и посредственных художников
Главное, на что следует обращать внимание ни выборе формата изучения веб-дизайна с нуля — ваше умение находить и структурировать информацию
Если смотреть глобально, в Интернете сегодня достаточно материалов, книг и видео для того, чтобы освоить веб-дизайн самостоятельно. Главная проблема заключается в неумении большинства новичков собирать эту информацию и находить ответы на свои вопросы. Если вы относитесь к их числу, без курсов будет тяжеловато. Однако, если с самого детства обучение в школе или университете давалось вам легко, то и с освоением веб-дизайна с нуля проблем возникнуть не должно.
Ниже мы собрали несколько советов, которые помогут вам познакомиться с веб-дизайном и начать изучать его с нуля, даже если раньше вы ни разу не открывали графический редактор.
Другие интересные программы обучения онлайн
В этом перечне я собрала менее популярные, но не менее привлекательные предложения
Обратите внимание, что некоторые учебные заведения выдают полноценные дипломы и удостоверения о прохождении обучения
«Графический дизайн: 1 ступень» от Arena Center
Графический дизайн: 1 ступень – курс от Arena Center. Дистанционная программа рассчитана на 2 месяца, за которые вы получите навыки работы с графикой в разных программах, научитесь создавать логотипы, айдентику и макеты рекламной продукции.
Стоимость составляет 30 000 руб. за 2 месяца, после прохождения всех занятий выпускники получают удостоверение о повышении квалификации.
«Специалист по графическому дизайну» от МГТУ им. Н. Э. Баумана
Программу “Специалист по графическому дизайну” учебного центра компьютерного обучения при МГТУ им. Н. Э. Баумана можно пройти очно или заочно. Общая учебная нагрузка составляет 80 академических часов. Стоит такое образование от 25 090 руб.
В программу входит углубленное изучение Adobe Photoshop и тонкостей профессии. После прохождения всех уроков можно получить сертификат на английском и русском языках или удостоверение о повышении квалификации для тех, у кого есть высшее образование.
«Graphic design» от Mobios
Graphic design – это курс от учебного центра веб-студии Mobios. За 4,5 месяца вы поработаете в Illustrator, Photoshop, After Effects, InDesign, изучите основы колористики, типографики, научитесь работать с заказчиками и создавать концепцию айдентики компании, положите начало своему портфолио.
Стоимость обучения составляет от 390 $.
«Графический дизайн и реклама» от Современной Школы Дизайна
Специальности “Графический дизайн и реклама” обучают в Современной Школе Дизайна. Общая продолжительность занятий – 7,5 месяцев. Уроки проходят в режиме онлайн 3-4 раза в неделю, записи доступны в течение 3 дней.
В программу включены все важные теоретические и практические знания по специальности. В конце можно получить диплом или удостоверение государственного образца.
Стоимость обучения составляет 101 000 руб.: 10 000 предоплаты и затем по 13 000 руб. за каждый месяц.
«Графический дизайн, бренд-дизайн и айдентика» от Moscow Digital Academy
Курс “Графический дизайн, бренд-дизайн и айдентика” от Moscow Digital Academy можно пройти офлайн в Санкт-Петербурге, Москве или онлайн из регионов и других стран. Занятия онлайн проходят параллельно с группой: смотрим прямую трансляцию, получаем задания и выполняем. Программа включает, помимо бренд-дизайна, разработку макетов для сайтов и SMM, анимацию, интерактив и рисование от руки.
Всего обучение длится 2 месяца – это 48 часов теоретических занятий и 85 часов практики. Стоимость онлайн-формата составляет 54 900 руб.
«Графический дизайн» от Avenue
Графический дизайн – курс IT-школы Avenue, который длится 3 месяца. Здесь акцент делается на разработку логотипа и создание полиграфической продукции: от визиток до рекламных баннеров. Много практики и работ для портфолио. Обучаться можно с нуля, не имея даже простых знаний и навыков работы в Photoshop.
Стоимость онлайн-формата составляет 28 490 руб. или ежемесячно 10 490 руб. Также можно заниматься в группах за 29 990 руб.
«Основы графического дизайна» от DSGNClub
Основы графического дизайна – это программа студии DSGNClub. Она включает уроки по созданию логотипа, макетов для социальных сетей и полиграфии, разработке сайта, то есть, в отличие от других подобных программ, тут еще затрагиваются и основы веб-дизайна.
Есть 2 варианта участия: стандартный пакет стоит 11 990 руб., VIP-участие с 2 личными уроками с создателем курса Костей Кирьяновым обойдется в 17 000 руб.
11 сайтов о логотипах
LogoDesignLove — сайт о хороших логотипах
- https://logopond.com. Сотни примеров логотипов, как удачных, так и не очень, в вашем распоряжении. Плюс ресурса в том, что вариантов на нем очень много, а еще их можно по-разному отсортировать.
- https://www.logaster.com. Сервис позволяет очень быстро генерировать логотипы. Да, уникальный логотип с его помощью не сделать, но сайт очень выручает, когда у клиента еще нет логотипа, а в шапку сайта нужно что-то поставить.
- https://logo.squarespace.com/. Аналогичный сервис для создания логотипов небольшого размера. Вы вводите название компании и попадаете в редактор, в котором к логотипу можно добавить иконку, а заодно посмотреть, как все это смотрится на визитке, мониторе и футболке.
- http://logofaves.com. В подборках логотипов на этом ресурсе можно найти не только идеи, но и контакты дизайнера, а также ссылку на его Behance-профиль. Это очень удобно в случае, когда вам нужно не только посмотреть логотип, но и найти исполнителя.
- https://www.hipsterlogogenerator.com. Еще один генератор, позволяющий создать простой, но достаточно эффектный логотип за пару минут.
Генераторы логотипов помогут придумать основу или создать временный логотип
- http://logotypes101.com. Подборка бесплатных векторных логотипов. Если у вас есть время и вы готовы его потратить, то сможете найти неплохой вариант.
- https://logobaker.ru. Сайт для тех, кто разрабатывает логотипы. Здесь есть неплохая подборка, а также возможность попросить совета или получить фидбек.
- https://www.logofury.com. В этом сервисе от вас требуется только ввести название компании, выбрать категорию и добавить слоган (при желании), все остальное генератор делает за вас, мгновенно создавая десятки вариантов.
- https://www.logomoose.com. Очень солидная подборка логотипов со всего мира. Что интересно, есть действительно много хороших вариантов, которые можно использовать для вдохновения.
- http://www.thelogomix.com. И снова подборка логотипов, но на этот раз с расширенной сортировкой: можно выбрать логотипы по определенному цвету или тематике. Когда нужно что-то быстро придумать, очень выручает.
Кто такой веб-дизайнер и что он делает
Данная специальность появилась уже XXI веке, когда IT-технологии стали стремительно развиваться. Обычно веб-дизайнеры работают в сфере рекламных услуг, разрабатывают сайты. В обязанности профи входит создание дизайна сайтов, рекламных объявлений, баннеров и т. п.
Если вы – творческая личность с нестандартным мышлением, значит, вы выбрали профессию по призванию. Также важны художественные способности, логика и усидчивость. А вот хорошо рисовать совершенно не обязательно, так как творить вы будете в специальных программах.
Дизайнеру нужно не только продумать внешний вид сайта и каждой его страницы, но и знать, как прописывать коды макетов для верстки, куда потом будут вставлять баннеры, иконки и другой контент. Художественные задачи перед специалистом ставятся как крупные – самостоятельно создавать иллюстрации, так и более мелкие – обрабатывать картинки для размещения на сайте.
Кому стоит изучать веб-дизайн?
С одной стороны, когда речь заходит про изучение веб-дизайна с нуля, можно говорить о том, что это ремесло подойдёт всем и каждому. И действительно, оно находится на стыке искусства, гуманитарных и технических наук. Программное обеспечение не требует серьёзных вычислительных ресурсов. Наконец, веб-дизайн — это безумно интересно.
С другой стороны, есть ряд навыков и черт характера, которые помогут развиваться в веб-дизайне более эффективно:
- Способность обучаться. Если вы умеете самостоятельно искать ответы на свои вопросы, а также находить, изучать и, самое главное, понимать новый материал, ваш рост в веб-дизайне будет более стремительным.
- Эмпатия. Умение ставить себя на место другого человека (пользователя вашего будущего сайта), поможет вам создавать проекты, ориентированные на финального потребителя и решающие реальные задачи.
- Собранность и дисциплинированность. Работа (и обучение) веб-дизайнера с нуля — сложный многошаговый процесс. Иногда что-то может не получаться. Без жёсткого стержня внутри принимать свои недостатки и исправлять ошибки будет немного труднее.
Не стоит также забывать, что как и в любом ремесле, ваш успех в освоении веб-дизайна с нуля зависит только от вас: ни одна онлайн-школа не сможет гарантировать вам счастливое будущее и бесконечный поток заказов.
Skillbox
Университет востребованных профессий Skillbox.ru регулярно анонсирует онлайн-курсы с гарантированным трудоустройством либо стажировкой.
Первый вариант получить новую работу и специальность веб-дизайнера — это профессиональное 2-годичное обучение, в ходе которого студенты получают первые оплачиваемые заказы уже спустя 4 месяца. В числе преподавателей — исключительно дизайнеры-практики. Стартовая половина курса отведена под получение профессиональных навыков с нулевого уровня до PRO, ознакомление с UX-дизайном и освоение Photoshop. В оставшийся период студенты определяются со специализацией (работа с рекламой, мобильными приложениями или промо-сайтами), вникают в UI-дизайн, практикуются в графических редакторах интерфейсов.
Вторая из популярных программ Skillbox имеет схожий, но более компактный учебный план, который рассчитан на 8 месяцев. Видеоуроки можно смотреть на любых устройствах, задания отправляются на проверку в удобное для слушателя время, ошибки разбираются с куратором. К моменту получения диплома выпускники собирают портфолио из 15 самостоятельно выполненных работ.
Больше онлайн-курсов по digital-дизайну можно найти в каталоге учебных программ университета.
Верстка
Дизайнер располагает элементы на сайте так, чтобы страница выглядела цельной и не разваливалась. Он смотрит на взаиморасположение и расстояние между блоками, создает контраст, старается уменьшить беспорядок на странице и улучшить ее структуру.
Важно!
Пользователь легко ориентируется на сайте с хорошей версткой и быстро получает нужную информацию.
Чтобы сверстать страницу хорошо, можно пользоваться такими приемами:
Группировать однородные элементы — ставить их ближе друг к другу, чтобы пользователю было легче воспринимать информацию.
Создавать контраст с помощью шрифтов, цветов, размеров. Так сайт не выглядит однообразным и монотонным
С помощью контраста выделяют главное, управляют вниманием и делают так, чтобы текст было интересно читать.
Пользоваться сеткой, чтобы выровнять элементы относительно друг друга, сделать страницу аккуратней.
Atelier: beauty store on Dribbble
Страницу, сверстанную с помощью таких базовых приемов, удобно и интересно читать, на ней видны логические связи между разными объектами и понятно, какую информацию изучать в первую очередь.
Ресурсы
- Якорные объекты: баланс в композиции.
- Ководство: Теория близости.
- Если нет времени изучать верстку и типографику.
- Правило близости.
Книги
- Дизайн‑бюро Артема Горбунова. Типографика и верстка.
- Тим Харровер. Настольная книга газетного дизайнера.
- Йозеф Мюллер-Брокманн. Модульные системы в графическом дизайне.
Как научиться веб-дизайну с нуля?
Самое главное в процессе освоения веб-дизайна — иметь чёткий план, структуру, стратегию изучения
Не стоит бросаться читать всё подряд, смотреть сразу все лекции на YouTube и подписываться на всех блогеров. На начальном этапе важно выработать пошаговый план для изучения веб-дизайна с нуля. Согласитесь, нет смысла учиться проектировать сложные интерфейсы, пока вы даже не можете нарисовать простенький сайт
В отдельной статье на сайте мы разместили наш персональный план «Как стать веб-дизайнером за 5 шагов». Его можно использовать как некий «скелет» для организации дальнейшего обучения.
Курсы веб-дизайна с нуля
Большинство существующих сегодня курсов ориентированы именно на новичков, и помогают начать знакомство с веб-дизайном с самых азов. Одни курсы длятся всего несколько месяцев, другие — год или больше. Рекомендуем вам ознакомиться с разными вариантами и подобрать подходящий по длительности, интенсивности и другим параметрам.
В нашей подборке с лучшими курсами по веб-дизайну вы можете найти сравнение более 15 различных курсов и выбрать тот, который подойдёт именно вам.
Полезные книги для веб-дизайнера
Преимущество веб-дизайна как сферы деятельности заключается в том, что базовые принципы визуального дизайна не изменяются уже многие десятилетия.
Да, многие тренды приходят и уходят, операционные системы и популярные соц.сети регулярно обновляются, но основные концепции и идеи цифрового дизайна остаются неизменными.
Главным ресурсом для получения этих знаний по-прежнему остаются книги. Некоторые из них можно считать настольной «библией» для любого, кто изучает веб-дизайн с нуля.
Ководство — Артемий Лебедев. Книга представляет из себя свод правил и принципов, применимых к самым разным областям дизайна. Руководитель самой известной дизайн-студии России рассказывает одновременно о законах композиции, и о том, какие кавычки использовать в макетах. Читать книгу можно с любого места, и в этом её прелесть. Скачать книгу →
Не заставляйте меня думать — Стив Круг. Настоящая кладезь знаний для всех, кто планирует связать свою жизнь с дизайном интерфейсом. Главная мысль автора заключается в том, что интерфейс (сайт или приложение) в руках пользователя не должен быть преградой для решения поставленных задач. И, конечно же, Стив Круг на примерах показывает, как сделать продукт в разы круче. Скачать книгу →
iПрезентация — Кармин Галло. Одна из первых книг в моей коллекции. Она не связана напрямую с веб-дизайном — автор делает большой упор на презентации и storytelling и берёт за основу самые популярные и эффектные презентации продуктов от компании Apple. Однако, принципы, используемые для создания крутых презентаций и промо-сайтов примерно во многом похожи. Скачать книгу →
Дизайн привычных вещей — Дон Норман. Дизайн в общем, и веб-дизайн в частности — это не то, как что-то выглядит, а то, как оно устроено изнутри. Хороший дизайн должен решать проблемы пользователя, а не создавать преграды. Об этом и рассказывает в своей книге Дон Норман, используя в качестве примеров привычные и окружающие нас предметы. Скачать книгу →
Сетка
Сетка — один из основных инструментов дизайнера. Она делит страницу на несколько колонок, по которым выравнивают блоки сайта, структурируют информацию, расставляют акценты. Сетка создает ощущение порядка. Также она полезна при проектировании нескольких однотипных страниц, чтобы они выглядели единообразно и аккуратно.
The Design Genome Project by InVision
Сетку дизайнер подбирает под макет, исходя из своих замыслов и идеи будущего сайта. Иногда достаточно разделить макет на четыре колонки, иногда на шесть или 12.
На эти колонки стоит ориентироваться и выравнивать информацию. Но сетка — это не абсолютное правило, иногда от нее можно и нужно отходить.