Мой первый дизайн сайта (Даниил Волосатов)

Nobo · 19 авг 2015

Этот курс задумывался как полноценное пособие для начинающих дизайнеров для того что бы каждый смог научиться создавать оригинальный и
качественный дизайн с нуля.

01. Главная: придумываем дизайн(продолжительность 12:54)

В самом начале мы с вами разберем, с чего следует начать при разработке дизайна сайта. Мы научимся с вами расставлять приоритеты для элементов дизайна. На листе бумаги мы полностью придумаем главную страницу сайта.

02. Фон и шапка(продолжительность 20:46)

Во втором уроке мы будем работать над фоном и шапкой сайта. Я расскажу, как определить размер вашего будущего сайта в пикселях, от чего зависит ширина и длина сайта. Покажу, как легко упорядочить слои, что бы в них было проще разбираться и знать где какой слой.

Вы узнаете, как с помощью простого градиента создать классный фон для шапки так, что бы он гармонично сочетался с фоном. На простом примере научу вас накладывать текстуры на фон.

Вы научитесь создавать интересные эффекты для текста, кнопок и корзины для сайта, а так же детально прорабатывать каждый элемент дизайна.

03. Разделы(продолжительность 18:49)

Как говорил Стив Джобс « Мы сделали кнопки такими, что бы их хотелось облизать». Мы займемся созданием таких же кнопок. А так же добавим некоторые эффекты. В частности при наведении и при нажатии.

04. Популярное на сайте и отзывы(продолжительность 10:38)

Из урока вы узнаете, как с помощью цветов визуально разделять блоки: кто выше и кто ниже. Как создавать тонкие и аккуратные разделяющие линии, придающие формам объем. Научитесь делать эффектную парящую галерею для популярных товаров. Узнаете о функции «Маска слоя», которая поможет вам экономить время.

05. Два специальных предложения(продолжительность 12:25)

Этот урок посвящен созданию компактного спец. предложений на сайте. Научитесь работать с черно-белым градиентом, режимами наложения и непрозрачностью.

06. Форма подписки(продолжительность 12:25)

Вы научитесь работать с векторными файлами. Освоите эффект «вмятого» текста. Вместе мы создадим умную многоуровневую форму подписки.

07. Копирайты(продолжительность 6:55)

Из урока вы узнаете, что и как лучше всего располагать в «подвале» сайта. Научитесь визуально делить блоки. На данном этапе мы уже сможем увидеть получившийся результат на странице браузера.

2
«КАТАЛОГ ТОВАРОВ»

08. Каталог товаров – придумываем дизайн(продолжительность 12:54)

В этом уроке я открою вам очень полезный секрет, который повысит эффективность разработки вашего дизайна. Узнаете, как сделать выбор в пользу горизонтального и вертикального меню и как его располагать, что бы оно было удобным. Я расскажу вам, как объединять 2 кнопки, не потеряв при это их функциональность. Разработаем с вами удобную сортировку товаров на сайте. Я поделюсь с вами очень полезным сайтом, который поможет вам повысить качество ваших работ. Им я пользуюсь постоянно. В итоге я вкратце объясню, почему именно так должна выглядеть страница каталога товаров.

09. Фон и шапка(продолжительность 17:52)

После просмотра данного урока вы научитесь создавать двойную функциональную кнопку в стиле Apple, о котором я упоминал выше. Научу вас правильно подбирать шрифты для кнопок и как самостоятельно создавать любые формы для веб-дизайна.

10. Вещи(продолжительность 12:44)

Основная цель данного урока – научить вас пользоваться линейкой, что бы наиболее точно располагать элементы дизайна. Сделаем мы это на примере стильной рамки, которую тут же с вами и создадим.

11. Навигация и о разделе(продолжительность 10:42)

Вы узнаете как придать объем элементам дизайна, используя стиль слоя. А так же научитесь экономить свое время при работе.

12. Вертикальное меню(продолжительность 8:32)

Этот урок посвящен созданию компактного спец. предложений на сайте. Научитесь работать с черно-белым градиентом, режимами наложения и непрозрачностью.

3
«СТРАНИЦА ТОВАРА»

13. Страница товара – придумываем дизайн(продолжительность 8:01)

Из урока вы узнаете, как поместить большое количество информации в блок, не потеряв при этом его простоты и функциональности. Так же мы придумаем с вами информативные комментарии. Я расскажу вам, как наиболее эффективно организовать навигационную цепочку сайта (путь по сайту). А еще я поделюсь с вами некоторыми хитростями, которые позволят вам повысить качество и функциональность вашего дизайна.

14. Фон и путь по сайту(продолжительность 6:38)

Для придания вашему сайту еще большей уникальности я научу вас использовать узоры. А так же расскажу о некоторых полезных инструментах для детальной проработки форм.

15. Все о товаре(продолжительность 14:30)

Я покажу вам, как добиться эффекта «вмятого» текста и расскажу где его лучше использовать. Научу вас как в полной мере пользоваться градиентом.

16. Комментарии(продолжительность 12:03)

