Разработка интенсивных макетов и советов и примеров

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

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

Пользовательские веб-страницы

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

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

Макет каркас

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

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

При содержательных макетах контента следует учитывать, сколько будет содержать платформа. Создание закрытого макета из 2-3 столбцов для размещения более 100 страниц длинного и сложного контента не оставит много места для передышки. Делая наброски и планируя заранее, вы можете контролировать объем просторного пространства для содержимого страницы. Это не только инкапсулирует текст или блокирует области, но также имеет дело с изображениями и видео.

Блестящий белый космос

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

Параграфы и заголовки страниц - отличное место для начала настройки. Используя свойства CSS, вы должны иметь возможность манипулировать внешними полями и дополнять каждый текстовый элемент блочной строки. К ним относятся все заголовки 1-6, абзацы, цитаты, списки, предварительно отформатированный текст и несколько менее значимых элементов..

Если вы хотите удержать внимание читателя, важно применять интервалы под основными текстовыми элементами. Абзацы и меньшие заголовки лучше всего работают с нижним полем 15px-25px. Для более крупных элементов страницы, таких как h1 или h2, рассмотрите 35px + (это также будет зависеть от размера шрифта). Пространства между вертикальными элементами важны для прокрутки и сканирования с одного взгляда. тем не мение высота линии еще одно важное свойство CSS, которое влияет на расстояние между строками в текстовом элементе. Абзацы должны иметь гораздо большее значение высоты строки по сравнению с размером шрифта, поэтому между строками будет много дополнительных отступов..

Рассмотрим динамические стили

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

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

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

Используйте выпадающие меню

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

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

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

Планирование просмотра содержимого

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

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

Тщательно планируйте стратегии

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

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

7 примеров сайтов с тяжелым контентом

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

зазывала

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

Будущее веб-дизайна

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

Лорд скорее всего

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

Microsoft

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

Земля Поисковой машины

Search Engine Land - популярный веб-журнал, посвященный поисковым системам и интернет-маркетингу. Они часто обновляются с удивительными качественными сообщениями и привлекают сотни тысяч людей на свой сайт каждый день. Главная страница разбита на 3 колонки, которые используются для содержания каждого модуля контента и рекламы..

Белый дом

Дизайн Белого дома США выглядит очень чисто и профессионально. Существует много информации о президентском расписании и других важных политических событиях. Одним из приемов для облегчения пространства страниц было добавление небольшого слайдера контента в направлении заголовка страницы. Это отлично подходит для отображения 3-4 больших заголовков новостей, когда ваши посетители попадают на страницу.

Портал Yahoo

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

Заключение

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