On The
Ethics of
Tech

Overview

“On the Ethics of Tech” is a personal project that has been a dream of mine for the past 4 years. What used to be a long-form video plan in my head is now a blogging website where I write about technology and ethics, and their implications on each other. I am working on this project and trying to expand into short and long-form video category as well. I made this project in Framer because I wanted to learn this new software that many peers of mine were recommending to me.

Project Duration: Ongoing.

Team size: 1.

Roles: UI/UX Designer, Brand Strategist and Developer, Logo designer, Artist.

Deliverables: A Blog website, A social media account, 2D art, blogs.

Project Specifications: Framer, Figma, Sketchbook (app), Adobe Illustrator.

Achievements

Created an entire website from scratch in Framer in a span of 1 month.

Used Adobe Illustrator and the Sketchbook app to design my own logo and did my own branding for the product.

Created 3 new artpieces using the Sketchbook app, iPad and Apple Pencil

Purpose and Introduction

For the last 4 years, I have seen technology advance at a rapid pace and create more domains for consumers to use and work in. Meanwhile, laws and regulations have played catchup with these technologies, often resulting in some consumers getting hurt. My goal with “On the Ethics of Tech” is to start a conversation about ethics with the topic of technology. I want to make it so that when the public thinks of technology, they also simultaneously and automatically think of the ethical implications of that technology.

There is no set way of going by solving this problem. My approach of public outreach, discussion, debates and education is just one of many. Even for my narrower approach, there are numerous ways to do so. “On the Ethics of Tech” began as an idea for a long-form content platform on YouTube. But, due to lack of resources and my constant moving for work and education, it remained in my mental archive. I finally changed direction after 3 years of procrastinating and created a blog and art website, because a small step is still better than none. I write about topics that I feel are important and created accompanying art and post it on the website. This has led to the website being a mixed media project. I am soon planning on starting a podcast and if everything goes right, I will be able to start my long-form content channel as well.

Artwork by me: Surveillance under display

Problem Statement

Laws and regulation are always playing catchup with technology and people sometimes suffer the consequences for this. There should be a discussion of technology from the basis of ethics. Create a platform for this purpose and educate the public about ethical implications of new technologies and how they can successfully deal with them.

Finalizing the tools

I chose Framer as my tool to build the website because it was being recommended by my peers left and right! I could not get away from the conversation about Framer. It seemed to be gaining traction I thought this would be a good opportunity to try it out and learn this new skill to add to my CV.

I still did my branding on Figma because I started doing my branding a few months before I actually sat down to create the website on Framer. At first, I thought I would program my website because I wanted some features and interactions that no CMS software provides. I then settled for Framer because I was already working on two other programming projects.

Art is a big part of my website. I use an iPad, an Apple Pencil, the Sketchbook app and Adobe Illustrator to create the artworks and publish then I publish them on Framer. I write my blog articles directly on Framer.

Branding

When I sat down to design the project, I did not know where to begin. I realized I needed some inspirations from other similar projects out there. I took screenshots of the projects that I like and that matched my own project in some way, maybe their message or their content. I arranged these examples in a mood board to draw inspiration from.

Ever since I planned on making this project work, I already had a color palette in mind. Black, gray and white - because it fit perfectly with the theme of “ethics”. But, when I started designing some colored wireframes of the website, I realized that it looked quite bland. I also needed a color for highlighting certain links and buttons. For this purpose, I decided to add one more color to the palette, but I couldn’t figure out what would be the right choice. I finally gave in and for the fun of it asked ChatGPT to give me a color palette. I described the goal and purpose of my website, and it gave me the color “Golden” - because it represented good morals and good character in ancient times and myths. I really liked this idea and decided to go forward with it, thus completing my color palette.

My previous color palette

ChatGPT suggested color palette

One Month Mark

Version 1 in Figma

Initial Sketches

started designing the project as a mobile app or a responsive web app, depending on how I would go about coding it. I made these sketches to initially plan how the app should look like on the mobile.

The reason I chose a mobile-first approach is because I put out a survey and majority of the people admitted to reading blogs and articles on their phones instead of their desktop or laptop.

