Проектиране на съвети и примери за интензивно оформление на съдържанието

За да създадете изчерпателни оформления за уеб се изисква умения и много посвещение. Уеб дизайнерите изпълняват работа, която е най-неспособна да направи и по много изискан начин. Тъй като уеб страниците са еволюирали, видяхме необходимостта да запълним повече пространство и да задържим повече съдържание от всякога. Ако вече разбирате как да създадете уебсайт, това е огромен бонус към по-доброто разбиране на тези методи. Основните функции в даден уебсайт рядко се променят. Въпреки това, с повече от средно съдържание на страници, играят други фактори, включително бяло пространство, типография, позициониране на елементи, наред с други.

Ще разгледаме подробности, за да покрием някои основни съвети за изграждане на интензивно съдържание. Те могат да варират от приложения за социални мрежи, големи бизнес и корпоративни уебсайтове, или нещо различно между тях. Важно е да се запитате "какво се опитвам да постигна с този дизайн?"когато проектирате страници, тъй като това ще ви помогне да предвидите по-широка перспектива.

Персонализирани уеб страници

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

Винаги препоръчвам да се създаде малък списък от елементи на страници, които се считат за инсталирани в шаблона. След като всички те са записани, става по-лесно да се премахнат лошите идеи или да се вземат пропуснати или забравени скъпоценни камъни. Това също проправя пътя за лесно планиране за облекчаване на стреса по пътя.

Разпределение Wireframe

За общия 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 и Бил Гейтс. Началната им страница съдържа съдържание за десетки софтуерни пакети, актуализации на новини, съобщения за пресата и информация за разработчиците. Малко пъти надолу по страницата можете да забележите вертикално меню с табулатори с динамично превключване на съдържанието.

Земя за търсачки

Търсачката Земя е популярно уеб списание, фокусирано върху търсачките и интернет маркетинга. Те често актуализират с невероятни качествени постове и карат стотици хиляди хора на техния сайт всеки ден. Главната страница се разделя на 3 колони, използвани за задържане на всеки модул за съдържание и реклама.

Бялата къща

Дизайнът на Белия дом в САЩ изглежда много чист и професионален. Има много информация за графика на президента и други важни политически събития. Един трик за облекчаване на стаята със страници е добавянето на плъзгач за малко съдържание към заглавието на страницата. Това е чудесно за показване на 3-4 големи новинарски заглавия точно когато посетителите кацнат на страницата.

Yahoo Portal

Що се отнася до големите сайтове със съдържание, Yahoo! трябва да се насочва към върха. Yahoo! предлага стотици услуги на своите клиенти, включително уеб поща, новини, видеоклипове и дори уеб търсене. Вижте някои от Y! портални връзки от страничната лента, за да видите как се сравняват техните шаблони.

заключение

Това са само някои от ключовите моменти и стъпки за изграждане на конкретни съдържание, изискващи оформления. Уеб страниците с големи резервоари за съдържание често се разглеждат като тежест, заемаща SEO фураж и нищо от реална стойност. Дизайнът е всичко, тъй като това е първото впечатление, което потребителят получава от всеки уебсайт. С високи обеми на съдържание това може да се превърне в катастрофа с претрупаност и обобщения. Никога не спирайте да практикувате и само с няколко проекта ще вземете майсторство за представяне на интензивно съдържание.