• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Help BBCoders: How do you come up with designs?

Stellar Nursery

in the meantime
So I have the basics of divs and classes down pat. I'm not looking to do anything super complicated at the moment, but my problem is that I have terrible design sense. How do all of you think of/plan out designs? I'm guessing some of it comes from experience, but do you have any tips in making a good-looking code?
 
ahhh, i don't think i can say much, design not being one of my strong suits, but the easiest way to do so is look around for inspiration. I often look at video game websites and character descriptions for inspiration for CSes, or even just popping through the bbcode other people have done here. You'll actually find that most of my recent designs might as well be title cards, influenced heavily from too much anime XD.

You can also probably draw inspiration for magazines and newsletters. They're basically the same thing as roleplaying, tons of information and images that needs to be conveyed cohesively.

If you've ever taken a design theory class, or even just a basic art theory class, you'll have most of what you need when it comes to achieving proper composition, all that's really left is just imagining what you can make. When i first started doing bbcode, i'd find myself spending weeks on just deciding a design, so don't sweat it.

Perhaps the best thing you can do is make your design, take a step back, pull it up on another device, or even just wait around for a few days, and think to yourself if it looks good or not. Oftentimes i find myself stuck in a mindset while i'm coding that I don't realize that it doesn't even look that good. So ya, look around for inspiration, and give yourself time to critique your own work.
 
I stare at a blank canvas and play around to see I can do. I can go through 15+ drafts to get a mock-up I'm happy with. Even then I know that's prone to change once I begin coding, limited by my own abilities and what's available to us on the website. This is helpful once you begin coding, but for starting the design itself, there's no easy way for you to do it.

A lot of creating good design is honestly just study. Look at something, and try to articulate what elements make it good. Don't be vague and say shit like "i like the color scheme" or "the shape provides interest". Be as specific as possible. "The contrast of magenta is used minimally and effectively in the mostly b/w layout by using it only to dictate what's of import." "Putting the circle there creates interest and dictates how a person will read it by pulling the gaze to the beginning of the information" A lot of my early exercises was just training my eye to recognize good and bad design choices. Recognizing what elements make good design allows you to apply them to your own. Getting inspiration does nothing if you don't know what exactly makes for good design.


For a quick dirty lesson on general design, almost everything is governed by 4 basic principles, which we fondly call CRAP. Contrast, Repetition, Alignment, Proximity. There's a lot more to it, but I'm also lazy and in the middle of an asthma attack l o l

Contrast is creating distinct differences between elements. Aka don't fucking use Times New Roman/Times/Georgia in the same layout because they're similar but not quite the same, making it just look like a giant mistake. Same goes with colors, weight, etc. There are a lot of ways to do it. General rule of thumb: don't be a wimp.

Repetition is pretty self-explanatory. Whatever weight/font/size/indentation/color/etc you used on an element, you should try to repeat it across your work. This helps people recognize what's a header, what falls underneath that, what detail you're trying to stress and so on. It allows a reader to group your work visually, allowing them to be able to find what they need from it as quickly as possible. It creates unity, telling people that everything in it is all part of one whole.

Alignment is what I see a lot of people have trouble with. People naturally read left to right (unless you're from one of those countries that read and write the other way around), so as much as possible, stick to this alignment. The only time I can see right aligment being used well by most people is if it's used for short titles or headers. Never use any alignment other than left to right reading for your main text. This is non-negotiable, especially in the context of roleplaying where we're very text heavy.

Proximity is a bit harder to articulate, but it has to do with the idea of grouping information. It creates relationships between objects, like putting a title and its content closer together, then distancing the title after it. It also relates to padding, creating a sense of space between elements of a design. You know how sometimes a design can look overcrowded? That's bad proximity at work.

For a more detailed explanation, take a look at this link. Haven't read it in depth, but skimming through it, it looks like it covers the basics pretty well.
 
Thank you so much for the advice! It was really helpful :)
I read the link as well. I'll be using CRAP to help keep my head on straight :coolshades:
I'll study hard! Maybe one day you'll see Stellar's codes around, lol
 
I do thumbnails on my sketch book, get a basic layout, then either go straight to coding or I do some refining sketches to hashout finer details before coding.
 

Users who are viewing this thread

Back
Top