Веб-дизайн. С чего начинать? / Sandbox / Habr
Я открыла для себя веб-дизайн меньше года назад.Самой большой проблемой оказалось не потеряться в невероятно огромном количестве информации. Я постараюсь упаковать тот минимум с которым просто необходимо разобраться, если хочешь перейти в эту сферу.
1. Цвета
Основы по цветам можно найти в этой статье: popel-studio.com/blog/article/o-tom-kak-cveta-sochetayutsya.html
Необходимо научиться подбирать цветовые гаммы и вот пара ссылок для этого:
color.adobe.com/ru/create/color-wheel
colorfulgradients.tumblr.com
colorfulgradients.tumblr.com
Но для тех, кто впервые в этой лодке, я могу посоветовать пользоваться уже готовыми удачными цветовыми решениями более профессиональных веб-дизайнеров. О том где можно вдохновляться работами гуру, я напишу чуть дальше.
Я очень люблю эту статью про цвета: habrahabr.ru/post/261181
2. Шрифты
Со шрифтами всё сложно. Это целая наука, в тайны которой можно уйти на всю свою жизнь и развивать просто только в этом направлении. Для того, чтоб помочь разобраться как же всё-таки подбирать шрифты, могу порекомендовать видеоролик Николая Ковальчука. Лично до меня дошло со второго раза.
Но тут есть маленькая хитрость. Давным давно уже были подобраны оптимальные решения по комбинированию шрифтов. Вот ссылка на несколько удачных комбинаций, которыми по началу можно пользоваться и их действительно предостаточно для новичка:
shkola.readymag.com/futura-garamond
3. Композиция
Композиция, для меня это основной критерий визуальной приятности. Если композиция гармонична, это уже 50% успеха. Поэтому очень рекомендую прочитать вот такие статьи:
naikom.ru/blog/archives/4146
pixelgene.ru/articles/golden-ratio.html
lopart.by/osnovy-kompozitsii-v-veb-dizajne
Прочитайте, осознайте и еще раз прочитайте.
4. Модульные сетки
Очень полезная вещь и для дизайнера и для верстальщика, который будет воплощать ваш дизайн в жизнь. Сетка помогает навести порядок в макете и сбалансировать композицию. Вот статья по сеткам:
popel-studio.com/blog/article/oda-modulnoi-setke.html
5. Тренды
Чтоб не изобретать велосипед, всегда полезно смотреть и учиться у лучших в своем деле. В дизайне важно быть в теме, следить за тенденциями и просто уметь грамотно пользоваться чужими уже удачными наработками и вот несколько сайтов, которые могут помочь в этом:
www.pinterest.com
www.behance.net
dribbble.com
www.awwwards.com
www.cssdesignawards.com
6. Поиск информации
Еще одна особенность работы веб-дизайнера заключается в том, чтоб самостоятельно уметь искать необходимую информацию. Поэтому совет, без ссылок: «Для того, чтоб начать тренироваться и что-то пробовать, я советую найти PSD документы с разными лендингами, мобильными приложениями, респонсивами и сделать на основе уже готовых макетов свой редизайн».
7. Маркетинговые уловки
ekaterinakuzmina.ru/marketing-for-designers2
www.smartinsights.com/traffic-building-strategy/offer-and-message-development/aida-model
Если это зацепило, то ищите, в интернете просто море этой инфы.
8. Photoshop, Sketch или что-то другое
На самом деле я точного ответа не дам, где вам удобнее, там и создавайте ваши макеты. Просто скажу уделить немного внимания Смарт объектам, маскам и конечно работа со слоями: www.lookatme.ru/mag/live/experience-experiments/204035-photoshop-vs-sketch-3
9. Ништяки
beloweb.ru/dizayn-sayta/50-stilnyih-sovremennyih-i-besplatnyih-fonov-dlya-dizaynera.html
tooktoo.ru/category/mockups
www.dejurka.ru/articless/free-mockup-websites
pixelgene.ru
10. Совет напоследок
Если уже взялись делать макеты, не ленитесь, подумайте. Продумайте: для чего этот сайт, для кого этот сайт, зачем он вообще нужен и какие цели преследует? Дальше уже приступайте к разработке костяка сайта и так далее. Ищите референсы (аналоги прямые и не прямые). И просто работайте и учитесь и всё получиться.
Веб-дизайн для начинающих, уроки по web-дизайну
От автора: доброго времени суток, уважаемый читатель. Сегодняшний урок будет посвящен тому, какие принципы включает в себя такая область веб-разработки, как веб-дизайн. Для начинающих веб-дизайнеров очень важно понимать, что в процессе создания дизайна сайта лучше отдавать предпочтение не эффектности формы, а функциональности и эффективности контента, то есть, содержимого.
Конечно, творческий подход к делу тоже нужен, но не стоит считать задачей дизайнера развлечение пользователей и подогревание их интереса к сайту с помощью анимации и красочных иллюстраций.
Вам нужно «опуститься» до уровня обычного смертного — пользователя, с его предпочтениями, нуждами и интересами. Ведь, в конечном итоге, важно лишь то, понравится ли сайт пользователю, оценит ли он удачный баланс простоты использования и изящности дизайнерского оформления вашего «детища».
Если Вам еще сложно понять правила хорошего тона в оформлении сайтов, обратитесь к комплексным видео урокам по веб-дизайну для начинающих, которые позволят Вам сэкономить огромное количество денег и времени, которое вы можете потратить на поиск нужной информации, обучение теории и практические занятия.
Принципы хорошего веб-дизайна
Любой курс web-дизайна для начинающих стартует с пространного описания его понятия, принципов, функций и задач. Я не буду вдаваться в эти теоретические подробности, остановлюсь лишь на описании основных моментов.
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Узнать подробнееСуществует огромное количество мнений, какие дизайнерские решения являются наиболее удобными и «продвинутыми». Конечно же, веб-дизайн для бизнес-сайтов, имиджевых сайтов, новостных порталов и блогов будет абсолютно разным. Чтобы создать по-настоящему эффективный и гармоничный интерфейс, необходимо сочетать основные принципы удобства пользования сайтом с творческим подходом и визуальной составляющей.
Steven Bradley, известный блоггер, в своей статье «Design Principles: Dominance, Focal Points And Hierarchy» называет три основных принципа веб-дизайна:
доминация;
точки фокуса;
иерархия.
В сегодняшнем уроке web-дизайна для начинающих рассмотрим эти принципы более подробно. «Для чего это нужно?» – спросите Вы. А вот для чего. Работая над проектами, Вы неоднократно будете сталкиваться с требованием заказчиков увеличить размер каких-либо элементов, дабы выделить и подчеркнуть их. Когда Вы это сделаете, то обнаружите, что теперь подобные манипуляции нужно проделать и с остальными объектами, чтобы сохранить баланс.
К Вам постепенно придет осознание, что одни объекты являются доминирующими, в то время как другие — лишь элементами фона. Если же несколько объектов начинают доминировать одновременно, это может не только внести путаницу в работу, но и повлиять на гармонию и привлекательность веб-дизайна в целом.
Принцип 1. Доминация
Если сравнить два любых объекта в дизайне, то здесь возможны два варианта:
они полностью идентичны;
один из них будет доминировать над другим.
Доминирующий объект сразу притягивает взгляд, его замечают раньше. Таким образом, он обладает большей визуальной весомостью.
Доминацию можно создать, варьируя следующие свойства элементов:
размер;
цвет;
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Узнать подробнееформа;
текстура;
насыщенность;
глубина;
свободное пространство;
ориентация;
воспринимаемый объем и вес.
Ваша цель — создать элемент, который имеет намного больший визуальный вес. В идеале у Вас должен быть только один доминирующий объект. Это главная точка Вашего дизайна, начальная точка истории, которую Вы рассказываете.
Еще один способ заставить объект доминировать — применить эффект визуального направления или, так называемую, визуальную подсказку. Например, окружить элемент стрелочками, направленными на него. Таким образом, Вы сможете сделать его доминирующим даже при обладании им меньшим визуальным весом, по сравнению с другими объектами.
Не рекомендую Вам делать два и больше доминанта — они будут «драться» за внимание и нарушать весь баланс. Не следует также делать какой-то элемент чрезмерно доминирующим, чтобы он не слишком затмевал остальные части композиции.
Принцип 2. Точки фокуса
Точки фокуса — менее выраженные, второстепенные элементы в вопросе доминации. Они представлены в виде зон, обладающих меньшим визуальным весом.
Чтобы наиболее выгодно и эффективно использовать этот принцип в своей работе, желательно использовать не более трех точек фокуса. Тогда контраст между ними будет ярко выраженным, и человек интуитивно разделит увиденное на нечто «очень важное», «просто важное» и «все остальное». Чем больше точек фокуса пользователь увидит на экране, тем тяжелее ему будет воспринимать информацию.
Принцип 3. Иерархия
Визуальная иерархия предполагает наличие нескольких уровней доминации. Она должна быть основана на приоритетах информации, чтобы направить взгляд пользователя на самое важное и обеспечить ему положительный опыт от потребления контента.
Если, к примеру, заголовок страницы важнее какого-то факта в статье, то его (заголовок) нужно визуально выделить. Доминирующий в иерархии объект должен отвечать на все вопросы пользователя, который пришел на эту страницу за определенной информацией.
Чтобы построить иерархию, можно поиграться с размером, расположением, цветом, выравниванием, контрастом и вертикальным ритмом элементов. Если взглянуть на картинку выше, мы увидим, что на ней основным свойством построения визуальной иерархии является размер, который отличает заголовки от текста, разбитого на блоки с разным по величине шрифтом.
В дизайне для мобильных приложений возможность использования различных принципов визуальной иерархии ограничена (например, пространства или размера), поэтому на первое место выходит цвет.
В примере ниже мы видим, что кнопка «Proceed to Checkout» выделена красным цветом, в то время как «Narrow Your Search Results» серая и находится на одном уровне со ссылками на продукты и фильтром. Нетрудно догадаться, какая из кнопок занимает первостепенное место в визуальной иерархии этого интерфейса.
На этом наш урок веб-дизайна для начинающих подошел к концу. В заключение хочу напомнить, что все полученные знания желательно сразу применять на практике. Для этого можно воспользоваться различными платными и бесплатными видеокурсами, которые помогут Вам скорректировать самообучение, объяснят сложные приемы простыми словами, да и просто вдохновят на дальнейшее развитие.
Если вы хотите улучшить свои навыки веб-дизайна, подписывайтесь на обновления нашего блога и читайте свежие материалы «из первых рук».
Эта статья была Вам полезной? Рекомендуйте нас друзьям в социальных сетях! До новых встреч!
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Узнать подробнее
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!
Смотреть видео26 полезных видеолекций для веб-дизайнеров
Подобрали полезнейшие лекции для всех, кто занимается или планирует начать заниматься веб-дизайном.
Практикующий дизайнер Максим Солдаткин рассматривает эту профессию со всех сторон: можно ли ей научиться без художественного образования, как быть фрилансером веб-дизайнером, как грамотно составлять ТЗ на работу, где искать клиентов и много других интересных тем.
Эти лекции будут полезны не только новичкам, но и всем тем, кто сейчас пытается уйти с работы в офисе на просторы фриланса.
8 базовых навыков веб дизайна для начинающих с нуля
Профессия: веб-дизайнер и дизайнер интерфейсов UX & UI
Сущности в веб-дизайне и интерфейсах
А/Б тестирование
Как сделать модульную сетку 960 grid
Куда ехать дизайнеру на фриланс зимовать
Первые деньги в веб-дизайне
Как сделать лендинг Landing Page
Как сделать идеальный сайт для поиска стилиста New You
10 рабочих способов найти клиентов на веб-дизайн
Как сделать интерактивный прототип сайта или мобильного приложения за 1 минуту
Как дизайнеру найти вдохновение для дизайна сайта или интерфейса
Как сделать адаптивный сайт под разные размеры экрана
Как написать пользовательский сценарий
Что такое рекламный инсайт и как придумать хороший инсайт
Как написать техническое задание (ТЗ) на дизайн сайта
Идеальная типографика и микротипографика
ТОП 5 правил типографики на веб-сайтах
Типографика: как подобрать шрифтовую пару для сайта
Как дизайнеру сверстать сайт?
HTML и CSS для веб-дизайнера
Как подготовить макет сайта для верстки, для верстальщика
Как делать только 1 вариант дизайна
Стили в графическом дизайне
Дизайн сайта в Photoshop (Фотошопе) с нуля за 60 минут самому
Ответы на вопросы в рамках курса веб-дизайна
Фото на обложке: ShutterStock
Где учиться на веб-дизайнера и как обучиться веб-дизайну?
От автора: доброго времени суток, уважаемый читатель! Как вы считаете, можно ли развить художественный и эстетический вкус тому, кто в жизни не держал в руках кисть, не ходил по картинным галереям и не понимает, в чем смысл «Квадрата Малевича»? Что делать, если очень хочется стать дизайнером, но нет желания часами рисовать вазу или куб в художественной школе?
Последние несколько лет стала очень популярной и престижной считаться профессия веб-дизайнера, которой, якобы, можно научиться даже с нулевыми навыками в рисовании — многие считают, что достаточно лишь освоить парочку графических программ и изучить основы сайтостроения. Так ли это, можно ли освоить веб-дизайн самостоятельно и где учиться на веб-дизайнера, рассмотрим в нашей статье.
Кто такой веб-дизайнер?
Перед тем, как углубиться в вопросы того, где можно обучиться веб-дизайну, рассмотрим смысл существования данной профессии как таковой.
Web-design (англ.) — это разновидность дизайна и отрасль веб-разработки. Веб-дизайнер — это специалист, который отвечает за то, как воспринимается и отображается в интернете конкретный сайт. С помощью компьютерных технологий он создает и обрабатывает элементы графики, придумывает логотипы, баннеры, разрабатывает структуру и навигацию сайта.
Таким образом, сферу компетенции типичного веб-дизайнера можно разделить на программную, визуальную и стилевую составляющие. Это организация электронной информации и ее приятное оформление, разработка интерфейсов для сайтов и приложений, создание запоминающейся графики, которая служит основным задачам сайта и запросам целевой аудитории.
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Узнать подробнееЧтобы создавать эффективные сайты, web-дизайнер в тесном контакте работает с бренд-менеджерами, веб-программистами, верстальщиками, специалистами по маркетингу и SEO-продвижению сайтов.
Хороший веб-дизайнер — это специалист, который умеет работать с графическими редакторами и обладает неплохим художественным вкусом. Отличный дизайнер — это одновременно талантливый художник, интуитивный психолог и сильный технический специалист.
Изучение веб-дизайна в вузе
Необходимые навыки можно получить в вузах в рамках профиля «графический дизайн», среди общих предметов которого рисунок, история искусств, художественная композиция, черчение и т. д.
Специальные дисциплины представлены web-дизайном, контент-менеджментом, современными технологиями, трехмерным моделированием, компьютерной анимацией и др.
В рамках специальности «дизайн» некоторые колледжи готовят дизайнеров-оформителей и дизайнеров-верстальщиков, впрочем, там можно получить лишь базовые знания по веб-дизайну.
Стоит ли игра свеч?
Если вы задаетесь вопросом, где учиться профессии веб-дизайнера, и у вас есть в запасе лишних 5–6 лет, которые вы готовы потратить на изучение как важной, так и второстепенной информации, вроде основ работы с интернетом или истории искусств, то можете смело становиться студентом специальности «Графический дизайн».
Приготовьтесь также к тому, что на первом курсе вам придется в обязательном порядке изучать особенности газетного, журнального, плакатного, книжного и других видов дизайна. Кстати, перед поступлением в учебное заведение не забудьте убедиться, что в его курс вообще включены лекции по веб-дизайну.
Не знаю как вам, а мне это кажется колоссальной потерей времени. В условиях интенсивного самообразования, возможно, с пошаговым прохождением различных комплексных видеоуроков по веб-дизайну и морем практики, путь от полного нуля до квалифицированного специалиста займет в разы меньше времени, сил и, что тоже немаловажно, финансовых средств.
Кроме этого, современное академическое образование безнадежно отстает от реалий такой стремительно развивающейся сферы, как веб-дизайн. В используемых методах преподавания и специальной литературе даже нет точного определения уровня компетенции такой профессии, как веб-дизайнер.
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Узнать подробнееПосещение курсов по веб-дизайну
В связи с тем, что в нашей стране отсутствует полноценное образование в этой области, в последнее время, как грибы после дождя, появились разнообразные курсы, которые учат премудростям веб-дизайна быстро и доступно, только деньги плати.
В большинстве курсов вам предложат, для начала, пройти базовую компьютерную подготовку (Интернет, Word, Windows, Excel). Затем — освоение графического редактора Adobe Photoshop, который позволит вам работать с растровой графикой, создавать и обрабатывать изображения, формировать макет сайта. Без Фотошопа в веб-дизайне никуда.
Еще одна вещь, которой вас обязательно должны научить на курсах, — это язык гипертекстовой разметки HTML. Веб-страницы в формате HTML, объединяющие рисунки, текст и другие элементы, — основа любого сайта.
Впрочем, согласно опросу работодателей компаний, у них нет доверия к разного рода сертификатам и дипломам, выданных веб-дизайнерскими курсами. Для них лучшим подтверждением компетентностного уровня веб-дизайнера является качественное портфолио.
Поэтому, задаваясь вопросом, где учиться на веб-дизайнера, вы не думайте, что по окончании курсов будете нарасхват у множества авторитетных веб-студий, — такого не случится. Курсы — это лишь первый шаг на нелегком и тернистом пути под названием «веб-дизайн».
Где же взять качественное портфолио, если опыта нет никакого, а компаниям нужны уже подготовленные специалисты?
Самообразование никто не отменял
Человек может научиться всему. И основополагающими факторами успеха будут вовсе не образование и не возраст, а мотивация, терпение и целеустремленность. Некоторые талантливые дизайнеры и карандаш-то толком в руках держать не умеют, зато создают удивительные изображения в графических программах.
Не забывайте, мы живем в эпоху Интернета, который может стать нам и школой, и вузом, и местом практики.
Процесс обучения веб-дизайну аналогичен обучению любой другой дисциплине и состоит из следующих звеньев:
освоение теории;
формирование умений;
преобразование умений в навыки.
Без практики здесь не обойтись. Начните с простого, выполняйте различные задания, анализируйте оригинальные сайты и пробуйте вначале копировать работы других дизайнеров, пока не набьете руку и не разовьете у себя художественный и эстетический вкус. Идентично тому, как у других, у вас все равно не получится, зато попрактикуетесь и заодно сделаете себе портфолио.
Надеюсь, эта статья была вам полезна, господа начинающие веб-дизайнеры. Где учиться — в колледже, университете, с помощью офлайн- или онлайн-курсов, решать вам. Все зависит от вашего стремления, мотивации и веры в собственные силы.
Подписывайтесь на наш блог, изучайте с его помощью теоретические и практические основы веб-дизайна, вдохновляйтесь и совершенствуйтесь. Желаю вам творческих успехов!
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Узнать подробнее