Главная страница

Основы Web-Дизайна. Руководство. Руководство по дизайну простых и красивых Web-сайтов от идеи до готовых файлов проекта в Photoshop. Рафал Томал Основы


Скачать 26,72 Mb.
НазваниеРуководство по дизайну простых и красивых Web-сайтов от идеи до готовых файлов проекта в Photoshop. Рафал Томал Основы
АнкорОсновы Web-Дизайна. Руководство.pdf
Дата08.03.2018
Размер26,72 Mb.
Формат файлаpdf
Имя файлаOsnovy_Web-Dizayna_Rukovodstvo.pdf
оригинальный pdf просмотр
ТипРуководство
#5317
страница1 из 13
Каталогmrclose

С этим файлом связано 79 файл(ов). Среди них: Karateev-_Iz_nashego_proshlogo.pdf, IMG-20170121-WA0026.jpg, IMG-20170121-WA0024.jpg, SAV5.pdf, HK_PSG1.pdf, 5de9f8.jpg и ещё 69 файл(а).
Показать все связанные файлы
  1   2   3   4   5   6   7   8   9   ...   13

Основы
Web-Дизайна
Руководство
Полное руководство по дизайну простых и красивых Web-сайтов от идеи до готовых файлов проекта в Photoshop.
Рафал Томал

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

2
Основы Web-Дизайна. Руководство. Перевод Samigg. Для клуба Skladchik.com
У дизайнеров светлое будущее.
Всем привет. Меня зовут Рафал Томал и я графический дизайнер, веб- разработчик и автор данной книги.
Во-первых, я бы хотел поблагодарить вас за приобретение книги “Основы
Web-Дизайна. Руководство”. Теперь моей работой является то, чтобы вы окупили свои вложения.
Рафал Томал
Если вы следите за мной или читаете мой блог
, вы скорей всего так же знаете, что я предоставляю бесплатные инструменты для веб-дизайна, шаблоны и даю различные советы по созданию дизайна веб-страниц. Благодаря вкладу, который вы сделали, купив эту книгу, я смогу лучше помочь растущему сообществу веб-дизайнеров.
Моя долгосрочная цель - это предоставить гораздо больше ценной информации, не останавливаться только на данной книге. Я хочу постоянно учить вас тому, что я изучил, и делиться этой информацией используя простые для понимания курсы, учебники и электронные книги.
У дизайнеров светлое будущее. Все основные индустрии ценят хороший дизайн сильнее, чем когда бы то ни было. Дружелюбный интерфейс и опыт становятся особенностью рынка самых популярных брендов и продуктов на рынке. Сейчас самое лучшее время, для того чтобы быть дизайнером.
Не имеет значение, что изобретут дальше, этой вещи всегда нужен будет дизайн. Технологии могут измениться и, возможно, мы будем использовать совершенно другие инструменты, чем те, которые мы используем сегодня, но теория дизайна останется той же самой.
Я очень рад тому, что могу поделиться с вами некоторыми своими методами и техниками создания веб-сайтов. Я верю в то, что обучая, вдохновляя и помогая другим веб-дизайнерам, мы можем сделать небольшой вклад в развитие веба и мы сделаем его лучшим местом для нас всех.
Если у вас есть какие-то вопросы, вы всегда можете найти меня в
Twitter
,
LinkedIn
,
Google+
, или написать мне на почту
Наслаждайтесь прочтением книги и спасибо за поддержку!

3
Основы Web-Дизайна. Руководство. Перевод Samigg. Для клуба Skladchik.com
Содержание
Г Л А В А 1 :
Введение ........................................................... 5
Г Л А В А 2 :
Начало работы .................................................. 12
Г Л А В А 3 :
Идеи и Вдохновение ......................................... 25
Г Л А В А 4 :
Среда Разработки .............................................. 44
Г Л А В А 5 :
Типография ..................................................... 63
Г Л А В А 6 :
Цвета ................................................................... 98
Г Л А В А 7 :
Прототипы и Макеты ..................................... 126
Г Л А В А 8 :
Соединяем Все Вместе ..................................... 163
Г Л А В А 9 :
Ресурсы и Дополнительная Литература
.......... 202

Г Л А В А 1
Введение

