{"id":319,"date":"2026-10-25T13:49:20","date_gmt":"2026-10-25T13:49:20","guid":{"rendered":"https:\/\/webdesign.stustustudio.com\/?page_id=319"},"modified":"2026-10-25T13:49:20","modified_gmt":"2026-10-25T13:49:20","slug":"design-lab","status":"publish","type":"page","link":"https:\/\/webdesign.stustustudio.com\/?page_id=319","title":{"rendered":"Design Lab"},"content":{"rendered":"\n<section class=\"wrap page-hero\"><p class=\"eyebrow\">THE DESIGN LAB \/ A FEW THINGS TO PLAY WITH<\/p><h1>Small choices.<br><em>Big difference.<\/em><\/h1><p class=\"lede\">Modern web design is more than a look. It\u2019s how a layout adapts, how type creates hierarchy, and how an interaction helps you understand what\u2019s possible. Try it for yourself.<\/p><\/section>\n<section class=\"wrap experiments\"><noscript><p>Enable JavaScript to use the experiment controls. The sample designs and explanations remain available below.<\/p><\/noscript><article class=\"experiment\"><div class=\"experiment-info\"><p class=\"eyebrow\">EXPERIMENT 01 \/ RESPONSIVE COMPOSITION<\/p><h2>Give it<br>some space.<\/h2><p>A responsive layout changes with the room available. Move the slider to see the same content reorganize inside a narrower or wider container.<\/p><label for=\"layout-width\">Canvas width <output id=\"layout-value\">100%<\/output><\/label><input id=\"layout-width\" type=\"range\" min=\"40\" max=\"100\" value=\"100\"><p class=\"micro\">Try the slider on a wide screen. On a phone, the canvas stays within your screen.<\/p><\/div><div class=\"experiment-stage grid-stage\"><div class=\"responsive-demo\" id=\"responsive-demo\"><div class=\"demo-card featured\"><span>FIELD NOTES \/ 001<\/span><div class=\"demo-sun\"><\/div><h3>Room to<br>see differently.<\/h3><p>Illustrative layout study<\/p><\/div><div class=\"demo-card peach\"><span>02 \/ DISCOVER<\/span><h3>A fresh<br>perspective.<\/h3><span class=\"demo-arrow\">\u2197<\/span><\/div><div class=\"demo-card lime\"><span>03 \/ EXPLORE<\/span><h3>Make space<br>for the idea.<\/h3><span class=\"demo-arrow\">\u2733<\/span><\/div><\/div><\/div><\/article><article class=\"experiment\"><div class=\"experiment-info\"><p class=\"eyebrow\">EXPERIMENT 02 \/ TYPOGRAPHY<\/p><h2>Same words.<br>New energy.<\/h2><p>Type sets the tone before you read a sentence. Adjust the scale and switch the style to explore the relationship between character and hierarchy.<\/p><label for=\"type-scale\">Type scale <output id=\"type-value\">64px<\/output><\/label><input id=\"type-scale\" type=\"range\" min=\"32\" max=\"88\" value=\"64\"><div class=\"segmented\" role=\"group\" aria-label=\"Typeface style\"><button type=\"button\" data-font=\"sans\" aria-pressed=\"true\">Modern sans<\/button><button type=\"button\" data-font=\"serif\" aria-pressed=\"false\">Editorial serif<\/button><\/div><\/div><div class=\"experiment-stage type-stage\"><span class=\"eyebrow\">A TYPE STUDY<\/span><p id=\"type-demo\">Make it<br>mean something.<\/p><div class=\"type-baseline\"><\/div><p>Expressive headlines. Readable details.<br>Every word has a job to do.<\/p><\/div><\/article><article class=\"experiment\"><div class=\"experiment-info\"><p class=\"eyebrow\">EXPERIMENT 03 \/ COLOR &#038; CHARACTER<\/p><h2>Change<br>the atmosphere.<\/h2><p>A small palette can carry a lot of personality. These themes change the background, text, and accent together to keep the design cohesive.<\/p><div class=\"theme-options\" role=\"group\" aria-label=\"Sample color palette\"><button data-theme=\"warm\" aria-pressed=\"true\">Warm studio<\/button><button data-theme=\"ink\" aria-pressed=\"false\">After hours<\/button><button data-theme=\"garden\" aria-pressed=\"false\">Fresh air<\/button><\/div><p class=\"micro\">Theme choices affect this example only.<\/p><\/div><div class=\"experiment-stage palette-stage\" id=\"palette-demo\" data-palette=\"warm\"><span class=\"eyebrow\">A DIFFERENT KIND OF EVERYDAY<\/span><div class=\"palette-shape\" aria-hidden=\"true\">\u2733<\/div><h3>Find your<br>own rhythm.<\/h3><p>A little intention changes everything.<\/p><span class=\"sample-pill\">An illustrative brand study \u2197<\/span><\/div><\/article><\/section>\n<section class=\"wrap section two-col\"><div><p class=\"eyebrow\">THE DETAILS BEHIND THE FEELING<\/p><h2>Useful is<br>a design decision.<\/h2><\/div><div class=\"principles\"><article><h3>Built for different screens.<\/h3><p>Flexible grids, fluid type, and thoughtful spacing let the content find its place without asking visitors to zoom or hunt.<\/p><\/article><article><h3>Comfortable to navigate.<\/h3><p>Clear labels, visible keyboard focus, and native form controls help more people move through the experience.<\/p><\/article><article><h3>Motion with restraint.<\/h3><p>Feedback should orient, not distract. This site respects reduced-motion preferences and keeps the important content still.<\/p><\/article><article><h3>Content before decoration.<\/h3><p>These experiments are demonstrations, not client case studies. The right technique is the one that makes your message easier to understand.<\/p><\/article><\/div><\/section>\n<section class=\"wrap callout\"><p class=\"eyebrow\">FROM EXPLORATION TO YOUR PROJECT<\/p><h2>Found a direction<br>that feels like you?<\/h2><a class=\"button\" href=\"{{start}}\">Put it in your brief <span>\u2197<\/span><\/a><\/section>\n\n","protected":false},"excerpt":{"rendered":"<p>THE DESIGN LAB \/ A FEW THINGS TO PLAY WITH Small choices.Big difference. Modern web design is more than a look. It\u2019s how a layout adapts, how type creates hierarchy, and how an interaction helps you understand what\u2019s possible. Try it for yourself. Enable JavaScript to use the experiment controls. The sample designs and explanations [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-319","page","type-page","status-publish","hentry"],"brizy_media":[],"_links":{"self":[{"href":"https:\/\/webdesign.stustustudio.com\/index.php?rest_route=\/wp\/v2\/pages\/319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdesign.stustustudio.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/webdesign.stustustudio.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/webdesign.stustustudio.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesign.stustustudio.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=319"}],"version-history":[{"count":0,"href":"https:\/\/webdesign.stustustudio.com\/index.php?rest_route=\/wp\/v2\/pages\/319\/revisions"}],"wp:attachment":[{"href":"https:\/\/webdesign.stustustudio.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}