I am really confused with user interface design of the website. I want to design the Detailed view of the student.

So on the page there will be information about the students like name , class roll number etc.

Then i will have many rows for his smemesters , then each semester will have many subjects , then each subject will have many assignments.

Now i am not able to figure out how can i design the layout of the page.

can anyone give me idea or show me something on , how should i go

  • Your question does not pertain to this forum. Please consider asking this question in a relevant forum. Please go through this link to know what can be asked in this forum. ux.stackexchange.com/faq
    – Shivanand
    Commented Feb 25, 2013 at 8:48
  • 3
    @user2082226 Have you explored any potential solutions? It would help if we knew what you had tried so far and why those solutions were not acceptable.
    – Matt Obee
    Commented Feb 25, 2013 at 9:43

3 Answers 3


From your description, I've taken the liberty to make a mockup to give you something to work on. It is a simple suggestion on how you can organize elements in groups and subgroups regarding a students life (at the university).

On the Semesters tab I suggest an accordion control to interact with the different courses in terms of assignments, reports, project and of course a link to course info.


download bmml source – Wireframes created with Balsamiq Mockups

Feel free to make comments and suggestions and I'll do my best to get your project moving forward.


My suggestion here is to use a wireframe/mockup tool like balsamiq or mocqup to first organize the content you have on the screen (better still, do it on pen and paper first). It will give you a better idea of what questions you want to ask or find out about because right now you seem to be overwhelmed by the task, and you need to break the problem down into smaller components (or get hold of a UI/UX designer).


So, I wish I had the time to sketch this out but I'll see if I can describe it. First off, you're going to need more than just a table.

The student information is the parent of all the other. Have that be the head section of your page, it should stay constant and as the main "breadcrumb" of the data. Then, use the semesters (if you're tracking years, use those first) as containers for the classes.

For the semesters, you could use tabs. Under the student information you could tab across each semester to see the class listing. This could be a table list view or an accordion. There are lots of options here.

From the list view, I would have a detail view that you could bring in with a number of different interactions for the assignments (modals, accordions, etc). Depending on if the assignments are actionable or not; are they an archive of completed assignments or a way to get to current assignment information? That would change how you show them I think.

I know that's hard to process in words, so I'd take a look at other UI that's have similar issues. Ones that come to mind are project tracking or high-end todo list apps. I'd look at those and see what patterns they use to help guide you. @Michael Lai also had great advice about grabbing paper and pencil and quickly starting to explore ideas. Just breaking out of the constraint of the original idea for a bit to sketch can often produce great answers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.