What are the best practices in defining layouts or shapes of pages in an educational web application? [closed]

Question

I am working on choosing layouts and shapes of page components for a large educational web application containing more than 100 variety of web pages. I am currently trying with flat layouts and trying to keep minimum components so that each page look simple and easy to use. The bigger blocks displaying Theory Subjects and the smaller ones as labs (blocks count might vary). I have designed similar sketches for the entire application. But i want to make sure where to leave space which can be used later effectively to display advanced features. Basic Features are as follows.

1. Question Answer Section
2. File access/upload section
3. Blog Post Section
4. Time Table Section
5. Note making Section
6. Login/Register Section
7. Home Page
8. Events Section
9. Exams and Results
10. Departmental Notice section and many more pages

Also the above page types are used by students, faculty, department, management belonging to an institute on regular basis.

Please suggest best practices for defining layouts and shape of components for each category. Thanks in Advance.

Answer 1

Sounds like you're looking for some kind of guiding principle in how to organise a layout with many parts.

The best place to start is probably making sure you've got a good understanding of visual hierarchy: how arrangement and presentation controls the order things are viewed. Read up on it, find good intuitive layouts and think about what kind of hierarchy they set up and how they steer the eye, then revisit your list of 10 items and ask yourself: who should look at which, when? Which are related and how (e.g. long-term tools vs short-term information, perhaps)?

Cluster items into chunks based on who should be drawn to which chunks when, and then organise these chunks into a hierarchy.

Also keep in mind the patterns people default to when there aren't any visual cues guiding the eye. Eye-tracking studies show there are generally three: top left to bottom right, zig-zagging down the page, and an F shape. This can be useful in anticipating what people might do in areas where you want options to be evenly balanced.

But probably the most important part is: test with real people, and refine your layout based on that.