02.08.17 Небольшое улучшение дизайна + изменение рангов. Предлагаем обсудить в данной теме.

Oneiroid

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Oneiroid » Лекции по психиатрии » How to make your first design without pain


How to make your first design without pain

Сообщений 1 страница 2 из 2

1

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

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

Step 1. Продумывание дизайна
Перед тем, как начать делать что-то, желательно продумать это самое что-то, если не в плане наполнения как такового, то хотя бы в плане структуры. Ответьте себе самому на вопросы:
♦ Какова должна быть атмосфера? (праздничная, мрачная, легкая, etc)
♦ Какова основная идея дизайна (обычный с кем-то или чем-то на шапке, форум в виде книги/девайса, главная страница как каталог папок, страница тем - как каталог файлов, а сообщения как документ в ворде?
♦ Какие цвета лучше всего подойдут под реализацию двух вышеназванных пунктов?
♦ Будет ли что-то меняться в зависимости от группы пользователя/времени суток/текущего местоположения пользователя на сайте?

Примерно на этом месте у человека, находящегося на стадии "я хочу сам сделать дизайн" должна сложиться в голове более-менее цельная картинка того, что он хочет получить на выходе. Здесь очень важно вспомнить, что далеко не у каждого пользователя разрешение экрана, браузер, диагональ и тип устройства совпадает с таковыми у дизайнера. У Вас разрешение 1366х768? Отлично, скорее всего, только что Вы придумали дизайн, который будет обрезаться или смотреться пустым у обладателей видеокарт, позволяющих ставить разрешение в 1920х1080. Возможные способы решения будут рассказаны ниже, но об этом крайне важно помнить.

Впрочем, продолжаем развивать мысль и детализировать то, что мы будем пытаться воплотить
♦ Каковы размеры основных элементов? (шапки, тела форума, таблицы, иконок, заголовка цитаты, если он будет)
♦ Каково будет их положение? (может, вы решите сделать форум, заполняющий всю доступную высоту, ну или шапка должна будет всегда оставаться наверху экрана и прятать под собой прокрученную часть форума)
♦ Нормально ли все это будет смотреться на мобильных? (здесь следует читать: без бесконечного прокручивания по всем направлениям)
♦ Если нет, то можно ли заставить это смотреться нормально изменив/убрав/сжав пару элементов или проще сделать отдельный облегченный макет?
♦ Если мы сошлись на облегченном макете, то должен ли он сохранять "фишки" исходного дизайна или достаточно взять стандартный дизайн, покрасить его в тон к основному, и прикрутить его?
Примечание: если вы собираетесь делать дизайн для форума, на котором предполагаются посты длиннее одной строки, крайне не рекомендуется делать резиновым тело форума. Для тех, у кого широкие экраны, такие форумы - пытка, потому что поймать взглядом начало следующей строки с первого раза почти невозможно.

Step 2. Создание макета
Учить работать с фотошопом не буду, ибо не умею просто расскажу основные принципы того, как можно сделать макет:
1. Старайтесь работать с файлом хотя бы 1920 в ширину: сейчас это самое широкое из распространенных разрешений. Соответственно, сразу будет видно, насколько дизайн кажется пусто-печальным для обладателей таких видеокарт.
2. В макете желательно продумать внешний вид
♦ иконок
♦ цитаты
♦ кода
♦ оформления форумов на главной странице
♦ таблицы
♦ профиля
♦ тела сообщения, если планируется что-то наподобие "прикручу-ка я к первому посту один фон, а к последнему другой"
♦ категорий
♦ стрелок
3. Говорят, поначалу необходимо продумать структуру: обозначить разноцветными прямоугольниками различные цветовые блоки
что-то типа этого, только с нормальными размерами. По мне, такой подход расхолаживает: когда оказывается, что чисто цветной блок "тоже неплохо смотрится", придумывать что-то оригинальное на некоторые блоки становится сложнее. Хотя поначалу это полезно - помогает не забыть о том, что ты хотел сделать и что вообще надо покрыть. К тому же создает некоторое впечатление о том, что ты получишь на выходе, пусть и чисто цветовое
4. Очень настоятельно советую завести невидимую группу "текстуры" и сливать туда все бесшовные текстуры, которые будут использоваться. Я знаю немало людей, которые не сохраняют все текстуры подряд, а потом оказывается, что предыдущая была лучше. Еще больше я знаю людей, которые зальют все бесшовкой и сольют все слои с ней, а потом будут час вырезать повторяющийся кусок из полотна.
5. Крайне рекомендую группировать слои по их принадлежности к логическому блоку (профиль, иконки, форум, фон, таблица, etc). Такие макеты гораздо удобнее нарезать и ставить на коды - просто отключать остальные группы, не выискивая в тонне слоев, какие нужны на этом элементе, а какие не очень
6. Если есть элементы, которые "логически заполняют весь экран без повторений" - пожалуйста, умоляю, сделайте так, чтобы на краях этого элемента не было "отчетливо оторванного" элемента (наподобие половины лица). Всегда найдутся люди с разрешением больше рабочего (некоторые даже с телевизоров сидят). Видеть они будут четко обрезанный кусок с половиной лица, продолжающийся фоном, возможно, контрастным. Согласитесь, неприятное зрелище. Есть, конечно, вариант растянуть это на весь экран принудительно, но когда картинка увеличивается в два раза - она уже становится жутко мыльной.
7. Если вы заботитесь о своих пользователях и хотите по возможности сделать шапку, например, не png, а jpg, можно создать вертикальную направляющую посередине и заполнять фон текстурой от нее, совместив центры (текстуру надо прижать к верхнему краю). Тогда шапку можно будет вырезать вместе с фоном и впоследствии совместить с фоном так, что стыка не будет.

Step 3. Нарезка макета
Текстуры лучше оставлять текстурами, (в смысле, не обрезая и не дублируя): с одной стороны, если понадобится где-нибудь еще сделать такой фон, то найти полное изображение не составит труда, с другой стороны, будет быстрее грузиться, чем дублированное изображение.
Всякие мелкие иконки, категории и прочие мелкие детали, которые можно привязать фоном к блокам ровно по размеру(!), особенно если они в схожей цветовой гамме, лучше слить в один файл: это уменьшает количество запросов к серверу, плюс грамотно скомпанованный файл весит меньше, чем куча маленьких иконок (в этой куче иконок содержится и куча информации о них)
Все, у чего нет прозрачности, имеет смысл сохранять в jpg. Отличить jpg с 100% качества от png-24 довольно сложно, а вес у jpg будет меньше почти в полтора раза
Всякие фоны под таблицы и шапки с высокой долей вероятности придется вырезать единым куском. Ну и черт бы с ним
Если есть большая шапка с анимированной деталью (как, например, в этом дизайне), есть смысл вырезать все без анимации, а мелкий кусочек сделать отдельной gif-картинкой, которую потом аккуратно вставить каким-нибудь блоком
Старайтесь вырезать фоны под логические блоки, не захватывая лишнего и ничего не обрезая. Помните, что у некоторых из них, например, у цитаты и профиля, нефиксированная высота, соответственно, надо либо сделать плавный переход в цвет, либо сделать в фоне повторяющуюся часть, чтобы замостить блок ею.

Step 4. Верстка дизайна
Перво-наперво, надо посмотреть на структуру страниц того сервиса, под который делается дизайн. Делается это через просмотр кода страницы или инспектирование элемента/просмотр кода элемента/прочие разновидности встроенных инструментов разработчика (их использование описано здесь). После чего прикидываем, что к чему будем цеплять.
Для первого раза можно просто взять стандартный дизайн, появляющийся в окнах при создании сервиса, и начать издеваться над ним.
Мне лично легче полностью удалить второе окно, в котором прописаны все цвета и стили, и цеплять все в первое окно, к структуре. Во-первых, если пригорит ставить скрипт смены стиля, то долго собирать в файл не придется, во-вторых, почти не надо думать, откуда что приехало. В этом случае сразу можно удалить строку  @import url(style_cs.css), заодно и число запросов к серверу сократим

Пара слов о синтаксисе css
Почти все правила css выглядят так:
selector {
    attribute: value;
    attribute: value;
}
Здесь selector - селектор, показывающий, к чему относится правило (может быть класс, идентификатор, просто название какого-то тега), attribute - свойство, значение которого мы задаем (позиционирование, выравнивание, отступы, фоны, анимация, прочее)
Подробнее про построение селекторов можно прочитать здесь.
Очень часто у элемента, имеющего идентификатор, не прописан класс, тогда-то и пригождается возможность писать ID-селекторы.
В случае, если для одного элемента находится более одного правила, применяется более специфичное правило (о специфичности здесь), если специфичность одинакова, будет применено самое последнее правило.
Attention: hover довольно криво работает на телефонах, в этом случае есть смысл сразу прикрутить изменения стиля скриптом.
Все фоны, которые по смыслу не являются фоном какого-либо блока, скидываем на body. Здесь имеет смысл почитать про свойство background. Сразу скажу, что чем раньше прописан фон, тем выше в плане слоев он будет лежать. Однако лично я умею нормально цеплять на body только те фоны, которые позиционированны относительно области просмотра (всего документа). То, что должно быть "справа от форума, но впритык к нему" приходится скидывать на блок с абсолютным позиционированием такие дела.
Кстати, позиционирование элементов - это следующее, что вам стоит прочитать, равно как и padding, margin и display. Про display:flex есть интересная статья на хабре, и по виду он пригоден для создания таблиц без использования медиа-запросов (о них чуть ниже).
Маленькие хинты: если надо сделать фиксированные отступы от границ для резинового элемента, то с относительным позиционированием можно использовать margin. В случае абсолютного позиционирования сработает комбинирование top, left, right и bottom. Если же пытаться отцентрировать относительно позиционированный элемент при помощи margin: auto, то это не сработает как минимум для айфонов: у них margin: auto означает "прижать к верхнему левому краю".
Если есть что-то, к чему надо прикрутить бесшовный фон, заканчивающийся сверху и снизу чем-нибудь png-шным (в смысле, с прозрачностью), то есть смысл обернуть блок другим блоком, засунуть png в него, прописать margin для внутреннего блока, чтобы его фон не перекрывал эти png и поставить бесшовку уж на внутренний блок

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

Step 5. Мобильная версия
На предыдущем шаге мы сделали хорошо пользователям компьютеров. Теперь надо сделать то же самое с мобильными.
Самый простой вариант - поставить в head мета-тег <meta name="viewport" content="width=цифра"> с шириной, покрывающей занятую область на экране и оставить так.
Это заставит пользователей бесконечно скроллить и материться, но это рабочий вариант, по крайней мере, не позволяющий половине контента уйти куда-то далеко.
Второй вариант - активно использовать flex-разметку. На некоторых сервисах (привет, майбб) это довольно нетривиальный подход, вызывающий много боли и негодования. Поначалу так точно
Третий вариант - сделать отдельный дизайн "чисто на цветах" для мобильных и сверстать его. Тогда мы ставим <meta name="viewport" content="width=device-width, initial-scale=1"> и верстаем резиновый дизайн под мобильные устройства. После чего заключаем исходный дизайн, например, в @media screen and (min-width=769px){}, новый в @media screen and (max-width=768px){} и наслаждаемся результатом Подробнее об этих и им подобных волшебных строках можно прочитать здесь
В любом случае, при разработке мобильной версии крайне поможет эмулятор мобильных браузеров, вшитый почти в каждый браузер в инструменты разработчика (смотри здесь)

6. Советы по mybb
1. Помните, что перед тем, как начать делать что-то скриптами, можно попробовать прикрутить это на чистом css, например, у mybb каждая категория имеет свой идентификатор, у тех постов, у которых автор онлайн, прикручен класс online, у ссылок в меню навигации есть идентификаторы, а у пользовательских ссылок - классы. Пользуйтесь ими, а уже потом доделывайте то, что не получилось сделать на чистых каскадках, скриптами. С большой вероятностью обладатели малопроизводительных динозавров скажут вам "спасибо"
2. Если что-то некуда повесить или хочется вставить текст куда-то за пределы форума или что угодно еще - создаем div-блок, прикручиваем ему нужное позиционирование и вставляем все туда. Желательно просто назначить ему класс/идентификатор, а все, что связано со стилем, слить в стиль - меньше заморочек при подключении смены стиля кнопками
3. Чтобы не особо заморачиваться с мобильным дизайном, можно просто придерживаться следующих правил:
- если надо поднять меню, то поднимаем его за счет отрицательного margin у соседа сверху
- все таблицы и прочие неукрашательные блоки только в объявлении
Тогда можно взять стандартный мобильный дизайн, чуток откорректировать при помощи медиа-запросов в основном стиле и получить более-менее рабочую мобильную версию вроде такой

Отредактировано Emerael (2017-05-27 01:30:00)

+1

2

Очень полезный урок. Как раз собираюсь делать новый дизайн на днях.

0


Вы здесь » Oneiroid » Лекции по психиатрии » How to make your first design without pain


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC