Как создать веб страницу в фотошопе

Photoshop - крайне популярная среди веб-дизайнеров программа, для многих даже стандарт. И если речь заходит о макете сайта, то в большинстве случаев под ним подразумевается файл формата.PSD.

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

Из чего состоит макет?

Подавляющее большинство веб-страниц состоит из:

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

Как создать?

Придумайте и продумайте структуру. Не лишним будет отрисовать её на листе бумаги или в самом Photoshop.

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

Определитесь, растягивающимся или фиксированным будет ваш дизайн. Шаблон фиксированного размера на всех экранах выглядит одинаково, «резиновый» же, меняя размеры, подстраивается под устройство. Если дизайн «резиновый», то необходимо определиться, чем будет заполняться фон сайта.

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

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

1. Создайте документ будущего макета. Не забудьте определить размер.
2. Разграничьте макет с помощью направляющих, вытягиваемых из линеек.

Чтобы включить линейки, либо нажмите сочетание клавиш Ctrl+R , либо выполните команду Просмотр -> Линейки главного меню программы.

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

В итоге ваш шаблон должен быть разграничен.

1. Нарисуйте макет. Добавьте графику, линии, кнопки и прочие элементы. Здесь всё индивидуально, а инструменты для работы мы рассматривали на протяжении .

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

Как разрезать

Уже готовый макет необходимо разрезать «на кусочки», чтобы использовать его элементы в дизайне сайта, часть которого будет реализована через HTML, часть - через CSS, а часть - при помощи как раз тех самых картинок, на которые макет будет разрезан. Помните об этом, когда захотите оставить несколько картинок с белым фоном, текст страницы или названия ссылок - оставлять нужно только то, что будет браться из графических файлов и не будет реализовано другими средствами.

Итак, макет готов и открыт. Будем разрезать.

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

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

1. Чтобы отрезать кусок макета, подведите указатель к месту, откуда хотите начать, и делайте всё так, будто выделяете прямоугольную область. Вырезанная часть будет пронумерована. Синий цвет номера означает, что фрагмент активен и его можно редактировать. Части, которые программа предполагает, что вы будете разрезать, имеют номера на сером фоне. Отрезанный фрагмент выделен и имеет маркеры, благодаря которым его размер и положение можно корректировать.

1. Аналогичным образом сделайте следующий разрез, и так до тех пор, пока работа не будет завершена.
2. Когда всё сделано, сохраните результат. Для этого выполните команду Файл -> Экспортировать -> Сохранить для Web (старая версия), проверьте настройки (выберите формат, качество и т. д.), нажмите Сохранить и укажите папку, в которой будет создан каталог графических файлов.

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

Макет создан, разрезан и полностью готов.

Любой макет создается с учетом определенных технических требований. Для макетов печатных материалов и макетов для сайтов они совершено разные. Многие начинающие дизайнеры не учитывают это и начинают творить, что душе угодно.
В этой статье я напишу как сделать все грамотно (и укажу частые ошибки), что повысит производительность у дизайнера и снимет головные боли frontend программиста.

Тезисы

Сначала я изложу основные тезисы. Многие из них претендуют на труды небезызвестного персонажа по кличке K. O., но тем не менее, не все об этом знают.

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

Верстают в программах для верстки

Я часто слышу о том, что дизайн пытаются делать в photoshop"e.
Мне сложно понять откуда взялась эта тенденция. Во всех профильных вузах (ну на сколько я знаю) раскладывают все верно:

• Для дизайна есть InDesign (ну или QuarkXPress).
• Для рисования есть Illustrator (ну или CorelDRAW).
• Для редактирования фотографий есть Photoshop. (ну Gimp и еще миллион программ). Ну и только в веб-дизайне он еще используется для сохранения картинок.

Одна из моих теорий на этот счет, это незнание заказчика. Думаю, что все рисуется в photoshop"e заказчик говорит «Мне нужен макет в psd, завтра в 6:34 и что бы от него пахло настоящим дизайном».
Не бойтесь объяснить заказчику, что макеты делаются не в photoshop"e и завтра ровно в 6:34 он получит макет в PDF.

Правильно создайте документ

При создании документа многие не читают диалог и сразу жмут «ОК». Но тут есть что настроить. Пример верной настройки:


Назначение: Web - Это переведет все размеры в пиксели. В вебе мы работает с ними и только с ними, никаких «подвинь на 1 сантиметр».
Размер страницы: 960 это стандартный размер. Если не уверены и в первый раз делаете веб-дизайн берите, не думайте. Но конечно он может быть любым. Главное правильно не забывать о том, что полоса прокрутки съест ширину, так что не берите ширину абсолютно равную какому нибудь разрешению экрана, берите немного меньше.
Ах и да, ширина должна быть кратной двум. Один раз я встретил сайт шириной 1227 пикселя.
Про сетку я расскажу в следующем разделе, ее всегда можно поменять в Layout->Margins and columns.

