[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-page":3,"blog-posts":16},{"id":4,"title":5,"body":6,"description":7,"extension":8,"links":6,"meta":9,"navigation":10,"path":11,"seo":12,"stem":14,"__hash__":15},"pages\u002Fblog.yml","Latest Articles",null,"Some of my recent thoughts on design, development, and the tech industry.","yml",{},true,"\u002Fblog",{"title":13,"description":7},"Blog","blog","TaaQuoRbll3SAU-bLRWykkoWqqBUNZgBjCJHWR16pzg",[17,105,201,363],{"id":18,"title":19,"author":20,"body":25,"date":95,"description":96,"extension":97,"image":98,"meta":99,"minRead":100,"navigation":10,"path":101,"seo":102,"stem":103,"__hash__":104},"blog\u002Fblog\u002Ffrom-mokup-to-market.md","From Mockup to Market: My End-to-End Product Design Process",{"name":21,"description":22,"avatar":23},"Emma Thompson","UX\u002FUI Designer",{"src":24,"alt":21},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1701615004837-40d8573b6652?q=80&w=200&auto=format&fit=crop",{"type":26,"value":27,"toc":86},"minimark",[28,32,35,40,43,46,50,53,56,60,63,66,70,73,76,80,83],[29,30,31],"p",{},"Successful products rarely come from a single perfect idea.",[29,33,34],{},"They are usually the result of research, experimentation,\ntesting, and continuous collaboration between designers,\ndevelopers, stakeholders, and users.",[36,37,39],"h2",{"id":38},"discovery-and-research","Discovery and research",[29,41,42],{},"The first step is understanding the actual problem before\ndesigning a solution.",[29,44,45],{},"This phase includes stakeholder interviews, user research,\ncompetitor analysis, existing product reviews, and the\ndefinition of measurable project goals.",[36,47,49],{"id":48},"user-flows-and-wireframes","User flows and wireframes",[29,51,52],{},"After collecting the research, the findings are transformed\ninto user journeys, information architecture, and low-fidelity\nwireframes.",[29,54,55],{},"Wireframes help validate structure and functionality before\nvisual design decisions are introduced.",[36,57,59],{"id":58},"prototyping-and-testing","Prototyping and testing",[29,61,62],{},"Interactive prototypes allow users and stakeholders to\nexperience the proposed product before development begins.",[29,64,65],{},"Testing at this stage helps identify confusing navigation,\nmissing feedback, unnecessary steps, and unclear content.",[36,67,69],{"id":68},"visual-design","Visual design",[29,71,72],{},"Once the primary experience has been validated, the visual\nsystem is created.",[29,74,75],{},"Typography, color, spacing, imagery, component states, and\nresponsive behavior are designed as parts of a consistent\nsystem rather than as isolated screens.",[36,77,79],{"id":78},"developer-handoff","Developer handoff",[29,81,82],{},"The final stage includes close collaboration with developers.",[29,84,85],{},"Responsive behavior, interaction states, component variations,\ndesign tokens, and accessibility expectations are documented\nclearly to make implementation reliable and consistent.",{"title":87,"searchDepth":88,"depth":88,"links":89},"",2,[90,91,92,93,94],{"id":38,"depth":88,"text":39},{"id":48,"depth":88,"text":49},{"id":58,"depth":88,"text":59},{"id":68,"depth":88,"text":69},{"id":78,"depth":88,"text":79},"2025-04-23","A detailed breakdown of my iterative design methodology, from initial research to final handoff, with practical tips for designers at every stage.","md","https:\u002F\u002Fimages.pexels.com\u002Fphotos\u002F1050312\u002Fpexels-photo-1050312.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",{},8,"\u002Fblog\u002Ffrom-mokup-to-market",{"title":19,"description":96},"blog\u002Ffrom-mokup-to-market","pUh2tct2PW4ZfSVlxqMsq-_ARhn3GeYJvzCTpuUa0c8",{"id":106,"title":107,"author":108,"body":110,"date":192,"description":193,"extension":97,"image":194,"meta":195,"minRead":196,"navigation":10,"path":197,"seo":198,"stem":199,"__hash__":200},"blog\u002Fblog\u002Fpsychology-of-color.md","The Psychology of Color in UI Design",{"name":21,"description":22,"avatar":109},{"src":24,"alt":21},{"type":26,"value":111,"toc":186},[112,115,118,122,125,128,131,135,138,141,163,166,170,173,176,180,183],[29,113,114],{},"Color in interface design is not only decoration.",[29,116,117],{},"It can establish hierarchy, guide attention, communicate\nstatus, reinforce a brand, and help users understand what\nactions are available.",[36,119,121],{"id":120},"color-and-visual-hierarchy","Color and visual hierarchy",[29,123,124],{},"Strong colors naturally attract attention.",[29,126,127],{},"For this reason, accent colors should be reserved for important\nactions, selected elements, and meaningful interface states.",[29,129,130],{},"When every element uses a strong color, the hierarchy becomes\nunclear because nothing appears more important than anything\nelse.",[36,132,134],{"id":133},"functional-colors","Functional colors",[29,136,137],{},"A consistent product should separate brand colors from\nfunctional colors.",[29,139,140],{},"Common functional roles include:",[142,143,144,148,151,154,157,160],"ul",{},[145,146,147],"li",{},"Primary",[145,149,150],{},"Success",[145,152,153],{},"Warning",[145,155,156],{},"Error",[145,158,159],{},"Information",[145,161,162],{},"Neutral",[29,164,165],{},"These roles make interface states easier to understand and\nmaintain across different screens.",[36,167,169],{"id":168},"accessibility","Accessibility",[29,171,172],{},"Color should never be the only method used to communicate\nimportant information.",[29,174,175],{},"Error messages should combine color with text or an icon.\nSelected elements should include a visible structural change.\nText and background combinations should also maintain\nsufficient contrast.",[36,177,179],{"id":178},"context-matters","Context matters",[29,181,182],{},"Color meanings can change depending on culture, audience,\nproduct type, and surrounding colors.",[29,184,185],{},"A successful palette should therefore be tested with real\ncontent and real users rather than selected only because it\nlooks attractive in a design file.",{"title":87,"searchDepth":88,"depth":88,"links":187},[188,189,190,191],{"id":120,"depth":88,"text":121},{"id":133,"depth":88,"text":134},{"id":168,"depth":88,"text":169},{"id":178,"depth":88,"text":179},"2025-03-15","Exploring how strategic color choices can influence user behavior, evoke emotions, and enhance the overall user experience of digital products.","https:\u002F\u002Fimages.pexels.com\u002Fphotos\u002F40799\u002Fpaper-colorful-color-loose-40799.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",{},5,"\u002Fblog\u002Fpsychology-of-color",{"title":107,"description":193},"blog\u002Fpsychology-of-color","xcBfCLyFhu5ai2AFzm8YUxFgRW9st06ud9HBw2k7yOc",{"id":202,"title":203,"author":204,"body":206,"date":354,"description":355,"extension":97,"image":356,"meta":357,"minRead":358,"navigation":10,"path":359,"seo":360,"stem":361,"__hash__":362},"blog\u002Fblog\u002Fbuild-my-system.md","How I Built My Design System from Scratch",{"name":21,"description":22,"avatar":205},{"src":24,"alt":21},{"type":26,"value":207,"toc":346},[208,211,214,218,221,224,250,254,257,260,264,267,270,293,296,300,303,306,309,313,316,319,336,340,343],[29,209,210],{},"I started building a personal design system after noticing that similar interface problems were being solved differently across multiple projects.",[29,212,213],{},"Buttons used slightly different sizes, spacing values changed between pages, and component states were not always documented.",[36,215,217],{"id":216},"starting-with-an-audit","Starting with an audit",[29,219,220],{},"The first step was reviewing existing products and collecting repeated interface patterns.",[29,222,223],{},"The audit included:",[142,225,226,229,232,235,238,241,244,247],{},[145,227,228],{},"Typography",[145,230,231],{},"Colors",[145,233,234],{},"Spacing",[145,236,237],{},"Buttons",[145,239,240],{},"Form controls",[145,242,243],{},"Cards",[145,245,246],{},"Navigation",[145,248,249],{},"Feedback states",[36,251,253],{"id":252},"building-foundations","Building foundations",[29,255,256],{},"Before creating components, I defined the foundations of the system.",[29,258,259],{},"These foundations included semantic colors, typography scales, spacing values, border radiuses, shadows, breakpoints, and animation timings.",[36,261,263],{"id":262},"creating-components-gradually","Creating components gradually",[29,265,266],{},"I did not attempt to create every possible component immediately.",[29,268,269],{},"I started with the most frequently used components:",[142,271,272,275,278,281,284,287,290],{},[145,273,274],{},"Button",[145,276,277],{},"Input",[145,279,280],{},"Select",[145,282,283],{},"Checkbox",[145,285,286],{},"Card",[145,288,289],{},"Modal",[145,291,292],{},"Alert",[29,294,295],{},"Each component included its variants, sizes, states, accessibility requirements, and usage examples.",[36,297,299],{"id":298},"connecting-design-and-code","Connecting design and code",[29,301,302],{},"The design library and the front-end implementation used the same terminology.",[29,304,305],{},"A primary button in the design file had the same name, variants, and states as the corresponding interface component.",[29,307,308],{},"This reduced confusion and made implementation more consistent.",[36,310,312],{"id":311},"documentation","Documentation",[29,314,315],{},"A component is difficult to reuse correctly without clear documentation.",[29,317,318],{},"Each component was documented with:",[142,320,321,324,327,330,333],{},[145,322,323],{},"Usage rules",[145,325,326],{},"Responsive behavior",[145,328,329],{},"Accessibility expectations",[145,331,332],{},"Available variants",[145,334,335],{},"Content recommendations",[36,337,339],{"id":338},"what-i-learned","What I learned",[29,341,342],{},"A design system should evolve alongside real products rather than trying to predict every future requirement.",[29,344,345],{},"Starting with shared foundations, building only necessary components, and documenting decisions gradually created a system that was practical, reusable, and easy to maintain.",{"title":87,"searchDepth":88,"depth":88,"links":347},[348,349,350,351,352,353],{"id":216,"depth":88,"text":217},{"id":252,"depth":88,"text":253},{"id":262,"depth":88,"text":263},{"id":298,"depth":88,"text":299},{"id":311,"depth":88,"text":312},{"id":338,"depth":88,"text":339},"2025-03-05","A practical guide to creating your own design system, from initial audit to implementation, and the lessons learned along the way.","https:\u002F\u002Fimages.pexels.com\u002Fphotos\u002F196644\u002Fpexels-photo-196644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",{},6,"\u002Fblog\u002Fbuild-my-system",{"title":203,"description":355},"blog\u002Fbuild-my-system","1a8wfFbx2sQZnfzqJulG3iHfIOXGrUcKUIZ4doAM7qI",{"id":364,"title":365,"author":366,"body":368,"date":454,"description":455,"extension":97,"image":456,"meta":457,"minRead":458,"navigation":10,"path":459,"seo":460,"stem":461,"__hash__":462},"blog\u002Fblog\u002Fcase-for-flow-design.md","The Case for Slow Design in a Fast-Paced Digital World",{"name":21,"description":22,"avatar":367},{"src":24,"alt":21},{"type":26,"value":369,"toc":448},[370,373,376,379,383,386,389,392,415,419,422,425,428,432,435,438,442,445],[29,371,372],{},"Many digital products are designed around speed, immediate\naction, and continuous engagement.",[29,374,375],{},"Fast experiences can be useful, but speed should not always be\nthe primary design goal.",[29,377,378],{},"Some products benefit from giving users more time to read,\nunderstand, compare, and reflect.",[36,380,382],{"id":381},"what-slow-design-means","What slow design means",[29,384,385],{},"Slow design does not mean intentionally creating an inefficient\ninterface.",[29,387,388],{},"It means removing unnecessary pressure and creating space for\nmeaningful interaction.",[29,390,391],{},"A slower design approach may include:",[142,393,394,397,400,403,406,409,412],{},[145,395,396],{},"Clear typography",[145,398,399],{},"Reduced visual noise",[145,401,402],{},"Fewer competing actions",[145,404,405],{},"Calm transitions",[145,407,408],{},"Progressive disclosure",[145,410,411],{},"Intentional confirmation steps",[145,413,414],{},"Manageable content sections",[36,416,418],{"id":417},"designing-for-attention","Designing for attention",[29,420,421],{},"Attention is limited.",[29,423,424],{},"Interfaces containing too many notifications, recommendations,\nanimations, and calls to action make it difficult for users to\nfocus on their current task.",[29,426,427],{},"A calmer experience uses hierarchy to show what matters now and\nreveals secondary information only when it becomes relevant.",[36,429,431],{"id":430},"measuring-meaningful-outcomes","Measuring meaningful outcomes",[29,433,434],{},"A high number of clicks does not always represent a successful\nexperience.",[29,436,437],{},"Depending on the product, more useful measurements may include\ncompletion quality, user understanding, reduced mistakes,\nlower support demand, and long-term satisfaction.",[36,439,441],{"id":440},"finding-the-balance","Finding the balance",[29,443,444],{},"Slow design should not replace efficient design.",[29,446,447],{},"The goal is to identify which moments should be effortless and\nwhich moments deserve more attention and consideration.",{"title":87,"searchDepth":88,"depth":88,"links":449},[450,451,452,453],{"id":381,"depth":88,"text":382},{"id":417,"depth":88,"text":418},{"id":430,"depth":88,"text":431},{"id":440,"depth":88,"text":441},"2025-01-28","Why designing digital experiences that encourage users to slow down and engage deeply can lead to more meaningful interactions and better outcomes.","https:\u002F\u002Fimages.pexels.com\u002Fphotos\u002F4050314\u002Fpexels-photo-4050314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",{},7,"\u002Fblog\u002Fcase-for-flow-design",{"title":365,"description":455},"blog\u002Fcase-for-flow-design","14H8_pwv5ZBguXnj_KQiXA3P5CU6XCQJNFw0jkiXrKs"]