international NEWS API
WEB DESIGN & DEVELOPMENT
THE PROJECT
During my web development course at Seattle University, we had weekly projects due as part of our curriculum. One such project required choosing a public API, and building a website that used it. I decided to use the openly available News API*, for featuring news headlines, articles, and filtering media according to genre, publication, or country.
*News API has changed their API limits to business pricing only. The project can be viewed here, but only works on local servers due to the paid API restrictions.
PLANNING
I was accustomed to reading newspapers from different countries on a daily, if not monthly, basis. As a third culture kid who grew up across 6 different countries and visited more every year, having access to international media was typical in my household. However, this same access was difficult to replicate online.
I noticed there was a lack of websites showcasing news from every country. Most news websites had a ‘world’ section for a few, general international headlines. Users could also search for a specific country in the search bar, and see relevant articles that had the country mentioned. But there wasn’t a website that allowed users to see all headlines at once, from one country. Even more unlikely was a website that allowed users to change the country selected - and news results with it - with the click of a button. I set out to do just that with my NewsAPI website.
APP USERS
BUILD Process
Under the free account, NewsAPI allowed a maximum of two parameters to be set, including but not excluded to:
News source (e.g. BBC, New York Times)
Author
Genre
Country
After some testing, I set my API parameters to make queries based on country of origin, and news genre. In this way, users would be able to search for a specific country’s headlines through drop down menus. There would only be one page - results according to the user’s search queries. The website was built with Vue.js, HTML5, and CSS.
DESIGN PROCESS
Idea
The original idea focused on a user-generated search query, with few limitations other than the location selected. I had hoped to integrate Googlemaps with the NewsAPI, showing location-based news results. After some discussion with my professors, we agreed that it would be better to simplify the design according to the project guidelines (and NewsAPI parameters).
INSPIRATION
Maps were still crucial to the visual design, as they communicated the site’s purpose: delivering news results according to country. The dotted design of this map, along with flags, had a sophisticated aesthetic, making it easy to distinguish the different cities.
ILLUSTRATION
As a strong believer in content driving design, I prioritized the news information being easily accessible and easily legible. I wanted the design to be minimal, but also aesthetically pleasing. This meant subtle, pastel tones instead of vivid colors. I modified this existing map, choosing a purple-blue gradient overlay. Additionally, the bright blue shade was easily visible on white or black backgrounds.
THE Challenges
It was difficult to decide on which parameters to allow: news source, genre, country, author, or others. I knew ‘country,’ would be one. But as a fan of certain news publications over others, I had to put aside my personal bias and think objectively for the user and the user’s needs. As a result, the ‘country,’ and ‘genre’ combination was the most effective. Additional challenges included:
Coding the individual country codes to match the NewsAPI (54 countries in total)
Many formatting issues that needed fixing
Tested different ways of displaying the news titles that were still in line with ‘List’ constraints
List could be long (lots of scrolling), so I created a ‘Back To Top’ button once the user was ‘past the fold’ on the screen.
