Q:

Displaying states of machines – Overview site

We need to display the state of some machines in our web application.
The machines can have about 8 different states.
Our idea is to make a site where the user can see all machines and their state.
But we don’t really know how to display the individual machines. 
A co-worker had the idea of doing something with color codes.
Each machine would be displayed as a rectangle in a different color (which indicates its state).
Something like this:

I don’t really like this idea because I think the users can’t remember what each color means, respectively it will take a long time until the users know which color stands for which state.
Do you have any ideas how we could display the machines and their state?
The requirements:

The site is mainly viewed in desktop browsers.
But we also need to support tablets.
The users should see the state without clicking or hovering the machines
We need to display 20 to 300 machines on the site. 
(If possible without paging)

A:

Issues

You are right about the use of color. Users are unlikely to remember what it means if you have 8 states.  It also creates problems for color blind users.
Using a legend is not great because it forces the eye to dart around the screen.  It also doesn't solve the color blind issue.
300 items will be difficult to navigate, so careful cell design combined with sorting (e.g. by status, or user-defined) and filtering will help.

Suggestions
Improve your cell design. 

Every cell seems to be a machine so you may not need to show the machine caption. 
The number is used to tell the machines apart, so increase the size of the font.
Use both color and a label to show the machine status.  This is current best practice, because it allows for easy reading by color, but also shows status clearly for color-blind or unfamiliar users.
Simplify the cell design to focus the eye on what's important: fade the outline (this will help reduce the grid illusion effect), and avoid making the entire background colored because it makes the numbers harder to read/scan.
Use swatches to indicate status, instead of painting the whole background red/green/etc.
Add sort and filter controls, as noted above.

A resulting design might look something like this (just the cell layout, you'll have to add filters/sort):

This is less dense, easier for the eye to scan, and more communicative of status to a variety of users (new, expert, color-blind, etc).
Hope that helps.

A:

Map of the manufacturing site
You could consider having a map of the manufacturing site with location of machines: This will help provide context and streamline the process of operating the machines. Below is just an example ( limited number of machines). If you want to scale things up you can user architectural plans with more graphical emphasis. 
 
Dashboard overview
The dashboard view will help your users attend to urgent tasks, all other information relating to the state of the machine could be embedded within the map. you could also make use of hover state to show additional information.
Haven't seen tohster answer (was editing) but thats how the dashboard could look like, you could also use the dashboard to highlight areas of concern within the map! Overall this will provide both context and status to machine operations as well as a piriorotised list of tasks.

Update: Best of two worlds
This might be beyond the scope of the question and subject to constraints and limitations, but just wanted to share how information about machine status could be coupled with manufacturing site layout: 

A:

Consider hiding machines which have no problem. If the goal is to find machine(s) which is (are) not perfectly working, there's no point in displaying 20 green squares and one red square if you only care about the red one. Just display the machines which require some work to fix their problems.
You can also add a dashboard which display only the numbers of machines in the different states. It helps to have an overview of all the machines:

download bmml source – Wireframes created with Balsamiq Mockups
Thanks to the answer from tohster for the inspiration.

