Introducing Bondi

It started with a twitter thread about how people didn’t like the latest Photoshop icon, as it was a rounded rectangle compared to the square of the illustrator. I’ve always hated the aesthetic, but my latest experience with designing a macOS icon for my Catalyst app was so much fun that I decided to mock up my own versions of the Adobe icons for Apps that I often use.

My reference point like that for Catalyst icon, was an old design document highlighting details about the aqua icons. And how they have a unique shape and perspective with a strong graphic that conveys the app’s functions clearly.

So with this idea in mind, I mocked these up:

Next morning I jotted down some ideas, this time for apple’s own apps which seem to have taken a liking towards the circular icon aesthetic. They’re good, but they feel so out of sync with the rest of the OS that offer such a great homage to real world counterparts while maintaining the ease of being relatable to the app’s function.

No one looks at the Garageband icon and thinks it’s an app to edit photos!

News
The newspaper communicates news. It’s got a unique shape to it and a desk-like perspective of a newspaper that’s about to unfolded.

Stocks
The stocks app icon is designed to look like a part of larger ticker symbol. Something that you’d normally associate with a stock exchange. The metallic rims and lights are in sync with the utility apps in the rest of the OS.

TV
This one was slightly tricky to get right. It took me multiple attempts to get to something that I’d eventually like to use.

The first icon I designed was a modern flat TV with the light emitting as if to illuminate a dark room. A couple of hours with the icon and I quickly realized, that there was a problem. The icon was too thin and too wide. You could see very little of it in the dock.

So, I designed the second icon in mind with a 4:3 aspect ratio. Unrealistic for modern TVs but gives a lot more shape to the icon. Even this one felt a bit bland. TVs are hard to get right. They’re just giant rectangles. It’s difficult to convey much meaning with them.

But it wasn’t always the case, a few decades back TVs were a representation of modern technology at the time, and they adorned the most elaborate textures and styles.

So I took a leaf out of that era and designed something that’d look good as a TV.

Ultimately I settled onto something that looked a lot like this TV. It’s not what TVs look like today, and most youngsters have never seen anything like this in real life. But it’s hard to look at it and think of anything else but it being your gateway to entertainment.

Photos
Photos offers an interesting conundrum that’s similar to the TV icon. Photos used to be a physical media, but they’re really that anymore, and so any visual representation of a photo would be a rectangle.

I used a similar approach to the TV icon with this one as well, albeit slightly more modern. Here I make use of the Polaroid instant pictures, along with physical filters as a reinforcing tool. Polaroid’s instant images and filters have often had an inspiration on how photos work on modern day devices, and these just feel ideal for the app.

Another thing I did with this icon, is that I scribbled photos in the area where you’d usually see a message written on a polaroid image, and since photos are so location centric, I also, picked a couple of photos to offer the icon in three different variants with photos taken across Berkeley and Delhi.

The Delhi version of the photos icon also has a localized title, with a marigold flower. I intend to add more localized icons for the Photos app in the future.

Voice Memos
A rather simple icon, Voice Memos has a mic, signifying a recording app, with the tool at the bottom showing the voice memos icon from iOS. The red color is also used to signify a recording button.

Podcasts: 
Podcasts’ icon has traditionally shown a generic icon that seems like a combination of a person and a broadcast. I didn’t want to go as far as creating a 3D figurine for the Podcasts icon. So, I used a different media here. Podcasts, more often than not get associated with conversations and talk shows. So to communicate the idea, I tried to use a podcasting mic.

While a podcasting mic is a decent idea, it was far too thin and lacked visual contrast for the . The broadcasting echoes seem whimsical but they’re not really in line with the rest of the icons in the pack.

And so, I decided to use the Voice memos mic, to signify a talk show here, with the podcasts icon at the bottom indicating that it’s still the podcast app.

Download the Bondi icon set with the icns files here

Pixel Quiz January 2019

Q1. Designed by Travis Kochel, X uses the OpenType font features to create a useful utility out of a type-face. For example: Typing 50 using the X font ren- ders it into a semi circle. The reason behind creating X was to make it easier to edit a particular visualelement in graphic design software. The existingmethods would often require recreating the element every time you wanted to make an edit, and thus X was born. X uses Open Type’s Stylistic alternativesto provide different visual styles such as bubbles and floating rings. A photo of X in the Bubbles stylisticalternate is shown. What is the X font used to generate?

