GDE740: Week 10 – Design Development

Hi, it’s finally Week 10 Yara writing a week 10 blog post! I won’t keep you too long, as I know you’ve probably read enough of my ramblings and would probably like to see more visuals of my design process. So let’s start with a recap of the idea:

Last week, I decided on a concept that allowed for the blessing and gifting of the amulets through a digital interface. So far, I have not explored how the interface may look like, so I set out to determine what would suit this project best, plus a few my personal explorations into graphic design styles that I love.

Glassmorphism + 3D shapes

Glassmorphism was stated to be the next big UI trend, but it proved to be quite problematic in terms of accessibility and visibility. It is nonetheless quite a beautiful aesthetic, and I thought to explore this style when displaying the amulets in the archive. A few of the graphic design solutions I admired had elements of brutalism, structured into the dreamy, hazy visions of 3D renderings.

Ornamental brutalism

Speaking of brutalism, a big trend in Middle Eastern graphic design at the moment is this combination of visuals you see in the mood board here. There are a lot of bold colors, geometric shapes, and contemporary throw-backs to vintage Arabic publications. I constructed a logo inspired by the style, using the typeface Watad by HeyPorter!.

Black & white brutalism

Although I absolutely loved the previous mood board, I couldn’t get over the feeling that the colors may possibly drown out the items and make them invisible. This would definitely go against the entire idea for this project, so I opted for a black & white variation instead, extracting a few geometric shapes and adding an eye symbol.

Rough Idea for interface homepage

I normally wouldn’t delve right into designing a UI before fleshing out a site map and wireframes, but working backward made sense. It allowed me to see how the different elements of the website can fit together, and even imagine a new usage for the homepage.

As you can see in the sketch above, another idea came to mind: having an alternative homepage that can be toggled on and off by the eye. The organization of this page is still unknown, but the idea is to display some of the research I’ve done on Dr. Tawfiq Canaan’s amulet collection, both in the Science Museum Group’s digital archive and Birzeit University Museum.

I got to work prototyping the homepage idea to see how the components on the digital interface can be interactive. The first step was transforming some of the images of the amulets into 3D models. I chose 3 different glass evil eye beads as they were the easiest to work with and looked pretty neat. Originally, I had wanted to use Blender to model, but I found a quick alternative called Smoothie 3D that did most of the work for me. All I had to do was adjust the width of the object and export into a usable file.

Smoothie3D

I will admit, I didn’t bother to polish any of the models. Two reasons: (1) time constraints (2) to give a low-poly 3D look and feel to the objects. I wanted the user of the interface to understand that they are 3D reproductions of a real thing, unlike the photographs in the original archive which may deceive one into thinking that they might be displayed somewhere other than a box.

Spline

Step 2 was using Spline to animate the objects into 5-second gif loops. I found out about Spline through a tutorial on Youtube about creating an interactive 3D element in Figma. The tutorial wasn’t the most helpful because it relied heavily on the usage of a plugin, which wasn’t ideal for testing and prototyping. So I opted to compromise and feature a rotating gif instead.

This is where all the magic happens! I’m still in love with Figma, it’s such a great tool to build prototypes, but also to organize information for a design project. Import features are seamless as well, so most of the work was a simple drag and drop action. A few tutorials on Youtube helped me figure out how to create interactive features.

Decentralized Archival Systems

A commonly asked question about digitizing an archive is how it will be able to survive in the future. The system we currently use to access the internet, known as web 2.0, is reliant on centralized hubs, like Google, Facebook, and Twitter. However, the conversation these days is about shifting the power out of big tech and into the hands of the individual user or decentralizing the internet. (Allyn, 2021) While this idea is far from reality, we’ve seen some real-life examples of decentralized web activities, namely cryptocurrencies and NFTs. I started to wonder if digital archival can also live on the blockchain and become decentralized. In 2021, Facebook went down temporarily, including Instagram, Whatsapp, and other apps and services that people around the world rely on. It was due to a single point of failure. In the case of centralized archiving systems, that will always be a risk, amongst other digital issues like bit rot and certain file types becoming obsolete.

For my project, the Palestinian Protective Amulet Archive (let’s call it PPAA for now), I would ideally like for each object to be blessed with media, be it text, images, or videos. This is where I’m stuck and started to reiterate my chosen concept:

