[{"data":1,"prerenderedAt":183},["ShallowReactive",2],{"blog-post-/blog/day-3":3},{"id":4,"title":5,"body":6,"date":174,"description":175,"extension":176,"meta":177,"navigation":178,"path":179,"seo":180,"stem":181,"__hash__":182},"blog/blog/day-3.md","Day 3: Interactivity and Optionality, Part 1",{"type":7,"value":8,"toc":168},"minimark",[9,13,31,37,43,54,57,62,65,68,84,87,90,93,104,107,111,114,117,120,123,126,165],[10,11,12],"p",{},"Today we focused on:",[14,15,16,25],"ol",{},[17,18,19,20,24],"li",{},"Building ",[21,22,23],"em",{},"interactivity"," into our website.",[17,26,19,27,30],{},[21,28,29],{},"optionality"," into our app.",[10,32,33,34,36],{},"The ",[21,35,23],{}," of the site is our way of communicating to the user what they can expect from the app. In a way that is engaging and fun.",[10,38,39,40],{},"Recall from Day 2’s blog post, we want to drive home the feeling of ",[21,41,42],{},"this is cool, I want this.",[10,44,45,46,49,50,53],{},"Building in optionality is our way of allowing the user to ",[21,47,48],{},"personalize"," the feel of their clock to their tastes. The most natural way for the user to do this is through the ",[21,51,52],{},"Preferences"," page.",[10,55,56],{},"We discuss these two things in our blog post today.",[58,59,61],"h2",{"id":60},"app","App",[10,63,64],{},"In our early design we started with a bordered liquid glass UI component for the clock. This initially did not sit well with us, and we had intentions to revisit it later and remove the border.",[10,66,67],{},"However, upon removing the border, we surprised ourselves. We realized it had grown on us and we missed it.",[10,69,70,71,74,75,78,79,83],{},"The borderless design was ",[21,72,73],{},"sleek"," and ",[21,76,77],{},"minimal"," but it lacked ",[80,81,82],"strong",{},"character"," the border added.",[10,85,86],{},"So we decided to add both options for the user through the preferences tab.",[10,88,89],{},"The lesson we take away form this is sometimes we may surprise ourselves with the designs we end up liking and to keep an open mind to this moving forward.",[10,91,92],{},"Beyond the border, we added a discrete slider to adjust the clock and added some font optionality.",[10,94,95,96,103],{},"You can see feel of the preferences page at this stage in this ",[97,98,102],"a",{"href":99,"rel":100},"https://x.com/OmarHayat0/status/2026745683236048930",[101],"nofollow","X post",".",[10,105,106],{},"We are continuing to experiment with sounds and what the right feel for that should be, something we will touch on in the next blog post.",[58,108,110],{"id":109},"website","Website",[10,112,113],{},"We started today with a draggable clock demo on the homepage, but nothing that demonstrated the always-on-top behaviour.",[10,115,116],{},"The simple solution was to add another window. We also wanted to tell the user what functionality they could play with.",[10,118,119],{},"The natural choice was something like the Apple Notes app, with a checklist of different features. Then these can be automatically checked off when the user completes the different tasks.",[10,121,122],{},"We still have to implement the other features in the demo (like setting a timer and the preferences menu), but this is a solid start.",[10,124,125],{},"We also made a number of...",[127,128,129,140,151],"ul",{},[17,130,131,132],{},"UX improvements for drag-and-drop:\n",[127,133,134,137],{},[17,135,136],{},"Consistent bounds",[17,138,139],{},"Interaction paper cuts (like accidentally highlighting page text)",[17,141,142,143],{},"Visual improvements:\n",[127,144,145,148],{},[17,146,147],{},"Optical alignment",[17,149,150],{},"Italic text in the header",[17,152,153,154],{},"SEO improvements:\n",[127,155,156,159,162],{},[17,157,158],{},"Page titles and descriptions",[17,160,161],{},"Open Graph metadata",[17,163,164],{},"robots.txt, sitemap.xml, and favicon.",[10,166,167],{},"Tomorrow we’ll be working on adding more features to the demo!",{"title":169,"searchDepth":170,"depth":170,"links":171},"",2,[172,173],{"id":60,"depth":170,"text":61},{"id":109,"depth":170,"text":110},"2026-02-25","Interactivity and optionality for OverClock and its website.","md",{},true,"/blog/day-3",{"title":5,"description":175},"blog/day-3","bFWY0mIUr6dFJG4o_kzMmijt9UVYidvYaTmgZULjiao",1774667228681]