Почетна » Веб дизајн » Концепти веб развоја Сви веб дизајнери треба да разумеју

    Концепти веб развоја Сви веб дизајнери треба да разумеју

    Има пуно тога за рећи подела пронађена између дизајнера и програмера. Дозвољено је да постоје многи хибриди дизајнера / девелопера који могу разумети обе стране новчића, али мало их је и далеко.

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

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

    Понашање Фронтенд кода

    За веб дизајнере се често мисли да имају вјештине сучеља као и дизајнерске таленте. Ово је тема о којој се често расправља, углавном зато што постоји нема тачног одговора.

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

    Вјерујем да би сваки дизајнер требао барем разумјети три основна језика развоја фронтенд-а (ХТМЛ, ЦСС и ЈС) заједно са начином на који се користе. На пример, већина падајућих менија се ослања на ЈаваСцрипт, али постоје и алтернативе само за ЦСС.

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

    То је могуће без учења писања једне линије кода.

    ЦСС је направљен стиле тхе вебсите. Углавном је статичан осим ЦСС анимације и ЦСС-а ствара већину слика на страници. Најдинамичније карактеристике су креиране помоћу ЈаваСцрипт-а.

    Ако можете разумјети ову подјелу, она ће удахнути свјесни напор у дизајнерски рад. Такође ће натерати дизајнере УКС покрета да размисле о томе колико посла иде у анимирање интерфејса.

    Респонсиве Тецхникуес

    Сваки веб дизајнер би бар требао знати тај термин Нацрт са одзивом. То дозвољава сајтовима да прилагодите се различитим величинама екрана, сваком од њих припада другачији распоред. Димензије уређаја када се примени нови распоред дефинисане тачкама прекида, додато у (једну од) ЦСС датотека.

    Тачке прекида су одређене а одређена ширина пиксела (и / или понекад висина), било минимално или максимално, при чему се изглед прилагођава величинама екрана. Тако ће одговарајући изглед изгледати другачије на монитору од 1080пк него на смартпхоне са 320пк.

    Да бисте видели како тачке прекида раде на стварним локацијама, погледајте веб локацију Медиа Куериес.

    Ваш посао као дизајнера је да размотрите како свака тачка прекида може утицај на модел. Можда имате задатак да дизајнирате неколико компаса, сваки уклапање у различите димензије екрана.

    Када схватите да ЦСС преломна тачка дефинише услове када се промена изгледа, имат ћете много лакше вријеме за испоруку тих средстава у развојни тим.

    Размислите о модуларном дизајну

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

    Модуларни дизајн описује начин креирања веб-локација “модуле” која може бити поново коришћени током времена. Размислите о дугмадима, обликујте улазе, стилове наслова или блоковске цитате са фенси стиловима.

    ако ти модуларни елементи дизајна, програмерима постаје лакше да кодирају изглед ЦСС класе за вишекратну употребу. Увијек је добра идеја размислити о томе гдје можете разумну поновну употребу исте боје, текстуре и елементе странице, али морате бити паметни у вези тога да не наруши укупну естетику.

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

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

    Разумети Ретина Имагес & СВГ

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

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

    Већина дизајнера већ зна за подршку @ 2к слике, али новији иПхоне 6+ уређаји имају @ 3к резолуција. Међутим, неки пројекти не сметају са величинама слике од 3к, па разговарајте са вођом пројекта пре него што финализирате било коју имовину.

    Још једна ствар коју треба размотрити је напредовање СВГ-а на Интернету. Сви модерни претраживачи подржавају СВГ који је а векторски формат слике. То значи да ће СВГ иконе аутоматски скала без губитка квалитета, тако да не требате средства мрежњаче за СВГ графику.

    Нису сви креативни тимови спремни да иду са СВГ-овима за веб дизајн. Сигурно су подржани од стране прегледача, али у неким случајевима могу бити и тешки за имплементацију. Због тога је комуникација од виталног значаја за успешан однос дизајнера / девелопера.

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

    Разумевање приступачности

    Прогрессиве енханцемент и достојанствена деградација два различита начина рјешавања истог проблема: приступачност. Неће сви корисници бити на уређајима или ће користити претраживаче који подржавају 100% динамичких функција веб сајта.

    Ови корисници и даље треба да добију искуство које ради, и ово треба да се обради са одговарајућим кодирањем. Неки читачи екрана могу игнорисати све ЈаваСцрипт и ЦСС кодове, али веб локацију и даље треба да функционише.

    Недавно сам покрио пост прогресивно побољшање детаљно, јер је то мој омиљени метод развоја. Прогрессиве енханцемент почиње са веома основним карактеристикама, онда ради до више “адванцед” Карактеристике.

    Достојанствена деградација је супротан приступ где Прво су дизајниране све главне функције, онда програмер одлучује како да се носи са овим функцијама ако корисник не подржава ЈаваСцрипт или ЦСС.

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

    На крају

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

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

    Ако тражите више повезаних садржаја, погледајте ове постове:

    • Како ефективно комуницирати са програмерима (смасхингмагазине.цом)
    • Помоћ дизајнерима и програмерима да науче да разумију једни друге (уие.цом)
    • Учење кодирања вам даје предности као УКС дизајнера (јессицаивинс.нет)