Web-дизайн. От новичка до профи
[Андрей Галактионов]

Image 1

Встретил в сети восемь уроков
«Web-дизайнер. От новичка до профи»
от Андрея Галактионова

иногда полезно посмотреть — как это другие делают 🙂

Урок 1. Теория веб-дизайна

  • Введение. Что такое веб-дизайн?
  • Художественные основы:
    • Цвет
    • Форма
    • Типографика
    • Основы гармоничной композиции. Единство. Пропорции. Баланс.
  • Масштабируемость в веб-дизайне.
  • Подготовка к работе. Необходимые программы. Настройка Photoshop для удобной работы
  • С чего начинать дизайн.

Подбор цветов и цветовых схем: http://colorscheme.ru

Безопасные цвета
Выбирая цветовую гамму для сайта необходимо учитывать особенности браузеров и мониторов. Когда браузер не в состоянии правильным образом передать тот или иной цвет, он подбирает похожий или смешивает несколько соседних цветов. Используя безопасные цвета вы можете быть уверены, что они будут отображаться без искажений.
Таблица безопасных цветов: http://www.artlebedev.ru/tools/colors/


Урок №2. Элементы современного веб-дизайна

  • Проектирование структуры сайта
  • Модульная сетка
  • Типовые элементы дизайна сайта
  • Фон
  • Шапка сайта (Логотип, контакты)
  • Навигация
  • Контент (Текст, Картинки, Иллюстрации)
  • Оформление контента (Иконки, Ярлычки и лейблы, 3d эффекты)
  • Чит-коды облегчающие жизнь дизайнеру.

Алгоритм проектирования

  1. Исходы из брифа, определитесь с задачами и идеей сайта
  2. Продумайте кол-во необходимых страниц и путь пользователи по сайту
  3. Возьмите бумагу и карандаш и начните с эскиза главной страницы
  4. Подумайте какие блоки и элементы необходимо сделать на главной. На отдельном листе примерно определите их размер и важность.
  5. Расположите их в порядке важности сверху-вниз слева направо.
  6. Найдите композиционное решение в расположении блоков. Подкорректируйте их размеры.
  7. Всегда обосновывайте расположение блоков на странице. Взгляните на эскиз еще раз и спросите себя: Почему этот блок находится здесь и какие задачи он помогает решить.
  8. Если какие-то элементы вызывают вопросы, то они лишние удалите их, и перекомпонуйте расположение остальных элементов если это требуется.
  9. Проделайте те же операции с другими страницами сайта.
  10. Теперь можете садится за компьютер и открывать Photoshop.
  11. Начинайте рисовать в следующей последовательности: Сначала модульная сетка, фон, затем компоновка текстов, картинок и других элементов. Двигайтесь от большего к меньшему, от общего к частному, постепенно насыщая деталями ваш дизайн.
Советы:
Если это типовой сайт, посмотрите примеры среди лидеров
вашего сегмента. Оцените удобство использования их 
решений. Отметьте что сделано хорошо, а что не удобно.
В создании эскиза можно опираться на существующие 
аналоги. Никто не говорит что нужно в тупую все 
копировать, просто бывает так что лучшее решение
уже было найдено до вас и стало своего рода шаблоном
для данного типа сайта.
Ссылки:
Удобный сервис для автоматического построения 
модульных сеток http://modulargrid.org

Чит-коды облегчающие жизнь дизайнеру:

Модульные сетки:
Большое кол-во готовых модульных сеток http://www.thegridsystem.org/categories/templates/
Сервис для построения модульных сеток http://modulargrid.org

Фон:
Сайт с большим количеством качественных паттернов. http://subtlepatterns.com/

Фотостоки:
Платные:
http://www.shutterstock.com/
http://ru.123rf.com
http://www.dreamstime.com
Сдесь собрано большое кол-во ресурсов с бесплатными полезностями http://www.bluevertigo.com.ar

Иконки:
https://www.iconfinder.com
http://iconizer.net/ru

Уроки, и готовые эл-ты для дизайна
http://ru.365psd.com
http://designmodo.com
http://design.tutsplus.com
http://www.1001freedownloads.com
http://1000psd.com
http://clipart.me
http://www.breezyprague.com/freebies/browse/
http://www.premiumpixels.com

Много переведенных уроков c http://demiart.ru/forum/


Урок №3 Дизайн лаконичного информационного сайта
Разработка дизайна информационного сайта с 0 в течении занятия, с полным пояснением всех используемых принципов и методик, примененных при создании проекта такого типа. Также по ходу занятия будут освещаться все нюансы работы в Photosop при создании сайта.

Правила хорошего тона в «Фотошопе» для web-дизайнеров:
http://i-love-psd.ru


Урок №4 Дизайн крупного интернет магазина. Часть 1
Детальный разбор и анализ дизайна главной страницы интернет-магазина. По ходу занятия, помимо графической составляющей, будут рассматриваться принципы восприятия сайта такого типа потенциальными покупателями с точки зрения дизайна и техник, увеличивающих продажи.


Урок №5 Дизайн крупного интернет магазина. Часть 2
Детальный разбор и анализ дизайна остальных страниц интернет-магазина, с углубленным изучением принципов и правил реализации дизайна корзины как одного из самых главных элементов, отвечающих за успешность проекта.


Урок №6


Урок №7


Урок №8

Добавить комментарий