Хинт: многие даже опытные дизайнеры не знают, что высоту (впрочем как и ширину) можно выставлять индивидуально для каждой страницы внизу закладки pages самый первый значек. Когда презентуешь макет в PDF длиннющие белые хвосты внизу страницах незачем.

Используйте сетку

Что бы макет выглядел хорошо, все элементы должны быть систематизированы. Тут речь не только о сайтах, но и о любых макетах в принципе.
Сетка это основа любого макета. От нее и пляшут. Поэтому ее выбор очень важен. Но я не буду тут расписывать ее «графические» свойства. Для нас важны технические требования.

1 - margin, 2 - ширина колонки, 3 - gutter, 4 - стандартный отступ

Все размеры сетки должны быть целочисленными и желательно кратными двум.
Вот список параметров:

• Ширина макета
• Ширина внешних отступов (margin)
• Число колонок
• Отступы между колонками (Gutter)

Когда определились со всеми этими параметрами подставляем их в формулу
Ширина макета = margin*2 + x*Число колонок + gutter*(Число колонок-1)
Например для документа созданного выше в примере это будет
960 = 10*2 + х*6 + 14*5
х = 145
х (ширина колонки) получилась целочисленной, значит все в порядке, если нет, поменяйте отступы.

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

Так же на забудьте указать, как я называю его «стандартный отступ». Не нужен будет ломать голову какой отступ делать. Разумеется отступ может быть и двойным. А так же вертикальный отступ может отличаться от горизонтального.

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

Используйте функционал шаблонизирования

На сайтах различные элементы интерфейса и самое главное общий шаблон остается одинаковым на всех страницах.
Поэтому его надо хранить в master pages. Вопросов «а какая из этих страниц верный макет» больше не будет.

Тоже самое касается и цветов. Все цвета используем только через swatches. Это позволит не плодить кучу цветов и менять их везде одним кликом.

Учитывайте не статичность сайтов

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

Вы работаете с рыбой, реальные тексты будут другие

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

Подготовите материалы для верстки

Прежде всего спросите frontend программиста, какие элементы ему понадобиться в картинках.
Многие опытные дизайнеры уже знают, что это окошко программист нарисует border-radius"ом с box-shadow (я не говорю, что нужно знать названия свойств, просто со временем откладывается, что многие даже достаточно сложные фигуры и эффекты рисуются на css)
Но если вы новичок в этом дело спросите конкретно «что надо?».
Немного о сохранении картинок.
Все надо сохранять не просто через save в photoshope, а через save for web.
Небольшие элементы, элементы требующие прозрачность или содержащие шрифты сохраняем в png-24.
Графику, картинки и фоны jpeg. Следите за размером файла делайте максимально маленькими, пока визуально не сильно видно отличие.

Предоставьте список используемых цветов в HEX формате.

На забудьте дать все шрифты используемые в макете.

И наконец обсудите с программистом все устно, это полезно всем.

Теги: дизайн сайтов, верстка сайтов, frontend, пособие, turtorial

Ставим кистью пятно в левом верхнем углу:

Затем с помощью инструмента "Перемещение" (Move Tool) поднимаем слой с пятном несколько вверх и задаём слою непрозрачность 70%:

В инструментальной панели выбираем инструмент "Текст", в панели параметров жмём на иконку включения панели символов, где задаём следующие значения:

• Семейство шрифтов (Font Family): Avanti Regular (шрифт скачать по ссылке внизу)
• Высота кегля (Font Size): - 59пт
• Трекинг (Tracking): 5
• Масштаб по горизонтали (Horizontally Scale) - 115%
• Цвет (Color): #91d4f5

Для удобства включаем линейки (Ctrl+R) и ставим направляющие, горизонтальную 92 пикс, вертикальную - 104 пикс, в перекрестье направляющих и будет начальная позиция текста логотипа сайта. Пишем логотип "Автомобили" или типа того, на рисунке показан масштаб документа в натуральную величину:

Для шрифта слогана задаём следующие параметры:

• Семейство шрифтов (Font Family): Avanti Regular
• Высота кегля (Font Size): - 19пт
• Трекинг (Tracking): -35
• Масштаб по горизонтали (Horizontally Scale) - 100%
• Цвет (Color): #cdcdcd

Создание привлекательных и функциональных веб-макетов - неотъемлемая часть жизни веб-дизайнера. В этом уроке мы будем создавать профессиональный макет сайта с нуля. В процессе урока Вы узнаете некоторые полезные трюки при создании дизайна.

