Color Theory Guidelines Assignment
CSIS 375: Introduction to Computer-Human Interaction
Color Theory Guidelines
Color Theory Website Example: Violation – https://gatesnfences.com/
This website uses a neon green across a large chunk of the top of the webpage, a neutral red to accent
the menu options along the side of the page, and an incredibly pale brown as the background for the
entirety of the page. The pale brown is contrasted with light-to-medium grey boxes that are used to
allow the text to be more readable, but the contrast between the grey and brown, neon green and red
do not create a satisfying experience for the website user.
Color Theory Website Example: Adherence – https://www.lobster.es/
This website utilizes a monochrome scheme in its design. It uses a deeper pink to emphasize the Calls-
to-Action and has a general clean appearance for the user. This color design doesn’t create a distracting
or harsh environment for the user, which will keep users engaged with the webpage rather than drive
them away.
Menu System Icon Designs
1. Manage Scenarios
This icon is fairly universal for settings or management of a system or function. Since the user will be on
the “scenarios” page they should be clued into what they are managing when they click it.
2. Manage Assumptions
This icon is fairly universal for settings or management of a system or function. Since the user will be on
the “assumptions” page they should be clued into what they are managing when they click it.
3. Run Scenarios
The play button indicates to the user that this button “runs” a function in the system. The document
behind it indicates it is a scenario. They should also be clued into that because this icon will only be
usable on the “scenarios” page of the system.
4. View Reports
This icon includes a document that keys the user in to it being a report function.
5. Exit Application
The user should be familiar with the function of this button as it is universally used as an exit function.
6. Enter base values
The user should understand this icon to be a calculator, cuing them in to it having a value entry function.
7. Compare Scenarios
The two differing lines in this icon imply to the user that this is a comparison of two things.
8. Manage Permissions
The keyholder icon above should be able to cue users into the icon being for management of
administrative permissions.
