Дизајнирање савета и примера интензивног распореда садржаја

Да бисте направили свеобухватне распореде за веб, потребно је знање и много посвећености. Веб дизајнери обављају посао тамо где то највише не могу да ураде, и то на веома софистициран начин. Како су веб странице еволуирале, видјели смо потребу да попунимо више простора и задржимо више садржаја него икада раније. Ако већ знате како дизајнирати веб страницу, то је велики бонус за боље разумијевање ових метода. Главне функције на веб-локацији се ријетко мијењају. Међутим, са више од просечног садржаја странице, у игру долазе и други фактори, укључујући празан простор, типографију, позиционирање елемената, између осталог.

Ући ћемо у детаље како бисмо покрили неке главне савјете за изградњу садржаја који су интензивни. Оне могу бити у распону од апликација за друштвене мреже, великих пословних и корпоративних веб локација или било чега између. Важно је да се запитате "шта покушавам да постигнем овим дизајном?"када дизајнирате странице, јер ће вам помоћи да предвидите ширу перспективу.

Прилагођене веб странице

Без обзира колико сте искусни у практичном веб дизајну, истина је да смо сви морали почети негдје. Дизајнирање прилагођених веб страница је генерално први корак ка каријери у веб програмирању прије примјене конвенционалних спецификација.

Увек препоручујем да направите малу листу елемената странице за које се сматра да су инсталирани у предложак. Када се све то запише, постаје лакше да се избаце лоше идеје или да се покупе промашени или заборављени драгуљи. Ово такође утире пут за лако планирање како би се смањио стрес на путу.

Лаиоут Вирефраме

За генерички веб сајт од 5 страница често ћете видети да се исти елементи понављају. Лого у горњем углу, линкови за навигацију главе, главна област садржаја можда подељена са бочном траком и друге функционалности (логин, поље за претрагу, итд.).

Размислите о доброј почетној тачки за изградњу детаљних распореда страница. Многи дизајнери сматрају да је корисно скицирати могуће дизајне жичане мреже како би се искључили не тако очигледни недостаци. Ово не захтева никакав фенси папир и може да се уради чак и у поквареном нотебоок рачунару. Сврха жичаног оквира је да пружи грубу идеју о томе где би изглед странице требало да се креће са простором за попуњавање детаља касније.

Са садржајним садржајима треба узети у обзир колико ће платформа садржати. Изградња затвореног распореда од 2 до 3 колоне да би угостила 100+ страница дугог, замршеног садржаја неће оставити много простора за дисање. Скицирањем и планирањем унапријед можете контролирати количину простране собе за садржај странице. Ово не само да облаже текст или блокира подручја, већ се бави и сликама и видеозаписима.

Бриллиант Вхите Спаце

Могуће је да је бели размак најважнији фактор које треба узети у обзир приликом дизајнирања садржаја. Садржај веб сајта га регулише аллл, више него било који регуларни сајт. Ако читаоци не могу да разумеју садржај зато што нема места за варење ваших речи, саобраћај ће бити нејасан и незадовољан.

Одломци и заглавља страница су одлично место за почетак прилагођавања. Користећи ЦСС својства требало би да будете у могућности да манипулишете спољним маргинама и паддинг од сваког блока-лине текста елемента. Они укључују све наслове 1-6, параграфе, блокове, листе, преформатирани текст и неколико мањих елемената.

Ако желите да задржите пажњу свог читаоца, важно је применити размак испод главних текстуалних елемената. Параграфи и мањи наслови најбоље раде са доњим маржама од 15пк-25пк. За веће елементе странице као што су х1 или х2 узети у обзир 35пк + (то ће зависити и од величине фонта). Размаци између вертикалних елемената су важни за скроловање и скенирање "на први поглед". Међутим Висина линија је још једна важна ЦСС особина која утиче на размак између редова у елементу текста. Параграфи треба да имају много већу вредност линије-висине у поређењу са величином њиховог фонта тако да постоји много додатних додатака између линија.

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

Поред размака, дигитал типограпхи требало би манипулисати на начин да то учини скоком са странице. Са стотинама милиона сајтова у свету данас, уобичајено је да се види иста врста слова свуда.

Ако дизајнирате изглед за веб сајт који има велики садржај, резултат ће изгледати као још један благи предложак до краја. Има много својстава за играње са напредним типографским стиловима. Текст сенке, мање / више размака слова, позадинске платформе, иконе… листа је бескрајна.

Заиста сте дизајнер и ваша коначна реч је закон. Пројектовање распореда није успоредиво с аутопутем с једном траком без обрта. Током процеса можете да се вратите и промените стилове, манипулишете новим елементима или у потпуности уништите концепт. Размислите о неким другим корисним ЦСС саветима и заиграјте се да видите шта је најбоље!

Користите падајуће меније

Са толико садржаја, мало је вероватно да ће се сви ваши линкови уклопити на једну страницу. Постоји много опција о томе како обрадити преоптерећење страница. Постављање додатних линкова у бочне блокове или ушивене у колоне у подножју локације су две сврховите опције.

Најпогоднији и практичнији избор је креирање падајуће схеме навигације са категоријама глава и поткатегорија. Постоји и много скрипти отвореног кода које нуде под-категорије ако имате интензивно детаљне теме.

Можда је најбржа и најмање фрустрирајућа стратегија да почнете са ЈаваСцрипт оквиром. Неки од најпопуларнијих су јКуери, МооТоолс, или евентуално Прототипе. Све ове библиотеке нуде документацију и многе од њих имају слободне скрипте падајућег менија.