Q2. “They told him they’d have to cut his pocket money if he keeps doing it, so he got really angry and chucked his X out of the window.” Is a quote about Y, from a popular book. The interesting bit is, the incident quoted took place in the summer of 1994 and the X wasn’t released until December 1994, and therefore Y couldn’t have had a X in 1994. A certain Wiki suggests that X could’ve been a prototype that was pre-ordered directly from the manufacturers & knowing Y’s behaviour, that doesn’t sound like a far fetched idea, especially given the job Y’s dad had at a drill manufacturing facility. Who is Y, and What is X?

Q3. Made by a Chinese company called 90Fun, thePuppy 1 is a smart suitcase that follows you around, so you don’t have to drag it. To add a “gravity adap- tive system”, something crucial to it moving all by itself, 90Fun collaborated with X, which uses this technology in its infamous product line. In 2018, Xbecame famous for creating their “SE 3” product, which grew in popularity after a certain category of services saw a meteoric in major US cities. The SE3 major competitor in thismarket is Xiaomi. Look at the image and identify X, and what is X’s SE3 product?

Q4. Biohax Technologies is a Sweden based technology com- pany that specialises in a certain type of gadget X. X is a rage amongst the Swedes, designed to make life easier for its users, X makes it convenient to unlock smart home locks, stores eTick- ets for rail travel, and also contains a user’s emergency contactinformation. Put funda and explain what is X, and how’s it inte- grated into people’s lives.

Q5. This a screenshot from the original manual of a popular game. It’s the story behind the game (popularly, it’s assumed that the game didn’t have any). Identify the game.

The Laziness of the Home Tab

If you use apps and websites like I do, you’ve probably seen a “Home” tab on many them. It’s usually meant to tell the user that it’s the first screen in a number of screens. It’s where you start your navigational journey.

I’ve been thinking about the name “Home”. It’s not really an intuitive name for the first screen on your tab. It doesn’t contain any meaning that’s relevant to the screen’s function. It’s a lazy title slapped to the screen that’s meant to be the screen that’s shown to you when you open an app and doesn’t offer any information abou the screen at all. I feel, It can definitely be labelled better. So, I looked closely at the tab bars of some apps, and indeed, digging through the UI of the default apps on my iPhone, I was able to find examples that support my idea. There isn’t a single default iOS app that contains ‘home’ as the title of a tab

Here are some examples:
Default iOS Apps
Notice how each of the different states in the apps have an icon that‘s contextual and a title that‘s relevant to the purpose of the tab? There’s meaning associated with each of the names.

Other Examples

Twitter Clients

Twitter Clients

The twitter app on iOS is guilty of the home tab laziness. They call their timeline “Home”. On the other hand, Tweetbot calls it’s timeline “Timeline” (for some reason their icons don’t display text labels, but the navigation bar titles suggest these names), a slightly more appropriate title for the twitter feed.

other Examples

Apollo: The Reddit Client

Apollo’s first screen is called “Posts”. It’s a simple title with icon that’s descriptive enough to let you know that it’s a text + images timeline you’re going to look at.

Instagram

Instagram uses a “Home Glyph” for its first screen. It could easily be replaced with something like “Posts”, “Feed” or even “Timeline”.

BookMyShow

BookMyShow the ticketing service also uses the home glyph, for the screen that’s supposed to let you book tickets. How about “Book Tickets”, or just “Tickets” for a title?

Netflix vs Prime Video

Netflix vs Prime Video

Netflix’s first screen is called “Home” while Amazon Prime Video’s first screen is title “Browse”. While “Browse” is fairly descriptive of the purpose of that screen, even if it doesn’t always encompass every thing that the screen does (also shows your watch list and the movies that you’re currently watching). Home doesn’t really offer any information.

There are more examples for apps that do or don’t use the Home as a tab bar button, but it’s easy to observe here, that sometimes lazy design practices easily seep into apps, and form an unhealthy tradition of sorts. There’s no reason for Instagram’s and Twitter’s timelines to be called Home. But it’s been a convenient name given to the first screen. And that tradition’s carried on.

I hope more apps switch to clearer navigation structures.

Variable Fonts

Variable Fonts

Pixel Quiz July 2018

