Как создать и переделать свой сайт. Правильный подход и передовые техники разработки.
Я бы сказала, что это не книга, а подборка практически полезных материалов по различным аспектам веб-дизайна! 11 разделов, 11 тем, собранных под одной обложкой. Каждый раздел написан ведущим специалистом в своей отрасли.
Целевая аудитория книги - разработчики сайтов, мобильных приложений, руководители веб-проектов.
Если вы не программист, читать некоторые разделы будет явно тяжело. На мой взгляд, самое правильное использование книги - это приобретение ее руководителем веб-студии или digital- агентства для своих сотрудников. Будь то дизайнер, программист или проект-менеджер - глава на тему соответствующей компетенции будет несомненно полезной.
Я данную книгу прочла целиком, потому что пообещала издателям, но читала долго. Весьма расширила свой кругозор в области разработки мобильных приложений :-).
Перечислю основные разделы и некоторые вопросы, на которые можно найти ответы в книге :
1. «Бизнес-подход в переделывании сайтов», Автор: Пол Боуг, Рецензент: Коллис Тайед
Как определить пришло ли время переделывать сайт? Как не принести сайт в жертву стиля и тренда? Как создать программу непрерывной работы по улучшению сайта?
«Раз в три месяца мы устраиваем с заказчиками встречи, где обсуждаем, как можно усовершенствовать их сайты. Также мы проводим ежегодный анализ сайта и предлагаем варианты его усовершенствования на будущий год.»
Вы сталкивались с такими предложениями от разработчиков? Лично я - нет.
Простые и полезные советы, например такой: в основе веб-стандартов лежат простые принципы - мы должны разделять контент, дизайн и логику работы сайта. Одним из многих преимуществ этого подхода является то, что это облегчает изменение сайта в будущем.
Как планировать мобильное будущее сайта? На эту тему также найдется полезная информация.
2. «Выбор платформы: технические решения для переделки вашего сайта», Автор: Рэйчел Эндрю, Рецензенты: Райан Карсон, Харли Финкельштейн
Почти всем сайтам требуется та или иная форма управления контентом. Это может быть обновление страниц, добавление продукта в магазин или редактирование текста в приложении. Из всех сайтов наиболее склонны к расширению рамок функционала онлайн-магазины. Какая CMS лучше? Ответы в этом разделе.
4. «Погружение в HTML5», Автор: Бен Шварц, Рецензент: Рас Уикли
Очень полезный материал о роли стандарта ARIA и производительности браузеров. Accessible Rich Internet Applications всегда входили в состав современной технологии HTML. Стандарт создан для того, чтобы сделать сайты и приложения более доступными для пользователей с ограниченными физическими возможностями, которые полагаются на программы, читающие вслух текст с экрана.
Узнайте как создавать такой код. Пробуйте новые теги, это гарантированно поднимет вам настроение. Использование стандарта ARIA дело благородное - это поможет многим пользователям с ограниченными возможностями свободно использовать ваш сайт.
5. «Меняем стиль, переписываем код и преображаем сайт с помощью CSS3», Автор: Дэвид Стори, Ли Веру, Рецензент: Тэб Аткинс, мл.
В этом разделе вы узнаете как с помощью изменения CSS сократить количество изображений, HTTP-запросов, чтобы создать более гибкий и легкий в поддержке стиль.
Сайты не могут выглядеть одинаково в разных браузерах, хотя клиенты и дизайнеры старой школы часто не согласны с этим. По правде сказать, только вы, ваш клиент и ваши коллеги будут проверять сайт в различных браузерах. Ваши посетители обычно используют один из них. И вы просто счастливчик, если они вообще знают, что такое браузер.
Если сайт не разваливается в их браузере, они не станут включать четыре разных для сравнения, а останутся с тем, который есть. Ни один человек не пожалуется на сайт из-за того, что у того нет закругленных углов, теней или градиентов. До тех пор, пока вы предусматриваете надлежащую нейтрализацию ошибок, никто не заметит что что-то не так.
Разметка с помощью тянущихся блоков Flexible Box Layout (или Flexbox) - новая блочная модель, оптимизированная под дизайн интерфейса. Этот инструмент имеет большие возможности и перспективы в мультиплатформенном пространстве. Он помогает создавать гибкий дизайн, который адаптируется к любой среде: изменениям кода, разному контенту и разным видам устройств.
6. «Повторное открытие JavaScript: фишки и приемы для замены сложного jQuery», Автор: Кристиан Хейлманн, Рецензент: Пол Айриш
Сейчас идет битва между теми, кто везде применяет jQuery или JavaScript, и теми, кто работает исключительно с CSS. Хороший веб-разработчик почерпнет достоинства из всех технологий, а не будет приверженцем какой-то определенной. При смешении и подгонке различных веб-технологий (HTML, CSS, JavaScript) можно создавать совершенно потрясающие вещи всего в нескольких строках кода.
7. «Техники для создания лучшего пользовательского опыта», Автор: Дмитрий Фадеев, Рецензент: Джошуа Потер
Опыт использования (UX, userexperience) сегодня - настолько горячее и модное словечко, что есть уже ряд специальностей, которые включают этот термин в своем названии.
Раздел представит ряд техник для улучшения форм регистрации на сайте. Хорошо продуманные с точки зрения юзабилити формы помогут вызвать первоначальный интерес к продукту и создать непрерывный процесс регистрации после его выпуска.
Дизайн интерфейсов - это копирайтинг.
Институт Baymard провел исследование по удобству пользования и выяснилось, что слово ≪continue≫ (≪продолжить≫) в интерфейсе онлайн-магазинов сбивало с толку трех из десяти испытуемых. Почему так произошло? Все дело в контексте. Для тех, кто добавил товар свою корзину и хочет перейти к заказу, ≪continue≫ означает ≪continue to checkout≫ (≪перейдите к заказу≫). Для остальных, кто собирается выбрать еще другие товары, то же самое слово означает ≪продолжить выбор покупки≫. Всегда поясняйте значение надписи, если оно привязано к контексту. Так, вместо ≪continue≫ используйте более описательное выражение, как ≪continue shopping≫ (≪продолжить покупку≫) или ≪continue to checkout≫(≪перейти к оформлению заказа≫). Ясность лучше краткости.
Отдельного внимания заслуживает Интерактивный сторителлинг. В качестве примера в книге приведен ≪Spent≫, сайт добровольных пожертвований Городского министерства города Дарема (США). Просить пожертвования нелегко, так почему бы не превратить этот процесс в игру? ≪Spent≫- это веб-игра, в которой вы исполняете роль обычного безработного американца. Перед вами стоит задача -прожить один месяц без денег. В процессе вы должны искать работу, смотреть за детьми и пережить множество небольших кризисов. Успешным исходом считается заставить играющего проникнуться безработными и сделать пожертвования в конце игры.
Как наилучшим образом организовать меню с точки зрения юзабилити? Вы думаете что пиктограммы предназначены только для приложений? Их можно также использовать их в меню выбора продукции. Например, магазин по продаже винтажных очков Bonlook использует пиктограммы в своем выпадающем меню и дает пользователю возможность пролистать его по формам, которые им нравятся. Формы очков нелегко описать словами, но изображения представляют их сразу же.
Магазин по продаже винтажных очков Bonlook[/caption]
Анти-UX: темные модели интерфейсов. Пользователи совершают действия, которые они ни за что бы не сделали, владей они достаточной информацией. Темные модели всегда стараются скрыть ее. Но если вы применяете их намеренно, то должны также знать, что вы переходите грань между убеждением и обманом. Обман своих пользователей и клиентов никогда не был и не будет хорошей долгосрочной стратегией.
7. «Дизайн будущего: использование Photoshop», Автор: Марк Эдвардс, Рецензент: Джон Хикс
С бурным ростом мобильных устройств правила игры изменились. Когда вы создаете сайт, то не можете предположить, на каком из устройств он будет просматриваться, каков будет размер экрана или разрешение. Как заложить масштабируемость?
Экспорт всех изображений, необходимых для создания сайта или приложения, возможно, не самое интересное занятие в процессе разработки дизайна. Это нудная работа, отнимающая много времени. Сохранение изображений во многих масштабах, которые требуют iOS, Android, Windows Metro и другие платформы, еще усложняет задачу. Но есть способы упростить или автоматизировать экспорт. В разделе описаны техники экспорта изображений из Photoshop.
8. «Переделка сайта с использованием индивидуальности», Автор: Аарон Уолтер, Рецензент: Дениз Джекобс
В мире, ориентированном на потребление, где нам ≪толкают≫ товар, а компании, вместо того, чтобы отдавать только берут, мы жаждем реального человеческого общения, вежливого и обоюдного. Некоторые компании поняли это и сейчас налаживают эмоциональные связи со своими клиентами с учетом их индивидуальности.
Сигналы, которые мы обычно считываем с личности человека, могут тоже отразиться и в дизайне. Цвет, изображения, текст и модели общения - все это средства передачи индивидуальности. Так же, как и личность влияет на поведение людей вокруг нас, так и индивидуальность в дизайне может определить поведение посетителей сайта.
Медицина красноречиво обобщает основную причину, по которой дизайнеры должны включать образы и эмоции в дизайн:
≪Мозг не обращает внимания на скучные вещи≫.
Когда мы делаем дизайн с индивидуальностью, мы создаем рамки, через которые эмоциональные переживания остаются в памяти наших пользователей.
Если вы раздумываете над созданием дизайн-персонажа для сайта, обязательно почитайте данный раздел.
9. «Размышления о мобильном опыте использования в дизайне: сетевой или «родной»? Автор: Арэл Балкан, Рецензенты: Джош Кларк, Андерс М. Андерсен
Если у вас есть сайт, первое, что вы должны сделать, протестировать его в мобильной среде и посмотреть, как он отображается и действует. Слишком многие компании не считают важным делать свой сайт удобным для мобильного использования и сразу же ≪прыгают≫ в создание ≪родного≫ приложения.
Будьте осторожны! Не повторяйте таких ошибок, особенно если ваш сайт является важным генератором прибыли. В сайтах, основанных на документах, используйте по возможности прогрессивное улучшение, для того чтобы обеспечить контент и основные взаимодействия при навигации, и чтобы убедиться, что контент остается доступным самой широкой публике.
Типичная ошибка, которую допускают дизайнеры, -это предположение, что при использовании кроссплатформенных авторских технологий они могут написать код один раз, а работать он будет везде. Это миф. И он может привести к достаточно дорогим последствиям.
Единственный способ заставить приложение хорошо работать на различных платформах - это оптимизировать его для каждой платформы и устройства. Пользователей не интересует, на скольких устройствах работает ваше приложение. Их заботит только то, насколько хорошо ваше приложение будет работать на их устройстве.
Золотое правило - НАПИШИ ОДИН РАЗ, ОПТИМИЗИРУЙ ВЕЗДЕ!
10. «Перестраиваем рабочий процесс: дружелюбный подход к будущему проекту», Автор: Стивен Хей, Рецензент: Брайан Ригер
Практики советуют - сначала структурированный контент: мышление, независимое от устройства или платформы. Слишком часто все внимание часто приковывается к решениям, а не проблемам. ≪Круто≫ - это, конечно, хорошо, но только в том случае, если это работает и решает проблему.
Раздел содержит исключительно интересную и полезную информацию о том, как проектировать сайт в браузере при помощи прототипов.
Вы по старинке делаете макет в Photoshop? Если сразу начать работать в HTML на стадии прототипа, потом гораздо легче и быстрее расширить шаблон до полноценного визуального дизайна. HTML-прототип легко тестировать, сразу видно, какого функционала не хватает на сайте. Мгновенно можно оценить как сайт будет смотреться в различных браузерах, с разной шириной окна просмотра и/или устройств.
Начинать создание сайта с HTML-прототипа может показаться нелогичным, но это реально экономит время разработки. К примеру, демонстрация клиенту изменений состояний (авторизован или разлогинен пользователь) возможна с минимумом усилий. Если все сделали правильно, большая часть кода потом будет использована для создания сайта.
11. «Стать невероятно гибким: создание атомов и элементов», Автор: Энди Кларк
Отзывчивый дизайн очень и очень сложный процесс.
≪Все, что неподвижно и нечувствительно - это уже не веб-дизайн, это нечто другое. Если вы больше не улавливаете прирожденную изменчивость веба, вы не веб-дизайнер, а некто другой. Веб-дизайн - это отзывчивый дизайн. Отзывчивый веб-дизайн - это самый правильный веб-дизайн≫.
Давайте разобьем любой дизайн на его компоненты:
- Типографика: гарнитура, работа с текстом и пустым пространством;
- Цвет: для пробуждение настроения и операций выделения;
- Текстура: декоративные аспекты, в том числе рамки, затенение и фигуры;
- Разметка: горизонтальное и вертикальное расположение элементов по сетке.
Нам нужно создать атмосферу сайта. Мы разбиваем ее на цвет, текстуру и типографику. Атмосфера дизайна не будет зависеть от разметки: Она будет видимая или ощутимая в любом размере экрана или на любом устройстве.
Дни разработки множественных статических макетов сочтены. Вместо того чтобы подробно описывать, как должна выглядеть каждая разметка для каждого экранного размера и устройства, разработчик может объяснить свои мысли в дизайне, а потом дать другим участникам процесса возможность интерпретировать его и адаптировать при разработке. Этот технологический процесс работает сказочно.
Закончив читать эту книгу, вы пересмотрите свои взгляды на работу, код и методы ведения проектов! Все покажется вам гораздо проще, гармоничнее и интереснее.