Further Odd Foundry site designs

As I continued to develop the digital tools I reflected on other possible designs for the rest of the site. My intent with the site is to put the focus on the tools themselves, in my original design I was doing this by stripping back the navigation to the simple sidebar. With some development of the tools, and with a desire to reinforce the unexpected pillar of the project, I decided to further refine my site design to have the focus on the canvas of the tool by placing it on the left portion of the screen and to push the menu/logo/text content to the right. Conventionally western users read from the left to the right, starting in the top left corner, normally this is what informs the placement of a sites logo being in that space.

I have also begun to experiment with different brand colours.

I have added the required pages to the site and in most places put some indicative content. Displaying the explorer tool on the wordpress site was problematic but I was able to covert the files to be php and then include them in the sites theme so that they could be accessed and displayed correctly. Currently the canvas of the explorer is set to be the width of the page which is causing it to overlap with the the hand column, this will need to be fixed. The Randomiser works but I need to resize the frames for each random letter to fit more on the page, as well as add some kind of loading function to them. The shop is functioning with some dummy projects and overall the basic framework is coming together.
Further code has been added to the explorer sketch to allow it’s canvas to be defined by the size of the container it’s been placed in. In this case that’s the large column that takes up the left 2/3s of the page. Though it doesn’t resize when the browser window is moved, it does resize when the page loads which corrects a lot of display issues on mobile. Opening the menu on mobile doesn’t draw over the canvas so I might be able to move these controls to an offscreen menu, accessed by a button press in the same way as the main site menu when on mobile.

Next steps

  • add loading image behind p5 sketches
  • add random colours to randomiser and explorer
  • change size of randomizer to fit more on a page
  • move explorer controls to offcanvas menu (like main menu) when viewed on mobile
  • decide on relevant explorer stamps and tools
  • increase frame rate of explorer to get smoother lines for tools
References
  • https://dev.to/codeply/re-order-grid-columns-in-bootstrap-5-135k
  • https://getbootstrap.com/docs/5.0/layout/grid/
  • https://getbootstrap.com/docs/5.0/components/offcanvas/
  • https://getbootstrap.com/docs/5.0/utilities/sizing/
  • https://stackoverflow.com/questions/37083287/how-to-set-canvas-width-height-using-parent-divs-attributes