Q1.When you plug your phone into a car stereo, the phone starts playing music alphabetically, this usually means that there’s one song that you’ll hear whether you want to or not. Many songs starting with the letter A have probably been ruined thanks to this quirk, but if you were to download Samir Mezrahi’s creation called “A a a a a Very Good Song” you’d be able to circumvent this problem, and be able to buy enough time to queue your music. Samir’s creation was so helpful, that when the song released, it immediately began climbing the iTunes Top Music charts. What’s so special about the song?

Q2. The word X has it’s origins in Middle English, where it meant “to roar”. Today however, it’s referred to as the onomatopoeic sound describing a low pitched noise. X is also a prominent feature in game controllers. Simply name X.

Q3. Poe’s law is an Internet adage that states that, without a clear indicator of the author’s intent, it is impossible to create a parody of extreme views so obviously exaggerated that it cannot be mistaken by some readers or viewers as a sincere expression of the parodied views.

We often see the implication of the law, when someone puts an X at the end of their post. Just so, people don’t mistake it for something genuine. Put Fundae. What is X?

Q4. While he was designing the X for a popular movie in 2008, John Nelson hung up this poster from 2001: A space Odyssey as an inspiration. In this scene the characterDave had his helmet on, reflecting the graphics that were visible to him. The shot would end up being the inspiration for X. X went on to be a ubiquitous element of the movie. Just explain what is X and the 2008 movie.

image

Q5. An X attack is a dDOS attack aimed at XML parsers. An example X attack consists of defining 10 entities, each defined as consisting of 10 of the previous entity, with the document consisting of a single instance of the largest entity, which expands to a billion copies of the first entity. (Basically repeating the first defined entity, a billion times). In the most frequently cited example, the entity is a string called “LOL”. Hence the name X. What is X

Getting Started with iOS Automation

Intro
Vidit Bhargava
I’ve been using the workflow app since it came out back in 2014, and over the years, I’ve been able to amass a few nifty workflows that help me increase my productivity. With Shortcuts (a successor to Workflow, which was acquired by Apple about an year and half ago), this gets taken a step further, as the app has gained some more capabilities and has Siri support, which lets users present the Shortcut’s results in a Siri Interface. So, I thought of sharing some of my favourite Shortcuts / Workflows:

firstSet

Photos > PDF > Share

A simple shortcut that takes multiple photos, converts them into a PDF and then presents a share sheet to share the files. It’s a workflow that I created to share my class notes with friends back in college. You can also add a Dropbox / iCloud Drive / Google Drive upload command to upload the files to a cloud sharing service and then share its link. (I removed that after Whatsapp started allowing PDF Sharing).

Workflow |
Shortcuts

Batch Resize Images

This one lets you resize multiple images to your desired size all at once, and then saves them in an iCloud Drive folder to access them later. Incredibly useful for when I need to upload images for my blog.

Workflow |
Shortcuts

Live Photo To GIF or Video

Live Photos are really cool, but they’re seldom supported by websites Like Facebook or Instagram. To make them shareable one could convert them into videos or GIFs, depending on the nature of the photo.

Workflow |
Shortcuts

Set 2

Combine PDFs

Takes multiple PDFs and combines them into one. I’m not sure why more PDF readers don’t have this option by default. It’s such a handy tool that helps in consolidating files.

Workflow |
Shortcuts

Speed Test

I found this one online but decided to a bit of customisation to get the Network Name in Shortcuts as well. So now, technically Siri can report the results for my WiFi’s speed every time I feel the need to.

Workflow |
Shortcuts

Top 25 Songs

Back in the day iTunes had this cool feature which’d let you rank your songs by play count and create a smart playlist for you. This can be done by using Shortcuts in iOS now. You can even add filters to restrict the genres or artists in the list.

Workflow |
Shortcuts

Device Overlay

Device Overlays are something that I often need to for my blogposts and product shots. In this shortcut it’s easy to select multiple screenshots for different devices and add overlays to them. It even masks the screenshots for iPhone X around the sensor area.

Shortcuts

Siri Specific

Lumous Maximus

I’m a Harry Potter Fan, and I like the idea of saying magic spells to my phone. Complete with the “you must speak clearly” part! 😉

Shortcuts

Speak Clipboard

Another one that’s largely specific to the Shortcuts app, it’s a simple shortcut that lets Siri speak your clipboard items allowed, useful for proof-reading.

Shortcuts

What I want Marzipan apps to be

I’ve been observing the Marzipan* apps on Mojave for a couple of days now and there’s something that’s been nagging me.


