design
AI Photoshop, robot art, and a big fight about the future of colors. We covered all that on the latest episode of The Vergecast, along with what Dall-E and other platforms will mean for copyright law, the difference between CMYK and RGB, and much more. AI art is coming, y’all!
I finally know why Pantone colors exist.
Verge is my #1 place to get tech news. I read it daily. Last week, I visited the site to see a complete overhaul of the design of the homepage. You can read more about the redesign here.
Coming from a background of AB testing the smallest changes in, I found this move to be very bold. This level of risk taking is rare on the Internet, especially for a big player like The Verge. They stand to lose so many readers. This is part of the reason I love going to the site: a strong sense of direction on where they are going.
Mentioned this in the post but @backlon and I really did make one of the first prototypes of our feed in Google Docs last year. We just had fun blogging into a doc for most of an afternoon, to figure out what we needed.
— nilay patel (@reckless) September 13, 2022
Sometimes you have to just start, somewhere. Anywhere. pic.twitter.com/gKrZdPpW00
So many companies don’t do big do overs once they see big $ roll in. The need to keep revenue flowing makes them risk-averse. Companies become less innovative.
This is partly due to how websites acquire traffic. Everyone on the Internet relies on search engines to find content. Most sites are tweaked to be crawled by search engine bots, making it easy to index and recommend. But this is an awkward relationship between websites and Google, the biggest search engine.
The Vergecast, their “flagship” podcast, featured an entire episode on their thinking and challenges behind the redesign. Part of what they highlighted was media companies’ over-reliance on Google.
Listen from 45:18:
Websites are locked in a loop with Google: what customers query vs what the site content provide. With more search engine optimisation (SEO) efforts, these two come together, leading to creation of landing pages that allow traffic to flow in and cater to customer need. No one searches for brands; they search for specific queries like “romantic hotels in Brisbane” (there is none 🤣). Building specific pages that answers the queries will help customers find content.
In this world, homepages are useless; Google is the homepage of the Internet. Most traffic goes to specific landing pages built for keywords. If the site content is relevant to a Google property like Maps or Travel, they tend to feature this content in even more relevant format. All of this lead to sites being littered with content for bots and focused on final part of the “funnel” (just before someone buys something).
This isn’t all bad. Customers benefit. Google Maps is fkn great. Issue is that it is hard to safeguard content or help people associate with your brand. Yelp, among many others, has had a lot of issues. It also makes it difficult to veer off track from what search bots look for, which may lead to poor SEO and customers not finding you. It is what makes the Internet bland and downright boring. No one bothers to try anything new or do cool designs.
That’s why a lot of innovation goes into native apps instead. Once an app is downloaded, there is brand loyalty. Users are more open to new ways of organising content and presenting functionalty. There are no Snapchats and TikToks starting up on the web, despite it being the most accessible place for all people. Reliance on search engines and how they dictate a site be organised makes it really hard to generate a long term relationship with users.
So I’m glad to see The Verge take a swing at some new ideas.
If you are designing for many screen sizes, where should you begin?
Traditionally, most designers will start the design process at desktop size. This is where most content is going to fit in well. Then you figure out how to squeeze it down to a tablet, then a phone.
I believe this is the wrong path to take, when designing a mobile responsive page (or any website for that matter). Just because a desktop page can flow responsively on a small-width screen, it doesn’t make it suitable for mobile.
The best thing you can do is to start with a mobile design. Straight away, you are met with a conundrum: how do I fit all this content into the tiny screen? You can no longer just drop a matrix or a data table on to the screen — there really isn’t enough space.
You are forced to think about questions like:
Once you are done with the design process, you might have a crazy realisation: all the questions you asked yourself, and the resulting design decisions you made — they apply on desktop too.
That’s right. A good design is already responsive.
Now, desktop design becomes more about enhancement over a lazy content dump. You’ve already made the decision up front on what is important and what is not. You no longer feel dirty, having to add ‘small-hidden’ css classes everywhere.
Start with a mobile design on your next project. Your design will be better for it. When you pick tools like the responsive grid, pick one that starts with mobile too. Bootstrap 3, for example, switched gears to do exactly this.
Responsive is hard. Mobile is hard. But the thoughtfulness and effort we put into what we build will delight our customers. And our customers are the reason we exist.
It's difficult to make a good app. But it's even more difficult to make an app that grows and matures with the user: something that starts off basic and overtime, as more knowledge is shared between you and the app, more in-depth features are revealed to appeal to a more mature, advanced version of you.
Thought I had while discovering something completely new after a week of using the Jawbone UP fitness band.
I love watching TV shows. I spend about an hour a day on it at least. It’s not just TV, I love movies too. I love the stories in them. It is another world of imagination where there are no limits. I gravitate towards shows which have a long running story, like Game of Thrones. I appreciate the sense of continuity they have. These shows offer a way for me to escape my busy work day when I get home.
In the December break of 2011, Suneth and I were geeking it out trying to solve a very small problem we had with TV: I find it hard to keep up with the story. Often, the episodes aren’t in order. Even if they are, you tend to forget it a little here and there. Busy life gets in the way of tracking these things. So we decided to make a little iPhone app, called tvQ, to keep track of where you’ve watched something to.
So tvQ 1.0 came out. We drew inspiration from apps like Series Guide for Android, which I had been using on my Nexus One. We got some traction after Justin from Trakt.TV approached us for an integration. 50% of our users are from trakt, the last time we estimated the numbers, which is a huge deal.
tvQ v1 is slow. It suffers from slowness brought on by Core Data Framework. We probably didn’t know the right way to go about it, to be honest. It is designed with stock standard iOS controls, which look dated now. We wanted to give it some love and write it in the architecture some of the bigger enterprise grade apps are written in. We wanted it to be fast and focus on the user experience a lot more this time. Other apps for trakt were copying our front page so we thought... let’s make something better! (Haha)
Coming from Momento Jar app, we had sharpened our iOS + Design skills. We started sketching out some of the early designs as you can see here (and some early photoshop mocks):
These screens represent some of the thinking gone behind the new design. Initially we wanted to take the 1.0 experience across where we focused heavily on just a single list of shows with their next episode. A lot of the times, this design didn’t always perform well. We realised the main page was more about episodes and less about each series. So we spent time crafting the front page to be episode centric.
Now, episodes from each show are put into 3 buckets.
We always show you what’s on today. They don’t have to be next in line. It is to say... hey these shows are on today, which might spark your interest to catch up or just see where it’s at now.
Next is upcoming, which is what I look forward to in the coming week. I get some of these stuff online so I keep an eye on these. Sometimes I like to read in advance and see what’s in store for the following week (I skip ads on TV so I don’t see the previews). I can limit this section by saying don’t show me if the next episode is 6 weeks away or more. When Suits is returning in a few weeks time, it will start appearing on the list again... which is exciting!
Same goes to past episodes. The thresholds you set for yourself allows shows you neglect to fall off the ledge and stay out of your way. Make sure to set these up in your settings when you get the app.
We added a proper library for you to collect shows. Made it so that you can ignore missed episodes for shows like CSI where you don’t care about watching every single episode. We made comments part of the synopsis page to see immediate reactions from other community users (trakt only).
One big change this time around is artwork. We put fanart and posters in the center of everything. This doesn’t mean we compromised on design at all. They elegantly fit in and add color to our app. You will realise the app is white for most part, with neon styled icons. The rest of the colors are really added in by the great artwork, giving color to every page. Our experience with Momento Jar really helped out here. There’s a bit more technical knowledge involved in caching, cropping and animating images to get the most out of them. If you get the iPad version, you will see that the obsession with great artwork continues. We hope you love it!
We did a lot of work in the backend too. It is a brand new codebase. We threw out everything we had before and made everything super fast. We used the Command & Engines architecture (future blogpost...?) to organize everything properly.
In the end, we’re very pleased with the result. I think this is a world class app, for both iPhone and iPad. It is made with love by Suneth and I, who uses the app on a daily basis. We hope our effort will convert to a large number of downloads. Tell everyone about it! It’s available 10th of May. Our app experience puts us firmly in front of the TV tracking apps out there. We intend to be creative with our features in the future releases. If you have awesome ideas of your own, head on down to our 60Hz page and start a discussion about it. We love hearing everyone's take on the app and the community support.
Thank you for reading. Here’s the end result (we felt serious about the app that we made a video about it!!!). Tell your friends... iPhone app is FREE on the 10th!!! :)
A lot of the time, design is a step that is left up to the developer working on a feature. He/she is given full liberty to make a decision on the user interface. Often, there is not enough to make an informed decision on the UI, even though he may be capable of coming up with something aesthetically pleasing. Spending time on design can feel like a waste of time, effort and ultimately, money. This is, of course, not true.
Design is where marketing, sales and brand meet the product and its platform. It is the round table where all departments can sit down to have an equal say on how a product’s development effort can be be part of the bigger story.
A designer can interpret some of the abstract thinking behind features to produce a consistent design, which in turn can be interpreted by the technical team. A designer’s job is a lot more complex the just coming up with a fancy UI. He has to worry about the narrative, and ensure that the UI reflects on the spirit of the product.
Event a tiny feature like a word count in your word processor product can be a complex decision. You could
The right decision can depend on a number of factors like user stories, target audience, client requests, estimated frequency of usage, new target markets etc. If you look closely, Google Docs chooses to hide it in a menu while Word has it in the status. Reflects well on what each product tries to achieve.
At the end of the day, UI is how your user forms a long term relationship with your product. The message you carry is important for this relationship to grow. A solid design process can go a long way.
We've been working hard to get tvQ 2.0 out on the App Store (currently doing some beta testing). We really needed a new icon that captured the essence of our new UI and still kept a somewhat familiar vibe. Needed it to be cleaner, more modern and still very much recognisable on the iPhone dashboard.
Here's the old design and icon:
So we began by looking some existing icons that reflected somewhat of the vibe that we needed our icon to give out to the users. Here are some icon designs that really inspired us...
Of course, there was some dribbble.com surfing as usual and Suneth found this fantastic pinterest collection: http://pinterest.com/johnsonyung/app-icon/.
I think it is important to look at what else is out there. Creativity is really a fusion of a collection of ideas put together in a very personal way. And all these ideas don't have to be original. As a part time designer, it isn't so easy to come up with a completely original design either.
So here's the look and feel of our rewritten tvQ app:
And here's the new icon... I think we've managed to do an icon that reflected the new design but kept a little bit of the old feel. Love it!
