infoclub

Самая большая база в Рунете. Более 30 000 курсов ! Присоединяйся :)

Быстрая регистрация

SkillBox - ВебДизайн с 0 до Pro

Тема в разделе "Дизайн и графика", создана пользователем ȐΣѴṌlU†iO₦, 9 июл 2019.
SkillBox - ВебДизайн с 0 до Pro 5 5 1votes
5/5, 1 голос

  1. Тема
  2. Отзывы (1)
  1. Выжимка на курс SkillBox - ВебДизайн с 0 до Pro
    Веб-дизайн

    Этапы творческого проекта 1. Определяем задачу. 2. Правильно формулируем проблему. 3. Исследуем проблему. Собираем информацию. 4. Создаем идею: - Опирается ли идея на воображение? - Решает ли она проблему? - Насколько эффективно она решает проблему? Идея должна проходить по всем 3 пунктам.

    Для вдохновения. Дизайн-агрегаторы

    Дизайн-агрегаторы


    Разное


    Студии


    Дизайнеры


    Продукты/сервисы


    Правила качественного дизайна

    Три уровня ассоциаций: 1. Очевидность. Используется в простых пиктограммах, чтобы упростить восприятие информации. Но такие изображения не несут уникальности. 2. Логика. На этом уровне человек должен связать увиденное со своим опытом и знаниями. Удовольствие, которое испытывает при этом человек, способствует запоминаемости дизайна. 3. Эмоции. Строится на архетипах - ассоциациях, которые запоминались ранее человеком при неосознанном восприятии. Использовать этот уровень нужно только в случае, если ЦА точно поймет, в чем скрытая суть изображений.

    Гештальт Все элементы изображения вступают между собой во взаимодействие и проявляют новые свойства.

    Целостность восприятия достигается за счет принципов: 1. Близость. 2. Схожесть. 3. Целостность. 4. Замкнутость. 5. Смежность. 6. Общая зона. Если вы закончили макет, помните, что он далек от идеала процентов на 50. Не останавливайтесь и попробуйте в несколько заходов улучшить свою работу.

    Пропорции

    Золотое сечение =1,618033 или 1,62 Используется при выборе размеров и размещения объектов на странице.
    SkillBox - ВебДизайн с 0 до Pro | Инфоклуб

    Числа Фибоначчи Последовательность, в которой каждое последующее число равно сумме двух предыдущих. 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89,.. Эти числа можно использовать как готовые величины ширины и высоты элементов дизайна.

    Серебряное сечение =2,41



    Правило третей При определении зрительных центров, кадр делится линиями, параллельными его сторонам, в пропорциях 3:5, 2:3 или 1:2.

    SkillBox - ВебДизайн с 0 до Pro | Инфоклуб
    Метрика Это сетка, которая делит рабочее пространство на равные элементы. 1. Выберите парное число от 0 до 15 или 5 (лучше - 8) и пользуйтесь им для определения шага сетки в пикселях. 2. Чем меньше шаг, тем бессмысленней метрика. 3. Чем больше шаг, тем меньше возможностей для творчества.


    Интерфейс 1. Пользователь должен заранее интуитивно понимать, какое действие выполнит программа после получения команды. 2. Первым делом дизайнер разрабатывает UI Kit, чтобы он был одинаково реализованным на всех страницах сайта. Это интерфейс построения системы. 3. Описываем пользование Китом с помощью гайда - руководства, чтобы каждый участник проекта мог использовать его в своей работе. 4. Базовый набор Кита: - заголовки - наборный текст - списки - таблицы - палитра - отступы / расстояния


    Текст

    Где брать текст 1. У клиента. 2. У копирайтера. 3. Написать самому.

    Заголовок 1. Это ловушка для взгляда человека. 2. Не переусердствуйте с акцентами. Если акцентов слишком много, они перестают быть акцентами.

    Правила работы с текстом

    Заголовки Точка в конце заголовка не ставится. Если внутри заголовка несколько предложений, то точка не ставиться только в конце последнего.


    Числа 1. Следует разделять числа на группы по три цифры справа налево: 34 567 2 567 456 678 123 2. Не разбиваются на группы года и номера, если перед ними стоит знак номера. Например: в 1998 году, №87359. 3. Слишком большие круглые числа лучше писать в словесно-цифровой форме. Вместо 30 000 000 000 — 30 млрд. 4. Большие десятичные дроби тоже следует группировать по три цифры, но уже слева направо: 23,543 8 16 764,432 654 87 5. Иностранный формат числа 23,432,456.35

    Интервалы
    1. В интервалах принято использовать: многоточие тире знак ÷ óбелюс предлог от перед первым числом и до перед вторым 2. В технической или научной литературе используется многоточие и знак ÷ для числовой формы интервала. 3. А тире и предлоги употребляются во всех остальных случаях. 4. Научная и техническая длиной 3…10 метров; ширина 45÷57 мм. 5. Гуманитарная и публицистическая длиной 3—10 метров; длиной от 3 до 10 метров. 6. Художественная Длиной три — десять метров 7. Не рекомендуется использовать тире при отрицательных и положительных числах: температура -5—+10 °C — плохо; температура -5…+10 °C — хорошо. 8. Допустимо сокращать большие круглые числа: Высота 20—50 тыс. метров — идеально; Высота 20 тыс. — 50 тыс. метров — необязательно.

    9. Номера телефонов Принято отделять дефисом или пробелом по две цифры справа налево, исключая последнюю цифру, которую в семизначных номерах присоединяют к предыдущей группе цифр из двух знаков; напр.: 299-8590, 299 85 90; 985-90, 985 90. 10. Телефонные номера с удачным сочетанием цифр типа 222-32-22, оформляются так 222-3-222 (дефисы при этом могут заменяться пробелами: 222 3 222). 123-45-67 — городской номер; 8 (123) 123-45-67 — городской номер с кодом; +7 123 123-45-67 — сотовый. 11. Адреса Принято писать без знака №. Например: Ленина, 15. Двойные номера через косую черту (обратный слэш). Например: ул. Пушкина, 15/19. Буква в номере пишется слитно: Тупиковый пер., 14а. Полный формат стоит использовать только для почтового адреса: 123456, Россия, г. Москва, ул. Такая-то, 15, офис 67, 3 этаж Можно упростить и совместить почтовый адрес с адресом для обычных людей: Такая-то 15, офис 67, 3 этаж, 123456, Россия, Москва 12. Числа и единицы величин Пишутся с последней цифрой раздельно, кроме специальных символов. Правильно 550 т, 25 °С, 25 %, 10 000 ₽, 25°, 4’44”. При интервале и перечне величина ставиться только после последнего значения: от 10 до 40 м; 10—40 м; CMYK 40, 20, 50 и 60 %; CMYK 43,3; 50; 12,45; 10 %. 13. Даты и периоды 14.02.2016 г.; 14 февраля 2016 года. 1981—1985 гг. — в пределах нескольких лет; 1950 г. — 1980-е гг. — десятилетия; театральный сезон 2015/16 — все виды некалендарных лет; с 10 января по 16 марта 2016 года — период в пределах одного года; с 10 января 2015 по 10 января 2016 года — период разных годов. 14. Ссылки и символы Изменение начертания распространяется на соседние символы, если они относятся только к выделяемому тексту. Например: «самый лучший чемодан». Но не распространяется на символы, если они в равной степени относятся и к тексту без изменения начертания.
    Например: (стерлядь, осётр, пангасиус). То же самое справедливо и для ссылок: «Книга отзывов и предложений» но «Книга отзывов и предложений». 15. Альт-коды Тут их больше … — многоточие; « и » или „ и “ — кавычки; − — минус; - — дефис; – — короткое тире; — — тире; • — буллет (маркер списка); · — интерпункт использовался вместо пробела в латинском письме (DONA·EIS·REQVIEM); ° — градус; ₽ — рубль; © — копирайт.

    Инструменты копирайтера

    Текстовые редакторы:


    Модульная сетка


    Нужна для организации объектов на странице. Помогает правильно расположить объекты на странице. 1. Модули могут иметь разные или одинаковые размеры. 2. Минимальная единица сетки - это шаг, равный модулю. 3. При построении сетки за основу берется строка текста. 4. Высота модуля соответствует определенному числу строк, а ширина - ширине колонки набора. 5. Модули разделены друг от друга небольшими пробельными шагами, чтобы элементы не касались друг друга и чтобы можно было поместить подписи к ним. 6. По вертикали промежуток между модулями составляет 1, 2 или больше строк. 7. По горизонтали - рассчитывается по ширине блока текста или иллюстрации.

    Текст и изображения в модульной системе Комфортное чтение напрямую зависит от: 1. Размера шрифтов. 2. Длины строки. 3. Интерлиньяжа (межстрочного расстояния) 4. Объема информации.

    Для комфортного чтения необходимо размещать в строке от 7 до 10 слов. Ширину полосы набора стоит выбирать исходя из наименьшего кегля (высоты литер). Для легкого чтения важен большой интерлиньяж. Для выбора размера изображений следует отталкиваться от кегля и интерлиньяжа текста, а также от ширины колонки. Таким образом размер изображения зависит от размера модуля. 1 картинка не обязательно должна занимать 1 модуль.

    Типографика Базовая линия - линия, на которой “стоят” буквы.


    Интерлиньяж - расстояние между базовыми линиями.


    Другия понятия

    Работа со шрифтами в браузере


    Как отличить хороший шрифт от плохого 1. Определиться с задачей шрифта. Для шрифтов заголовков важна внешняя привлекательность, для текстовых шрифтов - читабельность. 2. Буквы должны быть в одном стиле. 3. Каждый символ шрифта должен быть уникальным. 4. Шрифт должен легко читаться. 5. Выносные элементы не должны быть слишком короткими или длинными. 6. Форма цифр должна отличаться от формы букв. 7. Хорошие шрифты должны пройти проверку на “Один ай ел” 1IL 8. При выборе шрифта учитывайте присутствие кириллицы. 9. Шрифт должен иметь веб-версию.

    Для форматирования текста используйте: gridlover.net/

    Где брать картинки
    1. Google. С правами использования.
    2.
    Подача проекта Для усиления впечатления от проекта можно использовать демонстрацию его на конечном носителе (билборде, девайсе и т.д.). Для этого можно использовать мокапы.

    Мокапы



    Пиктограммы

    Это упрощенное графическое изображение. .svg - это масштабируемая векторная графика для веба. Иконки гораздо выгоднее использовать как раз в этом формате.

    Где найти качественные пиктограммы

    Векторные и растровые иконки


    Текстовые иконки

    Проектирование


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

    Виды проектирования 1. Функциональное. Любой объект - лишь носитель функции. 2. Оптимальное. Совмещает функциональную составляющую и потребности пользователя. 3. Системное. Решает поставленные задачи комплексно. 4. Нисходящее. Разработка объекта от общих черт к детальным. 5. Восходящее. От частного к общему.

    Красиво не равно удобно.

    Инструменты проектировщика
    1. Юзабилити.

    2. Опыт взаимодействия. Абстрактные уровни проектирования: - Уровень поверхности. Внешний вид продукта с точки зрения пользователя. - Уровень компоновки. Расположение элементов интерфейса. - Структура. Взаимное расположение элементов. ОТкуда, куда и как будет перемещаться пользователь. - Уровень возможностей. Перечисление функциональных возможностей, которые будут доступны для пользователей. - Уровень стратегии. Узнаем желания и ожидания относительно продукта. Как со стороны пользователя, так и заказчика.
    3. Эмпатия.
    4. Юзабилити-тестирование.
    5. A/B тестирование.
    Прототипирование marvelapp.com/

    Элементы сайта

    Навигация

    Выбор оптимального пути следования.

    Типы навигации 1. Глобальная. Меню. 2. Локальная. Ссылки внутри разделов страницы, которые помогают переходить на подобные страницы. 3. Контекстная. Динамическая область сайта, которая предоставляет набор релевантных ссылок.

    Как сделать меню более эффективным 1. Навигация должна быть заметной. a. Бургер только для мобильных b. Навигация в привычном месте. c. Выделять ссылки. d. Размещать кросс-ссылки (с этим товаром покупают…) 2. Навигация должна быть понятной. . Выделять текущее положение a. Выделять открытые ранее ссылки b. Ясная формулировка 3. Навигация должна быть удобной. . Чем крупнее объект и чем меньше до него расстояние, тем проще и быстрее с ним взаимодействовать. a. Основное меню должно быть по рукой.

    Элементы

    Карусель


    Это набор слайдов.

    Ошибки юзабилити при создании карусели: 1. Автослайдинг после начала взаимодействия. Необходимо переводить на “ручной режим” управление слайдами после начала взаимодействия. 2. Переключение набора слайдов по одному. В случае, если на слайд-шоу размещена группа изображений, то нужно переключать элементы не по одному, а сразу группами. 3. Непонятное отображение прогресса. Пользователю необходимо максимально просто показать этап, на котором он сейчас находится. 4. Бесконечный слайдинг. Пользователю необходимо понимать, когда он закончил просмотр контента. Добавьте ограничитель в виде отключенной стрелки. 5. Мелкая зона для взаимодействия. Объекты, с которыми нужно взаимодействовать должны быть больше курсора мыши.


    Карточки

    При построении сайтов используют информационную архитектуру - заложенный сценарий, по которому пользователь воспринимает информацию.

    Карточный дизайн направляет пользователя по логической цепочке. Он опирается исключительно на изображения. И это его сильная сторона. Такой сайт хорошо подходит под мобильный дизайн.

    Формы


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


    Советы по созданию формы: 1. Сделать форму короче a. Удалить поля о сборе информации, которая может быть получена другим способом b. Поля для несрочной информации c. Поля для информации, которая может быть упущена без потери 2. Группируй поля. 3. В одну колонку. Исключение - адреса, индекс и т.д. Такую информацию можно разместить несколькими ячейками в строке. 4. Логическая последовательность полей. 5. Избегать комментариев к полям внутри самого поля, если после заполнения невозможно прочитать, для какой информации предназначалась ячейка. 6. Текстовые поля должны быть того же размера, что и ожидаемые вводные данные. 7. Обязательные поля. 8. Объясни требования к заполнению. 9. Избегать кнопки сброса и очистки. 10. Сообщения об ошибках показывать с объяснением дальнейших действий. 11. Не слишком агрессивно показывать окно об ошибках.

    Таблицы
    SkillBox - ВебДизайн с 0 до Pro | Инфоклуб
    Типы сайтов

    1. Персональный сайт.

    2. Блог.

    3. Визитка. Краткая информация о компании и контакты.

    4. Портфолио. Сайт-галерея с примерами работ автора.

    5. Корпоративный сайт. Представительство компании в интернете со сложной структурой и внутренним интранетом.

    6. Тематический сайт.

    7. Каталог/витрина. Интернет-магазин без возможности заказа товаров.

    8. Интернет-магазин.

    9. Промо-сайт. Для продвижения одного товара/услуги/мероприятия.

    10. Новостной портал.

    11. Сервис.


    Лендинг


    Изначально - это посадочная страница, на которую нельзя попасть с меню сайта. Это всегда 1 страница, созданная для конкретного действия. Сейчас лендинги вытесняют другие виды страниц из-за своей функциональности и простоты.

    Структура лендингов 1. УТП. 2. Рекламный текст с преимуществами. 3. Фото-/видеоматериал. 4. Отзывы. 5. Призыв к действию.

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


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

    интернет-магазин


    Структура 1. Корзина. 2. Платежные системы. 3. Служба доставки. 4. Структурированный каталог товаров. 5. Система поиска по ключевым словам.

    У такого сайта есть четкая задача - информировать покупателей о товарах, распродажах. способах покупки и т.д. Если любая идея хоть как-то может отвлечь покупателя от целевого действия - покупки, то это плохая идея.

    Портфолио

    Это собрание примеров работ, дающих представление о возможностях специалиста.

    Клиенту не интересно узнавать о тебе. Ему интересно, какую выгоду ты ему принесешь.
    Интерактив

    Интерфейс - это лишь инструмент взаимодействия. Он не должен быть заметен и, тем более, мешать. Чтобы добиться хорошего эффекта, необходимо не добавлять лишние элементы и добавить естественные анимации.

    С помощью анимации можно расставить акценты и сохранить контекст.

    Контраст 1. Цветовой. 2. Размера. 3. Позиционный.

    Этапы работы с проектом

    1. Ознакомление с ТЗ. 2. Решение первичных технических вопросов (как правило решает разработчик. a. домен b. хостинг c. CMS и т.д. 3. Наброски идеи сайта. Сэкономит время и поможет организовать идею. 4. Прототипирование сайта. 5. Создание сетки, подбор шрифтов и палитра. 6. Реализация первой страницы. 7. Фидбэк от клиента по первой странице. 8. Реализация внутренних с учетом фидбэка. 9. Работа над деталями (отрисовка всех состояний интерактивных элементов, примеры анимаций и т.д.). 10. Подготовка сайта к верстке. 11. Реализация front-end верстки. 12. Back-end. 13. Тестирование.
     
  2. 5/5,
    Как будто заглядваю в чужие конспекты в институте :) Спасибо!!
     
Загрузка...