5
Привет Мир!
Я сделал свой первый сайт в 2002 году. С тех пор я разработал сотни разнообразных веб-сайтов: блоги, персональные сайты, сайты для малого бизнеса, сайты для крупных корпораций, организаций, журналов, музыкальных брендов, сайты для медицинских компаний, санаториев, больниц и, конечно же, для своих собственных проектов или сайты портфолио.
В некоторых из этих проектах работает 10 человек, в некоторых только я один. Порой мне приходится иметь дело с 5-ю менеджерами и мне необходимо получить зеленый цвет от них всех. С другой стороны у меня были проекты, в которых я сам был и боссом и дизайнером, так что мне нужно было получить зеленый свет только от себя самого (эти проекты были самыми сложными…).
Я понял, что процесс создания дизайна, у разных проектов с разными целями и требованиями, абсолютно одинаков.
Мой процесс разработки дизайна развивался и рос в течение многих лет. Вначале все было хаотично, я очень легко отвлекался на случайные идеи и вдохновения, которые становились основой проекта.
Мой ранний процесс создания дизайна выглядел так:

6
Так делать неправильно. Такой подход потребляет огромное количество энергии, и конечный дизайн чаще всего был довольно противоречивым и никогда не имел четкой структуры. Я понял, что мои навыки дизайнера ничто без верного рабочего процесса.
Хороший процесс проектирования дизайна поможет вам двигаться в верном направлении, стать более креативным, поможет вам найти лучшие идеи, получить больше заказов от ваших клиентов и даже позволит вам делать вашу работу быстрее и более эффективно.
В этой книге я покажу вам свой нынешний процесс разработки дизайна, от идеи и вдохновения до создания конечного проекта дизайна веб-сайта, который можно будет передать веб- разработчикам для дальнейшей верстки
:
Конечно, мой нынешний подход не безупречен и никогда таким не будет. Тем не менее, я обнаружил, что это наиболее эффективный способ создания веб-сайтов и я использую его уже очень давно, такой подход дает мне отличные результаты. Возможно, у вас есть свои собственные привычки, которые отлично у вас работают, это здорово! Относитесь к моему процессу как к основе. Не стесняйтесь разбавлять его своими собственными методами и улучшать его.
Есть еще пара слов, которые мне хочется сказать в водной главе, а затем мы перейдем к основному материалу. Мы запачкаем наши руки разработкой реального дизайна

7
Чем мы тут занимаемся?
Я хочу взять вас за руку и шаг за шагом показать весь процесс создания дизайна для веб-сайта. Самый лучший способ сделать это - это взять для примера образец проекта. Я выбрал стандартный шаблон веб-сайта в качестве тестового проекта, так что техники и примеры, которые мы будем рассматривать, так же легко будет применить для всех видов дизайна.
Из этого шаблона вы скорей всего сделаете тему для WordPress или статическую страницу и продадите ее на таком сайте как ThemeForest.net или CreativeMarket.com.
Это не проект, который я сделал для своего клиента или что-то в этом роде. Этот проект был спроектирован специально для этой электронной книги, так что вы можете использовать его как хотите без беспокойства о лицензиях. Можете редактировать и делать с этим проектом все что угодно. Самое глав- ное это сам процесс и то, что вы учитесь тому, как создавать подобные проекты.
Мы начнем с постановки целей и проведения базового исследования проекта. Далее вы узнаете, где черпать дизайнерское вдохновение и как переводить ваши идеи в наброски на бумаге. Далее настроим папки проекта и создадим файл первого шаблона в
Adobe Photoshop. Далее поработаем над конкретным проектом, выберем типографию и цвета и затем объединим эту информацию вместе в руководстве по созданию стиля для веб-сайта.
В конце мы сделаем прототипы каждой страницы и создадим конечный макет дизайна в Photoshop..
Каждый шаг подкреплен теорией дизайна и детальным описанием того, что мы делаем. Так вы научитесь, шаг за шагом, и вы сможете применить ваши знания в различных случаях в ваших собственных ситуациях.
Этот проект был разработан
специально для данной книги. Мы шаг за
шагом пройдем весь процесс его создания.

8
Несмотря на все это вы так же найдете в этой книге огромное количество отличных советов и увидите, как надо работать над дизайном. Вы сможете применить их к вашей работе независимо от того над каким проектом вы работаете.
Это словно сидеть рядом со мной и смотреть, как я работаю над проектом, и говорить о нем часами. Звучит неплохо?
Типография
Цвета
Макет