Ресурсы урока:

1. Набор иконок (wefunction.com)
   Альтернативный набор иконок
2. Иконка Twitter (iconeden.com)
3. Шрифт Bebas (dafont.com)

Шаг 1. Mockup

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

Шаг 2. Создаем документ.

Мы будем создавать макет сайта шириной в 960 пикселов. Для этого, создайте новый документ размером 1200х1500 пикселов. Разрешение 72 пиксела.

Так, как макет сайта будет шириной в 960 пикселов, нам нужно определить эту область, добавив направляющие. Выделите весь документ (Ctrl+A).

Перейдите в меню Выделение - Трансформировать выделенную область (Select > Transform Selection). На панели свойств в верхней части экрана установите значение ширины 960 пикселов. Это и будет рабочая область макета.

Установите направляющие точно по границам выделения.

Нам нужно создать отступ между краями рабочей области макета и областью контента, который мы добавим позже. При активном выделении документа, снова перейдите в меню Выделение - Трансформировать выделенную область (Select > Transform Selection). Уменьшите выделение по ширине до 920 пикселов. Это означает, что с каждой стороны макета будет отступ в 20 пикселов, в итоге всего это 40 пикселов.

Установите направляющие по новому выделению:

Шаг 3. Создаем шапку сайта.

Переходим к созданию шапки сайта. Создайте выделение высотой в 465 пикселов в верхней части макета.

Залейте выделение серым цветом, а в дальнейшем используйте стили слоя, чтобы применять цвета и градиенты.

К шапке добавим градиентную заливку через стиль слоя Наложение градиента (Gradient Overlay). Создайте градиент из двух цветов.

Теперь шапка будет выглядеть так:

К шапке теперь нужно добавить подсветку. Создайте новый слой (Ctrl + Alt + Shift + N) и выберите мягкую кисть размером 600 пикселов. Выберите цвет #19535a и кистью кликните один раз в верхней центральной части шапки.

Создайте на шапке выделение в 110 пикселов.

Нажмите клавишу Delete , чтобы удалить выделенную часть.

Слой с подсветкой сожмите по вертикали (Ctrl + T) .

Нужно убедиться, что световое пятно на шапке находится ровно по центру. Для этого, сделайте активными слои с шапкой и подсветкой и выберите инструмент Перемещение (Move Tool) (V). На панели свойств в верхней части экрана нажмите кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).

Создайте новый слой (Shift + Ctrl + N) и нарисуйте инструментом Карандаш (Pencil Tool) точку, размером в 1 пиксел. Для рисования используйте цвет #01bfd2.

Сгладим края этого слоя, используя градиентную маску. Выберите инструмент Градиент (Gradient Tool) и создайте градиент, как показано ниже:

Примените новый слой с маской, которую залейте только что созданным градиентом.

Шаг 4. Создаем узор

Теперь создадим простой узор, который добавим к шапке. Инструментом Карандаш (Pencil Tool) размером в 2 пиксела нарисуйте две точки, как показано на рисунке. Отключите на время видимость фонового слоя (кликните по иконке глаза около фонового слоя) и создайте узор (Редактирование - Определить узор) (Edit > Define Pattern):

Создайте новый слой (Shift + Ctrl + N) и поместите его под слой с подсветкой. Выделите область, к которой Вы хотите применить узор и откройте окно Выполнить заливку (Fill) (Shift + F5). Нажмите ОК.

После добавления текстуры шапка выглядит так:

