Веб-дизайн для недизайнеров - Трэйси Осборн - E-Book

Веб-дизайн для недизайнеров E-Book

Трэйси Осборн

0,0

Beschreibung

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

Sie lesen das E-Book in den Legimi-Apps auf:

Android
iOS
von Legimi
zertifizierten E-Readern
Kindle™-E-Readern
(für ausgewählte Pakete)

Seitenzahl: 90

Veröffentlichungsjahr: 2023

Das E-Book (TTS) können Sie hören im Abo „Legimi Premium” in Legimi-Apps auf:

Android
iOS
Bewertungen
0,0
0
0
0
0
0
Mehr Informationen
Mehr Informationen
Legimi prüft nicht, ob Rezensionen von Nutzern stammen, die den betreffenden Titel tatsächlich gekauft oder gelesen/gehört haben. Wir entfernen aber gefälschte Rezensionen.



Трэйси Осборн
Веб-дизайн для недизайнеров

Технический редактор Н. Хлебина

Литературный редактор О. Морозова

Художники В. Мостипан, Е. Трефилов

Корректоры Н. Сидорова, Г. Шкатова

Верстка Л. Соловьева

Трэйси Осборн

Веб-дизайн для недизайнеров. — СПб.: Питер, 2022.

ISBN 978-5-4461-1917-2

© ООО Издательство "Питер", 2022

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

Оглавление

Об авторе
Благодарности
Предисловие
Введение
Глава 1. Если из всех глав выбирать одну, то лучше эту
Внешний вид — ничто, функционал — всё
Готовые решения по улучшению дизайна
Глава 2. Теория и принципы веб-дизайна
Раздел 2.1. Сетка
Готовые решения
Живой пример
Раздел 2.2. Цвет
Готовые решения
Живой пример
Раздел 2.3. Типографика
Основы типографики
Принципы типографики
Готовые решения
Живой пример
Раздел 2.4. Белое пространство
Базовые тезисы о белом пространстве
Немного теории
Готовые решения
Живой пример
Раздел 2.5. Макет и иерархия
Живой пример
Раздел 2.6. Текст
Живой пример
Раздел 2.7. Пользовательский опыт
До начала дизайна
В процессе дизайна
После запуска проекта
Готовые решения
Живой пример
Раздел 2.8. Изображения и художественные элементы
Основы
Готовые решения
Живой пример
Раздел 2.9. Дополнительные нюансы
Начинайте с простого
Ориентируйтесь на «правило третей»
Избегайте чистого черного
Свет должен падать сверху
Контраст подчеркивает главное
Меняем фон — изменяем цвет
Будьте внимательны при наложении текста на изображение
Советы при проектировании порядка действий пользователя
Глава 3. Процесс дизайна и выработка профессионального видения
Раздел 3.1. Поиск вдохновения
Раздел 3.2. Планирование
Раздел 3.3. Прототипы
Создание вайрфрейма
Мокап вашего дизайна
Раздел 3.4. Получение обратной связи
Оценка дизайна свежим взглядом
Рекомендации по сбору обратной связи
Раздел 3.5. Код дизайна
Не старайтесь быть оригинальным
Используйте фреймворк CSS
Не забывайте: дизайн должен быть отзывчивым
Уделите внимание размеру сайта
Используйте аналитику
Глава 4. Предубеждения
Глава 5. Дополнительные ресурсы
Книги
Блоги и онлайн-журналы
Онлайн-курсы
Примеры для вдохновения
Ресурсы для работы с цветом
Ресурсы шрифтов
Ресурсы изображений
CSS-фреймворки
Веб-аналитика
Создание вайрфреймов
Сбор обратной связи
Заключение
Ссылки

Об авторе

Трэйси Осборн — дизайнер, разработчик и предприниматель из Торонто, Канада. Сайты она начала создавать уже в 12 лет и всегда испытывала тягу к компьютерам, интернету и всем предоставляемым ими возможностям.

Трэйси окончила Калифорнийский государственный Политехнический университет в Сан-Луис-Обиспо, получив степень бакалавра в области искусства и дизайна со специализацией в сфере графического дизайна. После она пять лет проработала дизайнером, освоила программирование и в конечном итоге запустила собственный стартап WeddingLovely.

Она регулярно участвует в технологических конференциях, в том числе выступала с основными докладами на O’Reilly’s Fluent Conference 2016, EuroPython 2017 и DjangoCon US 2017.

Благодарности

Эта книга создавалась несколько лет. Благодарю всех, кто слушал мои презентации, давал обратную связь, поддерживал идеи и ­помог воплотить этот проект в жизнь.

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

