Design Principles in Action
Image with Article Title 4 Design Principles That Will Improve Your Work
Fire Emblem Heroes Logo

Fire Emblem Heroes

CONTRAST

The Fire Emblem Heroes webpage uses contrast to draw the viewer's eyes to the most important area of interest. Immediately when the webpage is opened, the viewer is greeted with the giant, iridescent artwork that consumes the majority of the dark black background. This stark contrast of black to the bright gold guides the viewer's attnetion to the image, which advertises the mobile game's current story plot as well as some of the primary characters. The contrasting colors also make the image (and the text that is present throughout the page) very legible to the viewer, which creates an overall better experience for them.

View the Fire Emblem Heroes Website

Critical Logo

Critical Role Store

EMPHASIS

The Critical Role Store is a fantastic example of emphasis, for it always makes its products—whether it be tabletop games, dice, or clothing items—the largest thing on the page, which helps indicate their importance and creates heirachy through size. Next to all the enlarged images, it lists the product's name, price, description, as well as other images of it that are all much smaller compared to the main, central picture. This method of enlarging the central photograph makes the merchandise easily catch the viewer’s eye and interest them, which makes them more likely to click on the product, read the other supporting information, and buy it.

View the Critical Role Store

Thorum Logo

Thorum

BALANCE

Balance is easily seen throughout Thorum’s webpage. All of the images, text, and reviews on the webpage are centered so that there was an equal amount of content on both the left- and right-hand sides. Even when there is a large amount of images on the screen (ten), they keep the advertising balanced in two rows of five. Towards the bottom of the page, there is a section that also uses asymetrical balance. On the left-hand side of the page there is a large graphic, but the designer added a heavy quote on the right which then rebalanced the design. The overall use and mixture of the two balances is pleasing to the viewer's eyes and makes the user feel more at ease and more trusting towards the company.

View Thorum's Website

Rick Riordan Presents Logo

Rick Riordan

MOVEMENT

Riordan's website uniquely uses the concept of movement. At the top of the webpage there is a golden, curvy line that trasitions to brown as you scroll down the page. This line leads you from the beginning of Riordan’s writing career (Percy Jackson and the Olympians) to his newest novel (The Sun and the Star). This encourages the viewer to follow the line, explore each of the individual books and series, and eventually reach the bottom of the page, which will hopefully lead them to clicking on the newest addition and (perhaps) purchasing the book. The movements also makes the page appear less static, which makes the page look more visually appealing to the audience and makes it more likely that they will stay on the page for a longer period of time.

View Rick Riordan's Website