9
Для кого эта книга?
Эта книга отлично подходит как для дизайнеров, так и для людей, которые хотят быть дизайнерами, но не знают с чего начать. Веб-разработчики так же могут найти ее полезной, если они захотят узнать больше о дизайне и о том, как работают дизайнеры.
Если вы дизайнер, эта книга может вам помочь доработать и улучшить ваш нынешний процесс создания дизайна. Вы так же можете найти различные способы и решения, которые вы сможете применить к вашим техникам.
Если вы новичок в дизайне, и хотите стать дизайнером, то эта книга даст вам цельную структуру и покажет верный путь, по которому вам стоит идти чтобы стать дизайнером. Вы изучите основы теории дизайна и вы будете готовы двигаться дальше и начать самостоятельно изучать новые материалы.
Если вы думаете, что у вас недостаточно таланта для того чтобы быть дизайнером, позвольте мне раскрыть вам секрет: все дизайнеры были любителями в самом начале. Мой первый веб- дизайн был ужасен. Вы бы смеялись над ним и надо мной, если бы вы увидели его сегодня. В самом начале я делал все ужасно, но после сотни созданных дизайнов я наконец-то начал понимать то, что я делаю.
Так что скорей всего вам необходимо будет потратить немного времени, но вам надо откуда-то начать. Лучше всего начинать с использования хорошей структуры. Таким образом, вы начнете приобретать полезные привычки и сфокусируетесь на самых важных элементах.
Люди говорят, что вам нужен талант, для того чтобы быть дизайнером, однако я считаю это способностью отличить хороший дизайн от плохого. Если вы можете это сделать, и вы хороши в этом, это значит, что у вас есть самый важный навык, который необходимо иметь чтобы стать отличным дизайнером.
Видите ли вы разницу в этих
двух дизайнах? Если вы
думаете, что находящийся
справа дизайн выглядит
лучше, значит, у вас есть все
что нужно для того, чтобы
стать хорошим дизайнером.

10
Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com
Ключевой особенностью является понимание того, что веб-дизайн это не только хорошая графика. Если вы просто художник, то это вам не поможет. Создание дизайна веб-сайтов очень часто требует анализа информации, поиска решений основных проблем взаимодействия, проведение исследований.
В итоге все должно получиться практичным и универсальным.
Что вам необходимо?
Все что вам нужно это Adobe
Photoshop, но вы можете использовать другие программы.
Все скриншоты были сделаны в версии CC (14.0), но даже если вы используете CS 4.0+, вы сможете использовать данные шаги.
Я использую PS для создания всех своих макетов дизайна, но не программа делает за меня всю работу. Я научу вас универсальным техникам, которые можно использовать во всех графических редакторах и даже при создании дизайна непосредственно в браузере.
Так или иначе, обратите внимание, что вы приобрели эту книгу вместе с файлами проекта, вам нужен будет Photoshop для того, чтобы открыть их.
Все файлы проекта могут быть открыты только с использованием программного обеспечения Adobe.
Учимся делая!
Лучший способ обучения - это практика. Я не хочу чтобы вы просто пробежались по этой книге, я хочу, чтобы вы делали свой собственный проект параллельно с чтением данной книги.
Некоторые главы имеют значок
В них мы займемся практикой.
Если вы купили эту книгу со всеми файлами проекта, вы можете изучить их и разобрать всю мою работу. Если у вас еще нет файлов проекта, вы всегда можете авторизоваться на сайте
Designers Area и загрузить их оттуда.
Окей, давайте начнем!

Г Л А В А 2
Начало
Работы

12
Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com
Процесс создания дизайна
Процесс создания веб-сайта может быть довольно сложным, над его работой может работать несколько человек (UX-Дизайнер, визуальный дизайнер, копирайтер) и может требоваться огромное количество исследований, если вы работаете над крупным проектом с огромным бюджетом.
Мы сфокусируется на небольших проектах, в которых вы являетесь единственным дизайнером и несете ответственность за все аспекты дизайна.
Хорошей идеей будет использовать прогрессивный процесс разработки, в котором каждый шаг будет отделен различными вехами. Это позволит вам остановиться в любой момент, вы сможете дать оценку вашей работе или получить согласование от клиента.
Мой процесс требует создания руководства по стилю прежде чем перейти к созданию дизайна интерфейса веб-сайта. Так вы будете точно знать, какие шрифты и цвета вам стоит использовать в вашем проекте и как быть более единообразным в создании файлов вашего дизайна.
Конечно, иногда вам надо будет возвращаться обратно на шаг и корректировать или обновлять что-то, но руководство по стилю поможет вам держать все в одном стиле.
Вот так выглядит мой процесс создания дизайна:

