I’ve started working on SomethingNew. That might seem like a rather juvenile play of words, but the name of the project is SomethingNew. The idea is rather simple — an app that throws up curated content, curated by bots. There is no rocket surgery behind building this, nor is the idea some kind of billion dollar medical patent that needs to be kept under wraps.
Unlike various startups and apps, where the objective is to make some money, call yourself the CEO or solve a problem that’s affecting a subset of people, SomethingNew is an attempt by me to force myself to learn UI, and everything else about building an app. You see, I’ve always been too lazy to bother about making my own UI, doesn’t matter if its Photoshop, HTML/CSS /XML or Sketch. I do love to have an opinion about all kinds of UIs, but you know what they say about opinions and orgasms.
That brings me to the first stage of the UI of SthN. That’s what I’m going to call it, partly because I can’t find a reasonable SomethingNew domain, without adding phrases before and after it. With any app, I always start with how the SplashScreen would look like. This is the landing page of your app, and no matter what anyone says, this creates a huge impression on people. It doesn’t need fancy animations, but it needs the colour palette that you’re going to follow throughout the app.
After a lot of pointless sketching, I serendipitously came across the idea of basing the app on a Paper fortune teller. The idea was to look at these, from the top, as a 2d object, with a little bit of depth, and add S, T, H and N to each corner of it. My sketches of it look too horrible to showcase here, but I hope you do get the point.
The idea of a Paper fortune teller is that no one knows what are they going to see once they select a side, or usually a finger, thus having a moment of discovery of fate, or, in this context, something new to read, listen to, or watch.
Once a person goes into the app, this origami opens up a fold, and shows one side of it like this. Thus, after doing a few more sketches and mental iterations over this image, I went on a rather tiring journey of creating my first prototype on Sketch. This might seem pathetic, or not polished, but I did spend an entire day, and want to write down the various permutations and combinations that I tried to get here.
Ps: These are my perspectives, and you can always disagree with them.
- Gradients: They are cool, but are very difficult to play around with. You won’t find many apps, which are not calendars or weather apps, using gradients, because, as I discovered today, you can’t have a gradient, and an image on the same page. Yes, I know, Stripe does it on the web, but as you would notice, even their images have gradients in them. A gradient, and an image, super-imposed, look super-weird.
- Text over image: It is very difficult to find a place over an image, where you can overlap the text. If you look at various posters, you would find the image is blurred, or its a good photograph. That won’t be the case in auto-curation, and thus would sometimes cause inconsistent UI.
- A picture isn’t worth 1000 words: Mostly because I don’t have space to show 1000 words. I was going through Flipboard, and various other news app, and they follow the newspaper strategy — bold font for the headline, and a thin one for the text underneath it. As I discovered today, that it is very easy to condense text for a song or a video, but when you’ve a wall of text, it would be difficult to come up with a non-cluttering line of text, that should be explain the image well-enough.
So, these are the things I learnt in my first nerve-wrecking attempt at coming up with the first prototype. If I had to breakup my time, I spent the maximum amount of time figuring out how a gradient and image would go well together and eventually gave up, to an extent. The next time-sink was text-size and location of it on the image. I would try to improve on this breakdown of time in my next iteration.