Планирање приказа садржаја

У пракси је много теже створити поједностављену површину тијела како би се задржао сав садржај који садржи ваш просјечан веб сајт. Са помицањем стандарда за прегледнике и полу-слабом мобилном подршком, није ни чудо што видимо да су такви садржајно интензивни веб сајтови оборени. Будите осетљиви на сваки стил веб странице на екрану. Неки ће садржати више слика, други могу садржавати примарну графику или видео или уопће не приказују графику. Када завршите са кодирањем коначног изгледа, креирајте више ХТМЛ страница да бисте приказали различите погледе.

Сви они ће имати исту интерну ознаку осим садржаја унутар главне области садржаја. Сваком појединачном приказу странице може се манипулисати и пружити увид у готов производ. Укључите ову опцију тако да садржи све главне приказе за које мислите да ће бити потребни за сваку страницу. Други примјери елемената странице могу укључивати оквире за коментаре, видеозаписе или уграђене галерије или везе подијељене странице.

План Стратегиес Тхоугхтли

Истина, није сасвим тешко креирати снажан веб распоред. Многи дизајнери су ухваћени у корак са малим детаљима, као што су како засадити елементе блока или хиперлинкове у боји. Ови детаљи су важни јер се шаљу преко поруке брендирања, чак и из мањих елемената порука треба да буде заједно са целином странице. Ментално планирајте фазе свог дизајна како бисте схватили како је најбољи приступ за сваку препреку. Ако радите са клијентом, било би добро да поразговарате о томе која врста садржаја ће претходно попуњавати странице. Ово вам даје могућност да унапријед испланирате и стратегишете најбољи приступ за општи изглед.

Још једна тема која се посебно бави дролом је мобилни дизајн. Ово ново тржиште доживљава огромну експанзију не само паметних телефона, већ и моћних таблет рачунара. То значи да корисници могу приступити вашем распореду са екрана за мобилне уређаје - побрините се да садржај није препун и да ли се он приказује уредно.

7 Примери Веб-страница са тешким садржајем

У наставку је приказано неколико примера снимака екрана популарних веб сајтова који су тешки за садржај. То су углавном познати брендови како на физичком тако и на дигиталном тржишту. Погледајте неке од идеја испод да бисте пронашли инспирацију у својим пројектима. Такође, можете слободно да поделите друге веб садржаје са садржајем у секцији коментара.

Цлицкер

Цлицкер је нова апликација за друштвене мреже за љубитеље ТВ и филмова. Можете да се региструјете за нови налог и пронађете неке од ваших омиљених класичних ТВ емисија, архивиране по сезони и листи епизода. Можете да упоредите локацију са ИМДБ-ом са мање информација и више видео садржаја!

Будућност веб дизајна

Будућност веб дизајна 2011 ће лансирати ствари у Лондону овог пролећа. Погледајте почетну страницу за више информација и одличан пример дизајна текста заснованог на тексту. Сви детаљи су заиста подијељени и нуде говорнике, распореде, радионице, спонзоре и још много тога.

Лорд Ликели

У овом комичном распореду главни лик Лорд Ликели је био "карикатизован" и перфориран у илустрацију. Сајт је подељен у три колоне са сваким новим спортским садржајем, огласима, линковима за феедове и архивама. Сам дизајн је веома ретро и паметан је у дизајну илустрација.

Мицрософт

Већина технолошких ентузијаста је упозната са Мицрософтом. У ствари, већина људи који разумеју шта је рачунар може вам дати и кратак опис Мицрософта и Билла Гатеса. Њихова почетна страница садржи садржај за десетине софтверских пакета, новости, саопштења и информације о програмерима. Мало пута низ страницу можете уочити вертикални мени са динамичким пребацивањем садржаја.

Сеарцх Енгине Ланд

Сеарцх Енгине Ланд је популарни веб магазин који се фокусира на претраживаче и интернет маркетинг. Они често ажурирају са невероватним квалитетним порукама и возе стотине хиљада људи на свој сајт сваки дан. Главна страница се дели на 3 колоне које се користе за држање сваког садржаја и огласа.

Бела кућа

Дизајн Сједињених Америчких Држава Бела кућа изгледа веома чисто и професионално. Постоји много информација о председниковом распореду и другим важним политичким догађајима. Један трик за ублажавање странице странице је додавање клизача са малим садржајем према наслову странице. Ово је одлично за приказивање 3-4 велика наслова вијести када Ваши посјетитељи пристану на страницу.

Иахоо Портал

Што се тиче великих садржаја, Иахоо! мора бити у тренду према врху. Иахоо! нуди стотине услуга својим корисницима, укључујући веб-пошту, вијести, видеозаписе, па чак и веб-претраживање. Погледајте неке од И! везе портала са бочне траке да бисте видели како се упоређују њихови предлошци.

Закључак

Ово су само неке од кључних тачака и корака за изградњу конкретних садржаја који захтевају изглед. На веб странице са великим садржајем резервоара често се гледа као на терет који садржи СЕО храну и ништа стварне вриједности. Дизајн је све што је први утисак који корисник добије са сваке веб локације. Са великом количином садржаја ово може постати катастрофа са нередом и преко генерализација. Никада немојте престати да вежбате и са само неколико пројеката ћете покупити мајсторство за замишљање садржаја који су интензивни.