• Hi all. We have had reports of member's signatures being edited to include malicious content. You can rest assured this wasn't done by staff and we can find no indication that the forums themselves have been compromised.

    However, remember to keep your passwords secure. If you use similar logins on multiple sites, people and even bots may be able to access your account.

    We always recommend using unique passwords and enable two-factor authentication if possible. Make sure you are secure.
  • Be sure to join the discussion on our discord at: Discord.gg/serebii
  • If you're still waiting for the e-mail, be sure to check your junk/spam e-mail folders

Help required for website layout and designing.

Lt. BLEU™

Lt. BLEU™

Top Class Lieutenant
Hello to all those who read this thread. Basically, I'm learning Web designing all on my own by refering to books and/or internet itself. I've got the hang of coding and things to a good level. Now the issue that comes to me is that the creative part of my brain does not switch on ever. I'm unable to decide a desirable layout for any website that I have to make. If anybody could help me with some tutoring or something about creating a good layout it would be very nice. Coding is no use if I cannot create a good layout at first.
Thank you.
 
D

Dumbness

Pokémon Breeder
Simple is key. It also depends on the website's audience and purpose as to what you display on your website, their priorities, etc.

As for the actual layout, organization and effective use of white space are key. Just keep everything within 2-3 clicks of the home menu for easy navigation. Sidebars are great for this, especially spybars (or whatever they're called, the ones that you click and a bunch of subpages are revealed). If a page ends up getting long, keep navigation within that page simple as well - just focus on making good convenience for your visitor. Anchor links will help with in-page navigation.

This is just a really simple ideology towards starting a website. You can always PM me with questions if you need to.
 
Zazie

Zazie

So 1991
Okay the big thing they teach you in web design these days is the CSS box model: http://www.w3schools.com/css/css_boxmodel.asp

Think of your page divided up into boxes that contain different sections of content. You can rearange these boxes around how ever you wish. These boxes are div tags in HTML, where you put in the content. Be sure to put the entire page in a it's on box-div as well. It is common to give this the wrapper or container class/id. Make sure you give this a width so the page doesn't infinitely streatch out in hug browser windows.

Typographical heiarchy is also important. What that means is you want headers of different inpotance to be of different size, more important ones are biggger, the less important ones are smaller, so use and style those h1-h6 tags wisely. Also make sure paragaphs don't stretch out too far, as it makes them hard to read.

And color, make sure you're color scheme isn't pukey. This is a good tool for color schemes: http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

Advanced tips that you may not care about:
Aso somwhat important, but not essential if you are jhust a begginner, think about how it looks on a wide variety of screens. Using relative measurements like percentages and ems can help you web pafe scale better. Using media queries helps with different devices as well, set really small devices to have a different box layout and it will look better, the most common practive is to stack all your boxes on top of one another.


Also:
Or the short easy way if you don't care about building design skills, there are frameworks like bootstrap and http://foundation.zurb.com/. They already give you some CSS styling to work with so you have a servicable layout on all viewing devices. They aren't newb tools though, you do need to already know how to do CSS to use them however, so I only recommend using them if you know how to write CSS, but suck at or are too lazy to worry about coming up with nice styles yourself. You definitely need to understand, classes, ids and inheritances at minimum to get any real use out of them.
 
Zazie

Zazie

So 1991
Lt. BLEU™ said:
Ah, thank you so much for your help, I was always looking on help with understanding the concept of box model.

I've also heard that using the <div> tag has become outdated and has been replaced with things like <header> and <container> and <footer >etc?

Also, I'll take a look at those links you;ve provided. Thanks for all the help again guys. :)
Click to expand...

Sort of.

<header>, <footer>, <nav>, <section>, <article> and <aside> are all pretty much divs with a specific name to make things cleaner less confusing. They are good to use, but you can use divs alongside them for things that don't fit those descriptions. So you can use those with the same exact layout techniques.
 
Last edited:
You must log in or register to reply here.
Top