13
Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com
Планирование (Следующая страница)
Описание проекта, требования и цели, которые помогут определиться с проектом, над которым вы работаете, прежде чем вы перейдете к креативной части создания дизайна. На этом шаге вам так же нужно принять несколько важных решений, о том, как работать над проектом, найти вашу целевую аудиторию, установить ключевые точки и создать карту сайта.
Для креативных людей очень соблазнительно выглядит возможность пропуска этого скучного шага и переход сразу в часть про дизайн. Но как только у вас появится больше опыта, вы поймете, как важно потратить немного времени и выполнить домашнюю работу.
Мозговой штурм и наброски. (Глава 3)
Это момент, когда вы ищите вдохновение, проводите небольшие исследования, делаете различные наброски и делаете заметки всех новых идей, которые приходят вам в голову. Дизайнеры думают образами, так что зарисовка идей поможет вам сохранить ваши мысли именно в том виде, в котором вы их представили.
Типография. (Глава 5)
Я верю в то, что типография является самым важным визуальным элементом каждого веб-сайта. Я обычно начинаю создание дизайна с типографии.
На данном шаге вы определитесь с базовым стилем типографии в руководстве, которое вы будете использовать в качестве шпаргалки до конца проекта. Руководство по стилям включает в себя основные шрифты, которые вы выбрали и примеры их использования для заголовков и стилей параграфов. Некоторые проекты могут требовать довольно сложных руководств, так что потратьте время и поработайте над типографией.
Цвета. (Глава 6)
Мы выберем основной цвет, вторичный цвет, цвет заднего фона и активные цвета для своего проекта и сохраним их в файле цветовой палитры. Тоже самое, что и с типографией, мы определим цветовую палитру, которая поможет нам поддерживать однородный дизайн во всех файлах.
Прототип и макет. (Глава 7)
В данном шаге вы планируете макеты всех основных веб-страниц и рисуете прототипы, которые помогут визуализировать интерфейс веб-сайта и принять важные решения по поводу макета.
Окончательный шаблон дизайна. (Глава 8)
Пришло время соединить все элементы дизайна вместе и воспользоваться руководством по типографическим стилям, цветовой палитрой, прототипами и создать ваш полноценный макет графического дизайна.

14
Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com
Планирование проекта
Каждый проект по созданию дизайна требует планирования. Это первый и самый важный шаг в нашем процессе, т.е. в этот момент мы принимаем самые важные решения касающиеся всего проекта.
Вам нужно запомнить, что дизайн это гораздо больше, чем то, что вы видите. Тут есть над чем подумать и что планировать, прежде чем вы откроете Photoshop.
Подготовка хорошего описания проекта, установка основных целей и планирование процесса, с помощью которого эти цели будут достигнуты, поможет вам сохранить много времени и поможет вам избежать проблем в дальнейшем.
Допустим, вы работаете над своим собственным проектом, например над дизайном темы. В данном случае описание вашего проекта будет идеей, которую вы будете держать в голове, запишите ее в простой текстовый документ или даже лучше создайте зарисовку в вашем блокноте.
Вот так начинается каждый проект дизайна.
Мы создаем тему для веб-сайта и у нас нет клиента, который дает нам какие-то цели и у которого есть некоторые ожидания. Нам нужно самостоятельно спланировать их на наше усмотрение. Этот процесс довольно часто является более сложным, т.к. мы можем не знать, откуда начать или какие у нас цели.
С другой стороны мы гораздо более гибкие, и обычно наше воображение это единственный барьер. Это отличная ситуация для всех креативных людей, которые хотят превратить множество своих идей в жизнь.
Во время процесса планирования мы воспользуемся этими базовыми элементами:
Описание проекта.
Цели проекта.
Целевая аудитория
Ожидаемые результаты.
Управление проектами.
Карта сайта.
Сделанный на заказ дизайн веб-сайта для клиента немного отличается от
шаблонного дизайна. В этой книге мы сфокусируемся на создании шаблонов, так что
давайте опустим все детали по поводу работы с клиентами и описания
предложений по проекту. То, что касается бизнеса в создании веб-
сайтов является довольно интересной темой для новой книги ;-)

15
Основы Web-Дизайна. Руководство. Перевод от Samigg для клуба Skladchik.com
Давайте я объясню и опишу каждый из этих пунктов, так вы сможете лучше познакомиться с проектом из нашей книги и увидеть как может выглядеть готовый план проекта.
Описание проекта
Вы должны начать написание описания проекта с ответа на вопрос: «Что мы создаем?». Это поможет вам сфокусироваться на том, что конкретно из себя представляет ваш проект. Это интернет магазин? Кофейня? Шаблон блога? Ответьте на этот вопрос парой предложений.
Это поможет вам очистить ваш ум и определить тип проекта.
Это действительно помогает, когда вы приглашаете в проект кого-то еще. Таким способом вы можете очень просто описать новый проект для других людей. Когда вы объясняете и описываете, какую либо идею другому человеку, то вы смотрите на нее с другой перспективы. Это заставляет вас думать усерднее и перепроверять имеет ли идея смысл.
Чем менее технически подкован человек, тем лучше. Да, ваши идеи должны быть очень простыми, так что у вас не будет проблем в объяснении их кому бы то ни было.
  1   2   3   4   5   6   7   8   9   ...   13

перейти в каталог файлов
связь с админом