3 min read
Step 5: Polish
Refine the experience.
Where We Are
The app works. Now make it feel good.
Improve the Loading State
While weather data is loading:
- Show a subtle loading spinner or skeleton cards
- Disable the search button to prevent double-clicks
- Clear the old data before showing new resultsAdd Keyboard Support
Make sure pressing Enter in the search input triggers the search.
Focus the input when the page loads so you can start typing immediately.Visual Polish
Refine the design:
- Add a subtle gradient or background that hints at the weather
- Make the current temperature really prominent — big and bold
- Add smooth transitions when data loads
- Style the forecast cards with a hover effect
- Make the temperature unit toggle look polishedData Visualization
This is where your design instincts matter most — how do you make data feel intuitive?
Temperature Graph
Add a line chart that shows temperature over the next 5 days:
- Plot the daily high and low temperatures as two lines
- Label each day on the x-axis
- Use a smooth curve, not harsh straight lines
- Add subtle gridlines for readability
- On hover, show the exact temperature for that day
- Use CSS or a lightweight canvas approach — no charting libraries
Keep the chart clean. Less decoration, more clarity.Weather Iconography
Replace the weather emojis with custom visual icons:
- Use simple SVG icons for each condition (sun, clouds, rain, snow, thunder)
- Match the icon style — consistent stroke weight, same visual language
- Animate them subtly: sun rotates slowly, rain drops fall, clouds drift
- Each icon should communicate the condition instantly without a label
Think of these as tiny pieces of information design.Wind Compass
Add a small wind compass to the current weather display:
- Show wind direction as a compass needle
- Display wind speed in the center
- Rotate the needle based on the wind direction data from the API
- Keep it compact — this is a supporting detail, not the main eventHandle Edge Cases
Handle these situations gracefully:
- Empty search input — don't fetch, show a hint
- Very long city names — truncate or wrap
- Network errors — show a friendly retry message
- No results — "City not found. Try another name."Checkpoint
By now you should have:
- Smooth loading states
- Keyboard support
- Polished visuals
- Temperature graph showing the 5-day trend
- Custom weather icons
- Edge cases handled
What You Learned
- Loading states improve perceived performance
- Small details (focus, keyboard, transitions) make apps feel professional
- Data visualization turns numbers into understanding
- Consistent iconography communicates faster than text
- Edge cases separate working apps from good apps