Instagram VS Pinterest

Q1: Repetition:

Instagram-

• Navigation including search bar, explore, activity and account login keep repeating on the website even we access any web page on the website.
• Logo is static through out all the web pages in the website.
• For typography, Instagram uses Proxima Novafor all text with Neue Helvetica as a fallback.

Pinterest-

• Navigation includes search bar, menu bar(home, following, account login), message, notification and more information is set on the top of the web page through out the website.
• Logo is static through out all the web pages in the website.
• For typography, Pinterest uses Helvetica Neue and others for different languages.

Contrast:

Instagram- Yes, the black text color has sufficient contrast with white background color.

Pinterest- Yes, the color scheme is limited to a maximum of three colors which are white , black and grey.

Alignment:

Instagram-

• The header run across the top of the page and appears on every page of the website.
• The layout of web page is align-centered.
• The navigation bar containing search bar and menu bar is inside the header.
• The website contains standard size of  image and video elements.

Pinterest-

• The header run across the top of the page and appears on every page of the website.
• The layout of web page is align-fully justified.
• The navigation bar containing search bar and menu bar is inside the header.
• The website contains varies sizes of  image and video elements.

Proximity

Instagram-

• The features of like, comment, share and save are in the particular section.

Pinterest-

• The features of save, website link, share, more information are in the same element.

Q2: Best practices:

Instagram & Pinterest-

• Consistent site header and logo
• Consistent navigation area
• Good use of basic design principles: repetition, contrast, proximity, and alignment
• Balance of white space on page
• Good contrast between text and background
• Viewport meta tag is used to enhance display on smartphones
• Media queries configure responsive page layout for smartphone and tablet display
• Navigation is easy to use for target audience
• Color is used consistently
•  Fonts, font sizes, and font colors are consistently used
• Information is easy to find within minimal clicks.

Improvement:

Instagram-

• The image element can be smaller within screen resolution to make the view better.

Pinterest-

• The image element can be grouped into categories to easier user in searching.

Done by:

Mok Hui Fen

Kan Jia Qi

Hardeep Kaur