В этом уроке речь пойдет о создании форм для отправки данных. Мы придумаем простые и красивые кнопки. Научимся делать информативные комментарии. А так же я расскажу, как сделать «резиновые» блоки.

4
«СОСТАВ КОРЗИНЫ»

17. Состав корзины – придумываем дизайн(продолжительность 5:45)

В данном уроке мы поговорим о сложностях и о том, как их упростить. Я научу вас делить один блок на части. Разобьем нашу корзину на три части и займемся оформлением каждой из них.

18. Наполняем страницу с корзиной часть 1(продолжительность 9:41)

Вы узнаете, как быстро разметить макет не пользуясь линейкой. А так же я расскажу, как отображать активные и неактивные формы.инструментах для детальной проработки форм.

19. Наполняем страницу с корзиной часть 2(продолжительность 13:23)

В этом уроке вы научитесь правильно и грамотно располагать элементы дизайна. А так же мы продолжим практиковаться со стилями слоя, тенями, градиентами и т.д.пользоваться градиентом.

5
«АВТОРИЗАЦИЯ»

20. Авторизация – придумываем дизайн(продолжительность 4:26)

Речь пойдет о блоке авторизации. Мы поделим его на 2 части: блок для зарегистрированных пользователей и для новых. По-новому взглянем на функцию «Вспомнить пароль».

21. Авторизация: наполняем(продолжительность 17:03)

В данном уроке мы займемся созданием умных и информативных форм.

6
«ДОСТАВКА И ОПЛАТА»

22. Доставка и оплата. Работаем над дизайном.(продолжительность 2:48)

В заключительном уроке по созданию дизайна корзины мы уберем правую часть с формами и заменим ее информацией об отправке. Так же вы получите задание, выполнив которое, вы значительно улучшите свои навыки веб-дизайнера.

23. Заканчиваем с корзиной(продолжительность 5:15)

В завершении мы еще немного поработаем с формами и текстом.

7
«ЛИЧНЫЙ КАБИНЕТ»

24. Личный кабинет: придумываем дизайн.(продолжительность 4:43)

В этом уроке мы займемся дизайном личного кабинета. Создадим для него интересный блок с красивыми, яркими вкладками. Ссылкам придадим большую информативность.

25. Личный кабинет: рисуем.(продолжительность 15:23)

Притворим в жизнь разработанный в предыдущем уроке дизайн. Попрактикуемся работать со стилями слоя, а так же с текстом и ссылками.

8
«ОТЗЫВЫ»

26. Отзывы: придумываем дизайн.(продолжительность 4:38)

В этом уроке я расскажу, как правильно размещать блоки с отзывами, что бы их было удобно читать. Этот момент очень важен, потому что неправильно созданный блок создаст впечатление огромного количества информации, которую захочется просто пролистать. Поэтому мы опять будем умещать в небольшой блок большое количество информации, не усложняя дизайн и при этом сэкономив место.

27. Первый отзыв.(продолжительность 11:47)

Я расскажу вам о серьезной ошибке, которую допускают многие новички. Знать это необходимо, потому как всего одна такая ошибка способно свести на нет всю вашу работу.

Так же вы узнаете, как накладывать узоры на векторные формы и как пользоваться маской слоя.

28. Остальные отзывы.(продолжительность 6:41)

Это заключительный урок по оформлению отзывов. В нем мы переделаем наш первый отзыв, убрав лишнюю информацию, чтобы не перегружать страницу. Так же я расскажу, как создавать выпадающие галереи.

В конце этого урока вы опять получите задание. Оно поможет вам повысить ваше мастерство.

9
«ВХОД»

29. Вход: придумываем дизайн.(продолжительность 13:17)

В этом уроке мы займемся дизайном всплывающего окна входа на сайт. Я покажу вам интересные решения некоторых задач. Научу вас объединять две формы в одну, что придаст дизайну уникальность.

30. Вход: переделываем готовый PSD исходник.(продолжительность 13:30)

Как вы уже догадались, с нуля мы ничего рисовать не будем. Мы обратимся к уже готовому PSD исходнику и переделаем его под свой дизайн. Я расскажу, как поменять цветовую гамму, поэкспериментируем с непрозрачностью и поменяем некоторые стили слоя.

10
«РЕГИСТРАЦИЯ»

31. Регистрация: придумываем дизайн.(продолжительность 4:06)

Нам предстоит поработать над дизайном всплывающего окна регистрации. Оно будет отличаться от окна входа. Но принцип останется тот же, что даст вам возможность лишний раз попрактиковаться.

32. Регистрация: переделываем готовый PSD исходник.(продолжительность 14:17)

Мы снова возьмем готовый исходник. Но на это раз изменений в нем будет гораздо больше. Начнем с избавления от лишних не нужных нам деталей дизайна. Изменим данную форму и добавим несколько своих. Поработаем со стилями. И воспользуемся еще одним готовым решением

Скрытый текст. Доступен только зарегистрированным пользователям.Нажмите, чтобы раскрыть...