Готовим макет для клиента. Часть II: Если гладить, то как?

Часть I: Гладить или нет?
Часть II: Если гладить, то как?

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

Готовим макет для клиента. Часть I: Гладить или нет?

Часть I: Гладить или нет?
Часть II: Если гладить, то как?

Недавно, просматривая портфолио различных дизайнеров на популярном фрилансерском портале, я заметил одну особенность.

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

Важно другое. Верхняя половина с шапкой из нереально синего неба, чрезмерно зелёной травки, блестящих хромированных небоскрёбов и пластмассовых людей с приклеенными улыбками — всё это очень нравится клиентам, и сами дизайнеры пузырятся от гордости, показывая подобные коллажики своим коллегам. А вот нижняя половина… Тут, в большинстве случаев, как раз всё очень и очень уныло.

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

Многоточие (эллипсис, от греч. ellipsis — незаполненность) — самостоятельный типографский знак, разновидность отточия, состоящий из трёх точек идущих подряд, используется для обозначения скрытого смысла, особенностей устной речи (вздох, пауза, задумчивость), недосказанности либо для исключения из текста некоторых слов, например при цитировании.

Однажды вечером я почувствовал, что пришло время расширить 97‐ й параграф «Ководства» Артемия Лебедева.

На клавиатуре одна чёрточка, она обычно правее нуля и повыше букв «З» и «Х». Неосведомлённые люди называют её попеременно то дефисом, то минусом, то тире. Лебедев объясняет нам, что это четыре (учитывая две разновидности тире) различных символа. На самом деле их как минимум девять, и об этом я и расскажу вам сейчас.

Одна из мелких неприятностей, которую студии чаще всего получают от клиентов — это несвоевременная оплата счета. Иногда у клиентов «нет денег на счету», иногда «бухгалтер забыл оплатить», иногда «бумага потерялась». Иногда бывает так, что «мы хотели уточнить кое-что у вашего бухгалтера, но не знали, как с ним связаться». Некоторые особо одаренные бухгалтеры отправляют деньги «с НДС» юрлицу, работающему по «упрощенке».

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

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

В предыдущих (1, 2, 3) частях мы видели как разные пропорции использовались в геометрии, античном искусстве и современном промышленном дизайне. У нас осталась нераскрытой тема золотого сечения и еще одного корня — √5. Начнем же.

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

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

Мистификации и приписки из самых благих намерений встречаются в истории постоянно. Например, переписчики классического труда «Церковная история народа Англов» Беды Достопочтенного приделывали к тексту куски, дабы определенные церковные вопросы выглядели более благоприятно. А 25-28 главы VI книги «Записок о галльской войне» Цезаря по всей видимости не такие уж и Цезаря.

Так же и в символике. Надо чтобы люди чувствовали ее глубинный смысл, а сама форма не так важна. Возьми любую картинку, в ней обязательно да что-нибудь отыщется. Чем древнее, тем лучше. Самый древний у нас Египет, поупражняемся на нем.

Вот схема барельефа из гробницы Петосириса, найденной в 1919 году.



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



Выглядит достаточно круто, поэтому нет причин не заявить, что Египтяне знали о золотом сечении и специально все так сделали.

Мистифицировать геометрию легко и просто. Сейчас я покажу вам пару приемов. Загляните под кат.

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

Договор не должен быть трудночитаемым сплошным полотном сумбурного текста. Он должен быть структурирован, если вам нечего скрывать. Кроме того, есть обязательные и устоявшиеся разделы, которые я опишу ниже.

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

Судя по результатам голосования, которое я проводил в своём блоге, большинство пользователей никак не типографируют тексты перед публикациями (НЛО не считается). Те, кто работают над текстами, в большинстве своём делают это вручную, поэтому я решил попробовать собрать воедино рецепты экранной типографики, дабы не забывать самому и напомнить другим. Не думаю, что статья будет чем‐то новым для опытных верстальщиков. Новички узнают, профи исправят :)

Содержание

1. Дефисы, тире, минусы и другие палочки
2. Кавычки и чёрточки
3. Скобки
4. Многоточие
5. Заголовки, списки

В этом посте я написал длинный текст о том как:

• оформиться в Украине
• стать физическим лицом-предпринимателем
• платить единый налог
• упростить себе жизнь при помощи интернет отчётности

Я описываю свой личный опыт. Простите за возможные ошибки. Навеяно этим постом
Исходные данные такие: Украина, удаленная работа с иностранным заказчиком, разработка сайтов.