Отдельно благодарю издательство No Starch Press за то, что рискнули и добавили эту книгу в свою коллекцию. С их помощью «Веб-дизайн для недизайнеров» охватит гораздо большую аудиторию, чем я могла ожидать. Я глубоко признательна им за сотрудничество и все те бесчисленные часы, проведенные в стремлении сделать лучше книгу и ее содержание.

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

Предисловие

Всякий раз, погружаясь в мир Семантической паутины1, я замечал, что существует два фундаментально разных подхода. Один из них основан на утверждении, что абсолютно все во Вселенной должно иметь теоретическое объяснение. Второй же подход не такой жесткий, он позволяет сосредоточиться лишь на самых распространенных явлениях — относящихся к людям, местам, событиям и т.п. Обычно большего и не требуется. Согласно данной теории, лишь около 80 % явлений в этом мире имеют фактическое применение. Попытка же систематизировать оставшиеся 20 % потребует несоизмеримо бóльших усилий.

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

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

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

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

Скажите новой книге: «Здравствуй, веб-дизайн!»

— Джереми Кит, Автор Resilient Web Design и сооснователь Clearleft

1Семантическая паутина — надстройка над существующей Всемирной паутиной, придуманная для того, чтобы сделать информацию удобной как для машинной обработки, так и для чтения обычным человеком.

Введение

Это не типичная книга для начинающего дизайнера.

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

Но что, если вам нужно изучить дизайн лишь на столько, сколько будет достаточно для продвижения своей «недизайнерской» карьеры?

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

Аналогично тому, как дизайнерам полезно немного уметь программировать, программисты (а также маркетологи, продакт-менеджеры, продажники и т.д.) могут получить пользу от изучения основ дизайна. Даже если вы не специа­лизируетесь в дизайне, вам все равно приходится этим заниматься в той или иной степени — будь то работа над презентациями, создание интерфейсов для программ и проектов или разработка личного веб-сайта. Если вы работаете с дизайнерами, то наличие некоторого опыта в этой области позволит более уверенно строить общение с ними и понимать их работу.

«Веб-дизайн для недизайнеров» не ставит своей целью сделать вас дизайнером — книга позволит вам чувствовать себя более комфортно, когда придется заниматься дизайном.

При этом книга сосредоточена исключительно на визуальной составляющей: вы не найдете здесь HTML, CSS, разработки пользовательского интерфейса или описания кода. Мы будем работать над совершенствованием ваших дизайнерских решений и, что чуть ли не более важно, покажем, как заставить их работать лучше.

Дизайн подразумевает решение задач. Даже когда кажется, что мы просто делаем вещи «более красивыми» (например, ­создавая презентацию), мы на самом деле стремимся облегчить чтение и восприятие, сделать информацию более привлекательной. Мы действительно хотим, чтобы наши веб-интерфейсы были более понятны и просты — хороший дизайн имеет ключевое значение для получения и удержания клиентов и ­повышения эффективности проектов.

В этой книге мы исследуем не только теорию (и причины, лежащие в основе некоторых принципов), но также познакомимся с готовыми решениями — «горячими клавишами» для некоторых распространенных дизайнерских задач. Например, я расскажу немного о теории цвета, попутно дополнив этот материал ресурсами, которые помогут вам выбирать готовые великолепные палитры, не создавая их с нуля. Подобная схема обучения будет сохраняться на протяжении всей книги — множество готовых решений и некоторые пояснения, почему эти решения работают.

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

Приступим!

— Трэйси

Глава 1. Если из всех глав выбирать одну, то лучше эту

ЕСЛИ К ВАМ В РУКИ ПОПАЛА ЭТА КНИГА, а время есть только на прочтение одной главы, прочтите именно эту. Почему? Потому что она показывает кратчайший путь для совершенствования своих дизайнерских решений.

Внешний вид — ничто, функционал — всё

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

В качестве примера возьмите Craigslist. В течение многих лет дизайн ­сайта практически не менялся и выглядит весьма устаревшим (рис. 1-1).

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

Без всяких ярких эффектов и отвлекающих баннеров Craigslist ­максимально упрощает как размещение объявлений, так и их поиск.

Рис. 1-1. Craigslist по-прежнему лидирует в своем сегменте, даже не имея современного дизайна

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

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

Хорош ли дизайн? Измеряйте

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

• заполняли форму;

• просматривали страницу в среднем не менее 30 секунд;

• подписывались на новости;

• оставляли комментарий.

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

Показывайте свой дизайн — и пусть оценивают!

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

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

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