tl;dr: I made a prototype using news articles from over 30,000 news sources and blogs and this is a sneak peek how I did it.Getting started
There are myriad of tools for designers out there. IMHO the most powerful design and prototyping tool currently is Framer Studio. If you’re interested in prototyping with code and using API-s, understanding JSON files, I would recommend my previous post about Using Spotify Web API in Framer.
Recently I found NewsAPI.org, a small team with a super powerful API to big news sources like Google News, The New York Times, The Wall Street Journal, The Verge, National Geographic. Next to the big names there are over 30,000 sources available from different countries and languages (even in 🇭🇺Hungarian).
note: if u use it for free NewsAPI.org attribution required# It means that you need to add a credit to NewsAPI.org near to your implementation so that users of your product know where your data came from. This can be a simple 'powered by NewsAPI.org' link, a mention in your Github repo, or a line somewhere in your app description. This way you can give a little back in exchange for free access to the API.
After you registered you will find your API key at you Account page. We will need that to authenticate ourselves when we are requesting data from the API.
When you are logged in all the examples on the site are using your current API key 🙌
IMPORTANT: Do not share your API key in your prototypes or elsewhere. You have limited number of requests and this is your personal key 🗝Get what you ‘GET’
After you acquired your apiKey you can start your XMLHttpRequest in Framer in order to get your data in a JSON format.
# Use XMLHttpRequest (XHR) objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing.If you run this ☝️you can get back something like this 👇
» "How to watch Microsoft's Xbox E3 2018 press conference"Everything
Let’s see what else we can get. In the example above we requested the top headlines from the US which looked like this:
r.open 'GET', 'https://newsapi.org/v2/top-headlines?' + 'country=us&' + 'apiKey=******************************', trueIf you want to get everything and not only the headlines, you can change the top-headlines to everything :
r.open 'GET', 'https://newsapi.org/v2/everything?' + 'country=us&' + 'apiKey=******************************', trueCountry
In case you want something else than the 🗽American news you can pick from these countries: ae ar at aube bg br ca ch cn co cu cz de eg fr gb gr hk hu id ieil in it jp kr lt lv ma mx my ng nl no nz ph pl pt rors ru sa se sg si sk th tr tw ua us ve za .
r.open 'GET', 'https://newsapi.org/v2/everything?' + 'country=hu&' + 'apiKey=******************************', trueWhen you do not specify you will get all countries.
Categories
IMO the most powerful part of this API is to get curated headlines for specific categories from different sources. The currently available categories: businessentertainment general health science sports technology
r.open 'GET', 'https://newsapi.org/v2/top-headlines?'+ 'country=us&' + 'category=entertainment&'+'apiKey=******************************', trueEven more things
If you dive in to the API documentation you can learn how to get news from exact dates, about certain topics, from specific sources.
Now we know what we can get, let’s begin designing the interface.
Designing the news
For this prototype I used Google Material Theme Editor’s Fortnightly UI kit and tweaked it a bit in order to generate a few different card types with titles, descriptions and captions.
The Material Theme Editor helps you make your own branded symbol library and apply global style changes to color, shape, and typography. Currently available for Sketch, you can access the Material Theme Editor by downloading the Material Plugin.
The Theme Editor helped to generate components like cards, list items, App bars super quickly.
🙏thanks @GoogleDesign
From Sketch I brought the design to Framer’s Design space. Recently it became super fast to create layouts in Framer compared to past workflow when every layer and border radius was done with code.
Populate the content
Locate things[0] in your JSON
JSON is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate.
recommended reading: Prototype with real data in Framer, from JSON to multi-device and internet of things
What I did in the past to gain a better understanding on the data I am dealing with and understand the structure is two things:
1. Beautifying the JSON to make it easier to read
2. Importing JSON to Firebase to expose the hierarchy
With these tricks you can easily see that r.response.articles[0].title will give back "NBC Revives ‘Brooklyn Nine-Nine,’ and Fans Rejoice" and to get the name of a source for the 2nd article r.response.articles[1].source.name
Calculating Time
#current time
currentTime = new Date()#function calculate and fill date
dateFill = (layer, i) ->
thisDate = new Date (r.response.articles[i].publishedAt)
newsDate = currentTime.getHours() - thisDate.getHours() + " hours" + " ago"
layer.text = newsDate
Good News, Everyone!
It is done. It works as intended. In case you would like to get your hands on the code drop me a line on twitter @grotandthemob
🔍 Design Details
- separator on top only shown when you scroll
- material bottom navigation
