weasyl.com · 2460777:9381478

This is the current design for the ScritchWorks!

Design

This was a website I started back towards the end of 2022 and finished in early 2023. It was originally meant to be a successor / rebrand of my artwork stuff, which at the time was simply "Art by Rowdy". In the end of 2022, I decided on the name "ScritchWorks", named after a different project I once worked on that I also named, "ScratchWorks".

When I decided to separate my art into a different persona entirely, I decided to focus it around something close to home but not quite me, so I could explore different themes more. Where I am fond of the night, the stars, and the sky; I wanted this to be focused more on the forests and the trees, so I could work with a different range of colors.

I was very particular with the colors chosen, I tried out a lot of combinations and ended up sticking with a set of muted earthy colors, but with some lighter pine to accent the more text heavy section to make it easier to read.

I made sure the art was front and center, the first thing you saw, then the commission form, some text about the site itself, and stuff like the TOS and COC sitting at the bottom where it was most likely to be last thing read and the least often read.

Another challenge I wanted to do was to make this a single page site. Everything is here, everything you need to know! I eventually want to add in a section that better details things like sizing in my work, but I don't even have that written out to myself yet.

Functionality

I wanted to build my own commission form, opting not to use stuff like google forms. I was hoping it would look more professional if I made it myself, something I worry will become a virtue as artists continue to compete against AI. If nothing else, I can say I tried to deliver a more personal experience!

The form was something I worked really hard on, I'm not used to doing things like fancy focus effects, color highlights, etc with my forms. I usually hate writing them, but I figured I really needed to work hard here.

I was very intricate with how laid out it was, the wording on everything, I got a lot of feedback too which was really handy. The option to add alternate details on a piece is a really recent edition that was recommended to me by a client, I was really happy to add it and was happy to get feedback from someone who's experience with me so far has been strictly professional!

I'm not super thrilled with how I have the pricing. The type of picture, than the style, it makes sense in my head, but I worry it is too confusing. To help combat this, I wanted to be as open about the pricing wherever I could. I have a preview of the estimated price below the form that gets populated as you add stuff to it as well, which has been really handy.

Accessibility

This was a fun one, I am really obsessive over details like standards, practices, and so on. My other projects up to this point have been lacking, but this will serve as a template for them going forward!

The site is WebAIM compliant, meaning it fits the standards for accessibility, each element is appropriately named, color contrast is correct, it can be navigated and interacted with using a screen reader, etc.

Being a partially colorblind person, I also made sure to test colors against my own blindness and the blindness of others! It even is valid HTML 5 and CSS!

Technical details

Expanding on the above, all the code is up to ... code. It matches standards, is laid out, is cleaned up. I use Tailwind to generate the CSS and minify tools to keep is all clean and tidy. I optimized anything I could wherever possible, etc etc. It is mobile friendly, and different parts are displayed differently on mobile devices.

Given that you are most likely to see this site through QR codes at conventions, it was important that I made it quick and speedy for mobile connections, a task that I feel I did as best as I could. Different versions of pictures are loaded based on your connection / device.

Additionally, I was able to support an alternate version of the web form that works without Javascript, and on both forms, there is no captcha. I have a very simple but effective (and secret) form of validation that stops 100% of spam attempts while allowing actual commission requests through. I make sure to check the spam attempts often to make sure there aren't any false positives. but in the total duration these have been collected, I've gotten over 4000 spam attempts with 0 false positives!