TheRiseofDesignEngineering.
Inthisblogwe'lldiscoverwhatdesignengineeringisandwhyitissuddenlybecomingsopopular.We'llalsoexplorethebenefitsofdesignengineeringandhowitcanhelpteamscreatebetterproducts.
Okaysolet'sstart....
Everyonecaresaboutthereproductsomuchanddaybydayattemptstoimproveitandthuswe'vegottwotypesofpeopleinacompany.
1.Whocaresabouthowthingslook.
2.Whocaresabouthowthingswork.
Andclearlywe'vegotaGAPandthereisaspaceforimprovement.
GAP
Believemeornotthisgapisbig.Letmetrytoexplainitinsimplerwords.
Whenworkinginacompany,therearemultipleteamsworkingondifferentaspectsofaproduct.Andthusforthesakeofthisblogwe'llprimarilydivideinto3teams.
1.DesignTeam
1.FrontendTeam
1.BackendTeam
Sotheabovetermsareselfexplanatory.Butwheredoestheproblemarise.Theproblemishowthingsworks,peopleindesignteamdesignappsandtheyprimarilyfocusontheUI/UXandyouknowfigmarelatedstuff.
Thepeopleinfrontendteamaremoreconcernedabouthowtoreplicatetheexactdesigngivenbythedesignteam.Andalsotheyhavethisconstantthinginmindthatwealsoneedtolookoverfortheapi'sandstuffbecausethisishowanyappontheinternetfunctions.
Andthisiswheretheproblemlies.Bothpeoplecommunicateindifferentlanguagesandcontexts.OftentimespeopleinfrontendcannotunderstandtheintentbehindtheUIDesignandthuscannotconveythemessagewhichdesignteamsintended.
Samegoesforthedesignerstheycannotunderstandthetechnicalconstraintsandlimitationsoffrontenddevelopment.Plusaddinganimationsandinterationsontopofitfeelsoverwhelmingforthefrontendteams.
AndthisiswhereDesignEngineeringcomesin.DesignEngineeringisthenewdisciplinethatfillsthegapbetweendesignanddevelopmentteams.
Whatdotheydo?
Wedo2things
Wemanage/createdesignsystemsandaswellascodeandcritiquethem.Yesthisiswhatourjobis.
Ourjobistomakeproductlookasgoodaspossiblebyfixingeverymicro-detailandaddinglifetoitbyaddinginterationstomakeitfulfilling.
Howdowediffer?
Youmightbethinkingthat!,buthowdoesadesignengineerdifferfromafrontenddeveloper,backenddeveloperoraUIdesigner.
Thisisaveryinterestingquestionandletmeexplain.Inacompanytherearetwoteamsoneofdesignersandotheroffrontenddevs,whendesignersgivesUItofrontenddevstheyareprimarilyconcernedabouthowtoreplicatetheexactdesign.Anddesignersalsoareconceredabouthowthedesignwillappeartotheuserandviceversabutclearlythereisalwaysagapbetweenthetwoteamsthatstopsfrontendtoreachthefinestpotentialofthedesign.Tofillthisgapweexist.
Designergivesthedesigntothefrontenddevssayingheycanyoudesignit?Butthefrontenddevscanreplicatethedesignbuttheylackthe"taste"thedesignengineerhavetomakethedecisionsthemselves.
Theylackthatopinionatedmindsetandpushtomakethingsasgoodaspossiblesotheylackthetraitwhichdesignengineer'shave.Yeswebothfocusonbuildingthefinalproductbutwecareaboutpushingtheboudariesandmakingitasgoodaspossible.Wedon'thavetorelyondesignsaswholetodothejob.
Likefullstackdeveloperswhoseskillsarebroadlyspreadout,inthesimilarfashiondesignengineersalsohavethatbroadskillsetbutwegotthedepthindesign,wegotthatsecondlayerwhichmostpeopledon'tseethatwemakesuretogetthetiniestinteractionsfeelright.
Anddesignersaswelltheydesigninfigmabuttheycan'tactuallydeliverthefinalproductbecauseyoucannotbrowseawebsiteinfigmaandifyou'rewonderingaboutnocodetoolsanddesigntocodethings,brothertheseareonlylimitedtoverybasicstuffnotaproducitongradeproduct.Butthat'swhyweexistwecannotonlydesignbutcanconvertitintocode.
Whydoweneedthem?
Soyoumightbethinkingwhydoweneedthem?AndI'lltellyouthreeimportantreasonsthatwhyyouneedus.
1.Slop
NowadaysfrontenddevsanddesignersarevibecodinganddesigningalotandtheyrelyonAIalotmorethanyoucanevenfathomandintheendwhatAIspitsisthisbelowexample,Acompleteuttertrashthatnormalpeopleusenotbecausetheywanttobutbecausetheyhaveto.Poorlydonescrolldrivenanimations,gradientseverywherewithoutthinking,badtypography,badstyling,badlayoutsarepureexamplesofSlopOverallyoucanfeelthatthereisnocohesivenessbetweenthedesign.Weasdesignengineersmakesurethisthingneverhappens.Ourjobistomaketheproductdifferentiatetomakeagoodproductalsolookspecialtopeople.
2.Taste
Oknowtrytheabovethinganddoyouseethedifferencebetweenthetwobuttons?
Noticethatboththebuttonshavethreestatesbutthefirstoneisskippingthetransitionsandisfeelingabruptmeanwhilethesecondbuttonisshifting/morphingthelayoutandtexttoadjustsuchthatitislookingverysmoothtooureyesandaninteractionthatsitsinyourmindforalongtime.That'stasteforyou.
Youmust'veseenthefirstoneinplacesnowjustimaginehowgoodwillitbeifreplaceitwiththesecondone.
ThethingyouneedtotakeawayisthathowIcanmakethistinyinteractionintosomethingthatpeoplecanremember.Forrefssomeexamplesare....Linear,Resend,Neon,Stripeetc.
3.Speed
Thisissomethingwhichmakesapillarlikedifferencebetweenotherdevsanddesignengineers.Seethebelowexample(Tryhoveroveritandifyou'reonmobiletryclickingit.)
AsyoucanseethatI'vebuiltanSVGhoveringInteractionbutthethingisI'vemadeitinlessthan10minsandyetitlooksgood,itfeelsgood,isresponsiveandcapturesaverynicefeedbackfromtheuser.Ifyou'rewonderingwheredidIgetthatSVGfrom.IcreateditsometimebeforeformyproductinfigmaandIwantedtoanimateitsoIexporteditasSVGandfortheanimationspartIdiditwithAntigravitywithopus4.6pluggedin.Anditjusttookme3promptsandabitofaddingtastetoitanditsumsupto10minutesintotaltogeneratethisbeautifullinteraction.
Noticethespeed,generallytodothistypeofinteractiondevstakehourssittingandcrackingtheexactdetailsorsimplygivingittoAIbutforgetsthetaste.
What'staste?
NowIwanttodiscussmoreabouttasteanditisactuallyverysimpletounderstand.
RickRobin-Heistheguywho'sbeenintheroomforalongtimebutthethingisheisamusicianbutheisnotthebestsellingartistornotevennearthebesttitlebutthethingabouthimispeoplelikeJayZ,BeastieBoyz,Adeleandlistgoesonandon.Why?becausepeoplerespecthisopinionpeoplegoestohimjusttoaskforhisopinionbeforereleasingthesong,youknowwhatimeanright!
Thesamewaydesignengineersare,peoplecometoustogetthatopinionbecausewehavethatopiniatedtastethatmakesthegreatproductfeelspecial.
Nowlet'sbustamyththattasteisinherited.
PeoplethinkthattasteislikeasomegenerationalwealthtypeshitwhichonlyfewpeoplehavearoundtheworldbecauseI'vereaditonreddit,Xandalsoonsubstackaswell.Imeanwtf.I'msuperagainstthisthingandletmeshowyousomewayswhereyoudeveloptasteorganically.
1.FollowmultipledesignengineersonXtheyregularlysharetheirworkonXandpostverygoodcontentwhichwillhelpyoulearnbywatchingthem.SomeofthegoodoneswhichIfollowareManuPaaji,EmilKowalski,Jakub,NitishKhagwaletc.
2.Startobservingthetiniestdetailsoneverywelldesigned/engineerdwebsiteslikeresend,linear,verceletc.Noticehowtheyimplementthingsintoproduction
3.CreateIdoneverythinglikePinterest,Dribble,Behance,Substackeverythingandstartlookingatpeople'sworkbeforeyoustartyourstogetaninpirationandalsotogetthattasteinyou.Youcanalsostartsharingyourworkontheseplatformstogetfeedbackfromthecommunity.
Sonowyouknowhowtostudyanddevelopthetasteinyouright?
Verdict
DesignEngineeringisgrowingrapidlyandyoualsojointhewaveifyoucanmasterabitoftastebecausealwaysrememberweasdesignengineerexistbecausewegotthatspecialtastewhichcomesfromalotofpractiseandlearning.Somakesureyoudoyourhomework.
Ifyou'rewonderingthisistheend,noitisn'tit'sjustthatI'mtiredoftypingrightnowandthisblogisalredystrechedenoughsoprobablyI'llcontinueinthenextone.