Общие цели

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

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

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

Частные различия

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

• Полиграфический дизайн. Основные носители: печатные материалы небольших размеров (от визитки, до больших чертежей) и рекламные конструкции (постеры, билборды);
• Дизайн сайтов. Основной носитель – дисплей компьютерных устройств (от персонального компьютера до платежного терминала).

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

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

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

«Габаритные» размеры макета сайта

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

На свете очень много устройств с совершенно различными физическими размерами экрана. Но среди разнообразия экранов (устройств) выделяются сегодня выделяются три основных вида:

• Монитор персонального компьютера или ноутбука с размерами экрана от 10 до 34 и более дюймов (980px и больше для обычных дисплеев, 1200px и больше для широкоформатных больших);
• Планшетный компьютер от 5″ до 12″ (767px и меньше);
• Мобильный телефон или коммуникатор от 2″ до 5″  (480px и меньше).

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

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

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

Резюме: варианты ширины макета для ПК 960, 1200 пикселей. Для мобильных устройств: 360, 720 пикселей. Высота «плавает» в зависимости от количества информации на каждой из страниц сайта. Желательно не превышать высоту в 2-3 экрана. При необходимости использовать «пагинацию».

Параметры шрифтов, пиктограмм, элементов управления

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

• Есть десяток шрифтов которые поддерживают все операционные системы. Начертание этих шрифтов удобно для пользователя (читателя) сайта. Их и нужно стараться использовать. Для основного текста желательно использовать шрифт без «зесечек». На практике можно использовать почти любой шрифт на сайте, но не у всех пользователей в компьютере будет этот шрифт или поддержка технологий и сайт будет выглядеть по другому;
• Только в крайних случаях используйте калиграфические шрифты;
• Не используйте более 3-4 шрифтов на странице (сайте);
• Если в интерфейсе сайта используются пиктограммы (иконки) – они должны верно передавать смысл даже без текста. Использование понятных пиктограмм экономит время пользователя. Например, ссылка на главную страницу общепринято изображается как значок «домика»;
• Элементы управления сайта экономят пространство упрощают взаимодействие пользователя с сайтом. Например действие “добавить” обозначаются символом “+”, удалить элемент значком “корзина” и т.д.

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

Оформление интерактивных элементов

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

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

Пользователь может сделать следующие действия с интерактивными элементами:

• Наведение курсора на элемент. Результат: изменение цвета, появление рамки, увеличение размеров, подчеркивание текста.
• Клик по элементу (нажатие). Результат тот же, плюс возможно видоизменение информации на странице, переход на другую страницу, запус какого либо процесса (просмотр видео).
• Перетаскивание элемента. Результат: элемент перетаскивается на новое место, пододвигая другие элементы – изменяет положение. Перетаскиванием можно обозначить удаление элемента, перетаскивание в корзину или за пределы какой либо области.

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

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

Композиция элементов макета

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

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

Есть обязательные блоки в макете сайта: навигационный блок и блок контента. Первый – выполняет роль «Содержания» сайта, позволяет переходить от страницы к странице, показывает логическую структуру страниц как в книгах. Блок контента наполнен информацией которую создатель сайта пытается донести до пользователей. Это два основных блока, без которых многостраничный сайт не обойдется. Чем функциональнее и содержательней сайт – тем больше может быть дополнительных блоков информации и вариантов макета страниц одного сайта. Далее некоторые дополнительные блоки:

• Заголовок (шапка сайта). Самый первый и заметный блок, призван озаглавить весь сайт, дать понять о чем все содержание. В коммерческих проектах указываются контактные телефоны или инструменты заказа товаров.
• Дополнительное навигационное меню. Используется при сложных и многоуровневых структурах сайта, для облегчения навигации по соседним разделам, обозначения местонахождения пользователя на сайте. Располагается у левого края макета или под основным навигационным меню.
• Форма поиска. Как понятно из названия – это инструмент поиска информации по сайту. Бывает простой и сложный. Простой содержит поле запроса и кнопку “Найти”. Сложный поиск содержит дополнительные параметры: область поиска, временной период, имя автора, цена товара и т.д. Распологается там, где это удобно. В заголовке сайта, в левой колонке, в конце сайта (в подвале).
• Блок рекламных объявлений. Блок содержит рекламу других сайтов или разделов этого же сайта. Позволяет направить поток пользователей на определенные страницы сайта, например для продажи товара по акции. Местоположение определяется степенью «рекламной агрессивности» создателей сайта. Самые заметные и в тоже время раздражающие места для рекламы: Заголовок сайта, непосредственно в тексте страницы (содержательной части), в конце текста страницы. Вообще рекламу желательно расположить в ненавязчивом месте, где то по краям от центральной содержательной части, но при рекламные места теряют свою эффективность.
• Формы отправки данных. Служат ввода какой либо информации на сайт, отправку файлов. Вариантов полей форм, элементов управления данными огромное множество. Чаще всего такие формы располагают в блоке контента. Корзина заказа, личный кабинет пользователя, страница контактных данных и тд., практически всегда содержат какие либо формы отправки данных.
• Нижний колонтитул сайта (подвал, футер). Последний, нижний блок сайта. Здесь часто располагается правовая информация,указывается владелец сайта, контактные данные, ссылка на разработчиков сайта, список партнеров и т.д.

