Блог о дизайнеВеб дизайнАнализ дизайна в браузере

Анализ дизайна в браузере

10.09.2010 4187 время, долгий, мейнстримом, время, путь, начинает, быть, становиться, поддержку, когда, предлагая, вебсайты
 Несколько месяцев назад, мысль пришла в маленький больной головы: что, черт возьми, нам необходимо программное обеспечение, как для Photoshop? Я не обратил внимания на это тогда и решил бен эту идею. Однако около месяца назад, я заметил, разговор на Twitter, в основном между Эрик Мейер и другие, по теме "Проектирование в браузере". Каждая из сторон были хорошие точки зрения по этому вопросу, но большинство из них было надуманным или субъективным. Я говорю об аргументах, как "вы не можете сделать все здорово, что вы можете делать в Photoshop, с кодом", или "Photoshop предназначен для редактирования фотографий, а не для создания веб-сайтов". Такого рода вещи.

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

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

Итак, что отличает друг от друга в дизайн-Browser, как я хотел назвать его от более "традиционный" подход?

Скорость

 

Вы в основном резки время разработки на 75%. По крайней мере, я и сделал. Не имея пройти разработке макета означает, что после того как клиент видит разработку и утверждает его сайт сделать. Излишне говорить, что делает Hella клиентов счастливыми. Это означает, что клиенты должны быть информированы о том, что вы делаете. Если это макет Photoshop, что они хотят, и они не будут иметь его любым другим способом, то это то, что они должны получить. Мне посчастливилось быть в состоянии делать в дизайн-Browser с реальными клиентами, а другие не может.

Фокус

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

Подумайте об этом, что о Photoshop? В первую очередь это о графике. Мы знаем это, мы понимаем это, поэтому мы обращаемся к ней, сделать графики. Теперь давайте взглянем на веб-сайтах. Какие сайты о? Содержание. Таким же образом, что Photoshop без графических инструментов не Photoshop, веб-сайт без содержания не на сайте.

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

Код

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

  1. веб-сайтов, великолепна, но их код страшен как смертный грех
  2. веб-сайтов, уродливый, но чистый код
  3. веб-сайтов, посредственные, с посредственным код

То, что в дизайн-Browser делает, по моему опыту, это покончить с этой дихотомии, поскольку она меняет обычный порядок вещей. По традиции, мы сначала создать макет дизайна, клиент дает нормально, а затем мы начнем кодирования.

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

Собственные постепенное повышение

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

Я возвращаюсь к этому, потому что я думаю, что это такой важный шаг, реальный рычаг переключения парадигмы.  Начните с основных HTML (и PHP / Ruby / др. Если ваша страница динамический), и само содержание, работать ваш путь до CSS, javascript, то в случае необходимости. Прогрессивное улучшение и В-Browser дизайн созданы друг для друга на небесах, если когда-либо был один, нет сомнения на этот счет в моем сознании.

Взаимодействие

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

CSS3 Super Speed

Вы знали, что я получить здесь. Часть проектирования с помощью кода является то, что вы беспокоитесь за то, что должно также касаться традиционных веб-дизайнеров в процессе проектирования, а также, хотя это редко: страница скорости. Все очень просто, и я уверен, что большинство из вас читая это уже знаю об этом: чем больше изображений вы имеете, тем больше HTTP запросов, тем больше времени требуется для загрузки страницы. Позвольте мне просто остановить вас, прежде чем начать декламировать и буду утверждать, что большая спрайты не решение проблемы. Почему? Большой спрайты = много Kb, чистый и простой; время загрузки идет вверх, еще раз.

* Я, однако, не выступают за дополнительной разметки просто заменить изображение с помощью CSS3. Моя точка зрения проста: если он не требует дополнительной разметки, и это проделано с CSS3, то я сделаю это. Иначе, изображения использования.

Введите CSS3. Градиенты, закругленные углы, тени, @ шрифт лицу лишь некоторые из множества свойств, которые предоставляет CSS3. Я очень большой сторонник CSS3 над изображениями *, так что В-Browser дизайн является идеальным местом встречи для меня решить две. Есть вещи, которые не CSS3 магии можно сделать, и это хорошо, я пойду за изображения на том, что Но там, где есть место для CSS3, я уверен, что его использовать. И все это вернуться к прогрессивной повышения, конечно.

Это все хорошо и прекрасно, но не похоже, что-то новое, было доведено до таблицу здесь есть? В руках у самых опытных дизайнеров, Photoshop является мощным оружием, обладал построить некоторые из самых удивительных вебсайтов, которые мы когда-либо видел. Я не спорю, что Photoshop / Фейерверк / Gimp / Paint Shop Pro / Pixelmator и т.д. не большие средства. Я утверждая, что они не предназначены для веб (фейерверки включен, но это другая история). Я выступал за новую парадигму для создания сайтов.

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

IМне нравится смотреть на это в-Browser Дизайн философии дизайна сайта. Не кодирования, а не код при проектировании, но чисто Website Design. Потому что вот что это такое, по совершенству даже; вы можете иметь полный контроль над каждым аспектом своей работы, это поистине WYSIWYG и это больше, чем я мог бы получить от окружающей среды веб-дизайна.