Building a Catalogue of Ancient African Symbols – The Adinkra Project

Thanks for taking some interest in knowing how the Adinkra Project all started. This post will cover many parts, from intro to putting up the website. Since this is a living project, I’ll be making several updates to this post as time goes on.

Intro: How It Started

Some time in 2017, I had thought of working on a project. As a UX designer and some-what developer, projects provide an opportunity to test best practices, and learn something new. And I had recently completed the Accra Floods project, so I was excited to start another one.

On 7th July, 2017, I received a mail from the GDG Ghana group; one of the members was working on a Python tool to draw Adinkra symbols. Immediately, that stuck out to me. That’s when the whole interest in Adinkra symbols began.

I then went on a search to see if there were any Adinkra symbol catalogues and, most importantly how they were presented. For me, this was more of a design project, than just compiling ancient symbols. Of course, there were many of them. As I browsed the lists, I noticed a trend — all of them had different lists, with some symbols appearing on one and not the other. That was an even more compelling reason to compile, and have a complete list of Adinkra symbols. Wikipedia for instance reported 53, then the most extensive list then reported 69. Currently, there are 89 symbols on Adinkra project, and there are more to be found.

Project Naming

Having a digital marketing side to my experience, I thought to pick a name that would easily stick, have great search engine rankings, and I could find social media handles to. After some brainstorming, I settled on Adinkra Project. After all, it was a project about Adinkra symbols. Thankfully, no-one had worked the name yet. I went ahead to buy the .org domain name in March 2018, and 2 months shy of launch registered on the Twitters.

Colors

It’s easy to find colors when you’re creating a new brand, but since it’s about symbols that have had a known specific color, I didn’t want add many colors to dull the presence of the symbols. I ended up with a deep blue, and a tint of orange as a complementary color.

Typography

If you know something about Adinkra symbols, you’ll understand they are not of the English alphabet. Hence, choosing a consistent typography to make the ‘ɛ’ pronounced / er / like ‘air’ and ɔ pronounced / ôr / like ‘or’ stand out was critical to the design and experience of it. Since this would be a catalogue that would live for some time, I wanted to keep it consistent with culture. Having spent some 15 years in the Ashanti Region of Ghana and learnt Twi in school within those years, I cringe when I see Akan words spelt with the English alphabɛt, and I wasn’t ready to make those mistakes too.

Shouts to projects like the Kasahorow project for popularizing the local alphabet on digital keyboards.

So I searched on Google Fonts, the best options remained Noto Sans and Ubuntu. After working with Noto Sans for sometime, I realised it wasn’t consistent with the local letters. Thankfully, macOS’ standard font presents that quite well, so for macOS users, they’d see SF Pro Text and Android users would see Roboto, others Noto Sans.

That ended the discussion on fonts for me.

Sourcing the Symbols

The initial check led me to total of 4 Adinkra symbols lists; Buzzle with 69 symbols, Ghana Culture Politics with 58, West Africa Wisdom, 67, and Adinkra Symbols with 40, each having different sets of symbols.

What I did next was to use Sublime Text to extract content from HTML elements, and place them into a spreadsheet. I ended up with a huge list which I sanitized with Python, yes the same Python Truston talked about, Python lists and sets.

I eventually had up with a combo list of 99 symbols. It was quite a revelation to me. I didn’t know they were so many. After cleaning up the combo list, due to misspellings, etc. I came to 91 symbols, 2 of which I don’t know names of but have the symbols, which results on the 89 which are currently up on the Adinkra Project website.

Also, between those lists the most common properties were the symbols, their names and meanings. Some added themes, proverbs, meaning, and even origin. For each field, I’ll have to find their complete metadata before I can post on the site. For now, it’s just name, symbol and translation.

Sourcing the Images

Just as I stated in the intro, there wasn’t a complete list of Adinkra symbols on any website, so it was even more difficult to find the complete list of images. Thankfully, Kasahorow, yes, the team mentioned in the previous section had a complete set of 27 symbols, in SVG and PNG so that was a great start to compile the rest of the images.

