Веб-дизајн наспроти веб-развој: која е разликата?

Двата термина се користат наизменично, што создава вистинска забуна кога фирмите тргнуваат да бараат веб-страница. Тие именуваат различни занаети. Веб-дизајнот одлучува што комуницира сајтот, како е организирана неговата содржина и како изгледа и го води посетителот. Веб-развојот таа одлука ја претвора во функционален софтвер во прелистувач.

Класичната метафора е архитектура наспроти градежништво, и таа е половично точна. Половината што ја пропушта: на веб, градежниот материјал – прелистувачот, мрежата, бескрајната разновидност на екрани – му се спротивставува на дизајнот многу посилно отколку што тулите им се спротивставуваат на архитектите. Затоа најдобрата веб-работа доаѓа од дизајнери и програмери што работат како еден мозок, а не како два оддела што си префрлаат датотеки преку ѕид.

Што опфаќа веб-дизајнот

Дизајнот почнува пред нешто воопшто да изгледа како нешто. Почнува со прашања: кој го посетува овој сајт, што им треба на посетителите, што треба да направат следно? Одговорите стануваат информациска архитектура – мапата на сајтот и редоследот на содржината – а потоа wireframes, намерно едноставни скици на структурата на секоја страница. Правилната хиерархија во оваа фаза е поголемиот дел од битката; убава страница што го закопува одговорот по кој дошле луѓето е неуспешна страница.

Визуелниот дизајн потоа ѝ дава глас на структурата: типографија, боја, растојанија, фотографии и библиотека од компоненти што одржува стотици мали одлуки доследни. На веб ова секогаш вклучува респонзивно однесување – секој распоред мора одново да се осмисли за телефон држен во една рака – а сè почесто вклучува и движење: како се комуницираат промените на состојбата, а не само како изгледаат статичните екрани.

• Истражување и информациска архитектура: што содржи сајтот и по кој редослед
• Wireframes: структура и хиерархија на страниците пред какво било стилизирање
• Визуелен дизајн: типографија, боја, растојанија, фотографии, компоненти
• Прототипови и респонзивно однесување на различни големини на екран

Што опфаќа веб-развојот

Front-end развојот ги преведува дизајните во HTML, CSS и JavaScript – а „преведува“ е потценување. Девелоперот одлучува како се однесува дизајнот на секоја ширина меѓу макетите, како одговара на корисници со тастатура и со читач на екран, што се случува додека се вчитуваат сликите и колку брзо сето тоа пристигнува преку осредна конекција. Две изведби на ист дизајн можат огромно да се разликуваат по квалитет, а разликата е невидлива на слика од екран.

Зад страницата стои остатокот од работата: управување со содржината за сопственикот да може да го уредува сајтот, форми чии пораки навистина пристигнуваат, интеграции со надворешни сервиси, хостинг, поставување, безбедност и резервни копии. Ова е делот од занаетот што никој не го гледа кога работи – што е точно стандардот на кој се мери.

Развојот е и местото каде што се одлучува долготрајноста. Код што е добро структуриран може да се надградува со години; код што само ја репродуцира макетата станува товар првиот пат кога на бизнисот ќе му затреба нов тип страница. Кога плаќате за развој, дел од она што го купувате е невидливо на денот на лансирањето и се покажува дури оној ден кога ќе побарате промена.

Каде се преклопуваат двете

Чистата поделба – дизајнерите прават да биде убаво, програмерите прават да работи – се распаѓа при допир со реални проекти. Изборот на типографија влијае на времето на вчитување. Идеите за распоред се евтини или скапи во зависност од тоа како навистина работи CSS. Анимацијата живее во двата света истовремено: дизајнерот одлучува што значи движењето, програмерот одлучува кое движење е течно. И пристапноста е заедничка – контрастот на боите е дизајнерска одлука, семантичкиот код е развојна, а корисникот ги доживува како едно.

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

Како дизајнерите и програмерите соработуваат на вистински проект

На здрав проект дисциплините се испреплетуваат наместо да чекаат во ред. Развојот се консултира за време на дизајнот, па амбициозните идеи се проверуваат за изводливост додека сè уште е евтино да се променат. Дизајнот останува вклучен за време на изработката, прегледувајќи го вистинскиот сајт во вистински прелистувач – затоа што прелистувачот, а не макетата, е готовиот производ. Предавањето е разговор што трае со недели, а не папка со датотеки испорачана еднаш.

Артефактите на модерното предавање го одразуваат ова. Освен макети на страници, тимовите разменуваат дизајн-токени – именувани вредности за бои, растојанија и типографија што ги делат и дизајнерската алатка и кодот – и одржуваат библиотека од компоненти што постои двапати, еднаш во дизајнерската датотека и еднаш во код, намерно држени синхронизирани. Кога тие две библиотеки ќе се разидат, секоја идна страница чини повеќе отколку што треба.

Ова е аргументот за ангажирање дизајн и развој заедно, кога можете. Секој проект во нашето портфолио е дизајниран и развиен од истиот мал тим, и практичната придобивка е точно оваа: нема јаз во кој паѓаат одлуките и нема трета страна за обвинување кога нешто ќе падне во него.

На што да внимавате при ангажирање

Без разлика дали ангажирате студио, фриленсер или двајца специјалисти, методот на оценување е ист: судете по објавена работа, во прелистувач, на телефон. Сликите од портфолио докажуваат дека некој може да прави слики од веб-страници. Живите сајтови докажуваат дека може да прави веб-страници.

• За дизајн: гледајте живи сајтови со вистинска содржина – дали хиерархијата е јасна, дали наоѓате што барате, дали издржува на мал екран?
• За развој: отворете ја нивната работа на телефон од средна класа преку мобилен интернет; брзината и сецкањето кажуваат повеќе од која било презентација
• Прашајте кој го поседува предавањето меѓу дизајн и развој и како се решаваат промени во дизајнот среде изработка
• Побарајте да видите еден проект низ двете призми: дизајнерското размислување и техничките избори зад него
• Бидете претпазливи со секој што другата дисциплина ја претставува како нешто споредно – преклопувањето е местото каде што ќе живее вашиот сајт