Critique my Weather App

Code Feedback
1

Here it is: http://codepen.io/fabricioch/pen/eBRGqz

If you see anything that could/should be improved, please go ahead and do it.

Both code quality and styling related comments are welcome.

2

Hi fabricioch,

Good Job!, here are few suggestions:

  1. The design can definitely be improved here, including the typography. The current font sizes are too large and they don’t seem symmetrical with respect to one another. They don’t look clean and professional or beautiful you might say.

  2. Colors can be improved also, as the background color looks bland currently. And the main area where the weather data is presented is not in focus, meaning its just there. There is no contrast to it so that it looks beautiful and like a professional app. Its just data right now with no design.

  3. Also you have to add a toggle button for the Fahrenheit/Celsius conversion.

  4. The background image or an icon needs to be displayed according to the weather condition.

In my view you have displayed the data, now you can work on the design aspect to make it look beautiful and presentable so that it looks like a professional app, and not just a bunch of data output.

Hope this helps.

Keep moving forward!!

Regards,
Kush

3

@N0M9D

Hey there, thanks for offering critique.

1 - You mention they don’t seem symmetrical, but which two things don’t seem symmetrical? You mean the little “The Weather Today” and the big main font displaying the actual data?

Also, I find it curious that you think the fonts are too big. I did it on purpose so the weather info is centerpiece rather than the title “Weather Today”.

2 - What color combination (background/font color) do you think would make it better?
What do you mean by “the main area where the weather data is presented is not in focus”? You mean color contrast or positioning on the page?

3 - Yes, I am going to add that, as the user stories require a toggling button rather than just both temperature being displayed at the same time.

4 - I think the icon is actually working properly, as it does change according to the main weather condition. I’ve seen today two different icons today for the type of weather “clouds”, one had two little clouds and the other had one cloud and one wind-like little image.

4

Hey @fabricioch,

  1. No i meant the font sizes of the weather data, as they all are of equal sizes so there is no contrast between them and no point of focus.
  2. Yeah i mean color contrast precisely. Color is a subjective thing so you can try different color options here, but i think you can try darker background. Can look at the material design colors also. Positioning is fine at the center.
  3. Great.
  4. Yeah i missed the icon previously, thus cementing my point that a little contrast in the elements would be better.

A little contrast with the fonts and color would be great.