Imaginaerium Guest Article: Stormbril Variety Hour

A little of this and a little of that

I am a man who wears many hats and yet masters... none?

— Stormbril, mixing up sayings

Surprise! It's a Stormbril imaginaerium guest article! I was overjoyed to be asked by Qurilion to join his other amazing guests and take part is his incredible series of inspirational articles :)
I'm a hobbyist world-builder, professional rabbit-hole delver, and generally just let myself go wherever my interest and inspiration seems to lead me. On paper I'm an architecture student, starting up my masters this September! I'm a bit all over the place and I don't feel like I'm an expert in any particular area, so instead please enjoy this random sampling of things I've thought to talk about today :D

(bonus tip -- make yourself some various sized template images like these, and name them their sizes! That way you can simply type [1600x300] or whatever size it is for instant template images to help build layouts.)

---

Layouts

An article's layout is very important -- it's often the first impression someone will get of your work, before diving into your opening quote and or introductory paragraph!

Layouts are an incredibly important part of writing worldbuilding articles, and it's something that has been extensively covered by other people with fantastic articles! I'll link to them at the end of this section, and if you haven't read them before, absolutely go and do so!
What I wanted to bring up is a method of article layout building that I like to often employ in the planning stages of something. It's actually based on a bit of architectural building design I learned in school, something I like to think of as...

The Building Block Method

It begins with the idea of what you want to write, of course. In architecture, it'd be the purpose of the building, and what restrictions it's being designed within. Is it a school with X number of classrooms? A house for Y number of people? We then take a stack of post-it-notes, and write out every required room on individual notes. We take those, and then begin to stick them in an arrangement that makes sense -- certain rooms work best when near to others. You always want the reception/foyer area at the actual entrance of the building to build off of, stairs should be in an accessible non-hidden place, try to group similar rooms near each other, etc etc...

You can do the exact same thing when building your articles!

Think about your idea, how many words you want to dedicate to it, and how many sections of details you might like to put into it. It may seem like significant pre-planning, but it makes the resulting article build much smoother!


Take all these ideas and form them into "Blocks" and "Sections" in your mind. For example, let's look at this article we're reading right now. Before even starting writing it, I listed out (on a bit of scrap paper) what I wanted to cover with it. Layouts, Inspiration, Monstrous Imagery, and Interactivity. Within each of those, I'll have different "Blocks" of ideas I want to play with -- so what I do on that scrap paper is start by arranging the sections in an order that I think makes the most sense for the idea I'm writing. I'll combine similar ones (like how on this one I've combined Inspiration and Monstrous Imagery), and give each a certain amount of space I think it'll need. Then I start to "block in" the areas below each header with the sort of content I think that'd fit well.


Point form info, vague boxes with "quote" written in it, anything to help build the framework in my mind of the article that'll make actually writing it far easier. It's like how a blank canvas is far more intimidating than building off of something existing. Give yourself that framework, those lines to colour within, and the actual article itself will be much easier!

Of course, as you begin to write it, things will shift and change -- but that's an intentional part of the process :D
It's important to remember all the useful bits of formatting tricks and tips that are out there too, to help you when you're blocking things in! Headers, quotes, images, article block links, all of that are the tools you can use in combination with your building blocks to design your article like an architect (in training) :D
Wondering about those tips and tricks? Well, look no further than these two articles here! Both are excellent masterclass articles on how to format your article to make reading it an enjoyable time for all.

---

by Greg Rakozy

---

Inspirational Imagery and World Concept Expansion

by Ching Yeh

by Peter Mohrbacher

by Alex Konstad

by Hayapi

by Andres Rios

Full disclosure -- this section exists as an excuse to share some truly incredible artists I enjoy that serve as infinite sources of inspiration for me. I hope they inspire you in similar ways :D

For many of us, our worldbuilding projects often start from one single idea, one spark of inspiration. It's generally all it takes to get us going -- and what's exciting is taking that first spark and fanning the flames into an entire creative journey. This section won't be super long or involved, as I'm no expert here, being a single-world-er. But I like to think I'm great at following "If this, then... that!" with my ideas, and it's how I built Cathedris!
I'm sure it sounds like the most obvious advice ever, but I think it's important to truly keep it in mind when building, and use it as a key focus. Take your initial spark, and think about what it would logically do to the world you're making. If you don't know, try setting up rules. Really make it your own. Let's do a small example, using that robotic-like cycloptic god-being by Peter Mohrbacher above. It feels like a watcher of sorts, made of metal and mechanical parts.

