Welcome to my latest Programming Adventure!

This time around, I’m creating a WordPress Theme for a story/game development knowledge base.

Sound a bit scary? Keep reading to see how I’m doing it!

Why Create a Knowledge Base

One of the most frustrating things about creating a story of any kind is keeping all of your character information organized. There are several writing programs, such as Scrivener, which help you organize your notes, the manuscript, and character info. But it’s just not displayed in a way that’s intuitive.

I was browsing starwars.com and I came across the Databank section of the site. If you’ve never ventured to this corner of the Internet, the Star Wars Databank is like a brief Wikipedia article on any character, location, or event from within the Star Wars Universe. None of the information is very in depth, but it gives just the sort of overview you would need when writing a story.

anakin-star-wars-databank-border

I could already see how a similar format would help me. For example, when creating an RPG, I could easily see the available weapons for the particular character, as well as any other specific information that I needed quickly.

My first thought was to create this myself. I have a basic knowledge of HTML and CSS, so it wouldn’t be hard to start putting it all together.

The First Sketches

Before I wrote one line of code, however, I sketched some ideas on a piece of paper. This is the profile page:

sample-profile-page-01-border

And below is the home page. As you can see, the genesis of this idea was a long time ago!

sample-home-page-01-border

The second step was to look online for anything similar. I already knew the Star Wars Databank had the look I wanted, but there were a few marked differences, such as the Home Page design.

I wanted it to look like the trendy card design that’s been floating around. After a few dead ends, I finally found an example of what I wanted:

sample-cards-01-border

 

I liked the idea of smaller info blocks, with the option to choose from those blocks. I didn’t really want it to look as fancy as the screenshot, but that was a great starting point.

Using these designs, I began to draw out what the home page should look like:

sample-home-page-02-border

Then, I sketched out what a single profile page would look like:

sample-home-page-03-border

With my sketches in hand, I started on the second phase in this Programming Adventure: creating a wireframe. You can read all about that right here.

Until then, Happy Coding!