Process Post W5 – Designing Yourself

Site Evaluation

I will evaluate Yahoo Finance with some of Mauve MagĂ©’s best practices. I frequently visit this platform daily for stocks, and stock market news.

Balance & Proximity

  • The site is asymmetrical by divide 2/3 of the site for stock news and videos and the other 1/3 for your “My Portfolio & Markets”. As a result, it brings more emphasis to the news of the market over the right side of the page.
  • There is not much white space between sections of the front page and the sections are place in very close proximity. It can be difficult for new users to differentiate parts of the page.

Rhythm

  • I have to admit there is somewhat of a learning curve to understand how to navigate the platform. However, after few clicks here and their navigation is very predictable.
  • The front page shows all the relevant news articles sorted by recent and you can scroll down to see more news. Clicking on a news article appears as a pop-up that takes up the entire screen. When you are finished you can exit out without any page refresh or interrupts back to the front page.

Typefaces & Linespacing

  • By inspecting the CSS of the site, Yahoo Finance uses its own self-defined font, “Yahoo Sans Finance” through the site. There are other listed such as Helvetica Neue, Helvetica, Arial, sans-serif, but I believe these are backup fonts in the case other browsers do not support their native font which is a plus.
  • Their font choice and line spacing are good as it is easy for users to read titles and text within articles.
  • Links are highlighted in blue and it’s easy to know what is clickable. However, Mauve did mention that you would usually have the underline and colour to represent a link.

Logo Placement

  • As mentioned by Mauve, the logo is in the top left corner.

Performance

  • Text and image loading speeds are fast and page switches are fast as well.
  • Videos may take a little longer around 1-2 seconds to load but are within an acceptable threshold.

Responsive

  • The site is perfect for a desktop experience assuming you have a modern decently sized screen. The site will do its best to fit everything onto the screen. When I shrunk the site to a mobile-sized window, site content did not fit perfectly. This is however made up for an existing mobile application for both Android and iOS.

Personal Blog Improvements

Links

I changed my links from red to standard and predictable blue for links. This makes them easier to look at.

Post Width

When viewing posts, I increased the padding of the text within the text container to make viewing text tighter and easier to read. Originally it was too wide. I added the following to my CSS.

.single .post, body.page .page {
    padding: 30px 63px;
}

Font Style

I decided to switch my font to a popular Google font ‘Open Sans’ because it is a well recognized and easy to read font. To do so I added the following to my CSS.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

body {
	font-family: 'Open Sans', sans-serif;
}

Side bar

I removed redundant content on the site bar that was irrelevant to visitors. That is now only displaying categories for the purpose of navigation over having default meta sections appear.

Leave a Reply

Your email address will not be published. Required fields are marked *

css.php