(Answered)How to make good web page layouts?

Question

idk if it's just me but at the moment even after a lot of practice i still make bad layouts... any methods or resources would help.

Answer 1

Try to keep them simple, and make sure that anything that needs interacting with is clear in terms of placement, and it's purpose. This happens to all of us in the beginning, and I've been developing and still learning to better myself for at least 10 years. Take a look at other sites for influence, but focus on components such as buttons, inputs, cards etc and start practicing how to make them.

I definitely recommend storyboarding and wire framing your work. Design the layout on paper, and start thinking about components like menus, cards, buttons etc and how they will be interacted with hover, active, visited state; does the menu slide out etc.

If you find yourself struggling try using frameworks or plugins like Bootstrap, or Google Material Design - have you heard of responsive design?

Answer 2

Have a look on this https://www.w3.org/standards/webdesign/mobilweb

Answer 3

First of all download some free website templates and study their code. From their you can get some idea.
And learn advanced HTML & CSS from W3Schools.com

Answer 4

Start by wireframing your design. You can draw it out by hand or be fancy with tools like Photoshop. It doesn't really matter what tool you use, just get a basic idea of what your page should look like. Then create the structure of your page with HTML. You're not positioning or coloring anything, just defining the structure. Then come in with CSS and match it to your wireframe drawing. Use responsive web design principles while positioning and styling your page.

Frameworks like Bootstrap are clunky, ugly, and encourage bad practices. There's no separation of layout and data. Not to mention, other developers will go mad if they see 23 col-lg-6 classes because these class names just aid in presentation and have no semantic meaning.

If you need some assistance, use a lightweight library like w3.css https://www.w3schools.com/w3css/

You can also extend CSS with preprocessors like Sass or LESS which are interpreted down to CSS. They can help you maintain the logic of your presentation and it's very easy to switch themes for your page.

Answer 5

You can use table with html or use css or better is bootsstrap.

Answer 6

the landing page is a trending web layout. and a responsive too.

Answer 7

I advise you to start by the drawing sketchs on sheets and specify how your blocks will look like then move to photoshop or any other software for design and finaly write your code.
Resources : Bootstrap will help

Answer 8

JQuery UI.

Answer 9

Make it simple but not simpler. Practice Practice Practice . . .

Answer 10

definitely your answer is web frameworks, for example I use Materialize CSS ! bootstrap is another choice too! but I use this because it is based on material design

Answer 11

Try Bootstrap you will love it and it's insanely easy.

Answer 12

You should look into Bootstrap. Using their CSS classes with your own custom CSS will produce fantastic layouts for you. Plus it's pretty easier and faster. Most times I develop layouts of a website of 10 pages in less than 3 hours.

Answer 13

use css stylesheet

Answer 14

Do courses for CSS and PHP

Answer 15

First, you can try to understand what is UX design and learn that, because if you just learn UI, it's not enough

Answer 16

using CSS

Answer 17

understanding the basic concept of "bootstrap grid system" is very helpful for page layout, and the concept of media query. it will give a basic idea how to approach to a good layout.

Answer 18

Tip: If you follow Google Material Design too rigidly, then it will look like every other new hip website that does the same. It seems to be a trend right now, but personally I think Google Material Design should be left for specific types of Android apps.

Answer 19

try to be simple... small page.. highlighted navigation & menu bar. and follow the flat & material rules.

Answer 20

https://code.sololearn.com/WexvydyBdb7U/?ref=app

Are You Feeling Bore, When You Follow the HTML Codes . Here is a way /tips you can make your own code.