Сделайте плавный переход от узора к шапке: к слою с узором добавьте маску и мягкой кистью белого цвета (#ffffff) с непрозрачностью 60% пройдитесь по маске.

Результат:

Шаг 5. Добавляем логотип

Переходим к добавлению логотипа. Выберите мягкую кисть с цветом #19535a и нарисуйте пятно.

Напишите текст:

К слою с логотипом добавьте стиль слоя Тень (Drop Shadow).

Шаг 6. Навигация

Добавьте текст для навигации.

Нарисуйте кнопку навигации, используя инструмент (Rectangular Marquee Tool). Залейте выделение любым цветом и уменьшите параметр Заливка до нуля.

К слою с кнопкой добавьте стиль Наложение градиента (Gradient Overlay).

Шаг 7. Слайдер для контента

Создайте выделение размером 580х295 пикселов.

Залейте выделение любым оттенком серого.

Поместите изображение. Закрепите его со слоем, который создали ранее.

Теперь к слайдеру добавим эффект. Создайте новый слой (Shift + Ctrl + N) , выберите Кисть (Brush Tool) с диаметром 400 пикселов. Откройте палитру Кисть (F5) и установите те параметры, которые показаны на скриншоте:

Выберите черный цвет (#000000) и нарисуйте пятно:

Для смягчения краев примените фильтр Размытие по Гауссу (Gaussian Blur).

Выделите нижнюю половину тени и удалите (Delete) .

Поместите слой с тенью над слайдером:

Сожмите слой с тенью за средний маркер (Ctrl + T) , а затем снова отцентрируйте слой с тенью: выделите оба слоя и в панели свойств нажмите на кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).

Дублируйте слой с тенью (Ctrl + J) и поместите дубликат на нижний край слайдера.

Нарисуйте кнопки на слайдере, используя инструмент Прямоугольная область выделения (Rectangular Marqee Tool) . Залейте кнопки черным цветом (#000000).

Уменьшите непрозрачность слоя с кнопками до 50%.

Добавьте фигуру стрелки на кнопки слайдера:

На нижней части слайдера нарисуйте полосу и залейте ее черным цветом (#000000).

Уменьшите непрозрачность слоя с полосой до 50%.

На эту полосу добавьте описание Вашего проекта:

Шаг 8. Добавляем текст с приветствием

Напишите текст с приветствием:

Шаг 9. Завершаем работу над шапкой сайта

Мы почти закончили работу над шапкой сайта. Добавьте еле заметную тень при помощи инструмента Кисть (Brush Tool).

Оставьте между тенью и заголовком пропуск в 1 пиксел.

Создайте новый слой под слоем с шапкой (Shift + Ctrl + N) и примените к нему градиент.

Шаг 10. Добавляем кнопки для слайдера

Нарисуйте кнопки смены слайдов.

К одной кнопке добавьте стиль слоя Внутренняя тень (Inner Shadow), а затем дублируйте слой с кнопкой нужное количество раз (Ctrl + J) .

Шаг 12. Создаем разделитель для контента

Инструментом Карандаш (Pencil Tool) и нарисуйте светло-серую (#aaaaaa) линию шириной в 1 пиксел.

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

Перевод статьи дизайнера Claudio Guglieri с описанием процесса проектирования макета сайта от начала до конца.

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

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

1. Перенесите свои мысли на бумагу

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

2. Создавайте зарисовки высшего уровня

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

3. Добавьте сетку вашему PSD-файлу

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

4. Выберите типографику

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

5. Выберите цветовую гамму

На протяжении всего рабочего процесса выбора шрифтов, вы должны работать над цветовой гаммой всего пользовательского интерфейса (цвет фона, текста и пр.). Цвета нужно выбирать в зависимости от функциональности элемента. Обратите внимание на такие сайты как Facebook, Twitter, Quora, или Vimeo.

6. Разделите макет

Необходимо, чтобы каждый раздел на сайте рассказывал какую-то историю. Она нуждается в причине и конечном результате. В тексте должны быть выделения, осветления и пр. для наиболее важных частей текста. И на самом деле на странице должно быть не слишком много «выходов» на другие ресурсы, источники. Пользователь должен задаваться вопросом «Что я могу сделать здесь?» Задайтесь целью сделать наиболее простой макет. И вы удивитесь, как трудно этого добиться.

7. Реорганизация установлена

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

8. Бросьте себе вызов

Я призываю к этому каждого дизайнера во всех его проектах. Примерами различных задач для этого могут стать: использование новой системы сетки при создании новых компонентов; такие незначительные задачи как избежать режима наложения или использовать специфический цвет

9. Обращайте внимание на детали

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

10. Отнеситесь к каждому компоненту так, будто вы представляете его на конкурсе

Должен признать, этот совет не мой. Я слышал это на Fantasy Interactive и был потрясен тем, на сколько четко и правдиво он прозвучал. Каждая деталь должна быть спроектирована как самая лучшая.

11. Оттачивайте свою работу

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

12. Убирайте свои PSD

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

13. Работайте, надеясь на лучшее, но будьте готовы к худшему

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

14. Будьте зацикленными на дизайне, пока не возненавидите его.

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

15. Не тратьте много времени на концепции до того, как поделитесь ими с клиентами

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

16. Дизайнер! Будь лучшим другом разработчика!

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

17. Растолкуйте все, как будто я четырехлетний ребенок

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

18. Любите каждую из своих идей, но не слишком привязывайтесь к ним

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

19. Следите за дизайном в ходе процесса

Если вы работаете в агенстве, то наверняка уже поняли, что такое пытаться справляться с новым проектом, когда предыдущий только что закончили. Вопреки распространенному мнению, ваша работа не заканчивается после сдачи PSD и styles-листов. Если вы действительно заботитесь о клиентах и своем результате, пообщайтесь со своими разработчиками на счет проекта. Может понадобиться помощь с пикселями и пр. Убедитесь, что все идеально.

20. Следите за своим прогрессом

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