Welcome to my latest Programming Adventure!

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

Yeah, that sentence scares me, too. Keep reading to see how I’m doing it!

What Did You Use to Make the Wireframe?

There are many different programs online that can help you create wireframes quickly, and I think they’re awesome, but I knew they wouldn’t work well for this project. I would probably spend more time trying to find one than actually putting it together.

Instead, I opened trusty old PhotoShop and got to work. Okay, maybe calling PhotoShop old is a bit mean. But it is trusty!

Roll Up Your Sleeves and Get to Designing

I needed to design two separate pages: the home page, where all of the posts filtered in, and the single post page, which contains only the information for a particular profile.

knowledge-base-web-template-individual-page-v2-border

 

As I’m sure you can tell by looking at it, the profile page looks awfully similar to the Star Wars Databank. And that was purposeful. I really did want it to look the same, just without all the extra bells and whistles that the Databank pages have.

knowledge-base-web-template-story-page-v1-border

And, as I’m sure you can also tell, the home page looks just like the screenshot from the last post. And that was also purposeful. It was there that I first saw cards of different shapes. This design feature would come into play later.

And, just like that, I was finished. The wireframes were done, and they looked just how I wanted them.

With my wireframes in hand and a clear vision of the project in my head, I started on the third phase in this Programming Adventure: finding and modifying an existing BootStrap theme!

You can read all about that right here. And if you missed the first phase, you can click here.

Until then, Happy Wireframing!