Design paradigms on iOS are very different from that on macOS. On iOS there’s a lot of direct manipulation involved, and so it makes sense to have animations and interactions that respect that manipulation. The date picker on iOS needs to change under my finger, and it must respond to my gesture, the date picker on macOS is not that. It’s a pop down list, which makes a lot of sense for a point and click system. Buttons don’t need to be too large on macOS either, they can be much smaller.

image

What I hope Marzipan is about : A way to bring iOS apps on macOS so that they feel native to macOS. I shouldn’t look at them and feel as though they’re from a different world of apps. I want them to feel as native as possible.

What I hope Marzipan isn’t about : A way to bring iOS apps for developers who want make a bare minimum effort of doing it, without caring about how their apps look and feel on macOS. Such apps would stand out and would feel odd.

image

Apple gets to define what is Native here. But what happens if the Apps that Apple’s supplied this year don’t feel native to the platform? There’s a big responsibility on the design of these apps. And while it’s still early days and the UI will almost certainly change over time, the decisions that they make, will form the decisions made by developers in 2019. As a consumer, I don’t want iOS date-pickers on my macOS apps, ever!

– 
* :  I don’t usually like using unofficial names to refer to products or their features but for the lack of a better word, I’m using Marzipan to refer to Apple’s UIKit on the Mac initiative. 

Oppo’s Find X ditches the notch for pop-up cameras

Oppo’s Find X ditches the notch for pop-up cameras

Why I prefer Markdown over Word Processing Software

Last month I completed my undergraduate engineering studies, with the submission of my Bachelors of Engineering Project, the Project was supposed to be accompanied with a 50 page report of how the project was made and what methodologies were followed.

myMarkDownSetup

I wrote my entire draft on an iPad app called “Editorial”. The reason was simple. Editorial provided me with two things; First, Markdown, and secondly, an automation workflow which would properly translate my draft into a Word Document, with proper section headings, et all.

Not only did I wrote those 10,000 word on Editorial, in the last 3 years I’ve switched from writing on iWork’s Pages to writing everything in Markdown, then using a word processor / Page Layout Software / Blogging platform of choice to format it, usually done through a workflow which ensures that I do minimal work.

Why do I prefer Editorial and Markdown? It gives me the freedom to write want I want to, without having to think about the formatting the document. To me that is the major problem that any word processing software has. It tries to do two things at once, it tries to layout the page while you’re writing on it. It’s a tricky balancing act and much less elegant experience to me, than to write first and then use a page layout software to create the layout that I want.

I cannot imagine writing 10,000 words on MS Word. Can you?

How does Over the Air Charging work (Truly Wireless Charging)

energous image
Vidit Bhargava
With the number of smart gadgets increasing by the day, Charging them has become a hassle. You need to charge your phones, your computers, watches, et all. at regular time intervals. And the number of wires can be staggering. One solution to this problem is Wireless Charging. Well, not exactly wireless charging but more like Induction + Resonance based Pad Charging. You place your device on a Pad and the device starts charging. These charging pads can be placed into furniture and you basically have a spot in your table where if you were to place your phone, your phone would charge.

But this isn’t truly wireless. To begin with, you need contact with a special part of the surface to charge your devices, and secondly, that pad needs to be connected to a power source too, and generally supports a single device. So what you’re doing with this kind of wireless charging is just replacing the charging cable with a pad.

What if, you didn’t need all the charging paraphernalia? What if charging happened over the air? You plug in a charger. And all your devices in the room start charging, without the need of any cables. Sounds like Science Fiction, and to be honest a little scary too, Most people I’ve talked to about it, have questioned the sanity of having “electricity through the air”. But this is a sort of technology which is on the horizon of becoming popular and more than that, it’s just about as safe as WiFi.

While exciting, Over the Air charging is still in a nascent stage, and has been approached at with multiple angles, which vary in their implementation, ef ciency and device safety. I’ll be discussing three of the popular Over the Air Charging technologies for this piece:

Radio Frequency Charging

How does RF Charging Work
The way this works is, Radio Waves are essentially Electromagnetic Waves (much like X-Ray, microwaves and infrared waves). A device (Hub) transmits high frequency radio waves at a fixed frequency. The phone or any other smart device can receive those waves at that fixed frequency and convert the transmitted Alternating EM Wave, to a Direct Current Wave. This is effectively how FM Radio works but instead of data, it’s power that the user gets.

Since, the EM Wave propagation attenuates (reduces) over a distance. The closer your device is to the radio wave transmitter, the faster it’ll charge.