Inspiration/Concept

A mechanical universe, warping our conceptions of what planetary systems can even be, as everything is a part of "The Great Machine" that spans all of the known universe

Life is organic, even if the universe is seemingly built of metal and stone and unknowable materials.

If This...

Everything is a part of the machine, whether it's physically connected or not. Living matter is etched into the surface of the incomprehensible mechanics of life.

The machine has an unknowable purpose that it's always working towards. It is aware of its parts.

Then That

The machine has unliving drones that surveil and maintain the machine, making life difficult for organic beings and the inherent chaos that comes with them.

The source image is an overseer, the most terrifying of all the machine's drones.

Is it a fully realized world yet? No, but that's okay, this is just serving as an example of how to take each idea and follow it along. With Cathedris, the idea was "Big un-dead gods!", which got taken along to "People have had to live with them for a long time" and onward to "They've learned how to utilize them for fishing/mining/etc". Take your ideas to their logical extremes!

---

by Stefan Steinbauer

---

Secrets of Interactive Articles

What isn't secret is my love for interactive sections. Things to click, hover, move, slide, all sorts of fun things. And it's all using one little trick that I'd like to share with you in this final small section!

So this trick is something that's available to all on WA who can write their own CSS, but it's best used by Grandmasters and above, as they're able to combine it with containers and truly go wild. It is slightly on the complicated side of things, as it ties multiple targets together -- the easiest I find is to hook other things to spoiler buttons, contextually. Let me open the doors to the secret symbol for all who are unaware:

Open

~

If you haven't opened the door to reveal the secret... how dare you! :O
Open it! :O
...
That's right, the answer is TILDE!

Tilde is what's known as a CSS Combinator. There's a few different ones (including a simple space) that let you specify descendants, children, or siblings in your CSS. This means you can pick very specific things at very specific times and give them styles. Tilde is great, because it's a "general sibling selector" -- and you can use it in conjunction with :hover, :active, or all sorts of things.
For example, if you do something like have two containers next to each other, box_A, and box_B, you can mess with box_B depending on what you're doing with A. I'll write out some very simple CSS here, just to give them a border and a colour, and then show you the simple power of TILDE!

This is the initial styling of the boxes.


.user-css .box_A,
.user-css .box_B {
  border: 2px solid red;
  width: 100%;
  margin: 5px;
  background: gray;
  color: black;
  padding: 10px;
  transition: all 0.25s;
}

This is the code that tells .box_B to change when .box_A is ':hover'ed. Note that for '~' to work, the two things must be siblings -- contained within the same container/row/element/div/whatever.


.user-css .box_A:hover ~ .box_B {
  border: 2px solid green;
  background: black;
  color: white;
}

This is box A content! Try hovering your mouse over it, and watch what happens to box_B.

And this is box B content! If you hover your mouse over box A, you will see this one change.

This example is intentionally as simple as I can make it. But with some imagination, there is SO MUCH you can do with it. Keep the rules in mind and try playing around with it. Key CSS Pseudo Classes I've found to be very useful with this trick are... :hover, :focus, and :active.
Spoiler buttons are also great because using .spoiler-button[aria-expanded$=true] lets you trigger things based on if the spoiler is opened or closed. Those doors that opened up above? Made using this very trick!

It's important to keep in mind that '~' will only ever let you tie one thing into the NEXT sibling after it. In our previous example, we hovered over A to change B. What you cannot do in that example is hover over B to change A, because A comes before B sequentially in the article.
This example is done using containers -- limited to grandmasters or above. But you can play with it without them, too! You can use quotes and alouds, spoilers, anything really. There's a lot of interesting parts of WA CSS you can hook together, and if you're interested in it, I recommend playing around with your browsers inspect tool to see what things you can connect together.

---

And that's all I've got for you today! I hope something in this random smattering of various topics was helpful or inspiring to you. Now go out there and make some cool stuff :D