Примечание: ниже выложен перевод статьи «CSS Layouts: The Fixed. The Fluid. The Elastic.», в качестве русского аналога термина layout используется макет. В статье рассматриваются два вида «резинового» макета, поэтому один из них для различия обозначен как «эластичный» (elastic, спасибо MTonly за ценный комментарий). Автор резюмирует основные плюсы и минусы каждого из рассматриваемых макетов (способов верстки).

Какой макет верстки (с использованием Каскадных Таблиц Стилей, CSS) можно считать наилучшим? Каждый из них имеет свои хаки (quirks) и свои уникальные плюсы и минусы. Будет ли один из них более удобен для пользователя, чем все остальные? Насколько просто им будет пользоваться? Какие есть у каждого из них проблемы, и как их обходить? Верстается ли один из них проще всех остальных? Есть ли среди них какой-либо ущербный, совершенно непригодный? Скорее всего, многие однозначно ответят на эти вопросы, но я не буду так торопиться. Каждый из этих макетов мне нравится, и каждый применим в том или ином случае, если делать это с умом и внимательно проверять простоту использования и одинаковую доступность для всех категорий пользователей. Все они являются частью уровня представления (presentational layer) для вебсайта, поэтому большинство вопросов по доступности вытекают из корректного использования семантики и общих правил верстки. Далее я опишу свой взгляд на жестко фиксированный (rigid fixed), адаптивный резиновый (adaptable fluid) и расширяемый эластичный (expandable elastic) макеты.

Джон МакКарти и Патрик Бергель (John McCarthy, Patrick Bergel) приводят вот такое сравнение интерфейсов поиска:



Они противопоставляют стандартный поисковик с одним текстовым полем для ввода запроса организованному каталогу.

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

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

На моем сайте можно найти полную версию тезисов МакКарти и Бергеля, а так же пару других статей по пользовательскому поведению и поиску.

Мы потратили несколько часов, исследуя онлайн-сервисы из списка Webware 100 Top Web Apps 2008 и изучая их бизнес модели. Следующая диаграмма показывает результаты исследования — 34% сервисов используют рекламную модель, 12% различные схемы подписки, 8% продают виртуальные товары (чаще всего в виде данных для скачивания), такая же доля сервисов предлагает сопутствующие продукты (обычно большие компании-разработчики предлагают бесплатный вариант продукта для привлечения к их платформе) и еще 8% сервисов используют схему «оплата за использование».

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

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

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

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

В этой статье мы рассмотрим 50 монохроматических вариантов дизайна, сайты разбиты на категории в зависимости от преобладающих цветов, которые они используют (все варианты кликабельны).

Будем реалистами. Российский рынок инвестиций в интернет-стартапы существенно отличен от развитых рынков, бесспорный лидер среди которых — США. Отличия эти, увы, не в нашу пользу.

Перевод занятной статьи On diacritics (David Březina) из блога I love typography.

Проблема диакритических знаков, используемых в центральной Европе, не очень то и актуальна для большинства из нас (со своими чёрточками и точечками над «Й» и «Ё» вроде бы нормально разобрались), но для дизайнеров, работающих с зарубежными клиентами, будет весьма познавательно. Да и вообще, как говорится, для общего развития…

По поводу ошибок и прочего — ругайте переводчика (то бишь меня). Но не сильно. Пишу и перевожу как могу :)

Публикуется с разрешения автора.

Часть I — Часть II — Часть III — Часть IV — Часть V — Часть VI

Часть I

Как-то ко мне обратился знакомый дизайнер с просьбой разобраться в странной по его мнению ситуации. Клиент просил «сделать так же, как у Apple», но с использованием собственных способов расположения блоков, изображений, цветовой гаммы и текста. В общем, дизайн в итоге получался совершенно непохожий на apple.com, но этого, собственно, и добивался клиент. И вроде бы у дизайнера получилось, но… Клиенту по-прежнему не нравилось, он всё равно требовал переделать макет. По его ощущения «что-то было ну совсем не так». А что именно — тот объяснить был не в силах. Вот и возник вопрос у моего коллеги по поводу того, как угодить капризам клиента и понять его чаяния. Оказалось всё не так просто, но вполне объяснимо. Я и раньше сталкивался с данной проблемой. Поэтому решил попробовать изложить свои мысли по этому поводу.

Итак, какова ситуация в области современной веб-типографики и какими способами следует решать возникающие проблемы?

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

Вторая версия статьи, расширенная и дополненая.

Большая часть готовилась для моего выступления на «РИТ: Клиентские технологии», куда я, к сожалению, не доехал.

 



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

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