Design Principles App

1. Color

I used two main colors besides the grey and black, orange/tan and a blue grey. I like the look of these two colors together and I think they give the site a bit of a professional look. They’re not too poppy.

2. Alignment

I organized these videos in columns and they are aligned evenly both vertically and horizontally.

3. Progressive Disclosure

On my flash cards page I used progressive disclosure. You have to tap the card to flip it and see the definition of the word.

4. Legibility

The text size, font and color make the words simple to read providing good legibility.

5. Contrast

The black on the blue provides good contrast making the text easy to read.

6. Wayfinding

On the flash cards page there is wayfinding on this menu to let you know which level you’re on for the flashcards. Also the menu has opacity and is small so you can still see what page you’re on which is a form of wayfinding.

7. Affordance

The search bar affords you to search for the design principle video you are looking for.

8. Consistency

The header with the logo and hamburger menu are consistent across all pages (minus the menu page).

9. Constraint

There’s a constraint on the flash cards page, the only way to flip the card is to tap the design principle card. You also can’t reverse the card so you see the definition initially and flip to see the design principle.

10. Picture Superiority Effect

I could’ve made my app more memorable by putting more images in it. There is only the image example and the image on the home page.

11. Fitts’ Law

Fitts’ Law is used here because the user is only given two options in the header, press the logo to go home or the hamburger menu. Big targets and minimal options will eliminate the errors of users.

12. Five Hat Racks

On my video page the videos are organized in alphabetical order.

13. Hick’s Law

Not a lot of options for user to choose from in menu, making the time it takes to make a decision faster.

14. Hierarchy

There is use of hierarchy on the home page. First the purpose of the app, “design principles” and then second it goes down into questions to discover different design principles, second on the hierarchy.

15. Iconic Representation

The hamburger menu is an icon that represents a menu.

16. Layering

Layering is shown on the flash cards page because after you tap the flash card and it flips, the card layers on top of the other cards.

17. Ockham’s Razor

My site is overall pretty simple I think. But the videos page is extremely simple. You can either scroll to see more videos or search for what you’re looking for in the search bar.

18. Priming

As studying and staying motivated can be difficult, having more images especially one’s with eyes, would give people more motivation to stay on the page and keep working.

19. Readability

I think readability could improve on my definitions page. Making the definitions in the simplest form of words and text would leave users with no questions on what they are studying.

20. Recognition Over Recall

This principle is hard because if someone is coming here to study, they most likely are not familiar with the things they are looking at. But I do think that videos, flash cards and definitions are all common ways to study so that may help users with recalling the information.