Morning: Workshop

This morning, you attended the workshop on Visual Design. During the workshop you:

• Refactored the study monitor table using an HTML <table> with merged cells (see: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table3).
• During this, we also discussed the details about the study program. Especially about the EC's you can to get for each quarter of the first year and pass the NBSA boundary. But, also about the semesters of the following years until your graduation internship.
• Next, we introduced some alternative layout design techniques like flexbox and grid that you might want to consider as a more modern alternative for <table>.
• Finally, we inspired you with more advanced CSS tricks that you might want to incorporate in your website

Skills lab

Building the table

During the lecture we discussed how to structure the dashboard with a <table> and merged cells using rowspan and/or colspan. We also discussed briefly the entire structure of the first year of this program.

<aside> 🛠 Exercise 6.1: Use this information to create a complete HTML structure in dashboard.html that includes all first years test components. As discussed, they should be grouped by course which should be grouped by quarter.

</aside>

Designing the dashboard

The following exercises can be done individually or in small groups.

Styling the table (visual design)

According to the requirements specification, a clear distinction must be made between parts that have not yet been completed, sufficient parts (i.e. parts that have been obtained) and insufficient parts (still to be retaken). For example, by using colors.

<aside> 🛠 Exercise 6.2: Think about how you want to visualize this distinction. Would you like to use colors, a different font setting (like bold or italic), a combination or something completely different? Draw your ideas on paper. Visualize at least:

• A fully completed course
• A course that has no grades yet
• A course, consisting of two exams, where only one exam is passed. The other exam still has no grade
• A failed exam
• A course, consisting of two exams, where only one exam is passed. The other exam failed </aside>

The completeness visualization

According the requirements, the completeness of your first year (the amount of obtained credits relative to the required amount of 60EC) must be clearly visible. This should also include the “NBSA boundary” (of 45EC).

The visualization of completeness is something that a lot of different application also need. And most of them have solved it in different ways. This problem (visualizing process completeness) and possible solutions are documented as UI design patterns. There is a website that has documented a lot of these patterns: ui-patterns.com. Here is the link to the Completeness meter pattern:

Completeness meter design pattern

<aside> 🛠 Exercise 6.3: Check this link. See the examples for inspiration on how you want to visualize the completeness, including the NBSA boundary. When possible, discuss these with fellow students. Then draw your ideas on paper. Draw different situations like:

• All exams up to now were successful, but there are still some exams left to do. You are still below the NBSA boundary
• Same as before, but you are now above the NBSA boundary
• All available 60ECs are obtained
• You passed some exams, but failed others. It is still possible with the resits and other exams left to pass the NBSA boudary
• Same as above, but with the resits and exams left, it is impossible to ever pass the NBSA boundary </aside>