Designing Koal

14 years ago, I had simple ambitions to make a website for amateur writing. Then life got in the way until it didn’t, and Koal was reborn. Why I’m making Koal is intensely personal: reading is a big part of my life and a lot of what I’ve read—and some of the best bits—have been from amateur authors who are either nameless or forgotten.

Every year I notice sites that host these stories either disappearing, turning uglier, harder to access, or hiding these gems behind a paywall. It’s important to me that this trend be reversed, that there exists a free site, unencumbered with ads, where these authors can be read in peace. A place that is distraction-free, and hopefully even beautiful.

This is entirely a one-person effort, and this is a log of my work to date:

  • Because I’ve turned a bit rusty with server-side programming in Rails, I decided to use the latest Rails as a backend and then plugged away at it until I got comfortable enough to use Rails as a server-side HTML framework, and StimulusJS (when needed) to sprinkle JavaScript interactivity.
  • I’ve been using Product Hunt Makers as a build log, and it’s been working great. Getting high-fives and comments from other makers is great!
  • After I got the basic scaffold working, I decided to write importers for the most common story sites. Right now I have SOL & Fel converters working. Next importer to be built is a Fanfiction/Fictionpress importer.
  • Once I got the site live by using a bare basic design layout, I decided to spend some time improving the UI design of the site. It’s taking quite a bit of time to relearn some UI design fundamentals, get up to basic with modern CSS & Tailwind, and then get familiar with Sketch so that I can translate what I see inside my head to a page.

This is where I’ve reached as of now: having sketch design files that need to be converted to HTML.

First up, the home page:

Koal Home.png
This is the home page. As more stories get filled in, I hope to develop features stories as well with this layout.

Now, the story page:

Koal Story.png
A story detail page. More work needs to be done with the typography here.

This is much simpler, and I’d like to do more work to make the typography shine here.

I’m reasonably happy with what I have now. So immediate next steps:

  • Convert this to HTML.
  • Play around with the Pexel API to get great live covers.
  • Get this design live!

& after that:

  • Write an importer for Ficsave’s Fanfiction/Fictionpress EPUB export, and import some more great stories into Koal.
  • And write an EPUB export tool to get clean EPUB versions of all these stories.

 

Leave a Reply

Create a website or blog at WordPress.com