MarkUs Blog

MarkUs Developers Blog About Their Project

C.R.A.P Design Principles at MarkUs

without comments

What’s C.R.A.P?

C.R.A.P stands for Contrast, Repetition, Alignment and Proximity.



Different elements (titles, heading, body text, etc.) must look different from each other. This can be achieved by varying fonts, line thickness, colours, shapes, sizes, space, etc.



Repeat an aspect of the design throughout the website, for example all titles will use the same font, size, weight, etc. This makes the website consistent.



Don’t place elements arbitrarily on the page. Elements of the same importance should be aligned vertically and horizontally.



Group related elements together, for example a heading should be closer to the text it belongs to than to the text of the previous paragraph. Physical close elements imply a relationship.


C.R.A.P at MarkUs

The Problems


The dashboard is overall fine. there small problems with the alignment of the assignment information.



On the main page the proximity was violated when the class average was equally close to both assignments.It should be closer to assignment 1 and farther from assignment 2. It was also directly under the assignment. It is part of the assignment therefore it should be under the details of the assignment. The rounding is also different then the one on the dashboard. All pages should follow the same rounding rules.

The submission page has options right next to the name of the assignment. While they should be underneath. The options for sorting the table were using completely different style, using buttons rather than text as the options above them. I would suggest changing all the options to look like buttons. There is the rounding issue again.

On the groups page the options for each student are at different place depending on the length of the name. They all should be in the same place right underneath each other. The tabs for managing groups should be on the same line, if there is no space then at least the search should be on a separate line then the tabs.



The annotation page the Help is the same size of the assignment title. They should be different size and style since they are different things. The options are directly next to the title. They should be underneath and changed to buttons.



On the Grading page The previous and next submission are higher than the rest of the options for some reason. They should be vertically aligned. Same applies to the check box for released. For unreleased assignments under the summary is a complete mess. There are issues with alignment and proximity. Most of the things there are done with tables but then it just stopped and things got out of alignment.



The options on this page are all of a sudden on the right and not next to title like on other pages. This breaks the repetition between pages.



On the student view the assignment rules are completely different than the rest of the section. Also all the details there are on the same line while the message is underneath. This is inconsistent.

The Pictures


The Good


Over all there is good contrast through out the website. The website is pretty consistent about its’ layout and there is pretty good proximity.

Written by andreykul

December 5th, 2012 at 5:20 pm

Posted in Uncategorized

Leave a Reply