30 уроков по созданию веб-сайта: от дизайна до верстки
Подробный курс, который расскажет обо всех этапах создания сайта: начиная с дизайна в Photoshop, заканчивая его версткой и внедрением CMS.
Эти уроки будут полезны для начинающих дизайнеров: поможет понять не только принципы “чистого” дизайна, но и нюансы подготовки макета для верстки.
Урок #1: Скетч
Урок #2: Скетч (Продолжение)
Урок #3: Заканчиваем создание скетча
Урок #4: Дизайн шапки
Урок #5: Дизайн первой секции
Урок #6: Дизайн второй секции
Урок #7: Дизайн третьей секции
Урок #8: Дизайн четвертой секции
Урок #9: Дизайн шестой и седьмой секций
Урок #10: Дизайн секций “Отзывы”, “Контакты” и подвала
Урок #11: Подготовка Front-End окружения. Начинаем верстать макет
Урок #12: Начинаем верстать шапку
Урок #13: Верстка шапки
Урок #14: Верстка. Адаптивная шапка + адаптивное меню
Урок #15: Верстка. Полоса преимуществ
Урок #16: Верстка. Секция “Наш профиль”
Урок #17: Верстка. Плавная pop-up галерея (Magnific-Popup)
Урок #18: Верстка. animateNumber + верстка секции “Направления”
Урок #19: Верстка. Секция “Наши работы” + Pop-up
Урок #20: Верстка. Секция “Поставляемое оборудование”. Карусель
Урок #21: Верстка. Секции “Скидки” и “Менеджеры”
Урок #22: Верстка. Карусель брендов
Урок #23: Верстка. Отзывы
Урок #24: Верстка. Контакты
Урок #25: Обновление Front-End окружения Gulp
Урок #26: Верстка. Футер, всплывающие формы, кнопка «Наверх»
Урок #27. MODx + Gulp: Интеграция и настройка окружения Gulp
Урок #28. Приступаем к посадке HTML верстки на MODx. Шаблоны и чанки
Урок #29. Посадка HTML верстки шапки на MODx
Урок #30. Посадка секции тизеров на MODx
Фото на обложке: ShutterStock
infogra.ru
Веб-дизайн для начинающих, уроки по web-дизайну
От автора: доброго времени суток, уважаемый читатель. Сегодняшний урок будет посвящен тому, какие принципы включает в себя такая область веб-разработки, как веб-дизайн. Для начинающих веб-дизайнеров очень важно понимать, что в процессе создания дизайна сайта лучше отдавать предпочтение не эффектности формы, а функциональности и эффективности контента, то есть, содержимого.
Конечно, творческий подход к делу тоже нужен, но не стоит считать задачей дизайнера развлечение пользователей и подогревание их интереса к сайту с помощью анимации и красочных иллюстраций.
Вам нужно «опуститься» до уровня обычного смертного — пользователя, с его предпочтениями, нуждами и интересами. Ведь, в конечном итоге, важно лишь то, понравится ли сайт пользователю, оценит ли он удачный баланс простоты использования и изящности дизайнерского оформления вашего «детища».
Если Вам еще сложно понять правила хорошего тона в оформлении сайтов, обратитесь к комплексным видео урокам по веб-дизайну для начинающих, которые позволят Вам сэкономить огромное количество денег и времени, которое вы можете потратить на поиск нужной информации, обучение теории и практические занятия.
Принципы хорошего веб-дизайна
Любой курс web-дизайна для начинающих стартует с пространного описания его понятия, принципов, функций и задач. Я не буду вдаваться в эти теоретические подробности, остановлюсь лишь на описании основных моментов.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Узнать подробнееСуществует огромное количество мнений, какие дизайнерские решения являются наиболее удобными и «продвинутыми». Конечно же, веб-дизайн для бизнес-сайтов, имиджевых сайтов, новостных порталов и блогов будет абсолютно разным. Чтобы создать по-настоящему эффективный и гармоничный интерфейс, необходимо сочетать основные принципы удобства пользования сайтом с творческим подходом и визуальной составляющей.
Steven Bradley, известный блоггер, в своей статье «Design Principles: Dominance, Focal Points And Hierarchy» называет три основных принципа веб-дизайна:
доминация;
точки фокуса;
иерархия.
В сегодняшнем уроке web-дизайна для начинающих рассмотрим эти принципы более подробно. «Для чего это нужно?» – спросите Вы. А вот для чего. Работая над проектами, Вы неоднократно будете сталкиваться с требованием заказчиков увеличить размер каких-либо элементов, дабы выделить и подчеркнуть их. Когда Вы это сделаете, то обнаружите, что теперь подобные манипуляции нужно проделать и с остальными объектами, чтобы сохранить баланс.
К Вам постепенно придет осознание, что одни объекты являются доминирующими, в то время как другие — лишь элементами фона. Если же несколько объектов начинают доминировать одновременно, это может не только внести путаницу в работу, но и повлиять на гармонию и привлекательность веб-дизайна в целом.
Принцип 1. Доминация
Если сравнить два любых объекта в дизайне, то здесь возможны два варианта:
они полностью идентичны;
один из них будет доминировать над другим.
Доминирующий объект сразу притягивает взгляд, его замечают раньше. Таким образом, он обладает большей визуальной весомостью.
Доминацию можно создать, варьируя следующие свойства элементов:
размер;
цвет;
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Узнать подробнееформа;
текстура;
насыщенность;
глубина;
свободное пространство;
ориентация;
воспринимаемый объем и вес.
Ваша цель — создать элемент, который имеет намного больший визуальный вес. В идеале у Вас должен быть только один доминирующий объект. Это главная точка Вашего дизайна, начальная точка истории, которую Вы рассказываете.
Еще один способ заставить объект доминировать — применить эффект визуального направления или, так называемую, визуальную подсказку. Например, окружить элемент стрелочками, направленными на него. Таким образом, Вы сможете сделать его доминирующим даже при обладании им меньшим визуальным весом, по сравнению с другими объектами.
Не рекомендую Вам делать два и больше доминанта — они будут «драться» за внимание и нарушать весь баланс. Не следует также делать какой-то элемент чрезмерно доминирующим, чтобы он не слишком затмевал остальные части композиции.
Принцип 2. Точки фокуса
Точки фокуса — менее выраженные, второстепенные элементы в вопросе доминации. Они представлены в виде зон, обладающих меньшим визуальным весом.
Чтобы наиболее выгодно и эффективно использовать этот принцип в своей работе, желательно использовать не более трех точек фокуса. Тогда контраст между ними будет ярко выраженным, и человек интуитивно разделит увиденное на нечто «очень важное», «просто важное» и «все остальное». Чем больше точек фокуса пользователь увидит на экране, тем тяжелее ему будет воспринимать информацию.
Принцип 3. Иерархия
Визуальная иерархия предполагает наличие нескольких уровней доминации. Она должна быть основана на приоритетах информации, чтобы направить взгляд пользователя на самое важное и обеспечить ему положительный опыт от потребления контента.
Если, к примеру, заголовок страницы важнее какого-то факта в статье, то его (заголовок) нужно визуально выделить. Доминирующий в иерархии объект должен отвечать на все вопросы пользователя, который пришел на эту страницу за определенной информацией.
Чтобы построить иерархию, можно поиграться с размером, расположением, цветом, выравниванием, контрастом и вертикальным ритмом элементов. Если взглянуть на картинку выше, мы увидим, что на ней основным свойством построения визуальной иерархии является размер, который отличает заголовки от текста, разбитого на блоки с разным по величине шрифтом.
В дизайне для мобильных приложений возможность использования различных принципов визуальной иерархии ограничена (например, пространства или размера), поэтому на первое место выходит цвет.
В примере ниже мы видим, что кнопка «Proceed to Checkout» выделена красным цветом, в то время как «Narrow Your Search Results» серая и находится на одном уровне со ссылками на продукты и фильтром. Нетрудно догадаться, какая из кнопок занимает первостепенное место в визуальной иерархии этого интерфейса.
На этом наш урок веб-дизайна для начинающих подошел к концу. В заключение хочу напомнить, что все полученные знания желательно сразу применять на практике. Для этого можно воспользоваться различными платными и бесплатными видеокурсами, которые помогут Вам скорректировать самообучение, объяснят сложные приемы простыми словами, да и просто вдохновят на дальнейшее развитие.
Если вы хотите улучшить свои навыки веб-дизайна, подписывайтесь на обновления нашего блога и читайте свежие материалы «из первых рук».
Эта статья была Вам полезной? Рекомендуйте нас друзьям в социальных сетях! До новых встреч!
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Узнать подробнееХотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видеоwebformyself.com
Веб-дизайн для начинающих. Советы по изучению.
Разработка сайтов привлекает многих, но большинство не решаются плотно работать в этой области из-за многих причин, главной из которых, пожалуй, можно назвать отсутствие соответствующих знаний. Но, это совсем не проблема, главное, чтобы было желание учиться.
Веб-дизайн с нуля освоить не так уж и сложно, но полученные знания пригодиться вам во многих случаях. Это не только способ увеличить уровень своего заработка (веб-дизайнеры всегда востребованы), но и возможность для самореализации.
Так с чего же начать изучать основы веб-дизайна и верстки? Первым делом нужно хорошо освоить работу с графическими редакторами. Причем, речь идет как о растровой, так и о векторной графике. Наиболее распространенными программными пакетами для работы с графикой являются программы Adobe Photoshop, Adobe Illustrator, Corel DRAW и Corel Paintshop.
Конечно, лучше всего освоить все перечисленные программы для веб дизайна и уметь работать с ними, но чаще всего используются все же продукты от Adobe. Поэтому, если время на обучение у вас ограничено, то лучше сразу начинать работать именно с ними.
Читайте также
Веб-дизайн для начинающих будет более эффективен в освоении, если полученные теоретические знания вы зразу же сможете закрепить на практике. Для этого можно как экспериментировать с самостоятельным созданием элементов и шаблонов, так и работать с чужими исходниками. В Интернете есть множество сайтов, на которых можно скачать бесплатные графические исходники, причем, довольно высокого качества.
Если знание английского языка у вас на хорошем уровне, можно использовать уроки веб-дизайна из зарубежных сайтов. Существует множество англоязычных ресурсов, которые представляют собой профессиональные сообщества пользователей программы Photoshop и других продуктов Adobe. На таких сайтах можно найти как подробные уроки, так и полезные советы и описание нестандартных возможностей программ.
Современный веб-дизайн это не только проектирование и создание внешнего вида сайта в графическом виде, но и его верстка с использованием языков HTML и CSS.
Готовый шаблон дизайна должен соответствовать определенным стандартам, и корректно обрабатываться всеми распространенными браузерами. Именно поэтому, не рекомендуется разработка дизайна исключительно на основе технологии Flash – несмотря на широкие возможности, она является слишком «тяжеловесной», имеет уязвимости, и в случае отсутствия в браузере пользователя специального плагина, просто в нем не отобразиться.
Языки верстки постоянно совершенствуются и развиваются, тот же HTML5 теперь позволяет реализовать на сайте те возможности, которые раньше можно было получить только при использовании Flash или разнообразных плагинов.
Веб-дизайн для начинающих можно изучать с помощью:
- информации с тематических сайтов и форумов;
- самостоятельно повторяя уроки и советы с англоязычных сайтов;
- покупая книги по веб-дизайну;
- повышать свой профессиональный уровень путем постоянной практики.
Можно с уверенностью сказать, что основы веб-дизайна по силам освоить каждому, достаточно лишь приложить немного усилий, обладать желанием и выделить на это собственное время.
www.imagecms.net
Уроки веб-дизайна в Фотошопе, Photoshop для web-дизайна
От автора: на прошлых занятиях мы рассмотрели теоретические основы веб-дизайна. Пора переходить к практическим занятиям, поэтому сегодня Вы получите базовые уроки веб-дизайна в Фотошопе и научитесь создавать стильные кнопки для сайта.
Рекомендую Вам, в первую очередь, изучить именно эту программу. Новички, любители и профессионалы — все работают в Фотошопе. Без него не представляют своей жизни тысячи дизайнеров, художников, полиграфистов и веб-мастеров.
Если работа веб-дизайнера придется Вам по душе, с помощью Фотошопа Вы сможете не только обрабатывать фотографии, но и делать сайты, обложки книг, баннеры и многое другое! Огромный арсенал средств ретуширования, обработки и монтажа изображений, точная цветовая калибровка, «ювелирная» работа с цветом делают Adobe Photoshop самым популярным, да что там говорить — самым лучшим графическим редактором.
Данная статья будет Вам полезна в том случае, если Вы только учитесь использовать Photoshop в своей работе. Сразу приготовьтесь к тому, что будете постоянно изучать эту программу, совершенствовать свои навыки и вырабатывать свой собственный стиль.
Как начать изучение Фотошопа?
Чтобы понять, как пользоваться Фотошопом, начните с теоретических основ. В первую очередь, скачайте и установите программу. Если у вас современный компьютер на базе процессоров FX или i5–i7, с минимум 8 гигабайтами оперативки, можете смело устанавливать Photoshop СS6, если характеристики ниже — придется довольствоваться PhotoshopCS5.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Узнать подробнееУстановили? Молодцы, теперь пришло время познакомиться с всевозможными инструментами и элементами интерфейса. Если будете регулярно заниматься уроками Photoshop для web-дизайна, то постепенно изучите все эти инструменты в процессе практических занятий.
Не пугайтесь этой программы, даже если начинаете ее изучение с нуля. В Вашем распоряжении тысячи книг, журналов, комплексных обучающих видеокурсов и уроков дизайна сайта в Фотошопе, которые структурированы таким образом, чтобы донести до новичка максимум полезной информации в кратчайшие сроки.
Дополнительно я бы посоветовал Вам полазить по разным профессиональным сайтам и изучить их оформление и структуру, чтобы найти сведения о модных тенденциях в сфере веб-дизайна, сформировать свое личное видение и развить художественный вкус.
Как настроить Photoshop для веб-дизайна?
Нажимаем Окно – Рабочая среда – Типография. Справа у Вас появятся панели работы со слоями и шрифтами.
Далее, советую перейти в настройки Ctrl+K и в разделе «Единицы измерения и линейки» выбрать Пиксели, т. к. мы работаем для веба, где используются именно пиксели, а не сантиметры.
Создаем новый файл: Файл — Новый, в каждом новом проекте проверяем, чтобы в настройках Ширины и Высоты стояли Пиксели. Разрешение — 72 точки на дюйм. Цветовая модель должна быть указана RGB цвет 8 бит.
Вообще, к параметрам создания нового документа относятся:
Имя будущего документа. Его обычно назначают при сохранении файла;
Ширина и Высота изображения. В нашем случае задается в пикселах, которые представляют собой единицу изображения в растровой графике;
Разрешение — количество точек на дюйм. Стандартным разрешением считается 72 пиксела на дюйм;
Режим. Самым распространенным является RGB цвет, глубина которого задается в битах. Обычно хватает 8 бит;
Содержимое фона, определяющее фон изображения.
Следующая настройка, о которой хотелось бы упомянуть, и о которой часто незаслуженно забывают, — это настройка обычной стрелки. Ставим галочку в Автовыборе, выбираем Слой и «Показывать управление трансформацией». Благодаря этому параметру вокруг выделенных областей будет появляться пунктирный прямоугольник с манипуляторами в серединах и углах сторон.
Ну и последняя настройка, которую нужно сделать, — это настройка на позитив . Без нее у вас не будет достаточной мотивации, чтобы эффективно и последовательно проходить уроки веб-дизайна в Фотошопе.
Создаем прямоугольник в Photoshop
Расскажу Вам, как сделать простенький объект в Фотошопе. С помощью инструмента «Прямоугольник» создаем одноименную фигуру, задаем ей нужный цвет заливки и границы. Здесь же можно создать прямоугольник с закругленными углами.
Небольшой лайфхак: если вы выделяете какой-либо объект (в данном случае, прямоугольник), то вы сможете изменить его размеры пропорционально, выделив его и зажав клавишу Shift. Таким образом, вы не деформируете изображение.
Это очень удобно, когда вы работаете с иконками. Зажав клавишу Alt, вы сможете скопировать объект при перетаскивании левой кнопкой мыши.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Узнать подробнееДелаем кнопку для сайта в стиле flat design
Направление «плоский дизайн» в последнее время чрезвычайно популярно в создании сайтов. При этом отрисовка его элементов не требует экстраординарных художественных навыков.
Чтобы вы не отставали от современных тенденций, в сегодняшнем уроке веб-дизайна в Фотошопе я научу Вас, как быстро и легко сделать кнопку для сайта, даже не обладая глубокими знаниями этой программы.
Создаем новый документ Файл — Новый и выбираем инструмент «Прямоугольник со скругленными углами».
Выбираем цвет, например, оранжевый #ff8b00, и радиус углов — 4 пикселя.
Рисуем кнопку нужного размера:
Чтобы сделать небольшой объем в стиле «плоского дизайна», выполните следующий прием. Создайте копию слоя с нашей кнопкой Ctrl + J, затем нижний слой с прямоугольником на 2–3 пикселя передвиньте вниз. Сделайте его цвет более темным, например, оттенка #bf6800.
Получится примерно такой результат:
На верхний прямоугольник можно добавить стиль «Градиент». С помощью двойного клика нажмите на слой с фигурой, выберите стиль «Наложение градиента» и поставьте угол наклона 90 градусов.
Цвета градиента — #ff8c00 и #ffcc3f.
Теперь наша кнопка выглядит так:
Для подписи можно применить шрифт Myriad Pro белого цвета.
Чтобы надпись была более удобочитаемой, создадим небольшую тень. Для этого выполним те же действия, что и с прямоугольниками. Скопируем слой с надписью, а нижний слой передвинем вниз на 1 пиксель и зададим цвет #be6d00.
Результат:
Как видите, нарисовать стильную кнопку в Фотошопе — это не проблема. Теперь Вы можете создавать собственные кнопки. Главное, чтобы они вписывались в дизайн сайта, где Вы их будете использовать.
На этом наш урок веб-дизайна в Фотошопе подошел к концу. Надеемся, у Вас все получилось, и Вы извлекли максимум пользы из вышеизложенной информации.
Подписывайтесь на наш блог и получайте на почту все новые публикации по веб-дизайну. Рекомендуйте нас своим друзьям в социальных сетях. Новые знания и идеи еще никому не помешали . До новых встреч!
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Узнать подробнееХотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видеоwebformyself.com
Уроки по веб-дизайну
Для построения действительно выдающегося сайта, который бы нравился и клиенту и посетителю, необходимо изучать уроки по веб-дизайну. Вашему вниманию предлагаются некоторые из таких уроков, которые доступны в сети Интернет. Помимо всего прочего, эти уроки сейчас актуальны и соответствуют текущим тенденциям. Будьте уверены, что плодотворно потратите свое время.
Elegant Patterned Web Design in Photoshop
Урок по созданию элегантного макета для сайта-портфолио.
How to Easily Design an Attractive Portfolio Web Template
Создаем шаблон для персонального сайта фотографа, художника, графического дизайнера.
Vintage Photoshop Website design
Создание винтажного макета сайта.
3D Portfolio Dark webdesign
Этот урок научит вас создавать дизайн макета в 3D, используя простые градиенты и другие эффекты.
Clean Style Portfolio Layout
В этом подробном уроке вы научитесь создавать чистый макет портфолио.
Creating stylish Gallery Web Template in Photoshop
Простой и изящный веб-дизайн, который может быть использован в качестве страницы-галереи.
Creating Simple Clean Portfolio design in Photoshop
Создаем чистый макет для портфолио.
Portfolio Web Layout in Photoshop
Этот урок также расскажет о процессе создания макета для портфолио с помощью Adobe Photoshop.
Make a Vibrant Portfolio Web Design in Photoshop
Создаем цветной макет для портфолио.
Minimalist Portfolio Web Design Layout
Элегантный, стильный и минималистичный макет для портфолио фотографов или дизайнеров.
Build a Stylish Portfolio Web Design Concept
Элегантный дизайн портфолио в Photoshop.
Create a Grungy, Translucent Web Portfolio Design
Создание веб-дизайна макета с использованием мазков кистей акварельных красок в соединении с другими популярными веб-тенденциями.
Zee Site
Дизайн великолепного сайта.
Design a Sleek Textured Blue Portfolio
Красивый дизайн веб-сайта в Photoshop.
Simplistic Black and White Portfolio Layout in Photoshop
Создание красивого дизайна портфолио в черно-белых тонах в Photoshop.
Design A Vintage Portfolio Layout Using Photoshop
Создание шаблона веб-сайта, который создан специально для публикации графических работ (портфолио для веб-дизайнеров, художников, графических дизайнеров или фотографов).
Урок по веб-дизайну для начинающих, который показывает как построить макет портфолио с фиксированным деревянным фоном в Photoshop.
Уроки по e-commerce веб-дизайну
Creative ecommerce Layout in Photoshop
Урок по созданию цветного и чистого шаблона E-Commerce сайта в Photoshop.
Design a Sleek Mobile App Webdesign
Урок Photoshop по созданию гладкого интерфейса, который может использоваться для любого веб-сайта мобильных приложений.
Уроки бизнес веб-дизайна
DESIGN A BUSINESS WEB LAYOUT
Урок о создании в Photoshop макета бизнес веб-сайта.
Design a Classic Corporate Web Template in Photoshop
Создание шаблона бизнес сайта в Photoshop.
Modern Lab Theme Web Design in Photoshop
Урок по созданию гладкого макета в Adobe Photoshop, который выглядит современно.
Create Grid Based Website Design
Урок Photoshop по созданию стильного веб-дизайна сайта.
Design an Elegant Hotel Website
Простой урок по созданию макета сайта гостиницы в Photoshop.
Jewelery webdesign
Веб-дизайн для магазина ювелирных изделий.
Designing a Beautiful Website From Scratch
Красивый веб-дизайн в Photoshop.
Clean Furniture Website and Gallery Layout in Photoshop
Дизайн сайта для любого производителя.
Create a Professional Web 2.0 Layout
Урок по созданию web 2.0 макета.
Create a Law Firm Web Design
Дизайн сайта для юридической фирмы.
Elegant Boutique or Garment Industry Web Design
Урок по созданию веб-дизайна в Photoshop для любого сайта индустрии моды.
Create Simple and Professional Looks Financial Website Layout
В этом уроке Adobe Photoshop CS6 Вы узнаете как создать простой и профессиональный макет финансового веб-сайта.
Create a Rockin’ Website Layout In Photoshop
Урок по созданию веб-сайта в Photoshop в шоколадной расцветке.
Make a Beautiful Landing Page with Photoshop
Урок по созданию увлекательной целевой страницы в Adobe Photoshop.
Разные уроки по веб-дизайну
Movie Video Streaming Website
Создаем красивый сайт, который поддерживает видео.
Create a Gnarly Snowboarding Themed Web Design
Урок по созданию макета сайта по сноубордингу в Photoshop.
How to Create a Unique WordPress Theme
Создание креативного макета сайта, который может быть преобразованным в тему wordpress.
How to Make a Creative Blog Layout
Учимся создавать макет блога, используя простые формы, некоторые методы использования кистей, изображения и изобретательность в Photoshop.
Create a One-Page Retro Web Design Layout in Photoshop
В уроке объясняется создание одностраничного ретро макета сайта в Adobe Photoshop.
Create A Dark, Clean Website Design In Adobe Photoshop
Создаем макет темного и чистого веб-сайта в Adobe Photoshop.
Design a Grungy Newspaper Web Layout in Photoshop
В этом уроке научимся создавать макет веб-сайта газеты в стиле гранж.
Перевод — Дежурка.
Автор — Ayaz Malik.
Возможно, Вам также будет интересно:
www.dejurka.ru
Веб-дизайн. С чего начинать? / 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/modulnie-setki-v-web-dizayne.html
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. Совет напоследок
Если уже взялись делать макеты, не ленитесь, подумайте. Продумайте: для чего этот сайт, для кого этот сайт, зачем он вообще нужен и какие цели преследует? Дальше уже приступайте к разработке костяка сайта и так далее. Ищите референсы (аналоги прямые и не прямые). И просто работайте и учитесь и всё получиться.
habr.com
Уроки web-дизайна | Уроки онлайн смотреть бесплатно
Азы сайтостроения для начинающих — онлайн видеокурс Оксаны Туровой, который познакомит вас с основами современной вёрстки сайтов.
В онлайн видео-уроках рассмотрены азы сайтостроения и аспекты WEB дизайна. Благодаря видеокурсу вы научитесь создавать HTML-документ, прописывать в нём теги. Узнаете, как создавать разнообразные элементы с помощью тегов, как оформить WEB-страницу с помощью каскадных таблиц стилей, и как указанные стили подключить к HTML-документу.
Категория: Web-дизайн.
Смотреть урок онлайн…
Пройдя представленный видеокурс по созданию сайтов с элементами flash, вы узнаете, как создать flash сайт.
В данном видео-курсе автор на практике покажет, как создать для сайтов flash хэдеры (шапки), кнопки, баннеры, видео- и аудиоплееры, слайдшоу изображений в программе Adobe Flash. Также в видеокурсе подробно рассмотрено встраивание flash-элементов в html-код сайта и обеспечение правильного отображения их в различных браузерах.
Категория: Web-дизайн.
Смотреть урок онлайн…
Дизайн веб-сайтов в видео-курсе „Photoshop Web Secrets“.
Из данных видео-уроков вы узнаете эффективные приёмы и методы создания дизайна веб-сайтов в Photoshop, овладев которыми, вы станете мастером web-дизайна!
С данным видео-курсом ваше обучение пройдёт не только быстро и эффективно, но и интересно! Из данных видео-уроков вы узнаете секреты дизайна веб-сайтов на реальных примерах web-сайтов, и выполняете эти же проекты самостоятельно!
Категория: Web-дизайн.
Смотреть урок онлайн…
Создать бесплатно сайт uCoz помогут вам собранные в данном сборнике онлайн видео-уроки по интересным и нестандартным приёмам использования системы uCoz для создания бесплатного сайта.
Некоторые уроки для понимания требуют определённой подготовки. С помощью данного онлайн видео-курса вы не только сможете создать бесплатно сайт uCoz, но и тонко настроить его под свои нужды.
Категория: Web-дизайн.
Смотреть урок онлайн…
Уроки веб-дизайна – бесплатный онлайн видео-курс по созданию веб-дизайна в фотошопе с нуля, вёрстки сайта и установки его на WordPress, созданный для начинающих веб-дизайнеров.
Будет разрабатываться и создаваться в данных уроках веб-дизайн сайта для блога путешественников.
Эти бесплатные уроки web- дизайна у них получились гораздо лучше многих платных аналогов.
Категория: Web-дизайн.
Смотреть урок онлайн…
Установка и настройка Drupal – видео уроки по обучению работе в бесплатной CMS Drupal. Возможно, вы уже умеете работать с другими движками. Но поверьте, если вы наберётесь терпения освоить эту систему, то вы её просто полюбите и станете фанатом Drupal-а.
Конечно, при первом и беглом знакомстве всё будет выглядеть слишком сложно и запутано, но, проявив терпение, вы сможете создавать сайты любой сложности и решать с помощью Drupal-а любые задачи.
Категория: Web-дизайн.
Смотреть урок онлайн…
Базовый курс Drupal 6.x – базовый обучающий онлайн видео-курс, посвящённый созданию сайтов на базе CMS Drupal 6-й версии.
Видеокурс предназначен, в основном, для начинающих веб-мастеров. Уроки будут понятны даже людям, не знакомым с созданием сайтов, т.к. главный акцент сделан на доступность изложения.
В то же время, онлайн уроки Drupal будут полезны и тем, кто уже знаком с CMS Drupal – возможно, они почерпнут из курса что-то новое, т.к. в уроках освещается множество нюансов.
Категория: Web-дизайн.
Смотреть урок онлайн…
Сайт на Joomla 1.7 – онлайн видеокурс о создании сайта на Joomla 1.7, где наглядно показано, как, не зная языков программирования без труда создать полноценный качественный интернет-сайт на любую тематику и научит сделать это профессионально! Вы станете тем, кого с гордостью называют Web Мастером!
Онлайн видео-уроки рассказывают, как создать сайт на Joomla 1.6, но их можно применить на 100% и для создания сайта на Joomla 1.7.
Категория: Web-дизайн.
Смотреть урок онлайн…
Как сверстать сайт с нуля ‒ онлайн видео-уроки, посвящённые вёрстке сайта. Посмотрев данные видео-уроки, вы увидите, как на практике происходит процесс вёрстки web-страницы. Полученные знания дадут возможность сверстать своими руками свою первую страницу.
Онлайн видео-курс „Как сверстать сайт с нуля“ предназначен для тех, кто уже знаком с языками html и css. Знание этих языков не обязательно на профессиональном уровне, достаточно базового.
Категория: Web-дизайн.
Смотреть урок онлайн…
Тема экспресс данного видео-курса ‒ создание сайта на Joomla. В серии онлайн видео-уроков курса мы рассмотрим последовательность всех технических моментов по созданию сайта.
Перед тем, как мы приступим к этому, давай с вами определимся с общими принципами, которые позволят сделать работу более чётко, структурировано и последовательно. А именно, выясним, какие типы сайтов существуют, соответственно, выберем, создание какого сайта Joomlaподойдёт для вашего проекта.
Категория: Web-дизайн.
Смотреть урок онлайн…
online-ypoku.com