Is it Safe?

Yes. High frequency radio waves cannot penetrate human skin. And since most of the charging technologies use only the magnetic components of EM Wave, there isn’t much of a risk anyway.

Why is it not taking the world by the storm?

The efficiency is not upto the mark, i.e. it just takes too long to charge the device at the moment. Given, that a lower efficiency isn’t much of a concern once your device is consistently charging, but there’s another concern around consistent charging. Lithium Ion Batteries only have a limited number of charge cycles they can go through, and if you’re consistently charging for long durations, that could adversely affect your device’s battery. Also, the efficiency isn’t even high enough to charge your phone while you’re using it. The charging efficiency i.e. the power it can transmit over a distance, to charge your device in a reasonable amount of time compared to current charging standards, is a major hurdle for these devices to become reality.

The efficiency though, is merely an end result of what a 3 part balancing act between the desirable power, the safe limits of power transmission via radio waves, and the distance to which it can charge at the desired efficiency. You could have higher efficiencies but would it be safe for anything other than an in-lab environment? Or will the range be big enough?

And the other reason why companies like Power Caster and WattUp have not been getting much traction is, that they need strategic partnerships for the phones to have receivers and converters which can receive their RF Transmissions and convert them to usable energy to charge the device.

Ultrasound Wave Charging

uBeam Charging

Instead of Radio Waves, uBeam’s wireless chargers use Ultrasound Waves. In principle this is similar to how RF Charging works, but instead of Radio Waves, uBeam uses Ultrasound Waves.

There are major advantage to Ultrasound waves. First, The receivers are cheap. And the devices can charge while moving. And since Ultrasound waves can transmit data as well, this can be used to connect to other smart devices. Moreover, Ultrasound waves are generally safer than Radio Waves, since these are just sound waves and not EM waves (which are only safe to a certain limit of frequency), this is also technology that has had medical implementations for quite a while.

Having said that, uBeam’s major disadvantage with Ultrasound Waves is that it needs a line of sight connection, which’d get blocked by physical barriers like Walls or Humans, and that can be a troublesome situation if your device needs to be in a specific desired location in the room to charge.

Power over WiFi

WIFi is almost everywhere! Cities have hundreds and thousands of WiFi Points and they basically use the same infrastructure that’s needed to transmit power.

WiFi Routers can be forced to send out a constant 1W Signal, and there goes the need to have a rectifier to convert AC Power to DC. The convenience of having Power Delivered by your WiFi router is gigantous. You don’t need an external hardware. Fewer Electronic components only mean that it’s going to be cheaper and the adoption to PoWiFi is going to be really fast if it starts getting traction.

Having said that, PoWiFi also has its own set of limitations. PoWIFi is much less efficient than Radio Frequency Charging or Ultrasound charging, and basically cannot charge a mobile phone.

Resonant Beam Forming Charging

Pi Charging
Resonant Beam Forming Charging has a much more different approach to do Wireless over the air charging than PoWiFi, RF Charging or Ultrasound Charging.

Pi, a company that recently debuted this kind of a technology, aims to make a device where devices could huddle around it to get the charge. Resonant Charging is more similar to Qi based Pad Charging than any of the other above mentioned technology. Over here, the principles of pad based charging are put to use in an air medium, where a beam forming algorithm for the device is able to direct the generated magnetic field to the device’s location.

As you’d expect, this type of charging has a smaller radius than other solutions. It’s just a 12inch i.e. 30cm radius around the transmitter. So basically your devices are going to huddle around the charger instead of being in your pockets or your hands while charging.

Pi’s solution works better than the rest and they were able to show of a working device at September’s disrupt conference because they’re ambitions are much lower. They’re not promising long distance range for wireless charging or breakthrough charging tech, they’re using existing technologies and algorithms to make charging at least contactless. Even if that means sitting around their charging unit like you’d do around a campfire.

As for others, there’s still a good distance to cover in terms of the minimum efficiency you’d need to make these over the air charging devices work in a real world.


Over the Air Charging is a novel idea, and something that‘s been pursued for a long time now (The oldest references I found dated back to early 2000s), It’s much more convenient than the traditional charging techiques or the Pad Based charging which is often erroneously referred to as “Wireless Charging”. I think it’s a future of charging mobile devices and we’ll eventually look back at the era of Pad Based Wireless charging as a transitionary period to a much better technology.