The black color in the sketches shows the elements that I planned to have on the screen and the red color shows the user interactions that I had planned for the mobile version.

Medium-Fidelity Wireframes

I converted my low-fidelity wireframes to medium-fidelity ones by adding the brand colors, the brand typography, some lorem ipsum text, some stock images from Unsplash and using Google Material UI Kit’s elements to represent basic features like the navigation bar at the bottom and the filter chips in the “Posts” screen.

You can visit the Figma file using the embed link below and check out the design for yourself!

Low-Fidelity Wireframes

I created low-fidelity wireframes of all the screens that were to be in the minimum viable product (MVP) of the application. I created these in Figma.

There are some screens that are more custom to my app than a general feature, one of which is the voting systems that I had planned for my blog articles to let the users have their say in determining if an action by the subject of the blog was ethical or not and by what degree.

Three Months Mark

Restarting in Framer

After making the high-fidelity wireframes, I realized just how laborious and time-consuming this project was going to be. It had been 3 months already and I had only created a medium-fidelity wireframe. Programming this website alone could very well take twice as long. I also had commitments at two part-time jobs at my university and also had my regular classes. Due to all of these roadblocks, I decided to shift my project from Figma to Framer.

Framer allowed me to import my Figma designs or create new ones on Framer itself and then simply convert those into a website with no coding necessary. For a blogging website, it was simply perfect. Since my website was supposed to be a little more than a blogging website, it meant sacrificing some of my favorite features for the initial design. I made the calculations, and the sacrifice was worth it. Framer provides an option to add programmable features to the website, so I decided to add those features later down the road.

For me, it was always more than a blogging website. I create artworks with the theme of ethics and technology in mind and I use the brand’s color palette. Sometimes I post these images as a companion to the blog posts, and some other times I just add them to the “Art Gallery” section of my website. Framer gave me a super easy and fun way to create and publish my own website.

Present Day

Logo Design

I like taking inspiration for my logo from nature. Plants, and especially flowers, have a lot of interesting symbolism associated with them, so I try to find one whose symbolism matches the story of my brand.

When I first drew the logo on my Sketchbook app on my iPad, I experimented with different colors and settles on the brand colors in the parts that you can see in the final design. I wanted to show a convergence of ethics and technology, therefore I created the power symbol around the flower. The flower can be seen exploding through the outlines of the power symbol, resembling my feelings about letting ethics not be bound by technological advancements and making it the forefront of innovation and advancement.

You can see some colors spilling out of the established black outlines. I wanted to fix that by retouching it in Illustrator, but the more I looked at it, the more it made sense. Not coloring within the lines was also a theme of the blog, since pursuing good ethics in this day and age will force us to step out of the societal norms. Therefore, I let the logo stay that way due to the additional depth it provided. So, my sketch became my final logo.

Searching for the Perfect Flower

I went through a Wikipedia list of flowers and their symbolism in different cultures. I was starting to get disheartened because I couldn’t find any flower linked to ethics and morality until I stumbled upon the Bird of Paradise flower.

Future Plans

  • I will continue writing and expanding the blog. I will create new art pieces to accompany my writings and also to just exist independently.

  • I plan on purchasing a domain and making the website my own, but that will have to wait until I can finance it through a salary.

  • I plan on releasing a podcast shortly.

  • I am eager to start making long and short form content and have my own voice on the massive social media platforms that exist.

Conclusion

Designing this project and finally looking at the result of 4 years of imagination and persistence gave me immense joy and satisfaction. The project was tough to create on a new platform such as Framer and without the use of any template. It is minimal and simplistic, most of the focus being on the writing and the art. Exactly how I wanted it to be. I cannot wait to see what my mind has in store because it I do have the capacity to surprise myself every now and then.

For a more technical conclusion, I am really happy with Framer and will recommend it to other designers whenever the conversation comes up. I am more confident in my ability to provide branding services to others and using AI tools to enhance my ideas. I am more confident now as an artist and can also use illustrator pretty well to create new designs.