Progress
Sooo I'm still dreading the javascript but definitely not as much now. I played around with a few codepens, trying to hack a dark/light theme toggle that responses to user preferences and I think I got it!
With the other dev on the team we got in the weeds with a p5 codepen. We struggled with getting the correct CDN link and it ended up not working outside of the codepen sandbox. I'm now cautiously optimistic about my theme toggle lol
I designed the app interface and I already want to change it in a big way but I do like the start. I modeled it after two sources. The app Sketches and another HTML5 canvas app on github.
I now want to switch the sides of the brush and color interface to match a lil more closely to Sketches, but I'm not stressing about it.
Design process
I mirrored the design of the HTML5 app as closely as I could. I like the simplicity. I thought it'd lend well to dark mode too. I was inspired by our designer to include icons, so instead of having explicitly name buttons, I think having icons will be a little cleaner. I'm open to adding text under the icons, if that's better accessibility.
I also realized that I designed the whole interface and forgot to put the one thing we needed –– the sun and moon icons! How will the user toggle the theme? lol
I was proud of myself for figuring out how to get the rows of colors to lighten gradually, and the rgb (or HSL -- I'm gonna push for that over rgb) picker icon. Angular gradient for the win.
I found a cool icon pack for figma and it saved me with the min/max icons. I was using - and + which worked but I feel like this communicates the feature I'm aiming to implement.
Features
Speaking of, I found this experimental library called interactive.js. I think it's so cool someone made this for school! I'm going to see if it'll work for us, but if so, I'd love to see the tool elements move around and maybe even resize! Especially, if it'll minimize, dock and reopen without me tinkering with toooo much javascript? Win win for me!
I'm also leaning more to the design of having the canvas cover most, if not all of the window. That was the use could utilize all of that screen real estate. But then, idk that also seems too big? Almost like the user could get lost... Maybe I'll make the window expand to max height? I'm not sure. I can't decide. I'll talk it over with the team and we'll see!
Changes I would make
I don't know if we're going to include all the features like undo, save, and erase. But I think it's nice to visualize it. I think we should also include it even if they don't work, just to show our thought process. But idk, maybe that wouldn't look intentional?
I'm also realizing that there's no canvas control panel. I'm thinking to add it to the side where the current brush area is. Maybe under that.
My mom brought up canvas texture and I hadn't thought of that! I think that'd be another neat feature to implement.
Top comments (0)