Дизайн Последнее | bot.kz

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

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

History

Это 1989, и Тим Бернерс-Ли, человек с планом, вызывает в воображении HTML во время работы в CERN.Это язык, чтобы связать контент на документы .

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

К счастью, мы восстановили наше здравомыслие и бросила таблицы для разметки.Мы с гордостью переехал в семантической HTML, но мы провели на нашей дизайн-первый подход.Давайте внимательнее посмотрим на семантической HTML .

Семантическая HTML

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

По-моему, писать семантический HTML является одним из ключевых aspects быть хороший фронт-энд разработчик.Это то, что я высоко ценим .

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

Я посмотрел простой веб-сайт и получил свое HTML структуру (не глядя на HTML, которая была бы измена).Затем, я повернул мыслительный процесс HTML в шаг за шагом визуализации.Для многих моих коллег, эта визуализация оказалась настоящим откровением.Это несколько визуальных создано взаимное понимание того, что передний конец разработчик делает и почему семантическая HTML имеет важное значение.Кроме того, интересно, он показал, что не все интерфейсные разработчики смотреть семантической HTML в том же свете .

Ниже веб-сайт я использовал в эксперименте мыслительный процесс .

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

По-моему, это целевая страница служит зонтиком для всех подстраниц.Таким образом, я завершуЛоготип в h1.Я добавлю img тег, так что, что отображается логотип при печати.
Все права Далее идет меню.Я ставлю его на первое место, потому что это целевой страницы.Кроме того, давайте обращаться колпачки с CSS text-transform.Я обернуть меню в nav добавить обязательным h1 называется “Навигация” внутри.Кроме того, мы добавим обычный неупорядоченный список, с якорями также ссылки на другие страницы.
Является ли это изображение, показывающее поезд на самом деле содержание?И мы должны, следовательно, использовать img табличку?Или это эстетическая, то есть мы должны справиться с этим в CSS, используя background-image?Я иду с эстетикой, а значит, не будет в конечном итоге в HTML контура.
Какой тип контента является то, что белый текст под изображением?То, что я должен назвать это?Как насчет “Введение” — Я не на 100% уверен, что, хотя.Я добавлю заголовок “Введение” и скрыть его с CSS позже.В данную товарную позицию может быть полезным для чтения с экрана, а также.
Подождите!Это синюю кнопку “Присоединяйтесь к нам сегодня” связано с вводного абзаца (“… если вы присоединились к нам”).Кроме того, это не кнопка, а ссылка.Я устанавливаю себя в порядок для CSS позиционирования кошмар.
На данный момент, я не знаю, что делать с кнопку “Забронировать мероприятие”.Это не связано с “Присоединяйтесь к нам сегодня”, это точно.Это кнопка без контекста.Я просто его пропустить.
Наконец, несложных содержание: заголовки, абзацы и ссылки.Для их позиции, мы, возможно, потребуется, чтобы обернуть некоторые из них в div позже.
На событиям!Давайте для упорядоченного списка, потому что перетасовки даты бы странно.Мы будем использовать time элемент для даты и времени.Давайте обернуть ссылку вокруг подзаголовком.
Теперь мы знаем, где кнопку “Забронировать мероприятие” должно идти.Люди должны знать о предстоящих событиях, прежде чем они могут забронировать один — имеет смысл.Таким образом, мы поместим кнопку с событиями делать наш CSS позиционирования кошмар еще хуже.

Ниже в результате HTML .

<h1>Greater Dunnellon Historical Society</h1>
 <nav>     
   <h2>Navigation</h2> 
   <ul> 
      <li><a href="/">Home</a></li>         
      …    
   </ul>
 </nav>

 <main>  
   <h2>Introduction</h2> 
   <p>We’ve come together … if you joined us.</p> 
   <a href="/">Join us today</a>  

   <h2>A commitment to our history</h2> 
   <p>The Greater Dunnellon … in its heyday.</p>  

   <h3>Learn about Dunnelon's history</h3> 
   <p>Dunnellon was platted … South Williams Street.</p> 
   <a href="/">More history</a>  

   <h3>Your next event at the depot</h3> 
   <p>The depot provides … are also available.</p> 
   <a href="/">Make a reservation</a>  

   <article>  
      <h2>Upcoming events</h2> 
      <ol> 
         <li> 
            <h3><a href="/">Museum open Tuesdays</a></h3> 
            <dl> 
               <dt>Date</dt> 
               <dd><time>01/21/2015 from 11:00 am</time> to <time>4:00 pm</time></dd> 
            </dl> 
            <p>Learn, teach and share history with Boomtown Sam!</p> 
         </li>             
         …          
      </ol>  
      <a href="/">Book an event</a>     
   </article>  
</main>

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

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

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

HTML является о предоставлении смысл information.Мы не должны в конечном итоге с различными описаниями одной и той же информации.Кажется, что дизайн облака Значение содержания и создает пространство для интерпретации и предположения .

Содержание First

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

С содержательной Первый подход, мы переходим от проектирования без содержания к проектированию в зависимости от содержания — очень важное различие.Помните, определение семантического HTML: давая смысл content .

Семантический HTML не имеет никакого отношения к появлению — это то, что CSS для.Почему не откладывать HTML, пока на стадии проектирования, если она не зависит от внешности?Давайте переместить его на фронт и описать наш контент, прежде чем разрабатывать это .

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

Ты слышишь это?Это звук экранного пользователей, празднующих .

Подавать It

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

13-dunnelon-after-opt-small — ( Просмотр большой version ³)

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

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

Реальность Calling

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

Потому что мы делаем вещи контент-первых, мы должны получить в свои руки на содержании клиента. Марк Boulton ⁴ справедливо указывает, что содержание первой не об ожидании окончательного содержания, прежде чем делать что-нибудь.Когда мы говорим о контент-первых, мы имеем в виду, что мы хотим знать структуру содержания, что мы стали разрабатывать для.Имея конечное содержание уже в руках было бы фантастически, но большую часть времени он просто не является.В “ Структура First.Содержимое Always ⁵, “Болтон говорит:

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

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

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

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

Мы создали наши типы контента;давайте поговорим о структуре содержимого.Содержание Структурирование именно то, что HTML хорошо для.Давайте идти за ней.Мы получили наши типы контента, и мы понимаем, семантический HTML, так что давайте начнем добавлять структуру к различным типам контента.Это может быть легким или сложным, в зависимости от того, как на высоком уровне ваши типы контента .

Основной “после отзыв” Форма может быть довольно прост:

<form>  
   <fieldset> 
      <legend>Rating</legend>  
      <label><input type="radio"/> 1</label> 
      <label><input type="radio"/> 2</label> 
      <label><input type="radio"/> 3</label> 
      <label><input type="radio"/> 4</label> 
      <label><input type="radio"/> 5</label>  
   </fieldset>  
   <label>Review</label> 
   <textarea></textarea>  
   <button type="submit">Send</button>  
</form>

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

<article> 

   <h1>MacBook Pro</h1>  

   <img src="macbook-pro.jpg"/>  

   <p>A groundbreaking Retina display. All-flash architecture. Fourth-generation Intel processors. Remarkably thin and light 13‑inch and 15‑inch designs. Together, these features take the notebook to a place it’s never been. And they’ll do the same for everything you create with it.</p>  
   <section>

      <h1>Post a Revie ... 

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров


 		
		
				
		
				
			  Главная   →  Вебдизайн  → 20.02.2015  by  design.smashingmagazine.com