Modular web design is a system of reusable design components and patterns. These components can be combined in various ways to create websites fast, with a small effort, and for a smaller budget. But having ready patterns doesn’t mean that modular websites cannot be adjusted to needs or content. Find out more details about modular website design and its benefits in our short overview.

1. elinext.com
GoingmodularmeansmakingItalsomeanscomposedofstandardized
units,orinterchangeable.Themodulardesigntracesmuchofits
lineagebacktoprint-basedconcepts.
Amodularsitethat,forinstance,has5modulesthatcanbelaunchedandhavehundreds
ofpagepossibilities!!Thismeansyoucanlaunchasiteasaminimumviableproductand
stillhaveameasureofuniquenessthatatemplate-drivensitecan’tachieve.
Inthepast,aquick-launchsitemayhave2or3templates.Itwaseasyforauserto
noticethisandatasubconsciouslevelmakeajudgmentastothetimeandeffortput
intothesite.Now,youcangotomarketextremelyquicklyanditeratethesitebyadding
newmodulesasnecessary,aspartofanongoingcontinuousimprovementplan.
Modulardesigngivesmorelatitudetotheseindividualsandmorefreedomtoposition
andappliestheconceptstheywanttocommunicate.
Itishardtogiveanexampleofawebsitewiththemodulardesignwithoutbeing
accusedofadvertisingthisorthattrademark.
Indeed,itisnotthatdifficulttofinduser-friendlycommercialormarketingwebsitesout
there.We’vedecidedtohavearadetosomePinterestmodularwebdesign.
Ifyouarebrowsingalotonretailormarketingwebsites,youseemodularwebdesign
examplesveryoften.
EasierinTermsofMicroTargetedRedesignsRealizations.
Let’ssayinthepastyouwantedtohaveanewlandingpageputtogether.
Withmodularweb design,youcaneffectivelycutthedesigneroutof theprocess.
Youcanassemblealivemockupofyourlandingpage,basedonpartsthatalreadyexist.
Thepagecanthenbedistributedtoteammembersviatheactual,finalURL.
Asyoumayhavealreadyguessed,peoplearelesslikelytogiveoveralldesignfeedback
whenpresentedwithafunctionalURL.Mostlybecausepeoplewanttobeheardand
wanttogivefeedback,butrecognizethatinthislatestagemassivechangesprobably
aren’tlikelytohappen.
Modularwebdesignstartsatdesign.TheCMS mustbeflexibleenoughtohandleit.
Adeveloperisn’tqualifiedtocreatemodulesbasedonatemplateandunderstandwhat
amarketerdoesanddoesn’tneedtoaccomplish
Ifprintedontophysicalpaper,awebsitecanbecutintomodules.Usually,itwillbesuch
piecesasopnavigation,aheroimage,acontentblock.Maybeamoduleof3 blocksor2
blocks.
A designershouldbeabletobuildnewpagesbytakingthosepiecesandre-
assemblingthem.Basically,thisisthevelofcontrolyouwillhavewhenyoursiteis
modularlydesignedandintegratedintoacapablecontentmanagementsystem.
Thismeansyou’llneverhavetoworryagain,withthismethodology,aboutdoingcomplex,
convolutedwebsiteredesigns.We’vealreadyspokenaboutthecurrentwaywebsitesare
designed.Yougothroughathreetoasix-monthprocessofredesign,thenthesitesitsfor2
yearsuntiltheprocessrepeatsitself.Typically,eachtimeyou’llreinstallyourCMS platform
andportingcontentwillbesuchapainthatyoumayjustrewriteit.
Thatisanotherkeybenefitofthisapproach.Becausemodulesaresoindependentof
eachother,redesignsaremuchfaster.Topandbottomnavigationmodulescanchange
easily.Therefore,yournextredesignisn’tgoingtobeboggeddownintemplatedesign
(moreonthislater).
Instead,youcanchangepartsasyouseefitonanongoingbasistoseewhatworksor
doesn’tworkf romananalyticsperspective.Withthisnewmethodology,itispotentially
thecasethatyournextredesignandrebuildcouldbeyourlastforaverylongtime,
breakingthe2-yearcycle.
Modularwebdesignagainfocusesonparts.Designershaveto
workonthedesignofparts,andtheclientcanimaginetherange
ofpossibilities.Wealreadytalkedabouthowbuy-iniseasierfrom
management.But,asideeffectofthatisthatfewerrevisionsare
neededandfewerfunctionaltemplatemockupsarenecessary.
Thatresultsinlesstimespent,whichresultsinlowerbudget
requirements.
Also,considermaintenance.We’lltalkmoreaboutthislater,but
withatemplate-drivensite,youaregoingtohavemanyinstances
whereanewtemplatewillberequired.Thismeans,designand
developmentcosts,inadditiontoaccumulatingtechnicaldebt.
Thenewspaper— thekindweonceheldbut
prefertoscrollthroughtoday— isagreat
example.Savvyprintdesignerspioneered
theuseofcontentblocks,designatingeach
componentastorywouldhave: theheader,
textcolumns,imageswithcaptions,etc.
Havingago-totemplateisjustthekindof
thingyouneedwhenputtingoutadaily
publication.Time,afterall,willalwaysbeof
theessence.
Theimageshowsabasicmodularpage
setup,withcomponentsthatcanbeadded
ortakenawaybasedonthegivenpage.
Introduction
Difference Between
Templates and Modules
Benefits of Going Modular
Successful Examples of Modular Design
QuickerDevelopmentAndDeployment
GivesMoreControltoWeb Editors
EasierToMaintainAndAmend
It’sCheaperToBuildAndMaintain
i
Ifyou’reconsideringbuildinganewwebsite—orperhapsyou’rejustlookingtomake
yourexistingonealittlemoreuser-friendly— youmayhavecomeacrossafew
keywordsthatdescribeapproachestomodernweb design.Atomicdesign,or
modulardesignasit’softencalled,hasrevolutionizedthewaywebuildwebsites.
?
Canyouimagineif yournextredesigndidn’thappenintwoyears,
buthappenedonanongoingbasis?
Atthesametime,modulespossessthefollowingtraits:
Flexible Designapproach
Createinterchangeablecontent
blocksforcustomization
Lessrestrictivethantemplates
Followverticalandhorizontalflows
Templatesareabloatedconcept.
Theyhavealargenumberof
dependenciesbetweenthemselves.
Modulesareflexibleandadaptable.
Anentirewebpageisasetof
modulesfromtopnavigationdown
tothefooternavigation.
1
Formattingthat’sbasedonindividualdiscretionratherthan
contentstructureleadstotheinconsistentapplicationof styles.
2
Thestylethat’sappliedtoelementswithinthecontent,rather
thancontrolledglobally,convolutesyourcontentwithinline
HTMLandCSS code.Thiscreatesamesswiththewayscontent
beingreusedacrossthesite,andhowitisrenderedacross
differentscreensizes,orhowitcanbeadaptedinthefuture.
3
Asthenumberof pageswithcustomlayoutsincreases,the
designappearsmorehaphazard.Thisnegativelyimpactsthe
user’snavigationalflowandcancreateneedlessconfusion.
Alongsidewiththequitesignificantlistofbenefits,thereare
alsochallengesonthewayoffree-formdesigndeployment.
DennisKardys,directorof design& productionatDiagram,
web designerwith12yearsof experience,highlightsthe
followingchallengesof thef reeformdesign:
So,theinconsistencyofappstyles,reusabilityissuesacrossthewebsite
andsomesortofconfusionasthenumberofwebpagesgrowsisa
smallpriceforallthesebenefitslistedabove.
Challenges of the Free-Form Design
!
!
1
1
Formattingthat’sbasedonindividualdiscretionratherthan
contentstructureleadstotheinconsistentapplicationof styles.
2
2
Thestylethat’sappliedtoelementswithinthecontent,rather
thancontrolledglobally,convolutesyourcontentwithinline
HTMLandCSS code.Thiscreatesamesswiththewayscontent
beingreusedacrossthesite,andhowitisrenderedacross
differentscreensizes,orhowitcanbeadaptedinthefuture.
3
3
Asthenumberof pageswithcustomlayoutsincreases,the
designappearsmorehaphazard.Thisnegativelyimpactsthe
user’snavigationalflowandcancreateneedlessconfusion.
Alongsidewiththequitesignificantlistofbenefits,thereare
alsochallengesonthewayoffree-formdesigndeployment.
DennisKardys,directorof design& productionatDiagram,
web designerwith12yearsof experience,highlightsthe
followingchallengesof thef reeformdesign:
So,theinconsistencyofappstyles,reusabilityissuesacrossthewebsite
andsomesortofconfusionasthenumberofwebpagesgrowsisa
smallpriceforallthesebenefitslistedabove.
Challenges of the Free-Form Design
!
!
Thisisahugetopicthatgoesbeyondthescopeofthisinitialblogpost.To
haveamodularwebsitework,youneedasuitingcontentmanagement
system: asystemthatallowsmanagingthecontent,notweb pages.
CMS platformsshouldreturntotheirinitialstate: becomesystemsto
manage“content”,notthe “presentations” ofthecontent,suchas
websites.Themostpopularsystemsavailabletoday,fromopen-sourceto
enterprise,allfocusheavilyoncontentfromtheperspectiveofwebpages.
Acustomized,headlessCMS solutionmightbetheoptionforthefuture:
suchsystemsallowforcontentmanagerstomanagethecontentinan
organizedfashionandthenpublishtomultiplemediums.Ifyouronly
mediumrightnowistheWeb,youcanexpandittootherformats,rather
thanfocusingonastandaloneoption
Bestofall,withtheextendedlifespanofmodularwebdesign,andthe
already-provenlifespanofheadlessCMS systems,thismaybeyouroption
forthenext5oreven10 years.
Contentischanging.
ThemostfamousCMSs,likeWordPress,Drupal,orJoomla
areallobsessedwithintegrateddisplayfocusedontheWeb.
Technology Requirements
Thisisahugetopicthatgoesbeyondthescopeofthisinitialblogpost.To
haveamodularwebsitework,youneedasuitingcontentmanagement
system: asystemthatallowsmanagingthecontent,notweb pages.
CMS platformsshouldreturntotheirinitialstate: becomesystemsto
manage“content”,notthe “presentations” ofthecontent,suchas
websites.Themostpopularsystemsavailabletoday,fromopen-sourceto
enterprise,allfocusheavilyoncontentfromtheperspectiveofwebpages.
Acustomized,headlessCMS solutionmightbetheoptionforthefuture:
suchsystemsallowforcontentmanagerstomanagethecontentinan
organizedfashionandthenpublishtomultiplemediums.Ifyouronly
mediumrightnowistheWeb,youcanexpandittootherformats,rather
thanfocusingonastandaloneoption
Bestofall,withtheextendedlifespanofmodularwebdesign,andthe
already-provenlifespanofheadlessCMS systems,thismaybeyouroption
forthenext5oreven10 years.
Contentischanging.
ThemostfamousCMSs,likeWordPress,Drupal,orJoomla
areallobsessedwithintegrateddisplayfocusedontheWeb.
Technology Requirements
Youmaytalktoadesigner,who
wouldworktoassembleamockup.
Byaboutrevision10,youareprobablylosingany
levelof enthusiasmfortheentirecampaign.
You’dthenengageinaconvolutedseriesof
approvalsandmeetingstodiscussthedesign.
Templatesareaprimeexampleofthat.
Theyare:
Thatmakesyourcontentverylimitedin
termsofcreativityifnothingelse.
rigid
hardtomove
inflexible
Modular Web Design
The Way Modern
Websites Are Built
Webcontentmanagementsystems,suchasWordPress,
orDrupal,don’taimforcontrollingyourcontent.They
controlwebpages.Inotherwords,theyare”template
managementsystems” usedprimarily(andinmost
casessolely) forwebpagemanagement.
Content,initsturn,comesinvarious
forms: thiscanbeablogpost,a
collectionof dataintheformatof
spreadsheets,avideo,infographics,etc.
Contentcanbealmostanything,while
manyexistingCMS platformsareso
focusedonmakingcontentcreatorslive
forthesystemtheycreatedforyou.
Theyarerigidinbehavior,makingeditingpagestodospecificthingsdifficult.It’shardtomove
partsofatemplatearound,anditstandsinthewayofdevelopingfreeformsofthecontent.
Ithasintroducedanewlevelofflexibilityintothedesignprocesswhileputtingcontent
controlintothehandsofwebsiteowners.
Inthisarticle,we’llspeakofthedifferencesbetweentemplatesandmodulesinmodern
design,benefitsmodulardesignproposes,andchallengesithastoovercome.Wewillalso
explorethetechnologyrequirementsmodularwebdesignpossessesanddiscussthe:
Thisleadstoamorescalableinfrastructure,better
adherencetodesignstandards,andcontentauthors
whoareempoweredtoworrylessaboutpushingpixels
andfocusontheircoreexpertise: creatingbetterpieces
ofcontentandboostingsalesthroughyourwebsite.
Outro
Inmodularwebdesignthefocusofeffortofworking
atyourwebsiteshiftsawayfromagonizingovera
handfulofindividualpages(attheexpenseofallthe
others) andtowardasmartsystemof reusable
designpatterns,interchangeablecomponents,and
well-plannedsystemlogic.