(1) Rather than design an AI app that scans a 3D-printed amulet to unlock a “vault” of blessings, the archive could leverage blockchain technology to forever mint that information on a decentralized ledger.

(2) While a transaction record of that “blessing” is visible on the blockchain, the contents of it would belong to only one person.

This is all speculative for now, mostly because I’m not super clear on the technology, but I’ll start to build the object “blessing” interface based on the above. This would mean that when an object is clicked, it will display all of the transactions that have happened on a single object, labeled as a “blessing”.

So how does one make a “blessing” on the blockchain? I found this handy article written on how to create permanent, uncensorable messages on the Ethereum blockchain. In essence, through a portal like My Ether Wallet and the use of your own crypto wallet, you can pay a few dollars in gas fees to write a message in hexadecimal. (Centieiro, 2021) Ok, so this is easy enough to visualize in my prototype! I thought back to OpenSea and other NFT portals and how they list transactions.

OpenSea listing for CryptoPunk #2457

The item activity is quite transparent. You can see who has created, bought, and sold the NFT.

For the PPAA, including details like “price” weren’t important obviously, but I was intrigued by how the usernames were listed.

Amulet Page

I imitated the OpenSea style of listing item activities but titled it “blessings” instead. The idea would be to display all of the blessings made on a specific amulet through the Ethereum blockchain. Again, super speculative because I’m not sure if it could work like this or how it would log the information of the image it’s associated with.

Unexpected Categorization

Originally, I had wanted to make my research about the amulets in relation to the Science Group and Wellcome Collection public through this project. When I started to build a filter/sort page, the idea lost its sparkle. What’s the point of sorting by who owns which amulet? I think what would be more interesting is seeing how many amulets are “blessed” by others, and if they can be visited in person or they’re stored away for the unforeseeable future.

Filter/sort page

Once you click on the eye, it closes to reveal all of the amulets currently present in digital archives across three websites on one page. The websites include the Birzeit University Museum, the Science Museum Group, and the Wellcome Collection. As far as I know, only the Wellcome Collection’s digital archive utilizes International Image Interoperability Framework, however, I feel for an archive that’s future-proof, it would be ideal if all digital archives utilized this tool.

Source: https://iiif.io/get-started/how-iiif-works/

IIIF works by standardizing the delivery of images across a series of networks. It also provides rich media features that allow users of a digital archive to zoom, crop, annotate, and compare pictures side by side. Let’s assume that I’ve utilized this technology for the project. (International Image Interoperability Framework, n.d.) How would that be useful in the context of amulets? Would it better serve a different audience who might need the website for research purposes?

When you click on a category, the images that are filtered by that category are highlighted, so it’s easy to spot which items are exhibited for example and how many they are. In the context of this website, “archived” means it’s stored away. I’m still thinking of a better word, but for now, I’ll let it be.

And finally, the “blessings”, a feature unique to this archive. On the amulets page, you’re able to not only categorize by blessed items but also see a live counter of how many blessings the object currently has. When you click on the amulet, you’re transported back to its individual page, allowing you to view a list of all blessing transactions, and finally, make a blessing of your own.

The link to my Figma prototype is here. I’ve set a few goals to reach by the end of this week so that I’ll have a working prototype fit for feedback sessions.

Reference list

Allyn, B. (2021). People are talking about Web3. Is it the Internet of the future or just a buzzword? NPR. [online] 21 Nov. Available at: https://www.npr.org/2021/11/21/1056988346/web3-internet-jargon-or-future-vision?t=1637768032279 [Accessed 24 Nov. 2021].

Centieiro, H. (2021). How to create a permanent uncensorable message on the Ethereum blockchain. [online] Medium. Available at: https://levelup.gitconnected.com/how-to-create-a-permanent-uncensorable-message-on-the-ethereum-blockchain-afd1ad23fa5e [Accessed 24 Nov. 2021].

Grossman, N. (2019). A Decentralized Archive. [online] AVC. Available at: https://avc.com/2019/11/a-decentralized-archive/ [Accessed 24 Nov. 2021].

International Image Interoperability Framework (n.d.). How it Works — IIIF | International Image Interoperability Framework. [online] iiif.io. Available at: https://iiif.io/get-started/how-iiif-works/.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s