Применение сеток макетирования

В дизайне сайтов часто удобно применять сетки для облегчения верстки макета по «газетному» типу. На практике это означает разделение страницы по ширине на N-ое столбцов и пробелов межу ними. Для сайтов есть несколько таких проверенных сеток на 12, 16 и 24 столбца. Сетка упорядочивает выравнивание блоков по горизонтали, сайт выглядит органичным. Блок занимает N-ое количество целых столбцов, с точностью до пикселя. Раз высота страниц сайта различная, то по вертикали (высоте) ни каких сеток не применяется. Высоту различных блоков дизайнер определяет сам (можно применять пропорции 4:3, золотое сечение и пр.).

Резюме: Макетные сетки экономят время.

Правила хорошего тона в создании макета сайта

После того, как макет сверстан и утвержден за работу принимается верстальщик сайта. В общем смысле, верстальщик нарезает макет на отдельные картинки и перемешивает его с программным кодом. Программный код обрабатывается браузером и  на выходе получается набор страниц текста с картинками, ссылками и кнопками – «сайт оживает». Что бы сверстать сайт по макету, дизайнер должен выполнить ряд технических правил при работе в графических пакетах (Photoshop, Fireworks, Paint и прочих):

• Текст и задний фон (кнопок, картинок, навигационного меню и тд.) должен быть на отдельных слоях, без слияния;
• Если необходимо использовать  не стандартные шрифты, используйте из набора Google Fonts;
• Выполняйте остальные Правила хорошего тона в «Фотошопе»;
• Обсуждайте с верстальщиком элементы макета на предмет реальности HTML верстки.

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

Но дело в том что я постоянно терял эту рыбку, покупал другую и снова терял. В итоге придумал свой собственный способ скручивания наушников на плеер.

Первое. Имеем плеер с наушниками в хаотичном состоянии

Второе. Наматываем провод наушников на корпус плеера

Третье. Когда останется 2-3 витка подгадать длинну провода так что бы окончание было близко с гнездом штекера. Вытаскиваем штекер из гнезда

Четвертое. Вставляем штекер наушников в гнездо и тем самым закрепляем динамики и провод не раскрутиться!

Все!

Если что то непонятно внимательней смотрите на последовательность действий. Самое сложное – подгадать длину, что бы “капельки” оказались практически у гнезда для штекера. Для уменьшения длинны наматывайте последние витки в одном месте или немного по диагонали на корпус.

Вернувшись из отпуска на рабочее место я решил напечатать пару фотографий и понял что черный цвет на фотографии плохо печатается (примерно на 80% отсутствует). Я обратился к помощи спасительной программы SSC Service Utility for Epson Stylus Printers о которой уже писал, запустил несколько раз прокачку дюз, напечатал квадрат Малевича на формат А4, ни чего не помогло. Гуру струйных принтеров и СНПЧ по имени Даниил поведал мне что дело в головке, нужно ее чистить особым способом, который я опишу далее. В общем если у вас после простоя не печатает один-два цвета – вероятно чернила засохли (загустели) за это время.

За несколько лет в комментариях к данной статье опытные специалисты оставили много дельных советов по возвращению к жизни струйных принтеров. Всем спасибо!

Инструментарий для операции:

1. Шприц 10 мл.;
2. Система (“Капельница”) для внутривенных инъекций;
3. Безворсовая ткань;
4. Жидкость для прочистки (промывки) головок струйных принтеров (минимум 10 мл. на один цвет чернил);
5. Прямые руки правильно гнущиеся в суставах.

Предупреждение

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

Инструкция

