Мазмун
- Белгисиз үчүн долбоорлоо
- Дизайнга карата прагматикалык мамиле
- Агностикалык макетке айлануу
- Кодирование бара-бара
- Белгиленгенге чейин чумкуу
Бүгүнкү күндө ар бир адам жооптуу веб-дизайн жөнүндө сүйлөшүп жаткандай сезилет жана жүйөлүү себептер менен; веб-иштетилген түзмөктөрдүн саны өсүп келе жаткан сайын - ар бири ар башка мүмкүнчүлүктөрү менен өзгөчөлүктөрүнө ээ болушкандыктан, туурасы кең веб-сайттарды куруу акылга сыйбайт.
Чындык, андай болгон эмес. Бирок ушул кезге чейин бир катар божомолдорду жараткан тажрыйбаларды иштеп чыгуу эң мыкты практика деп эсептелген, экрандын чечилиши, өткөрүү жөндөмү же киргизүү ыкмасы боюнча. Эгер сиз 960px кеңдиктеги веб-сайтты иштеп чыксаңыз, анда аны досуңуздун кичинекей экрандык нетбукунан көрүү үчүн гана (жана ооба, мен бул жердеги азаптуу окуялардан жазып жатам), эмне үчүн бул өзгөчө акылдуу мамиле болбогонун түшүнөсүз. Эми смартфондор жана планшеттер аралаштырылып салынгандыктан, биздин салттуу ыкмалар максатка ылайык келбей калганы айдан ачык.
Бактыга жараша, CSS медиа сурамдарынын пайда болушу жана веб өз алдынча маалымат каражаты экендигин таануу өсүп жаткандыгы, биз анын универсалдуулугу алсыздык эмес, күч экендигин кабыл алып, платформанын чыныгы табиятын кабыл ала баштадык дегенди билдирет.
Кийинки беш күн аралыгында, мен сизге ушул фактыны тааныган ыкманын жардамы менен көрсөтөм: жооптуу веб-дизайн. Ethan Marcotte тарабынан иштелип чыккан, бул суюктуктун макетин, ийкемдүү сүрөттөрдү жана медиа суроолорду айкалыштырып, алар туш болгон ар кандай шарттарга ылайыкташкан сайттарды курууга жардам берет.
Бул ыкманы сизге жөнөкөй медиа галереяны кантип курууну көрсөтүү менен көрсөтөм. Менин мисалдарымда, мен жакында Америка Кошмо Штаттарын аралап өткөн жол сапарымды документтештирүү үчүн чакан вебсайт түзүп берем, бирок кодду жана дизайнды өз муктаждыктарыңызга ылайыкташтыруудан тартынбаңыз.
Белгисиз үчүн долбоорлоо
Бул окуу куралынын көпчүлүгү сезимтал дизайнды иштеп чыгуу аспектисинин айланасында болот. Бирок кандайдыр бир кодду изилдеп көрүүдөн мурун, чексиз макеттерге ээ веб-сайтты кантип иштеп чыгарыбыз жөнүндө ойлонуп көрөлү.
Азыр, мен интерфейстерди иштеп чыгууга мүмкүнчүлүгүм бар жана аларды чыныгы кылган алдыңкы кодду иштеп чыгуу. Бул, албетте, уникалдуу чеберчилик эмес - эгер сиз өзүңүз үчүн иштесеңиз, анда сиз дагы бирдей болосуз. Бирок суюктуктун дизайнын жасоодо, анын мазмуну кандайча ыңгайлашып, жаңыланып турарын түшүнүү пайдалуу.
Ошондой эле, менин ролум атайын адистештирилген чоң топтун курамында иштейм. Мындай шартта визуалдык дизайнер сым кадрларын жагымдуу, жагымдуу (кол коюлган, пикселден кемчиликсиз) комплекттерге которууга гана багытталат. Ошондой эле, иштеп чыгуучулардын бул жайгашууларды арык жана натыйжалуу белгилөөгө жана CSS форматына которуп, өзүнчө жайгашуусу таң калыштуу эмес.
Бирок, мындай сызыктуу жана өзүнчө бөлүнгөн жумуш агымдары, биз ар кандай чөйрөлөргө кандайча ылайыкташа тургандыгын баалап баштагандан кийин тез бузулат. Жаңы курал же технология сыяктуу эле, биз дагы кызматташуунун жана шамдагай иштөөнүн жолдорун карашыбыз керек. Жооптуу веб-сайттарды иштеп чыгууда пайда болгон эң татаал көйгөйлөрдүн көбүн сүйлөшүү, эксперимент жана кайталоо жолу менен чечүүгө болот.
Дизайнга карата прагматикалык мамиле
Дизайнерлердин кандайдыр бир түзмөктүн чегинен тышкары иштеп чыгышы жөнүндө ойлонууга мүмкүнчүлүгү жок деп айтууга болбойт.
Clearleft программасында биз визуалдык дизайнды жумушчу столдун көз карашынан баштайбыз. Биз жалпы дизайн тилин жана визуалдык эстетиканы аныктоодон баштайбыз, көбүнчө баштапкы изилдөөлөрдү мазмундун негизги бөлүгүнүн айланасында жүргүзөбүз. Мисалы, биз тамак-аш сайттын долбоорун иштеп жаткан болсок, анда биз рецепт барагы менен баштайбыз; жаңылыктар сайты, окуялар барагы үчүн.
Бул сайттын маанилүү баракчасы гана болбостон, типографиялык палитра курууга жетиштүү структураланган мазмунду камтыса керек. Ошондой эле, макет кандайча ылайыкташа турганы жөнүндө ойлонобуз - ушул этапта биздин оюбузда болсо дагы.
Дизайнды стресстен өткөрүүнүн пайдалуу ыкмаларынын бири - мындай баракчаны алып, аны тарыраак (кеңдиги ~ 320px) экранга ылайыкташтыруу. Дизайндын кээ бир аспектилери ушул кеңдикте иштеши үчүн, аларды кайрадан карап чыгуу керектигин байкадыңыз. Бул жерде бир нече мисал келтирилген:
- Типография: Чоң рубрикалар кененирээк макеттерде жакшы иштеши мүмкүн, бирок кичинекей экрандарда алар тик мейкиндикти көп ээлеши мүмкүн, ошондуктан кошумча жылдырууну талап кылат. Сызыктын узундугу өзгөргөн сайын, сызыктын бийиктигин жана башка типографиялык дарылоону да эске алуу керек.
- Шилтемелер: Сиздин дизайн сенсордук экрандарда кандайча иштейт? Азырынча бизде буларды табуунун оңой жолу жок болсо дагы (дизайндын бардык аспектилерин эске алышыбыз керек), бирок тарыраак экранды түзүү бизге шилтемелер жана башка интерактивдүү элементтер үчүн максаттуу аймактар жөнүндө ойлонууга мүмкүнчүлүк берет. . IOS колдонмолору бул 44 пиксель / баллдан кем эмес чарчы болушун сунуштайт, бул максатка ылайыктуу көрсөткүч.
- Багыттама: Бул, балким, сиздин сайтыңызда көптөгөн бөлүмдөр жана терең иерархия болсо, ар кандай сезимтал дизайндын эң ыңгайсыз компоненти болот. Брэд Фрост учурда каралып жаткан навигацияга карата ар кандай ыкмалардын кыскача баяндамасын жазды.
- Ашыкча мазмун: Айрым мазмундун кереги жокпу? Башка мазмунун айрым сценарийлерде гана көрсөтүү керекпи? Колдонуучу кайсы шайманды колдонуп жатканына негизделген мазмунду жашырууну жактай бербейм, бирок шарттуу жүктөө сыяктуу ыкмалар (биз ушул жуманын аягында карайбыз) бизге кошумча баракчаларды талап кылганда гана жүктөгөн чакан баракчаларды тейлөөгө жардам берет.
Эки карама-каршы макетти иштеп чыгуу, дизайн ылайыкташат деген ойду бекемдейт, ал эми потенциалдуу готчаларды эрте менен үтүктөйт. Бул иш эки эсе көбөйгөндөй сезилсе дагы, биз ар бир баракты пикселдик тактыкка ылайыктап иштеп жаткан жокпуз. Тескерисинче, биз масштабдуу дизайн тилин курууга көңүл буруп жатабыз - аны код менен ишке ашыра баштаганда өнүгүп-өсүүчү жана жеке модулдар менен компоненттердин айланасында негизделген.
Агностикалык макетке айлануу
Тарыхый түрдө интернетке басма сыяктуу мамиле кылган тармак үчүн, туурасы боюнча, белгиленген кеңдиктер биз чыгарган көптөгөн натыйжалуулукка жайылып кеткендиги таң калыштуу эмес. Ыңгайлаштырылуучу чөйрөнү иштеп чыгууну баштаганыбызда, чөйрөнүн суюк мүнөзүн таанып, көйгөйлөрдү чечүүгө жана идеяларды жеткирүүгө мүмкүнчүлүк берген жаңы ыкмалар каралууда. Менин сүйүктүүлөрүмдүн айрымдары:
- Баракты сүрөттөө схемалары: Сым кадрлары көбүнчө макетти билдирет (демек, кандайдыр бир түзүлүштү болжолдойт), баракты сүрөттөө схемалары бул божомолду жокко чыгарып, анын ордуна документте приоритет боюнча жайгаштырылган айрым компоненттерди сүрөттөйт.
- Стиль плиткалары: Дизайн идеяларын кардарлар менен байланыштырганда, биз "веб-сайттардын сүрөттөрүн" сунуштайбыз. Эгерде биз этият болбосок, анда кардарлар башка түзмөктөрдө дизайн кандайча көрүнүп турарын көрсөткөн түшүнүктөрдү көрүүнү өтүнүшөт. Бул бизди бир нече түзмөктөр үчүн бир нече баракчаларды чыгаруунун туруксуз абалына түртүшү мүмкүн. Саманта Уоррен бул көйгөй жөнүндө ойлонуп, стилдеги плиткаларды ойлоп тапты. Алар маанай тактасынын ортосунда (бирок анча-мынча бүдөмүк) жана толугу менен ишке ашкан компселердин ортосунда (бирок анча так эмес) отурушат жана типография, баскыч стилдери жана мачталык дарылоо ыкмалары жөнүндө сүйлөшүүгө жардам беришет. Алар ошондой эле биздин кардарлар менен талкуулоонун кыйла жетилген деңгээлине үндөшөт.
- Дизайн оюнун мобилизациялоо: Бул көнүгүү биргелешип дизайн семинарларында жакшы иштей алат. Бул көнүгүүдө ар бир адам Post-it баракчасында пайда болушу мүмкүн болгон элементтерди белгилейт. Андан кийин булар мобилдик телефондо сызыктуу көрүнгөндөй болуп, маанилүүлүгүнө жараша дубалга илинишет. Натыйжада талкуу таң калыштуу тыянактарды жаратышы мүмкүн. Мисалы, навигация беттеги эң маанилүү компонент эмес экендигин түшүнөсүз. Бул беттин жогору жагындагы өткөрүп жиберүү шилтемеси колонтитулдагы навигацияга шилтеме берген дизайнга өтүшү мүмкүн.
Албетте, колдонуп жүргөн шаймандарга дагы деле орун бар, бирок веб-сайтты түзүүдө кеңири мааниде, макет белгилүү болбой калгандыгын эсибизден чыгарбашыбыз керек.
Кодирование бара-бара
Бактыга жараша, биз иштеп жаткан мисалда визуалдык дизайн жөнүндө тынчсыздануунун кажети жок, анткени биз үчүн оор жумуш аткарылды! Тескерисинче, биздин дизайнды толугу менен жооп бере турган веб-сайттын кодуна топтой алабыз.
Баштаардан мурун дагы бир нерсе. Биз иштеп жаткан чөйрөнүн негиздөөчү принцибин эсибизден чыгарбаганыбыз маанилүү: универсалдуулук. Бул бүгүнкү күндүн желеде иштей турган түзмөктөрү үчүн гана курбастан, кечээки жана эртеңки шаймандар менен шайкештигин билдирет. Джон Оллсопп бул принциптин эмне үчүн маанилүү экендигин кийинки 6 миллиард постунда мындайча сүрөттөгөн:
"Кийинки алты миллиард Индияда, Африкада, Кытайдагы электр кубаты жана тармактар менен иштөө мүмкүнчүлүгү үзгүлтүккө учураган балдар. Бул Суматрадагы он жылдык Wintel коробкасындагы адам. Жүздөгөн ар кандай тилдерде сүйлөгөн, ондогон башка тилдерде сүйлөгөн адамдар. жазуу тутумдары.Үй-бүлөсүндө биринчилерден болуп окуганды жана жазганды билген адамдар.Дүйнө жүзүндө окуй же жаза албаган адамдардын 20% ы.’
Веб жөнүндө түшүнүгүбүздү биздин кесиптин арасынан орун алган ар кандай модага (жакшыраак сөздү каалоо үчүн) карап көрсөк болот: веб стандарттары, жеткиликтүүлүк, жөнөкөй JavaScript ... бардыгы бирдей темада варианттар: прогрессивдүү өркүндөтүү. Ушундай эле жооп веб-дизайнга да тиешелүү. Куруу үчүн чындыгында жооп вебсайт - бул артка гана шайкеш келбестен, келечектеги достукка ылайыктуу сайтты куруу.
Белгиленгенге чейин чумкуу
Макул, преамбула жетиштүү, тексттик редакторду ачууга убакыт келди.Дизайнериңиз бизге столго багытталган дизайнын сунуштады жана мунун тар көрүнүш терезесинде кандайча пайда болушу мүмкүн экендиги жөнүндө мисал келтиргендей боорукер болду.
Буларды өзүнчө коддоо азгырык болушу мүмкүн, бирок мен башкача мамилени сунуштайм. Дизайнды түзгөн өзүнчө компоненттерди - же оймо-чиймелерди бир бетке жайгаштырып, биз үлгүлөр портфолиосун түзө алабыз. Бул бизге каалаган барактын жайгашуусунун чектеринен тышкары компоненттерди иштеп чыгууга мүмкүнчүлүк берет жана кийинчерээк ар кандай регрессиялык тестирлөө үчүн кайрыла турган нерсе берет. Баштапкы белгилөөнү бир нече ар кандай шаймандарда карап көрөлү:
Биздин белгиленген үлгү портфолиосун көрүү
Ооба, мага каргыш тийет - бизде буга чейин жооп бере турган веб-сайт бар! Биздин камтылгандар ар бир шаймандын чектерине ылайыкташтырылып, жаңы iPad же четке кагылган өзгөчөлүктөгү телефонго ылайыкташтырылган. Ал тургай, Lynx сыяктуу тексттин гана браузеринде иштейт.
Универсалдуулуктун түпкү принциптеринин аркасында желе демейки боюнча жооп берет. Бул абдан сонун, бирок мындан ары биз кодду жасасак, бул жергиликтүү адаптацияга шек келтириши мүмкүн дегенди билдирет.
Эртең: Биз кылдаттык менен басабыз жана сезгич дизайндын биринчи аспектисин колдоно баштайбыз: типография жана суюктук торлору.
