+ 13

(Answered)How to make good web page layouts?

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.

5th Mar 2017, 9:56 PM
Oussama Bouchareb
Oussama Bouchareb - avatar
25 odpowiedzi
+ 27
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?
5th Mar 2017, 10:17 PM
Mark Foxx
Mark Foxx - avatar
5th Mar 2017, 10:21 PM
Patrik Sokol
Patrik Sokol - avatar
+ 7
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
7th Mar 2017, 5:23 AM
Prince Saini
Prince Saini - avatar
+ 7
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.
7th Mar 2017, 10:09 AM
Anthony Vanover
Anthony Vanover - avatar
+ 6
You can use table with html or use css or better is bootsstrap.
10th Mar 2017, 12:39 AM
Mahmudul Hasan Fahim
Mahmudul Hasan Fahim - avatar
+ 5
the landing page is a trending web layout. and a responsive too.
7th Mar 2017, 11:25 AM
Zainal Mubarok
Zainal Mubarok - avatar
+ 4
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
6th Mar 2017, 9:39 AM
Meher Jebali
Meher Jebali - avatar
+ 4
JQuery UI.
7th Mar 2017, 3:14 PM
Andre van Rensburg
Andre van Rensburg - avatar
+ 4
Make it simple but not simpler. Practice Practice Practice . . .
10th Mar 2017, 6:04 AM
Binod Bhattarai
Binod Bhattarai - avatar
+ 3
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
8th Mar 2017, 8:07 PM
Sepehr Azizi
Sepehr Azizi - avatar
+ 2
Try Bootstrap you will love it and it's insanely easy.
6th Mar 2017, 1:36 PM
Amit Tyagi
Amit Tyagi - avatar
+ 2
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.
7th Mar 2017, 3:56 AM
Ezekiel Oladejo
Ezekiel Oladejo - avatar
+ 2
use css stylesheet
7th Mar 2017, 8:45 AM
Malik Bashir
Malik Bashir - avatar
+ 2
Do courses for CSS and PHP
7th Mar 2017, 10:08 AM
Yadumeet Singh
Yadumeet Singh - avatar
+ 2
First, you can try to understand what is UX design and learn that, because if you just learn UI, it's not enough
7th Mar 2017, 1:54 PM
Teofilus Hendry Harianto
Teofilus Hendry Harianto - avatar
+ 2
using CSS
8th Mar 2017, 3:02 AM
Cynthia Caroline
Cynthia Caroline - avatar
+ 2
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.
8th Mar 2017, 10:07 PM
MAHESHWARI TRIPATHI
MAHESHWARI TRIPATHI - avatar
+ 2
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.
11th Mar 2017, 4:22 AM
Anthony Vanover
Anthony Vanover - avatar
+ 2
try to be simple... small page.. highlighted navigation & menu bar. and follow the flat & material rules.
15th Mar 2017, 9:37 AM
Anik Hasibul
Anik Hasibul - avatar
+ 2
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.
15th Mar 2017, 9:40 AM
Anik Hasibul
Anik Hasibul - avatar