Элиот Стокс - Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки

Итак, мы в поте лица трудились над деталями, а теперь давайте убедимся, что готовый продукт уживается с макетами из Photoshop. Мой излюбленный метод проверки ошибок в живом приложении или сайте – это сделать скриншот, открыть его в Photoshop, а затем расположить оригинальный макет сверху, удалив зеленый канал. Это можно сделать с помощью опций смешивания (Blending Options) в окне стилей слоя. В большинстве своем это отлично срабатывает для нейтральных стилей. Если есть различия, оригинальный макет появится зеленым, а приложение и сайт – пурпурными. Определение разницы, измерение требуемых изменений и отправка комментариев разработчику (или, если вы сам разработчик, самостоятельная отшлифовка) – все это легко.

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

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

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

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

Марк Эдвардс является директором и ведущим дизайнером в Bjango, независимой компании по разработке систем для Mac и iOS в Австралии. Марк – соведущий подкаста Iterate, иногда выступает на конференциях и пишет статьи о дизайне для журнала Smashing Magazine и сайта компании Bjango.

Фото: Мэт Адамс

Джон Хикс (р. 1972) родился в Лемингтоне Спа (Великобритания). В настоящее время он живет в небольшом городке с выездными ярмарками под Оксфордом.

Это прямо на краю великолепного местечка под названием Котсволдс, прекрасно подходящего для семейного очага и для верховой езды! Он до сумасшествия любит кататься на велосипеде и мотоцикле, а также обожает Lego и Dr. Who.

Джон работает дизайнером 18 лет, 10 из них – как фрилансер. Он известен как создатель логотипов Firefox, MailChimp и Shopify, но он работает в различных средах. У Джона есть две морских свинки (Том-Том и Тафти) и золотистый ретривер по кличке Олив. Его любимые цвета – оранжевый и черный. Самый большой урок, который он усвоил из своей карьеры, – это не упускать возможность заниматься своими небольшими проектами. По возможности каждую неделю посвящайте полдня просто экспериментам. Это принесет вам дивиденды, ваши старания окупятся. Он максималист по жизни и его кредо: «Что посеешь, то пожнешь!»

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

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

Неважно, для кого вы делаете сайт: для клиента, или для себя. Если вы бьетесь в поисках своего решения, скорее всего, вы не с того начали. Вдохновение, которого вы жаждете, вы не там ищите. Оно не в блоге с заголовком «25 поразительно великолепных сайтов». Оно не в ленте вашего Twitter и не в Facebook. Но даже не в Сети. Оно прямо там, где вы! Это – вы сами.

Перестаньте хоть на мгновенье думать о семантике языка HTML, магии таблиц CSS и ловких трюках jQuery. Вместо этого спросите себя: «Кто я и что я хочу сказать?» Чего вы придерживаетесь, что важно для вас и с кем вы разговариваете? Давайте дадим ответы на эти вопросы в начале нашего пути.

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

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

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

Большие проекты по переделке часто начинаются с «прощупывания» заказчиков. Мы садимся с людьми, чтобы обсудить их цели для нашего сайта и их ожидания. Мы смотрим на демографические показатели, аналитику и историю поисковых запросов. Нужно будет перелопатить много данных, но это не пустая трата времени. Из этого исследования мы можем создать портреты наших основных пользователей. Это досье на личностей в нашей целевой аудитории называется «персонаж». Оно отвечает на важный вопрос в процессе редизайна: кто они, люди, с которыми мы общаемся, и что они от нас ожидают?

Есть вероятность того, что даже если вы провели мало времени за дизайном, то слышали о персонажах. Может быть, вы даже создали несколько. Мы спрашиваем себя: «Кто же они?» с момента, когда Алан Купер представил персонажей в интерактивном дизайне в 1995 году, и с тех пор они стали главным продуктом дизайна, ориентированном на пользователя. Если персонажи для вас неосвоенная территория, вы можете найти краткое введение по теме в «The Project Guide to UX Design» [78]Руса Унгера и Каролин Чендлер. Если вы желаете покопаться глубже в исследовании пользователей, раздобудьте специализированную книгу Алана Купера «The Inmates Are Running the Asylum» [79].