Design Principles in Action

Barnes and Noble

Simplicity

I chose Barnes and Noble to represent simplicity best. Barnes and Nobl’s website layout looks complicated and detailed, but really they are only showing the details that they want to get across to the customers. First off, they have the header at the top with all of the different places that the customer can navigate from. Below it, they show a slideshow of books or such to promote. Then it’s rows of different books in different categories. The website doesn’t go crazy with colors often as the main two are black and white. The background is also very simple as it is a solid white background with black text scattered around.

Steam

Proportion

Steam has some variety of proportion to it. There are all kinds of different size variations that bring the whole website together. The biggest emphasis is towards the middle of the browser as that is where all the products are. However, the left side of the website has a filtering tool that allows people to choose exactly what they want or what they are looking for. Steam deals with hosting games made by all kinds of companies, so their main focus is to advertise said games. So the middle(where the games are listed) has a focus put on them. They are slightly bigger and in your face than any other function on the site.

ToonTown Rewritten

Pattern

For pattern, I mainly focused on the decorative element. As in the background of the website. I used ToonTown's website as an example. To keep up with the game's goofiness, they add little decals in the background that show that silliness. These decals look random, but there is some repetition as the pattern repeats itself. It’s tellable as the decals are seen multiple times throughout the background in the same order.

Sims 4

Movement

The Sims 4 website is a good example of movement. They do have a simple layout with not many visual elements. Mainly as the website makes use of a white background with black text. However, the website does have a pop of color that acts as a guide to move the viewer's focus. Not only that, but there is a back and forth to that the text and images used. The text and the image alternate from the left side of the screen to the right side to create that visual movement.