Osnovy_Web-Dizayna_Rukovodstvo.pdf

Основы Web-Дизайна Руководство Полное руководство по дизайну простых и красивых Web-сайтов от идеи до готовых файлов проекта в Photoshop. Рафал Томал Основы Web-Дизайна Руководство Версия 1.0 Январь 2015 Рафал Томал www.RafalTomal.com Перевод Samigg для клуба Skladchik.com У дизайнеров светлое будущ...

Основы Web-Дизайна Руководство Полное руководство по дизайну простых и красивых Web-сайтов от идеи до готовых файлов проекта в Photoshop. Рафал Томал Основы Web-Дизайна Руководство Версия 1.0 Январь 2015 Рафал Томал www.RafalTomal.com Перевод Samigg для клуба Skladchik.com У дизайнеров светлое будущее. Всем привет. Меня зовут Рафал Томал и я графический дизайнер, веб- разработчик и автор данной книги. Во-первых, я бы хотел поблагодарить вас за приобретение книги “Основы Web-Дизайна. Руководство”. Теперь моей работой является то, чтобы вы окупили свои вложения. Рафал Томал Если вы следите за мной или читаете мой блог, вы скорей всего так же знаете, что я предоставляю бесплатные инструменты для веб-дизайна, шаблоны и даю различные советы по созданию дизайна веб-страниц. Благодаря вкладу, который вы сделали, купив эту книгу, я смогу лучше помочь растущему сообществу веб-дизайнеров. Моя долгосрочная цель - это предоставить гораздо больше ценной информации, не останавливаться только на данной книге. Я хочу постоянно учить вас тому, что я изучил, и делиться этой информацией используя простые для понимания курсы, учебники и электронные книги. У дизайнеров светлое будущее. Все основные индустрии ценят хороший дизайн сильнее, чем когда бы то ни было. Дружелюбный интерфейс и опыт становятся особенностью рынка самых популярных брендов и продуктов на рынке. Сейчас самое лучшее время, для того чтобы быть дизайнером. Не имеет значение, что изобретут дальше, этой вещи всегда нужен будет дизайн. Технологии могут измениться и, возможно, мы будем использовать совершенно другие инструменты, чем те, которые мы используем сегодня, но теория дизайна останется той же самой. Я очень рад тому, что могу поделиться с вами некоторыми своими методами и техниками создания веб-сайтов. Я верю в то, что обучая, вдохновляя и помогая другим веб-дизайнерам, мы можем сделать небольшой вклад в развитие веба и мы сделаем его лучшим местом для нас всех. Если у вас есть какие-то вопросы, вы всегда можете найти меня вTwitter, LinkedIn, Google+, или написать мне на почту. Наслаждайтесь прочтением книги и спасибо за поддержку! Основы Web-Дизайна. Руководство. Перевод Samigg. Для клуба Skladchik.com 2 Содержание Г Л А В А 1: Введение........................................................... 5 Г Л А В А 2: Начало работы.................................................. 12 Г Л А В А 3: Идеи и Вдохновение......................................... 25 Г Л А В А 4: Среда Разработки.............................................. 44 Г Л А В А 5: Типография..................................................... 63 Г Л А В А 6: Цвета................................................................... 98 Г Л А В А 7: Прототипы и Макеты..................................... 126 Г Л А В А 8: Соединяем Все Вместе.....................................163 Г Л А В А 9: Ресурсы и Дополнительная Литература.......... 202 Основы Web-Дизайна. Руководство. Перевод Samigg. Для клуба Skladchik.com 3 ГЛАВА1 Введение Привет Мир! Я сделал свой первый сайт в 2002 году. С тех пор я разработал сотни разнообразных веб-сайтов: блоги, персональные сайты, сайты для малого бизнеса, сайты для крупных корпораций, организаций, журналов, музыкальных брендов, сайты для медицинских компаний, санаториев, больниц и, конечно же, для своих собственных проектов или сайты портфолио. В некоторых из этих проектах работает 10 человек, в некоторых только я один. Порой мне приходится иметь дело с 5-ю менеджерами и мне необходимо получить зеленый цвет от них всех. С другой стороны у меня были проекты, в которых я сам был и боссом и дизайнером, так что мне нужно было получить зеленый свет только от себя самого (эти проекты были самыми сложными…). Я понял, что процесс создания дизайна, у разных проектов с разными целями и требованиями, абсолютно одинаков. Мой процесс разработки дизайна развивался и рос в течение многих лет. Вначале все было хаотично, я очень легко отвлекался на случайные идеи и вдохновения, которые становились основой проекта. Мой ранний процесс создания дизайна выглядел так: 5 Так делать неправильно. Такой подход потребляет огромное количество энергии, и конечный дизайн чаще всего был довольно противоречивым и никогда не имел четкой структуры. Я понял, что мои навыки дизайнера ничто без верного рабочего процесса. Хороший процесс проектирования дизайна поможет вам двигаться в верном направлении, стать более креативным, поможет вам найти лучшие идеи, получить больше заказов от ваших клиентов и даже позволит вам делать вашу работу быстрее и более эффективно. В этой книге я покажу вам свой нынешний процесс разработки дизайна, от идеи и вдохновения до создания конечного проекта дизайна веб-сайта, который можно будет передать вебразработчикам для дальнейшей верстки: Конечно, мой нынешний подход не безупречен и никогда таким не будет. Тем не менее, я обнаружил, что это наиболее эффективный способ создания веб-сайтов и я использую его уже очень давно, такой подход дает мне отличные результаты. Возможно, у вас есть свои собственные привычки, которые отлично у вас работают, это здорово! Относитесь к моему процессу как к основе. Не стесняйтесь разбавлять его своими собственными методами и улучшать его. Есть еще пара слов, которые мне хочется сказать в водной главе, а затем мы перейдем к основному материалу. Мы запачкаем наши руки разработкой реального дизайна. 6 Чем мы тут занимаемся? Я хочу взять вас за руку и шаг за шагом показать весь процесс создания дизайна для веб-сайта. Самый лучший способ сделать это это взять для примера образец проекта. Я выбрал стандартный шаблон веб-сайта в качестве тестового проекта, так что техники и примеры, которые мы будем рассматривать, так же легко будет применить для всех видов дизайна. Из этого шаблона вы скорей всего сделаете тему для WordPress или статическую страницу и продадите ее на таком сайте как ThemeForest.net или CreativeMarket.com. Это не проект, который я сделал для своего клиента или что-то в этом роде. Этот проект был спроектирован специально для этой электронной книги, так что вы можете использовать его как хотите без беспокойства о лицензиях. Можете редактировать и делать с этим проектом все что угодно. Самое главное это сам процесс и то, что вы учитесь Этот проект был разработан специально для данной книги. Мы шаг за шагом пройдем весь процесс его создания. тому, как создавать подобные проекты. Мы начнем с постановки целей и проведения базового исследования проекта. Далее вы узнаете, где черпать дизайнерское вдохновение и как переводить ваши идеи в наброски на бумаге. Далее настроим папки проекта и создадим файл первого шаблона в Adobe Photoshop. Далее поработаем над конкретным проектом, выберем типографию и цвета и затем объединим эту информацию вместе в руководстве по созданию стиля для веб-сайта. В конце мы сделаем прототипы каждой страницы и создадим конечный макет дизайна в Photoshop.. Каждый шаг подкреплен теорией дизайна и детальным описанием того, что мы делаем. Так вы научитесь, шаг за шагом, и вы сможете применить ваши знания в различных случаях в ваших собственных ситуациях. 7 Несмотря на все это вы так же найдете в этой книге огромное количество отличных советов и увидите, как надо работать над дизайном. Вы сможете применить их к вашей работе независимо от того над каким проектом вы работаете. Это словно сидеть рядом со мной и смотреть, как я работаю над проектом, и говорить о нем часами. Звучит неплохо? Типография Цвета Макет 8 Для кого эта книга? Эта книга отлично подходит как для дизайнеров, так и для людей, которые хотят быть дизайнерами, но не знают с чего начать. Веб-разработчики так же могут найти ее полезной, если они захотят узнать больше о дизайне и о том, как работают дизайнеры. Если вы дизайнер, эта книга может вам помочь доработать и улучшить ваш нынешний процесс создания дизайна. Вы так же можете найти различные способы и решения, которые вы сможете применить к вашим техникам. Если вы новичок в дизайне, и хотите стать дизайнером, то эта книга даст вам цельную структуру и покажет верный путь, по которому вам стоит идти чтобы стать дизайнером. Вы изучите основы теории дизайна и вы будете готовы двигаться дальше и начать самостоятельно изучать новые материалы. Если вы думаете, что у вас недостаточно таланта для того чтобы быть дизайнером, позвольте мне раскрыть вам секрет: все дизайнеры были любителями в самом начале. Мой первый вебдизайн был ужасен. Вы бы смеялись над ним и надо мной, если бы вы увидели его сегодня. В самом начале я делал все ужасно, но после сотни созданных дизайнов я наконец-то начал понимать то, что я делаю. Так что скорей всего вам необходимо будет потратить немного времени, но вам надо откуда-то начать. Лучше всего начинать с использования хорошей структуры. Таким образом, вы начнете приобретать полезные привычки и сфокусируетесь на самых важных элементах. Люди говорят, что вам нужен талант, для того чтобы быть дизайнером, однако я считаю это способностью отличить хороший дизайн от плохого. Если вы можете это сделать, и вы хороши в этом, это значит, что у вас есть самый важный навык, который необходимо иметь чтобы стать отличным дизайнером. Видите ли вы разницу в этих двух дизайнах? Если вы думаете, что находящийся справа дизайн выглядит лучше, значит, у вас есть все что нужно для того, чтобы стать хорошим дизайнером. 9 Ключевой особенностью является понимание того, что веб-дизайн это не только хорошая графика. Если вы просто художник, то это вам не поможет. Создание дизайна веб-сайтов очень часто требует анализа информации, поиска решений основных проблем взаимодействия, проведение исследований. В итоге все должно получиться практичным и универсальным. Что вам необходимо? Все что вам нужно это Adobe Photoshop, но вы можете использовать другие программы. Все скриншоты были сделаны в версии CC (14.0), но даже если вы используете CS 4.0+, вы сможете использовать данные шаги. Я использую PS для создания всех своих макетов дизайна, но не программа делает за меня всю работу. Я научу вас универсальным техникам, которые можно использовать во всех графических редакторах и даже при создании дизайна непосредственно в браузере. Так или иначе, обратите внимание, что вы приобрели эту книгу вместе с файлами проекта, вам нужен будет Photoshop для того, чтобы открыть их. Все файлы проекта могут быть открыты только с использованием программного обеспечения Adobe. Учимся делая! Лучший способ обучения - это практика. Я не хочу чтобы вы просто пробежались по этой книге, я хочу, чтобы вы делали свой собственный проект параллельно с чтением данной книги. Некоторые главы имеют значок В них мы займемся практикой. Если вы купили эту книгу со всеми файлами проекта, вы можете изучить их и разобрать всю мою работу. Если у вас еще нет файлов проекта, вы всегда можете авторизоваться на сайтеDesigners Area и загрузить их оттуда. Окей, давайте начнем! Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 10 ГЛАВА2 Начало Работы Процесс создания дизайна Процесс создания веб-сайта может быть довольно сложным, над его работой может работать несколько человек (UX-Дизайнер, визуальный дизайнер, копирайтер) и может требоваться огромное количество исследований, если вы работаете над крупным проектом с огромным бюджетом. Мы сфокусируется на небольших проектах, в которых вы являетесь единственным дизайнером и несете ответственность за все аспекты дизайна. Хорошей идеей будет использовать прогрессивный процесс разработки, в котором каждый шаг будет отделен различными вехами. Это позволит вам остановиться в любой момент, вы сможете дать оценку вашей работе или получить согласование от клиента. Мой процесс требует создания руководства по стилю прежде чем перейти к созданию дизайна интерфейса веб-сайта. Так вы будете точно знать, какие шрифты и цвета вам стоит использовать в вашем проекте и как быть более единообразным в создании файлов вашего дизайна. Конечно, иногда вам надо будет возвращаться обратно на шаг и корректировать или обновлять что-то, но руководство по стилю поможет вам держать все в одном стиле. Вот так выглядит мой процесс создания дизайна: Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 12 Планирование (Следующая страница) Описание проекта, требования и цели, которые помогут определиться с проектом, над которым вы работаете, прежде чем вы перейдете к креативной части создания дизайна. На этом шаге вам так же нужно принять несколько важных решений, о том, как работать над проектом, найти вашу целевую аудиторию, установить ключевые точки и создать карту сайта. Для креативных людей очень соблазнительно выглядит возможность пропуска этого скучного шага и переход сразу в часть про дизайн. Но как только у вас появится больше опыта, вы поймете, как важно потратить немного времени и выполнить домашнюю работу. Мозговой штурм и наброски. (Глава 3) Это момент, когда вы ищите вдохновение, проводите небольшие исследования, делаете различные наброски и делаете заметки всех новых идей, которые приходят вам в голову. Дизайнеры думают образами, так что зарисовка идей поможет вам сохранить ваши мысли именно в том виде, в котором вы их представили. Типография. (Глава 5) Я верю в то, что типография является самым важным визуальным элементом каждого веб-сайта. Я обычно начинаю создание дизайна с типографии. На данном шаге вы определитесь с базовым стилем типографии в руководстве, которое вы будете использовать в качестве шпаргалки до конца проекта. Руководство по стилям включает в себя основные шрифты, которые вы выбрали и примеры их использования для заголовков и стилей параграфов. Некоторые проекты могут требовать довольно сложных руководств, так что потратьте время и поработайте над типографией. Цвета. (Глава 6) Мы выберем основной цвет, вторичный цвет, цвет заднего фона и активные цвета для своего проекта и сохраним их в файле цветовой палитры. Тоже самое, что и с типографией, мы определим цветовую палитру, которая поможет нам поддерживать однородный дизайн во всех файлах. Прототип и макет. (Глава 7) В данном шаге вы планируете макеты всех основных веб-страниц и рисуете прототипы, которые помогут визуализировать интерфейс веб-сайта и принять важные решения по поводу макета. Окончательный шаблон дизайна. (Глава 8) Пришло время соединить все элементы дизайна вместе и воспользоваться руководством по типографическим стилям, цветовой палитрой, прототипами и создать ваш полноценный макет графического дизайна. Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 13 Планирование проекта Каждый проект по созданию дизайна требует планирования. Это первый и самый важный шаг в нашем процессе, т.е. в этот момент мы принимаем самые важные решения касающиеся всего проекта. Сделанный на заказ дизайн веб-сайта для клиента немного отличается от шаблонного дизайна. В этой книге мы сфокусируемся на создании шаблонов, так что давайте опустим все детали по поводу работы с клиентами и описания предложений по проекту. То, что касается бизнеса в создании вебсайтов является довольно интересной темой для новой книги ;-) Вам нужно запомнить, что дизайн это гораздо больше, чем то, что вы видите. Тут есть над чем подумать и что планировать, прежде чем вы откроете Photoshop. Подготовка хорошего описания проекта, установка основных целей и планирование процесса, с помощью которого эти цели будут достигнуты, поможет вам сохранить много времени и поможет вам избежать проблем в дальнейшем. Допустим, вы работаете над своим собственным проектом, например над дизайном темы. В данном случае описание вашего проекта будет идеей, которую вы будете держать в голове, запишите ее в простой текстовый документ или даже лучше создайте зарисовку в вашем блокноте. Вот так начинается каждый проект дизайна. Мы создаем тему для веб-сайта и у нас нет клиента, который дает нам какие-то цели и у которого есть некоторые ожидания. Нам нужно самостоятельно спланировать их на наше усмотрение. Этот процесс довольно часто является более сложным, т.к. мы можем не знать, откуда начать или какие у нас цели. С другой стороны мы гораздо более гибкие, и обычно наше воображение это единственный барьер. Это отличная ситуация для всех креативных людей, которые хотят превратить множество своих идей в жизнь. Во время процесса планирования мы воспользуемся этими базовыми элементами: Описание проекта. Цели проекта. Целевая аудитория Ожидаемые результаты. Управление проектами. Карта сайта. Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 14 Давайте я объясню и опишу каждый из этих пунктов, так вы сможете лучше познакомиться с проектом из нашей книги и увидеть как может выглядеть готовый план проекта. Описание проекта Вы должны начать написание описания проекта с ответа на вопрос: «Что мы создаем?». Это поможет вам сфокусироваться на том, что конкретно из себя представляет ваш проект. Это интернет магазин? Кофейня? Шаблон блога? Ответьте на этот вопрос парой предложений. Это поможет вам очистить ваш ум и определить тип проекта. Это действительно помогает, когда вы приглашаете в проект кого-то еще. Таким способом вы можете очень просто описать новый проект для других людей. Когда вы объясняете и описываете, какую либо идею другому человеку, то вы смотрите на нее с другой перспективы. Это заставляет вас думать усерднее и перепроверять имеет ли идея смысл. Чем менее технически подкован человек, тем лучше. Да, ваши идеи должны быть очень простыми, так что у вас не будет проблем в объяснении их кому бы то ни было. Что мы создаем в данной книге? Наш проект, над которым мы будем работать в течение этой книги, это шаблон для фрилансеров и консультантов. Из-за того, что он для создается для индивидуалистов, мы должны быть уверены, что шаблон дизайна будет сфокусирован на личности. Веб-сайт должен помочь продвигать персональный бренд и продавать сервисы. Чтобы помочь фрилансерам продавать различные сервисы, нам нужно найти простой способ, как перечислять их и сделать их простыми для доступа. Так же, мы хотим показать их портфолио и клиентов, с которыми они уже работали. Основная стратегия фрилансеров по продвижению - это создать себе авторитет и репутацию в сообществе с помощью ведения блога. Нам нужно убедиться, что мы включим эту функциональность в наш шаблон. Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 15 Из-за того, что мы не создаем сайт для конкретного клиента, мы сами можем выбрать наш бренд, дизайн стилей, цвета и логотип. Все в наших руках и нам нужно представить что-то, что покроет большинство требований целевой аудитории. Кроме того, очень важно, чтобы все оставалось настолько простым, насколько это возможно. Так же важно избегать каких-то специфичных или самописных элементов, которые будет тяжело использовать в различных ситуациях. Необходимо чтобы шаблон дизайна был универсальными и его можно было применить для огромного количества людей разными способами. Цели проекта Определение целей проекта - это фундаментальная часть процесса создания дизайна. Как и в любой поездке, мы должны знать пункт назначения. С другой стороны, мы могли бы ездить в разных направлениях, но так мы могли бы легко потеряться. Устанавливая понятные цели для проекта, мы знаем, куда двигаться и когда проект будет готов. Гораздо проще будет оценить работу и понять сделали ли мы работу хорошо, задав один простой вопрос: «Выполнили мы все поставленные цели?» Как мы сказали ранее в описании нашего проекта, мы создаем шаблон сайта для фрилансеров. Мы хотим создать тему, которая поможет нашим клиентам заключать больше сделок. Мы должны быть сфокусированы на этом. И если мы достигнем такого результата, то наши покупатели будут считать наш продукт очень ценным. Так наша тема будет более желанной. Основываясь на описании проекта, мы можем определить наши основные цели: 1. Создать тему веб-сайта, которая поможет фрилансерам и консультантам заключать больше сделок. 2. Добавить функции дизайна, которые отобразят список сервисов, портфолию, покажут клиентам отзывы/рекомендации, создать блог (поднять авторитет) и оставаться на связи. 3. Создать простой, минималистичный и эстетичный дизайн. Вот такие три простые цели покрывают основной процесс создания темы, определяют основную функциональность, которую нам нужно будет реализовать, и показывают нам то, как мы должны относиться к внешнему виду. Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 16 Целевая аудитория Это не простая тема т.к. вы создаете продукт для двух разных групп пользователей. Первая группа клиентов - это люди, которые купят вашу тему. Вторая группа - это люди, которые будут посещать веб-сайт вашего клиента. Так, кто ваши клиенты? Можете ли вы описать стандартного клиента, который покупает вашу тему? В большинстве своем это мужчины или женщины? Какой у них возрастной состав? Эти и многие другие вопросы могут быть использованы при создании профиля (человека) стандартного клиента/пользователя. Давайте посмотрим на шаблон проекта для фрилансеров. Наша целевая аудитория это все индивидуальные работники, такие как копирайтеры, разработчики, веб-дизайнеры, тренеры, маркетологи, которые покупают их услуги консалтинга. Это подходит и для мужчин и для женщин, и возрастная группа может быть 16+. Один общий элемент, который есть у всех этих людей, это то, что они решили начать свой небольшой личный бизнес. Посетителей сайта вашего клиента будет довольно сложно определить т.к. это может быть кто угодно. Эта задача может быть проще, если вы уменьшите группу ваших пользователей до одной группы фрилансеров, например до веб-разработчиков. Отсюда вы узнаете, что большинство посетителей сайта вашего клиента скорей всего являются владельцами бизнеса или какого-то дизайнерского агентства, которое ищет разработчика. Создание профилей и проведение поиска пользователей является довольно сложной задачей, над которой может работать целая команда дизайнеров. Если вы хотите изучить эту тему, то я рекомендую вам прочитать книгу “A Project Guide to UX Design”. Ожидаемые результаты Каждый проект имеет какой-то конечный результат. Когда работаешь над шаблоном дизайна для сайта, мы можем либо послать дизайн нашего проекта веб-разработчику, который сделает из него готовую страницу, либо оставить наш дизайн в качестве финального продукта и продать его как есть. С другой стороны, нам надо убедиться, что мы подчистили наши файлы и сделали так, чтобы с ними, стало просто работать. Предоставление хорошо оформленных файлов проекта показывает ваш профессионализм, точность или четкость, которая высоко ценится у дизайнеров. После прочтения данной книги мы получим руководство по типографическим стилям, цветовую палитру, прототипы и макеты дизайна. Все они будут в PSD-файлах и мы также добавим немного дополнительных материалов (материалы дизайна, фото, и т.д.) и информацию (ссылки на веб-шрифты), которая нужна для работы с нашим проектом. Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 17 Управление проектом Работаете ли вы с большой командой или вы просто одиночка, знание основ управления проектами вам необходимо. Оно позволит вам отслеживать ваш процесс и понимать то, на каком этапе проекта вы находитесь в данный момент. Начните с определения самых крупных вех вашего проекта и разделите их на маленькие части, до тех пор, пока у вас не будет полного списка задач. Чем более детальны и меньше задачи, тем проще с ними будет справиться. Это так же отличная система мотивации, т.к. каждый раз, когда вы будите вычеркивать очередной элемент из вашего списка, вы будете ощущать ваш реальный прогресс! Вот список вех и простых задач, которые есть в нашем проекте шаблона: Исследование проекта Руководство по стилю: Типография Цвета Прототоип: Домашняя страница Страница блога Сообщение блога Страница о проекте Макеты дизайна: Домашняя страница Страница блога Сообщение блога Страница о проекте Предоставление финальных файлов PSD Обратите внимание, что во время создания тем, ваши вехи и задачи будут почти одинаковыми для каждого проекта. Это поможет вам систематизировать весь процесс и сэкономить немного времени при планировании будущих проектов. Полезно использовать различные инструменты управления проектами при работе сразу с несколькими проектами в одно и то же время, когда очень много людей вовлечены в процесс. Как дизайнер, вам возможно нужно приложение, которое поможет вам лучше планировать ваш проект, презентовать ваш макет и сотрудничать с другими людьми. Вот некоторые приложения для управления проектами, которые рекомендуются для использования дизайнерами: Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 18 Basecamp.com Basecamp - это самое популярное приложение для управления проектами. Вы можете хранить все ваши проекты, устанавливать вехи, создавать задания и использовать их при общении с остальными членами команды. Trello.com В противовес Basecamp, Trello не так продвинут. Он проще и это бесплатное приложение (премиум версия дает доступ к дополнительной функциональности), которое можно использовать для создания быстрых списков заданий. Имеет отличный интуитивно понятный графический интерфейс с которым легко работать. Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 19 InVisionApp.com InVision скорее представляет из себя инструмент для создания прототипов дизайна, но его так же можно использовать в качестве простого инструмента управления проектами для дизайнеров. Вы можете хранить свои проекты, показывать шаблоны интерактивного дизайна и сотрудничать с другими членами команды. Viewflux.com Viewflux - это новое приложение, которое является отличным инструментом для дизайнеров. Вы можете планировать ваш проект, получать отзывы по поводу дизайна, создавать прототип и даже контролировать различные версии файлов вашего дизайна. Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 20 Карта сайта Карта сайта - это отличный инструмент, который позволит вам создать полную структуру веб-сайта. Она может помочь вам получить более детальное представление о том, что из себя представляет весь проект, прежде чем вы перейдете к созданию дизайна. Карты сайта обычно основаны на небольшом описании проекта и его требованиях. Стандартная карта сайта выглядит как график, который показывает иерархию и связи между главными и второстепенными страницами. Она помогает дизайнерам и разработчикам лучше понимать структуру веб-сайта. Так же, из-за того что они отображаются графически, вам очень просто будет объяснить другим членам команды или клиентам общую структуру. Вам не нужны технически подкованные люди, чтобы читать карты сайтов. Карты сайтов должны отражать навигацию веб-сайта, включая, кроме главных и второстепенных еще и скрытые страницы, лендинги или всплывающие окошки. Карта сайта в нашем проекте дизайна шаблона в данной книге довольно проста. Это шаблон, так что мы сфокусируемся только на главных страницах, которые есть у каждого веб-сайта.. Вот так выглядит карта сайта для нашего проекта шаблона в этой книге: Карты сайта могут помочь вам определить то, для каких страниц вы будете разрабатывать дизайн. Очевидно, мы можем разработать шаблон одной страницы, который будет очень похож на страницы “о проекте” и все страницы сервисов. Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 21 На самом деле очень просто создать карту сайта для проекта вашего веб-сайта. Вы можете воспользоваться любыми дизайнерскими приложениями и, после создания парочки карт сайтов, у вас будут шаблоны, которые вы можете использовать заново в других проектах. Конечно же, существует целая куча инструментов и приложений, которые могут облегчить эту задачу. Это особенно полезно при работе над крупными проектами. Ниже показаны мои самые любимые инструменты. Я рекомендую вам попробовать их: Slickplan.com Lucidchart.com Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 22 Gliffy.com OmniGraffle.com Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 23 ГЛАВА 3 Идеи и Вдохновение Мозговой штурм и поиск идей Вот тут начинается веселье. Прежде чем вы начнете мозговой штурм, убедитесь, что вы закончили вводную часть вашего проекта и определились с его целями. Так вы будете знать, в каком направлении вам стоит двигаться. Мозговой штурм - это процесс креативного мышления, поиска и обмена идеями. Он должен занимать большую часть вашей работы, независимо от того работаете ли вы один или в команде. Переключение вашего мозга в режим креативного мышления поможет вам сфокусироваться на теме и придумать интересные идеи. Это не просто. Мы не роботы, и очень часто вы будете попадать в ситуацию, когда вы очень сильно стараетесь придумать что-то стоящее. Это нормально, не надо слишком сильно стараться. Давайте взглянем на то, как сделать этот процесс более простым и эффективным: Найдите свое самое креативное время. Человеческий мозг любит шаблоны. Мы все разные и у нас у всех разные привычки, но в нашей жизни есть определенные шаблоны. Наш мозг обычно знает, когда нам стоит проснуться, когда настало время идти спать, и когда мы готовы к работе. Так что, например, не ожидайте, что вы будете креативными в момент, когда мозг говорит вам, что пора идти спать. Постарайтесь найти время в течение дня, когда вы как можно более креативны. Возможно это раннее утро сразу после завтрака, прямо перед работой. Если вы начинаете вашу работу с чтения почты, новостей или просмотра социальных сетей, возможно, вам стоит изменить свои привычки. Попробуйте проводить мозговой штурм в течение первых пары рабочих часов. Возможно, это даст вам огромное преимущество. Если утро это не самое лучшее время для вас, попробуйте найти самое креативное время в течение дня или около полуночи, попробуйте быть креативным в это время. Конечно же это не означает, что вы можете быть продуктивными только в течении пары часов в день. Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 25 Креативное время используется для мозгового штурма и поиска хороших идей. Затем вы можете потратить остальную часть дня работая над этими идеями и выполняя продуктивную работу. К сожалению в течении дня есть не так много креативных часов. Мое самое креативное время это раннее утро, перед проверкой почты, в середине дня и поздняя ночь, прямо перед сном. Не осуждайте идеи. Это один из основных прицепов мозгового штурма. Нет плохих идей на данном этапе. Постарайтесь придумать так много идей, как только можете и не осуждайте их. Некоторые идеи могут выглядеть плохо или безумно, но они могут привести вас к другим отличным идеям. Если в мозговом штурме участвует несколько человек, то правило “не осуждайте” поможет всем открыть сознание и быть более креативным. Мы не хотим чтобы люди боялись говорить. Установите временные рамки и перерывы. Установите временные рамки для сессий мозгового штурма. Очень просто сбиться с пути и потерять направление размышлений. Вам не стоит уходить довольно далеко от размышления над оригинальными предположениями и целями проекта. Делайте перерывы каждые 15 минут. Встаньте, разомните ноги, пройдитесь по офису, выпейте чашку кофе и, возможно, в этот момент вас пронзит отличная идея. Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 26 Не надо слишком стараться. К сожалению не любая сессия мозгового штурма успешна. Если вы понимаете, что вы слишком сильно стараетесь выдавить из себя идею, просто остановите сессию. Возможно, вам стоит пройтись, подышать свежим воздухом или немного развлечься. Расслабтесь и вернитесь к этому вопросу чуть позже или на следующий день. Храните все. Записывайте, зарисовывайте и храните все, что вы делаете в течение сессии мозгового штурма. Есть очень много приложений и онлайн инструментов, которые могут помочь вам создать вашу карту мыслей или создать быстрые заметки. Так или иначе может быть здорово использовать только ручку с куском бумаги для записи и зарисовки различных идей. Я люблю зарисовывать свои идеи и хранить их в своем блокноте. Позже в этой главе мы подробнее поговорим о набросках. Обычно я использую Evernote или Google Drive для того, чтобы хранить все идеи, которые придут мне в голову. Не имеет значение, если я нахожусь в магазине, что-то фотографирую или сижу в интернете и делаю скриншоты страниц. Я Вдохновитесь. могу сохранить все идеи в одном месте. Конечно же, вдохновение это фундаментальная часть сессии мозгового штурма. Кстати, каждая наша мысль или идея появилась в нашей голове благодаря тому, что мы что-то видели или читали о чем-то или просто испытали что-то. Все это хранится в нашей памяти, и наш мозг создает верные связи между этими мыслями во время процесса создания идей. Не бойтесь искать вдохновение в другой дизайнерской работе. Я поговорю об этом поподробнее и позже я покажу вам список ресурсов, из которых я черпаю вдохновение. Делитесь своими идеямиyour. Последнее, но не по значимости: делитесь своими идеями с остальными! Покажите людям то, над чем вы работаете, ваши идеи или концепты дизайна. Соберите отзывы и улучшите свою работу. Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 27 Зарисовывайте свои идеи Зарисовка своих дизайнерских идей - это процесс визуализации ваших мыслей с использованием простых рисунков вы и записей. Если ранее никогда не зарисовывали свои идеи, возможно вам будет тяжело это делать по началу, но чем больше вы будете практиковаться, тем проще вам будет делать это. Существует очень много дизайнеров, которые никогда не зарисовывали свои идеи. Они всегда пропускали этот шаг. Да, вы можете создавать дизайн веб-сайтов без набросков. В любом случае я верю, что благодаря наброскам вы можете быть более креативными, и вы можете быстрее начать использовать свои идеи. Вы можете сделать небольшие прототипы веб-сайтов прежде чем перейти к реальной работе в Photoshop или браузере. Таким образом, вы сфокусируетесь на функциональности и ядре вашего контента, прежде чем вы начнете добавлять какие либо стили, улучшая внешний вид вашего сайта. Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 28 Есть пара правил, которые вам стоит помнить во время работы над скетчами(набросками): Не делайте их идеальными. Вы не должны быть художником, чтобы делать наброски, вы не должны их показывать всем. Рисуйте максимально быстро и сфокусируйтесь на концепте, а не на деталях. Добавляйте заметки. Некоторые наброски могут быть грубыми, так что не забывайте добавлять аннотации и описывать свои мысли. Это поможет вам понять ваши наброски дизайна в будущем. Поддерживайте организованность. Собирайте наброски для конкретного проекта и старайтесь, чтобы они все находились в одном месте. Так же было бы здорово, если бы вы завели блокнот в котором вы будете хранить все ваши наброски. Вы всегда сможете брать их с собой. Вы никогда не знаете когда к вам придут новые идеи. Чем делать наброски. Самое лучшее в набросках то, что вам ничего не нужно для того, чтобы зарисовать ваши идеи. У вас может быть ручка и листок бумаги. Это все что вам необходимо. Конечно, если вы хотите сделать наброски частью процесса создания дизайна, вы скорей всего захотите приобрести инструменты более высокого качества, чтобы все было соблюдено в одном стиле или даже захотите иметь шаблоны с макетом мобильного телефона или шаблоном браузера. Варианты бесконечны и вы найдете свой собственный способ, но у меня есть несколько рекомендаций с чего вы можете начать: Возьмите хорошую ручку. Я начал пользоваться невозможно стереть. Я ручками т.к. их верю, что не существует плохих идей в моем блокноте с набросками. Ни одна из них не заслуживает быть стертой и забытой. Храните все идеи, потому что вы никогда не знаете, когда одна из них может вам пригодиться. Вы можете рисовать наброски, используя различные цвета, такие как, например красный или зеленый для акцентирования внимания или выделения важных областей. Если вы ищете ручку хорошего качества, я рекомендую Faber-Castell (fabercastell.com). Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 29 Заведите блокнот для набросков. один Я использую ежедневник небольшой блокнот для набросков, который вы можете всегда носить с собой для зарисовки различных идей. Используйте его для записи от компании Action Вам необходим хотя бы случайных идей. Просто помните, что необходимо всегда добавлять дату и небольшой заголовок для каждой идеи, так вам будет проще Method. Разлиновка страниц идет точками, так гораздо проще рисовать различные формы. Это помогает мне делать быстрые и точные зарисовки. сослаться на них в будущем. Используйте шаблоны. Вы найдете некоторые готовые к использованию шаблоны для набросков в разделе Designers Area на моем веб-сайте. Используйте их для более продвинутых набросков и проектов, которые требуют серьезных размышлений и планирования. Вы даже можете зарисовывать готовые прототипы, о которых мы будем говорить в главе Прототипы и Макеты. Поиск вдохновения Почти невозможно создать что-то из ничего. Не имеет значение насколько вы креативны, ваш креатив в любом случае будет основан на вашем жизненном опыте и вещах, которые вы видите в окружающем вас мире. Конечно же, существует тонкая грань между вдохновением и копированием. Так или иначе, я верю, что каждый дизайнер должен быть готов оценить свои собственные идеи и решить можно ли их применять в различных ситуациях. Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 30 Лучший способ убедиться, что ты не копируешь чью-то работу - это никогда не фокусироваться только на одном конкретном источнике вдохновения. Старайтесь пользоваться различными ресурсами. Проведите небольшое исследование он-лайн и оффлайн и объедините все идеи. Так же, старайтесь каждый день просматривать работы других дизайнеров и сохранять себе то, что понравилось. Вы можете вернуться обратно в свою коллекцию любимых дизайнов перед началом работы над новым проектом. Помните, что вы используете все это ради вдохновения и генерации идей. Когда вы готовы начать работу над дизайном, отложите в сторону все эти ресурсы и позвольте вашему воображению начать работу. Воплощайте идеи в том виде, в котором вы их запомнили, а не так как вы их видели. Это поможет вам не ограничивать себя, вместо этого вы начнете применять свой собственный стиль и идеи, которые у вас есть. Позвольте вашему мозгу обработать вдохновение своим уникальным способом. Давайте посмотрим, где можно найти вдохновение. Вот некоторые из моих любимых ресурсов: Основное вдохновение Dribbble.com Dribbble представляет из себя огромное сообщество дизайнеров, которые делятся скриншотами дизайнов, над которыми они работают. Это мой самый любимый источник вдохновения. Дизайнеры ограничены размером изображения в 400х300 пикселей (или 800х600 для дисплеев retina), так что вы не сможете рассмотреть проект целиком, но это позволит вам сфокусироваться на небольших элементах дизайна, на таких как навигационное меню, строка поиска, дизайн логотипа, типография, иллюстрации и т.д.. Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 31 Gridspiration.com Это мой личный проект, в котором у меня перечислены самые популярные метки с сайта Dribble. designspiration.net Тут вы можете почерпнуть вдохновение от просмотра различных дизайнов. На этом сайте очень много изображений, иконок, и фотографий различных дизайнерских продуктов. CSS Галереи Есть целая куча CSS галерей, в которых вы можете найти огромное количество сайтов с превосходным дизайном со всего мира. Эти сайты называются “CSS galleries”, потому что они представляют из себя список вебсайтов, которые были написаны только с использованием HTML/CSS и они не используют flash.. CSSRemix.com CSSMania.com Awwwards.com Fltdsgn.com Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 33 Цвета Не знаете, какие цвета выбрать? На этих веб-сайтах вы найдете отличные цветовые схемы, которые вы с легкостью можете использовать в своих собственных проектах: color.adobe.com colourlovers.com Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 34 Типография Посмотрите вот эти веб-сайты из которых вы можете почерпнуть различные идеи по использованию типографии: typespiration.com typecache.com/fonts-in-use justmytype.co Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 35 Офф-Лайн Зачем ограничивать поиск использованием Он-Лайн ресурсов? Есть очень много примеров отличного дизайна, который окружает вас каждый день. Просто делайте фотографии всего, что вас заинтересовало. Постеры к фильмам. Некоторые постеры к фильмам являются настоящим искусством. Обратите внимание на типографию и цвета, которые были подобраны художниками мирового класса. Книги и журналы. Книги и журналы представляют из себя отличные примеры красивой типографии и дизайна страниц. Offscreen имеет magazine отличный (offscreenmag.com) дизайн страниц, которые могут служить вдохновением для ваших собственных проектов. Вывески и банеры. Даже простые знаки, которые вы видите каждый день, могут быть хорошим источником вдохновения. Посмотрите на вывески магазинов, дорожные указатели. Фотографируйте и коллекционируйте их. Художественные галереи и музеи. Если вы работаете над дизайном конкретного стиля, то вы возможно сможете почерпнуть вдохновение в тематической галереи исскуств или музейной выставке. Кофейни, магазины, рестораны. В этих местах очень много красивых вывесок, сезонных тем, меню и стоек заказа. Урбанистическая архитектура, города. Посмотрите на свой город. Возможно, система дорог в нем представлена в виде решетки, возможно, есть интересные здания, исторические места. Я большой фанат современных городов и превосходных инфраструктур. Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 37 Проект Зарисовка идей Это первая практическая часть в данной книге. Как я упоминал ранее, я покажу вам полный процесс создания проекта дизайна веб-сайта шаг за шагом. Я настоятельно рекомендую вам начать ваш собственный проект прямо сейчас и работать над его дизайном, следуя практической части книги. Вы увидите как все на самом деле просто, когда вы начнете делать это самостоятельно, и вы будете удивлены тому результату, который вы достигните к концу книги. Как только вы поймете, как все это работает и то, какие результаты вы можете получить, все, что вам будет сделать, это улучшить процесс и повторять его снова и снова в следующих проектах. Скоро это станет вашей привычкой, о которой вы даже не будете задумываться при создании дизайна для будущих сайтов. Вы готовы перейти к веселой части? Вы закончили ваши поиски, исследовали некоторые веб-сайты и вдохновились их дизайном. У вас есть представление о том, как должен выглядеть дизайн, но у вас в голове так же есть очень много различных идей. Вам нужно их упорядочить, взять лучшее из них и двигаться дальше. Шаг 1 Я обычно начинаю создание наброска с планировки расположения контента веб-сайта. Я знаю, какие подстраницы будут у меня на сайте и теперь мне нужно их верно расположить. Так пользователям будет проще пользоваться сайтом. Я начал с зарисовки нескольких вариантов домашней страницы. Мой план заключался в разделении домашней страницы на различные разделы во всю ширину, так что вся страница будет прокручиваться только вертикально. Это всего лишь макет домашней страницы. Чуть позже я представлю несколько вариантов каждого элемента. Я отметил красным основные кнопки, которые будут вести на другие подстраницы.. 38 Шаг 2 Мне нравится первый пример макета, в котором все разделы страницы расположены по порядку. Я немного расширю этот концепт и нарисую небольшую блок-схему, которая иллюстрирует, куда будут вести различные разделы, основываясь на карте сайта, которую я сделал ранее.. В этом концепте, форма обратной связи будет всплывать на экране, так что с ней легко будет работать, и не будет тратиться время на загрузку другой страницы. Помните, на данном этапе нет ничего хорошего и плохого. Зарисовывайте свои идеи, не стирайте ничего, продолжайте. Шаг 3 Как я сказал ранее, я буду делать индивидуальный набросок для каждой страницы. Давайте начнем с вводного раздела. Моя идея заключается в том, что я буду использовать фото в качестве заднего фона. Вот что я пытаюсь сделать: центрированное и выравненное по левому краю введение, одна или две кнопки, центрированное или выравненное по левому краю лого. У меня есть 4 классных концепта из которых я могу выбрать: Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 39 Шаг 4 Теперь перейдем к прорисовке остальных разделов домашней страницы. Мне очень понравился раздел сервисы и о проекте, которые я изобразил в первом наброске. Давайте изобразим что-то новенькое.. Мне кажется, что мне стоит лучше сфокусироваться на портфолио, отзывах и основном банере призыва к действию. Есть несколько различных идей того, как должны реагировать элементы на наведение на них курсором мышки и как они должны быть расположены. Когда дело доходит до отзывов, я хочу сделать огромную карусель с цитатами, в которой можно будет увидеть отзывы от трех или четырех пользователей. Я воспользуюсь тремя различными концептами: стрелки с двух сторон, простые пули и крупные профили клиентов. Позже я приму окончательное решение. Банер призыва к действию должен быть простым. Тут будет просто небольшой заголовок и одна кнопка. Мне нужно выяснить, как сделать его более заметным с помощью Photoshop.. Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 40 Шаг 5 Переходим к зарисовке идей для страницы блогов. Я хочу, чтобы страница с блогом была очень проста, с традиционным макетом “контент + сайдбар” и крупными избранными изображениями. Я так же изобразил несколько разных макетов того, как будет выглядеть запись в блоге. Я изобразил заголовок записи, дату записи и автора записи в нескольких разных вариантах. И конечно же, не забывайте о форме подписки по e-mail. Это очень важная часть блога и я хочу, чтобы она выглядела немного более привлекательной. Надо убедиться, что я использую всплывающие окна различной формы для привлечения внимания. Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 41 Шаг 6 В последнем шаге зарисовки идей я повеселюсь с различными кнопками. В итоге я хочу прийти к простому результату, который я смогу использовать в проекте. Я экспериментирую с различными формами кнопок. Я думаю, что было бы здорово, если бы это была большая кнопка со скрученными краями. Я так же прорабатывал возможность использования объемных кнопок, так что тут вы так же можете это видеть. Проект, который мы разрабатываем в данной книге, довольно прост и я понимаю, чего именно я хочу достичь, так что мои наброски довольно просты и мне не нужно прорабатывать огромное количество различных версий макетов. Так или иначе, есть некоторые проекты, в которых этап создания наброска дизайна может занять несколько дней. Если вы рисуете наброски вашего собственного проекта вместе со мной, я надеюсь вы почувствовали то, насколько гибкими вы можете быть по отношению к различным концептам дизайна вашего проекта. Потратьте немного времени и зарисуйте свои идеи. Нам это потребуется в следующих главах данной книги Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 42 ГЛАВА 4 Среда Разработки Работа со структурой файлов проекта На данном этапе у вас уже есть идеи по поводу того, как должен выглядеть дизайн вашего проекта. Вы уже сделали свои первые наброски и пришло время подготовить место для создания дизайна на вашем компьютере. Мы начнем эту главу с некоторых предположений того, как должны быть организованы файлы и папки проекта. Поддержание удобной структуры файлов проекта это не простая задача, особенно когда ваша креативность начинает брать верх над проектом и вы заканчиваете с кучей файлов дизайна разбросанных во всему жесткому диску. Вы можете решить эту проблему с помощью использования цельной структуры папок, это будет шаблон для всех ваших проектов. Наличие данной последовательности сохранит вам целую кучу времени, и каждый член вашей команды оценит это. Позже, во время процесса разработки дизайна вам, возможно, потребуются какие-то материалы от клиента, фотографии которые вы приобрели ранее или же старая версия ваших собственных файлов дизайна. Верная структура папок поможет вам в этом. Вам будет проще получить доступ к этим ресурсам. Так что поддержание файлов проекта в верной структуре поможет вам сохранить огромное количество времени и вам не придется ставить на паузу вашу креативную фазу пока вы ищите конкретный файл. Структура папок проекта Я работал над своей структурой проекта в течение многих лет. В самом начале это была просто папка, но со временем мой опыт рос, и моя структура папок проекта так же росла. На данный момент у меня довольно цельная схема, которая покрывает нужды большинства проектов. Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 44 Вы можете редактировать настраивать ее под ваши нужды, т.к. у вас возможно преобладают другие привычки и вы используете ресурсы, которые отличаются от моих. Посмотрите на эту структуру: Давайте я объясню роль некоторых из данных папок:: Project Name. Это главная папка проекта. Используйте имя, которое вы и ваша команда легко сможете заметить. Избегайте какие-либо не официальные имена или ники. С течением времени это может вас запутать. Если вы делаете несколько различных проектов для одного клиента, то было бы здорово, положить все файлы в папку “client folder”. Это место, в котором мы можем хранить все наши “производственные” файлы проекта. В некоторых проектах вы возможно будете работать не только над дизайном проекта. Было бы неплохо держать все это в одном месте и устанавливать соответствующие имена: “Logo Design”, “Print Design” и т.д. Assets. Мы можем использовать эту папку для группировки всех материалов, которые у нас ассоциируются с проектом. Это может быть логотип клиента, фотографии и какой-то контент веб-сайта. Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 45 Вы так же можете держать все ваши фотографии, материалы дизайна, такие как иконки, текстуры, шаблоны, которые вы купили для данного проекта, в данной папке. Через какое-то время вы возможно захотите внести какие-то дополнения и это очень сильно поможет вам быстро достичь набор иконок или текстуры, которые вы использовали ранее. Web Design. В данной книге мы сфокусировались на веб-дизайне, так я расскажу больше деталей относительно этой папки (папки других проектов дизайна могут выглядеть так же). Как вы можете видеть, у нас есть четыре подпапки: _Archive – никогда не удаляйте старые или неиспользованные файлы дизайна! Если у вас есть какие-то концепты дизайна, которые не были приняты клиентом, вы всегда можете поместить их в папку _Archive. Вы никогда не знаете, когда они могут вам пригодиться. Вы можете архивировать их, если хотите сохранить место на жестком диске. Я даже не могу сосчитать, сколько раз эта папка сохраняла мне жизнь. PSD – тут вы можете хранить все ваши файлы дизайнов проекта, такие как окончательные шаблоны, файлы руководств по стилю, каркасы и т.д. В некоторых проектах будет использоваться несколько PSD-файлов, так что вы возможно захотите сгруппировать их по версии или типу. Preview – в этой папке находятся те файлы, которые вы будете показывать остальным людям. Чаще всего это файлы в формате PNG, PDF или JPG. Вы возможно захотите раздилить файлы по ревизии, так вы сможете отслеживать прогресс. Sketches - сделайте фотографии ваших идей из блокнота с набросками и сохраните их тут. Скорей всего вам потребуется вернуться к своим идеям через какое-то время, вы сохраните очень много времени, если будете держать их в этой папке. Название файлов проекта Название файлов проекта имеет такое же значение, что и хорошая организация папок. Что бы верно назвать ваш файл проекта, представьте, что кто-то послал вам PSD документ, который является частью крупного проекта. Что бы вы хотели знать о нем? Это может быть следующая информация: Имя клиента. Тип проекта. Имя дизайнера и его инициалы. Номер ревизии. Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 46 Давайте посмотрим на несколько примеров корректного названия имен: CompanyName_HomePage.psd CompanyName_LandingPage-rev3.psd ProjectName_IntroPage-John-rev1.psd Конечно же, это просто примеры, но они покажут вам основную идею. Даже если у вас есть такие имена, которые просто высосаны из пальца, вы можете получить очень много информации из этого имени. Это очень полезно, особенно когда вы общаетесь посредством электронной почты или с помощью программы для управления проектами и у вас нет возможности посмотреть на PSD файл в браузере. Глядя на имя прикрепленного файла вы можете сохранить себе и вашей команде, целую кучу времени. Точно так же как и со структурой проекта, вы можете найти ваш идеальный тип имен файлов, которые вы будете использовать на протяжении всего проекта. Хорошей идеей было бы использование единого шаблона имен в течение многих лет, так вы легко сможете сослаться на ваши предыдущие проекты. Выбор программного обеспечения для создания дизайна Существует очень много вариантов, в которых вам будет необходимо выбрать, но прежде чем я перечислю самые популярные приложения, я хочу чтобы вы поняли, что программное обеспечение не имеет значение. Я использовал Photoshop на протяжении многих лет, но я никогда не рассматривал себя, как специалиста в Photoshop, т.к. я не использую большинство из его функций. Вам следует сфокусироваться на улучшении ваших навыков разработки дизайна, а не изучении одной конкретной дизайнерской программы. Те инструменты, которые мы сейчас используем для создания дизайна веб-сайтов, могут измениться в будущем, но сама техника создания дизайна сохранится на многие годы. Самое главное - это иметь навыки, которые не зависят от программного обеспечения и железа, которое вы используете. Если вы знаете, как правильно распланировать весь процесс создания дизайна, как выбрать типографию, сочетать цвета и разработать дизайн шаблона, тогда вы сможете создавать сайты с прекрасным дизайном, используя любые профессиональные инструменты. Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 47 Заметьте, что программное обеспечение, которое я выбрал на момент написания данной книги (начало 2015 года) и этот список может измениться в будущем, так что вы можете заглянуть на мой сайт за обновлениями моей книги (RafalTomal.com). Выбор программного обеспечения зависит от индивидуальных нужд и предпочтений. Чтобы показать вам некоторые более интересные опции я перечислю самые популярные приложения, которые привлеки мое внимание: Adobe Photoshop. Это приложение на протяжении многих лет является самым популярным для создания дизайна. Оно очень гибкое, и позволяет вам работать со многими слоями. Вы можете создать весь шаблон используя это приложение. В нем присутствует такие инструменты как направляющие, формы, эффекты или фильтры и вы так же можете импортировать изображения. Существует так же огромное количество ресурсов, которые так же доступны, такие как текстуры, кисти и плагины.. В наши дни самой крупной проблемой Photoshop является то, что в нем можно создавать только статический дизайн. Вы не можете так просто создать отзывчивый дизайн веб-сайта. По этому поводу ведется огромная дискуссия и в связи с этим Adobe выпустила новый инструмент для веба под названием Adobe Edge Reflow. Оно позволяет вам импортировать PSD файлы и довольно простым способом создавать различные версии дизайна для разных размеров экрана. Это расширение до сих пор находится на ранней версии, но оно довольно полезное. Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com 48 Adobe Fireworks. Для многих дизайнеров это приложение может быть отличной альтернативой Photoshop. К сожалению, на момент написания этой книги Adobe решила больше не продолжать разработку Fireworks; так или иначе, вы до сих пор можете купить самую последнюю версию и использовать ее. Adobe анонсировала, что они собираются выпустить некоторые новые инструменты, которые смогут заменить Fireworks, так что о?