Since these were symbols, and would end up on a web project I found it helpful, and web-performant in thinking to present them in SVG. Would be crisp and small a.k.a fast-loading.

With Illustrator, I converted the images I pulled from the internet and “Trace” and “Expanded”-d them. I then copied them to Sketch and completed the sizing, and cleaning up clippings, etc. from there. Having used Sketch more than Illustrator, I knew how to go about things in Sketch faster. So that’s how I created the rest of the 62 images. I also made sure they all had the same artboard size for uniformity in presentation.

UI

A major part that delayed me was finding a theme and designing the pages. That ended up taking up all the time, even though it was just 3 actual pages in all. Too much choice cost me time.

From working out responsiveness to visual presentation, the goal would be to make the main idea of the page stand out; the symbol. There was temptation to add some shapes, and visual elements, but the symbol itself is a shape so I eventually had to choose a simple gradient to add some color to the page.

This didn’t come easy as I asked for help from Ivan my brother and Kweku a new friend I met this year; both great designers. And cheers to the wife, the unofficial manager.

Logo

I’ve worked on some logos in the past though that’s not a core competency. Took me me some time as well to figure one out for this project. One day, I had an “epiphany”. One of the symbols could be reconstructed to form a logo, and just to use a simple word mark with no major changes. With the color I had already chosen, I constructed the logo in Sketch and decided on this.

Choosing a Stack

Of course, the website wouldn’t exist in a vacuum. Most of my professional work as a UX designer has been to design web apps, most of them built in WordPress. Along the line, in 2013, Yaw introduced me to Rails, which I found super easy to use and understand. I understood both WP and Rails enough to be able to build this in. Having worked with WP for so long, I decided to choose Rails for this. I’d not worked on a main Rails project since 2015, maybe. Thankfully, Rails 5 wasn’t so different, so I picked it up, watched a few videos and got my structure back together. So Rails it was!

Recently, there has been an influx of front-end frameworks, most developers over engineering their apps. Earlier this year, I had made a public promise to learn a framework and build a project with it. So there was a temptation to do that on Adinkra Project. After some thinking, I realised that wasn’t necessary because the app was pretty simple; no moving parts, per se.

So I ended up with Rails, HTML and CSS. No need for even JS. That might change soon with some features that may be developed for the website. But I’m so content with how it looks now; happy it’s not over-bloated.

URL Naming

Ok, so If you’re still reading, thanks. Let’s continue. In the typography section, I talked about how this wasn’t based on the English alphabet, so I had to think carefully about how to present them to users, search engines, and bots. I mentioned I didn’t want the local alphabet to be lost in there, and I also wanted to make the URLs memorable enough.

Rails gives a simple URL method of /symbols/1. However, I had a feeling I could find some symbols later, and I didn’t want symbol 92 to come in the alphabet before, say, 23. The best way out for me was to create a new URL-naming convention based on another field I created and self-populated called the short-url. The short URL would be a three-letter text that is mostly derived from the letters of the symbols. It will be unique and be the URL identifier for each symbol. For instance, ‘Nteaseɛ’ would have been difficult for people to type but it’s shortURL of ‘nts’ makes it easy to remember and type in.

Once I found this way out, the IDs merely became a way to know the number of symbols in the catalogue, and they would not be user-facing so win-win.

Completion/Launching

The full meta data of all the 89 symbols I have assembled will take some time to complete. Hence, it is wise to just put it out, just with the name and translations. Co-incidentally, I had been working on my website and wanted to complete it soon with projects I’ve worked on and some notes. So I also wanted to do a full write-up which you have gladly read to the end, more like a case study for this UX project, something I want to do a lot more of.

You can follow me on Twitter, and the project on Twitter as well. I would like to work on more projects and get better. If you have a space for a UX designer preferably on a remote team, lets talk.

Thank you for reading. Twitter DMs are open for questions, if there’s a symbol I’ve not covered please send information about that to adinkra [at] ayitey [dot] me.