Designing version one of the website's openGraph image
History
Created by Meta(Facebook) this protocol was meant to standardize the use of metadata too represent a page's content. One of the reasons could've been to improve the user experience on their products by giving their users a preview of any web link's content.
Process
I approach design from an engineer's perspective; there's a system for good design. Here's how I approached this project:
The message
Graphic design is meant to convey a message; it allows us to be creative with the 'how' part of communication. In this instance the message was quite clear; give the viewer an overview of a page's content. Two questions had to be answered:
- what would peak the user's interest?
- how can it be memorable?
Peaking the viewer's interest could be done through adding a snippet/preview of the content to the graphic. This raises another question, what part of the content should appear on the preview? We'll answer this in a bit.
Making the graphic memorable, this is important as it allows us to have some sort of consistency and create familiarity through 'brand'. Everything, from the layout and colors to typography, is vital, we have to ensure that all the different elements come together in harmony.
Brand
I chose purple for this website, for a couple of reasons. In the spirit of maintaining consistency, I had to use purple for the template, had I used a different color such as green; a user who landed on the page after looking at the preview might feel lost. I used the site logo with an altered saturation on a very light background to make it a bit more striking, this made up a third of the graphic. I didn't center the logo vertically for vertical asymmetry.
Preview
Since this had to be text, this was for the articles after all, I thought the 3 most important pieces of information would be a title, description and link that matches what was shared. The title had to be bold and easily readable, the short description was meant to provide further details about what was on the page, the matching link builds trust as it lets the user verify authenticity. I added a general descriptive text at the top highlighting which part of the site the viewer will be visiting.
Final touches
Once the skeleton was done, I worked on the finishing touches like positioning and paddings. I love the result, and like any great designer that's all that matters.