Рис.1  Рис.1	Включаем принтер, переводим в режим замены картриджей, как только головка перейдет в положение показанное на рис. 4 отключите питание принтера. Отключаем для того что бы не повредить механизм перемещения каретки.  Отрезаем от системы кусок трубки 20-30 см и расширяем ее с обоих концов. Один конец соединяем со шприцем.
Рис.2  Рис.2	Набираем в шприц около 5 мл жидкости для промывки.
Рис.3	Отодвигаем каретку в крайнее правое положение. Складываем плоский тампон из 4-6 слоев безворсовой ткани. В нашем случае такая ткань я не нашел, использовал медицинский бинт. Смачиваем слегка тампон “промывкой” и задвигаем каретку влево, что бы тампон оказался под кареткой и касался дюз головки (сделайте тампон пошире, что бы попасть на дюзы). Вставляем второй конец трубки в “патрубок” соответствующего проблемного цвета. В моем случае черный, второй слева.
Рис. 4	А теперь самое важное. Осторожными движениями, медленно выдавливаем жидкость в головку и высасываем обратно. При этом ход поршня минимальный, около 2-3 мм.  Сделав пару циклов промывка смешается с чернилами – это нормально, положите шприц на 10-20 минут для растворения засохших чернил в дюзах. После перерыва опять пару циклов. Закончив, отсоединяем трубку от каретки, зажав нижний конец (напр. пинцетом, круглогубцами), что бы капли чернил не попали на внутренности принтера, вынимаем тампон. Ставим картриджи обратно, запускаем утилиту SSC Service Utility for Epson Stylus Printers делаем прочистку и печатаем проверочный узор (Print nozzle check pattern). В завершение можно напечатать радугу или черный квадрат для прогонки чернил.

После писаных манипуляций на проверочном узоре появился черный цвет, но не полностью. Обычно промывка помогает в 90% случаев. Погуглив еще сутки выяснилось, что бывает проблема с определенными чернилами InkTeck E0010, они очень быстро густеют во время простоя прямо в картридже. Видимо вместо E0009 мне всучили чуть другие чернила. Проблему решили так, высосали большую часть краски из картриджа шприцем (как выкачивали воздух) и смешали с 0,5-1 мл промывочной жидкости, влили обратно, сделали прокачку и дюзы полностью прочистились.

Заключение

Отдельное спасибо Даниилу за помощь!

Повторно напоминаю, будьте предельно осторожны, все инструменты и жидкости должны быть стерильно чистыми, если не уверены в своих силах, обратитесь в сервисный центр (или Даниилу). Удачи!

В процессе тренировок получилось вот что.

И еще вот это

Стоковых багажников для ZZR400, zzr600, Ninja 250 и прочих я не слышал. Есть какие то решения сторонних производителей но тоже очень редки. Привожу пример самостоятельного изготовления багажника для спорт-туристов Kawasaki серии ZZR и Ninja. Выглядит он так:

Материалы и комплектующие для багажника

Все материалы можно найти в строительном магазине и автомобильном магазине.

• Труба профильная 15х15 мм (квадратный профиль) -  3 метра,  с запасом на брак.
• Болты М6 под имбусовый ключ (шестигранник) – 4 шт. Длину не помню. Прикидывайте по фотографии, отпилить лишнее всегда можно.
• Гайки под болты M6.
• Куски металлического листа 2-3 мм размером примерно 30х50 мм – . Для изготовления “ушек” на профиле (в месте крепления ручки пассажира и по бокам в местах багажных крючков).
• Пластиковые мебельные заглушки под профиль 15х15 – 2шт.
• Грунтовка для покраски метала, краска.
• Сварщик с прямыми руками – 1 чел.

Процесс изготовления багажника

1. Свариваем из деталей правое и левое перо, намечаем места расположения торцовых втулок. Перья абсолютно одинаковы.
2. Этот этап самый важный. Поочередно привариваем поперечные втулки, каждый раз примеряя к раме. Входящие под крючки втулки из профиля должны четко ложится на плоскость крючка. Контролируем симметричность перьев друг к другу и к раме мотоцикла. Прикручиваем на болты оба пера, добиваемся максимальной устойчивости путем корректировки угла скоса втулки. Скос делается обязательно.
3. Слегка привариваем заднюю поперечину, таким образом придав дополнительную жесткость. Еще раз смотрим на геометрию, сверху, снизу, издалека, так сказать “стреляем”.
4. Привариваем остальные две верхние поперечины. Кстати их можно делать в последнюю очередь по фактически получившемуся пространству между перьями багажника, пофантазировать на предмет количества поперечен, но минимум 2 штуки.
5. Привариваем дополнительные продольные перья жесткости с ушками, уходящие под седло. Они встают на место крепления ручки пассажира.
6. Привариваем нижнюю поперечину, создаем окончательную жесткость в трех осях (хотя это может показаться фанатичным).

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

Окончательные работы

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

Боковые кофры

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

Заключение

Снимать багажник сложно, он достаточно жесткий, но я к этому и стремился. У меня получается снять без помощи посторонних, но велика вероятность поцарапать пластик и уже вообще его ни снимаю. Вес его не большой, влияния на аэродинамику не заметил. Из за использования багажных крючков краска будет сдираться, поэтому покраска из балончика необходима. На мой багажник умещается двуспальный матрас Intex, двухместная палатка Salewa, два спальника, 2 туристических коврика (всего 4-5 кг).

Скачать дополнительные фотографии с замерами основных деталей одним Zip архивом.

Жду комментарии.